/* Alkan Capital, animated landing.
   Palette from the logo: ink #0B0B0C, bone #F2F1EE. Pure CSS, no JS. */

:root {
  --ink: #0B0B0C;
  --bone: #F2F1EE;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--ink);
  background-image: radial-gradient(ellipse 90% 60% at 50% 42%, #17171c 0%, var(--ink) 70%);
  color: var(--bone);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
}

.logo {
  width: min(640px, 84vw);
  height: auto;
  overflow: visible;
}

/* ---- intro: everything draws / fades in once ---- */

.axis, .curve, .vline {
  fill: none;
  stroke: var(--bone);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.axis  { stroke-width: 1.9; }
.curve { stroke-width: 1.9; }
.vline { stroke-width: 1.4; }

@keyframes draw { to { stroke-dashoffset: 0; } }

.axis {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1s cubic-bezier(.65, 0, .35, 1) .3s forwards;
}
.curve {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.8s cubic-bezier(.6, 0, .3, 1) .9s forwards;
}
.vline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw .7s cubic-bezier(.65, 0, .35, 1) 2s forwards;
}

/* Each letter's translate/scale lives on its wrapper <g>, so the paths only
   ever animate opacity; a CSS transform here would override that attribute. */

@keyframes fadein { to { opacity: 1; } }

@keyframes rise {
  from { transform: translateY(6px); }
  to   { transform: none; }
}

.alkan, .capital {
  animation: rise 1s cubic-bezier(.2, .6, .2, 1) both;
}
.alkan   { animation-delay: 2.1s; }
.capital { animation-delay: 3s; opacity: .85; }

.alkan path, .capital path {
  fill: var(--bone);
  opacity: 0;
  animation: fadein .8s cubic-bezier(.2, .6, .2, 1) forwards;
}
.alkan g:nth-child(1) path { animation-delay: 2.10s; }
.alkan g:nth-child(2) path { animation-delay: 2.22s; }
.alkan g:nth-child(3) path { animation-delay: 2.34s; }
.alkan g:nth-child(4) path { animation-delay: 2.46s; }
.alkan g:nth-child(5) path { animation-delay: 2.58s; }

.capital path { animation-delay: 3s; animation-duration: 1.1s; }

/* ---- ambient loop: a light pulse travels along the curve ---- */

.tracer {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: .9;
  /* dash gap (1.5) longer than the path (1): only one pulse at a time */
  stroke-dasharray: .14 1.5;
  stroke-dashoffset: .14;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .95)) drop-shadow(0 0 12px rgba(242, 241, 238, .6));
  animation: pulse 7s linear 4.2s infinite;
}

@keyframes pulse {
  0%   { stroke-dashoffset: .14; }
  55%  { stroke-dashoffset: -1.14; }
  100% { stroke-dashoffset: -1.14; }
}

/* ---- footer ---- */

footer {
  position: fixed;
  bottom: 1.6rem;
  width: 100%;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0;
  animation: fade 1.4s ease 3.6s forwards;
}

@keyframes fade { to { opacity: .32; } }

/* ---- accessibility ---- */

@media (prefers-reduced-motion: reduce) {
  .axis, .curve, .vline { animation: none; stroke-dashoffset: 0; }
  .alkan, .capital { animation: none; }
  .alkan path, .capital path { animation: none; opacity: 1; }
  footer { animation: none; opacity: .32; }
  .tracer { display: none; }
}