/* SurfBooking · protótipos 14/10 · base partilhada pelas três direcções.
   Só o que é comum: letra, reset, o herói com o vídeo (igual à produção), as revelações e o
   modo parado. Cada direcção tem o seu ficheiro por cima deste. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: #060E1A; color: #F1F5F9; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #22D3EE; outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #22D3EE; color: #04222B; padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- O HERÓI: vídeo, enquadramento e véu iguais aos da produção ---------- */
.hero {
  position: relative; overflow: hidden; min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(8,145,178,0.17) 0%, transparent 62%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(6,182,212,0.07) 0%, transparent 58%),
    radial-gradient(ellipse 74% 42% at 50% 46%, rgba(4,10,20,0.42) 0%, transparent 72%),
    linear-gradient(180deg, #060E1A 0%, rgba(6,14,26,0.55) 42%, #0B1929 100%);
}
.hero-video::-webkit-media-controls, .hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button { display: none !important; opacity: 0 !important; -webkit-appearance: none !important; pointer-events: none !important; }
.hero-inner { position: relative; z-index: 2; }

/* ---------- Revelações (só quando o JS correu e há movimento) ---------- */
.mo [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mo [data-split] .w > span { display: inline-block; transform: translate3d(0,105%,0); transition: transform .9s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 45ms + var(--d, 0ms)); }
.mo [data-split].in .w > span { transform: none; }
.mo [data-reveal] { opacity: 0; transform: translate3d(0,28px,0); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms); }
.mo [data-reveal].in { opacity: 1; transform: none; }
.mo [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.77,0,.18,1); transition-delay: var(--d, 0ms); }
.mo [data-reveal="clip"].in { clip-path: inset(0 0 0 0); }
.mo [data-reveal="fade"] { transform: none; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Modo parado: tudo visível, nada se mexe ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-fx] { transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .pin-tall { height: auto !important; }
  .pin-tall > .stage { position: relative !important; }
}