/* SuratX — main stylesheet. Fonts are self-hosted in ../fonts (SIL Open Font License, see OFL-*.txt). */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
}

:root { --accent: #FF5B1F; --ink: #0A0C0D; --paper: #F4F4F2; --cycle: 11.7s; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: rgba(244,244,242,.78); text-decoration: none; }
a:hover { color: #fff; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Layout */
.page { min-height: max(640px, 100svh); display: flex; flex-direction: column; container-type: inline-size; overflow: hidden; }
.wrap { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4.4cqw, 64px); }

/* Header */
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px 0; }
.logo { font-weight: 800; font-stretch: 125%; font-size: 22px; letter-spacing: -.02em; color: var(--paper); }
.x { color: var(--accent); }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; font-size: 15px; font-weight: 500; }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid rgba(244,244,242,.32); border-radius: 999px; color: var(--paper); }

/* Hero */
main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 48px; }
.eyebrow { margin: 0 0 16px; font-size: 12px; letter-spacing: .16em; color: rgba(244,244,242,.62); }
h1 { margin: 0; font-weight: 800; font-stretch: 125%; font-size: clamp(56px, 14.5cqw, 216px); line-height: 1.15; letter-spacing: -.035em; }
.reel-window { display: block; height: 1.15em; overflow: hidden; }
.reel { display: block; animation: sx-reel var(--cycle) infinite; will-change: transform; }
.reel > span, .coords-reel > div { display: block; }

.coords { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.coords-dot { width: 8px; height: 8px; flex: none; background: var(--accent); }
.coords-window { height: 20px; overflow: hidden; font-size: 12px; line-height: 20px; letter-spacing: .08em; white-space: nowrap; color: rgba(244,244,242,.62); }
.coords-reel { animation: sx-reel var(--cycle) infinite; will-change: transform; }

.lede-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-top: 40px; }
.lede { margin: 0; max-width: 34rem; font-size: 18px; line-height: 1.55; color: rgba(244,244,242,.78); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 16px; }
.btn-primary { background: var(--accent); color: var(--ink); font-weight: 700; }
.btn-primary:hover { color: var(--ink); }
.btn-ghost { border: 1px solid rgba(244,244,242,.32); color: var(--paper); font-weight: 600; }

/* Route bar: boat + wake */
.route { display: flex; flex-direction: column; gap: 10px; margin-top: 48px; padding-bottom: 36px; }
.track { position: relative; height: 40px; overflow: hidden; }
.track-base, .track-fill { position: absolute; left: 0; right: 0; top: 19px; height: 2px; }
.track-base { background: rgba(244,244,242,.14); }
.track-fill { background: var(--accent); transform-origin: left; transform: scaleX(.1); animation: sx-fill var(--cycle) infinite; }
.stop { position: absolute; top: 17.5px; width: 5px; height: 5px; background: rgba(244,244,242,.4); }
.stop.s1 { left: calc(10% - 2.5px); }
.stop.s2 { left: calc(30% - 2.5px); }
.stop.s3 { left: calc(50% - 2.5px); }
.stop.s4 { left: calc(70% - 2.5px); }
.stop.s5 { left: calc(90% - 2.5px); }
.rider { position: absolute; left: 0; right: 0; top: 0; height: 40px; transform: translateX(10%); animation: sx-ride var(--cycle) infinite; will-change: transform; }
.wake { position: absolute; left: -182px; top: 0; opacity: 0; animation: sx-wake var(--cycle) linear infinite; }
.boat { position: absolute; left: -22px; top: 11px; }
.stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stops li { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; font-size: 11px; letter-spacing: .12em; color: rgba(244,244,242,.62); }
.stops li span:last-child { color: var(--paper); }

/* 404 page */
.nf { padding-bottom: 80px; }
.nf h1 { font-size: clamp(44px, 8cqw, 120px); }
.nf .lede { margin-top: 24px; }
.nf .ctas { margin-top: 32px; }

/* Animation timeline: SuratX holds ~2.8s, each place ~1.6s, 0.5s transitions (11.7s loop) */
@keyframes sx-reel {
  0%, 23.93%     { transform: translateY(0);          animation-timing-function: cubic-bezier(.83,0,.17,1); }
  28.21%, 41.88% { transform: translateY(-16.6667%);  animation-timing-function: cubic-bezier(.83,0,.17,1); }
  46.15%, 59.83% { transform: translateY(-33.3333%);  animation-timing-function: cubic-bezier(.83,0,.17,1); }
  64.10%, 77.78% { transform: translateY(-50%);       animation-timing-function: cubic-bezier(.83,0,.17,1); }
  82.05%, 95.73% { transform: translateY(-66.6667%);  animation-timing-function: cubic-bezier(.83,0,.17,1); }
  100%           { transform: translateY(-83.3333%); }
}
@keyframes sx-ride {
  0%, 23.93%     { transform: translateX(10%); opacity: 1; animation-timing-function: cubic-bezier(.6,0,.2,1); }
  28.21%, 41.88% { transform: translateX(30%); animation-timing-function: cubic-bezier(.6,0,.2,1); }
  46.15%, 59.83% { transform: translateX(50%); animation-timing-function: cubic-bezier(.6,0,.2,1); }
  64.10%, 77.78% { transform: translateX(70%); animation-timing-function: cubic-bezier(.6,0,.2,1); }
  82.05%, 95.73% { transform: translateX(90%); opacity: 1; animation-timing-function: cubic-bezier(.55,0,1,.45); }
  97.86%         { transform: translateX(100%); opacity: 0; }
  97.87%         { transform: translateX(0); opacity: 0; animation-timing-function: cubic-bezier(0,.55,.45,1); }
  100%           { transform: translateX(10%); opacity: 1; }
}
@keyframes sx-fill {
  0%, 23.93%     { transform: scaleX(.1); opacity: 1; animation-timing-function: cubic-bezier(.6,0,.2,1); }
  28.21%, 41.88% { transform: scaleX(.3); animation-timing-function: cubic-bezier(.6,0,.2,1); }
  46.15%, 59.83% { transform: scaleX(.5); animation-timing-function: cubic-bezier(.6,0,.2,1); }
  64.10%, 77.78% { transform: scaleX(.7); animation-timing-function: cubic-bezier(.6,0,.2,1); }
  82.05%, 95.73% { transform: scaleX(.9); opacity: 1; animation-timing-function: cubic-bezier(.55,0,1,.45); }
  97.86%         { transform: scaleX(1); opacity: 0; }
  97.87%         { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(0,.55,.45,1); }
  100%           { transform: scaleX(.1); opacity: 1; }
}
@keyframes sx-wake {
  0% { opacity: .6; } 2.5% { opacity: 0; } 23.93% { opacity: 0; }
  25.5% { opacity: 1; } 28.21% { opacity: .7; } 31% { opacity: 0; } 41.88% { opacity: 0; }
  43.5% { opacity: 1; } 46.15% { opacity: .7; } 49% { opacity: 0; } 59.83% { opacity: 0; }
  61.5% { opacity: 1; } 64.10% { opacity: .7; } 67% { opacity: 0; } 77.78% { opacity: 0; }
  79.5% { opacity: 1; } 82.05% { opacity: .7; } 85% { opacity: 0; } 95.73% { opacity: 0; }
  97% { opacity: 1; } 99% { opacity: .9; } 100% { opacity: .6; }
}

@media (max-width: 560px) { nav a:not(.pill) { display: none; } }
@media (max-width: 380px) { .coords-window { font-size: 11px; letter-spacing: .04em; } }
@media (prefers-reduced-motion: reduce) { .reel, .coords-reel, .track-fill, .rider, .wake { animation: none; } }