/* Podysseus — coming-soon teaser.
   Plain CSS. No build step, no framework, no external requests.

   All motion here is decorative: it carries no meaning on its own, and every
   animation settles to a complete static state under
   `prefers-reduced-motion: reduce` (see the last block). */

:root {
  --blue: #1088de;
  --blue-light: #4fb0f0;
  --blue-deep: #0a5fa6;
  --ink: #f7fafc;
  --muted: #8fa5b5;
  --bg: #06121a;
  /* One seamless 120x28 tile, scrolled by exactly one tile width: a smooth
     ocean swell in brand blue. The scroll distance must always equal the tile
     width (120px) or the loop seams. */
  --wave-ocean: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 14C10 2 20 2 30 14C40 26 50 26 60 14C70 2 80 2 90 14C100 26 110 26 120 14' fill='none' stroke='%234fb0f0' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  /* `margin: auto` on .hero centres it without clipping the top when the
     content is taller than a short viewport. */
  min-height: 100svh;
  display: grid;
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(16, 136, 222, .20), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  padding: clamp(16px, 4vw, 40px);
}

/* ---------- hero ---------- */
.hero {
  margin: auto;
  width: 100%;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(14px, 3vw, 20px);
  padding: clamp(24px, 6vw, 56px) clamp(16px, 4vw, 32px);
}

/* The ambient rock lives on the wrapper, so the artwork keeps its own
   transform free for the hover micro-interaction. */
.mark-wrap {
  position: relative;
  display: block;
  width: clamp(110px, 18vw, 150px);
  animation: ship-rock 9s ease-in-out infinite;
}
/* The wake sits behind the hull. The ship's ink runs to about 93% of the
   artwork's height, so a band across the bottom 17% crosses the waterline
   and passes under it. */
.mark-wake {
  position: absolute;
  left: -22%;
  right: -22%;
  bottom: 0;
  height: 17%;
  background-image: var(--wave-ocean);
  background-repeat: repeat-x;
  background-size: 120px 100%;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.mark {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
/* the ship riding the swell, not a scripted lift: both ends rest, so the
   pose is identical to its resting state */
@keyframes ship-ride {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-3px) rotate(-1.5deg); }
  65%      { transform: translateY(1.5px) rotate(1.2deg); }
}
@keyframes ship-rock {
  0%, 100% { transform: rotate(-.6deg) translateY(0); }
  50%      { transform: rotate(.6deg) translateY(-3px); }
}

.stage--hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.title-h1 { margin: 0; display: grid; place-items: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The title is the logo's own traced wordmark, used as vector outlines.
   Each letter's geometry is pre-centred on its own centre, so transforms
   rotate and scale about the letter itself with no transform-box needed.

   The intro runs ONCE and is filled `backwards`, never `forwards`: the base
   rule below is the resting state, so after the intro the letters are held
   by ordinary CSS -- which leaves transform free for the hover lift. */
.title { display: block; width: min(400px, 88%); height: auto; fill: #ffffff; }
.ltr {
  transform: translate(var(--tx), var(--ty));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i) * 30ms);
  animation: title-letter 6.4s cubic-bezier(.2, .9, .2, 1) 1 backwards;
  animation-delay: calc(var(--i) * 65ms);
}
.ltr:nth-child(1) { --lx: -30px; --ly: -17px; --lr: -8deg; }
.ltr:nth-child(2) { --lx:  22px; --ly:  15px; --lr:  6deg; }
.ltr:nth-child(3) { --lx: -18px; --ly:  19px; --lr:  5deg; }
.ltr:nth-child(4) { --lx:  25px; --ly: -13px; --lr: -6deg; }
.ltr:nth-child(5) { --lx: -23px; --ly: -19px; --lr:  5deg; }
.ltr:nth-child(6) { --lx:  17px; --ly:  17px; --lr: -6deg; }
.ltr:nth-child(7) { --lx: -20px; --ly:  13px; --lr:  7deg; }
.ltr:nth-child(8) { --lx:  27px; --ly: -15px; --lr: -4deg; }
.ltr:nth-child(9) { --lx: -14px; --ly: -20px; --lr:  6deg; }

@keyframes title-letter {
  0%, 3%   { opacity: 0; transform: translate(calc(var(--tx) + var(--lx)), calc(var(--ty) + var(--ly))) rotate(var(--lr)) scale(.96); }
  10%      { opacity: 1; }
  25%      { transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(1.02); }
  32%, 100%{ opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(1); }
}

.baseline {
  width: min(400px, 88%);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-light), var(--blue-deep));
  transform-origin: left center;
  animation: hero-draw 6.4s ease 1 backwards;
}
@keyframes hero-draw {
  0%, 16%  { transform: scaleX(0); }
  32%, 100%{ transform: scaleX(1); }
}

.track { position: relative; width: fit-content; min-width: min(420px, 100%); margin: 0 auto; display: grid; place-items: center; height: clamp(120px, 18vw, 150px); }
.segs { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: clamp(5px, 1.2vw, 11px); padding-bottom: 8px; }

/* Two water layers behind the bars: smooth ocean swells in brand blue,
   scrolling in opposite directions so the surface never repeats in step. */
.sea {
  position: absolute;
  left: -4%;
  right: -4%;
  background-repeat: repeat-x;
  background-size: 120px 100%;
  pointer-events: none;
  z-index: 1;
}
.sea--back  { bottom: 26px; height: 44px; opacity: .28; background-image: var(--wave-ocean); animation: wave-scroll 12s linear infinite; }
.sea--mid   { bottom: 16px; height: 36px; opacity: .20; background-image: var(--wave-ocean); animation: wave-scroll-back 9s linear infinite; }

@keyframes wave-scroll      { from { background-position: 0 0; }      to { background-position: -120px 0; } }
@keyframes wave-scroll-back { from { background-position: 0 0; }      to { background-position: 120px 0; } }

.col {
  display: block;
  flex: 0 0 auto;
  animation: swell 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.28s);
}
@keyframes swell {
  0%, 100% { transform: translateY(2px); }
  50%      { transform: translateY(-2px); }
}

.seg {
  display: block;
  width: clamp(13px, 3.6vw, 32px);
  height: var(--sh, 30px);
  border-radius: 6px;
  background-image: linear-gradient(180deg, var(--blue-light), var(--blue));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
  animation: hero-bar 6.4s cubic-bezier(.2, .85, .25, 1) 1 backwards;
  animation-delay: calc(var(--i) * 55ms);
}
.col:nth-child(6) .seg { animation-name: hero-bar-late; animation-delay: 0ms; }

/* raw takes at uneven heights; the settled timeline follows a wave envelope */
.col:nth-child(1) { --y:  -9px; --r: -4deg; --h: 46px; --o: .55; --sh: 20px; }
.col:nth-child(2) { --y:   6px; --r:  3deg; --h: 30px; --o: .48; --sh: 34px; }
.col:nth-child(3) { --y: -11px; --r: -2deg; --h: 52px; --o: .58; --sh: 48px; }
.col:nth-child(4) { --y:   7px; --r:  4deg; --h: 26px; --o: .50; --sh: 38px; }
.col:nth-child(5) { --y:  -5px; --r: -3deg; --h: 40px; --o: .52; --sh: 24px; }
.col:nth-child(6) { --y:   6px; --r:  6deg; --h: 50px; --o: .55; --sh: 30px; }
.col:nth-child(7) { --y: -10px; --r:  3deg; --h: 44px; --o: .54; --sh: 46px; }
.col:nth-child(8) { --y:   5px; --r: -4deg; --h: 32px; --o: .48; --sh: 40px; }
.col:nth-child(9) { --y:  -7px; --r:  3deg; --h: 52px; --o: .52; --sh: 26px; }

@keyframes hero-bar {
  0%, 30%  { opacity: 0; transform: translateY(8px) scaleY(0); height: var(--h); filter: grayscale(1) brightness(.85); }
  36%      { opacity: var(--o); transform: translateY(var(--y)) rotate(var(--r)) scaleY(1); height: var(--h); filter: grayscale(1) brightness(.85); }
  54%, 100%{ opacity: 1; transform: translateY(0) rotate(0deg) scaleY(1); height: var(--sh); filter: none; }
}
@keyframes hero-bar-late {
  0%, 36%  { opacity: 0; transform: translateY(8px) scaleY(0); height: var(--h); filter: grayscale(1) brightness(.85); }
  46%      { opacity: var(--o); transform: translateY(var(--y)) rotate(var(--r)) scaleY(1); height: var(--h); filter: grayscale(1) brightness(.85); }
  60%      { opacity: 1; transform: translateY(-4px) rotate(4deg) scaleY(1); height: 34px; filter: grayscale(.4) brightness(.95); }
  68%, 100%{ opacity: 1; transform: translateY(0) rotate(0deg) scaleY(1); height: var(--sh); filter: none; }
}

.playhead {
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, #ffffff, transparent);
  opacity: 0;
  animation: hero-sweep 6.4s ease-in-out 1 backwards;
}
@keyframes hero-sweep {
  0%, 46%  { left: 0;    opacity: 0; }
  50%      { opacity: .9; }
  58%      { left: 58%;  opacity: .9; }
  64%      { left: 58%;  opacity: .9; }
  84%      { left: 100%; opacity: .9; }
  92%, 100%{ left: 100%; opacity: 0; }
}

.approve, .ring {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.approve {
  width: 28px;
  height: 28px;
  background: #ffffff;
  color: var(--blue);
  display: grid;
  place-items: center;
  opacity: 0;
  animation: hero-check 6.4s cubic-bezier(.2, .9, .2, 1) 1 backwards;
}
.approve svg { width: 15px; height: 15px; }
@keyframes hero-check {
  0%, 70%  { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-10deg); }
  78%      { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(0deg); }
  84%      { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  92%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
.ring {
  width: 28px;
  height: 28px;
  border: 2px solid #ffffff;
  opacity: 0;
  animation: hero-ring 6.4s ease-out 1 backwards;
}
@keyframes hero-ring {
  0%, 72%  { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  78%      { opacity: .5; }
  92%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

.lede { margin: 0; max-width: 44ch; color: var(--muted); font-size: clamp(14px, 1.6vw, 16px); }
.soon {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  border: 1px solid rgba(79, 176, 240, .45);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ---------- 404 ----------
   Cloudflare Pages serves the root index.html for unmatched routes unless the
   deployment carries a 404.html, which makes every wrong URL a 200 and the
   publish boundary unverifiable. This page gives unmatched routes a real 404
   status. It deliberately adds no new public wording: the mark and the name
   are the only content, and the chip links home. */
.notfound { margin: 0; font-size: clamp(28px, 6vw, 44px); font-weight: 600; letter-spacing: 0.02em; }
.soon a { color: inherit; text-decoration: none; }
.soon a:hover, .soon a:focus-visible { text-decoration: underline; }

/* ---------- hover micro-interactions ----------
   The artwork answers the pointer. None of it is a control, so all of it is
   decorative, and it is guarded by (hover: hover) so a touch device never
   gets stuck in a hover state. */
@media (hover: hover) and (pointer: fine) {
  /* hovering the ship sends a wave under the hull; the ship answers a beat
     later, so the crest reads as what moved it */
  .mark-wrap:hover .mark-wake { opacity: .9; animation: wave-scroll 1.7s linear infinite; }
  .mark-wrap:hover .mark { animation: ship-ride 1.7s ease-in-out .12s infinite; }
  .title:hover .ltr { transform: translate(var(--tx), calc(var(--ty) - 3px)); }

  /* hovering a bar lifts it, and a smaller lift passes to its neighbours */
  .col:hover .seg { transform: translateY(-6px) scaleY(1.14); filter: brightness(1.22); }
  .col:hover + .col .seg,
  .col:has(+ .col:hover) .seg { transform: translateY(-2px) scaleY(1.05); filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .mark-wrap, .mark-wake, .mark, .ltr, .baseline, .col, .seg, .sea, .playhead, .approve, .ring { animation: none !important; }
  .mark-wrap { transform: none; }
  .mark { transform: none; filter: none; }
  .ltr { opacity: 1; transform: translate(var(--tx), var(--ty)); }
  .baseline { transform: scaleX(1); }
  .col { transform: none; }
  .seg { opacity: 1; transform: none; height: var(--sh, 30px); filter: none; }
  .playhead, .approve, .ring { opacity: 0; }
}