/* ============================================================
   VForce — side-scrolling video-transition site
   Brand: navy #1D2758 · yellow #FDCC07
   ============================================================ */

:root{
  --navy:#1d2758;
  --navy-deep:#0b0f1e;
  --yellow:#fdcc07;
  --ink:#f6f7fb;
  --ink-dim:rgba(246,247,251,.62);
  --ink-faint:rgba(246,247,251,.34);
  --line:rgba(246,247,251,.14);

  /* duration of the current transition — JS sets this to the clip's real length */
  --dur:1.2s;
  --ease:cubic-bezier(.72,0,.16,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);

  --gutter:clamp(24px, 6vw, 108px);
  --font:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,Inter,system-ui,
         "Helvetica Neue",Arial,sans-serif;
}

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

html,body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

body{
  background:var(--navy-deep);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  touch-action:none;
  cursor:default;
}

img{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }

::selection{ background:var(--yellow); color:var(--navy) }

/* ── shared logo-mark crop ───────────────────────────────────
   The source file is a 1080² lockup. The roundel measures
   x 302→772, y 178→654; these ratios crop a 496² box around it
   so the mark can be used on its own, without the wordmark.    */
.mark{
  --s:38px;
  position:relative;
  width:var(--s); height:var(--s);
  overflow:hidden; flex:none;
}
.mark img{
  position:absolute;
  width:calc(var(--s) * 2.1774);   /* 1080 / 496 */
  max-width:none;
  left:calc(var(--s) * -.5827);    /* -289 / 496 */
  top:calc(var(--s) * -.3387);     /* -168 / 496 */
}

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px;
  background:radial-gradient(120% 90% at 50% 40%, #172041 0%, var(--navy-deep) 62%);
  transition:opacity .8s var(--ease-soft), visibility .8s;
}
body:not(.is-loading) .loader{ opacity:0; visibility:hidden; pointer-events:none }

.loader__logo{
  width:min(240px,46vw);
  animation:loaderPulse 2.6s var(--ease-soft) infinite;
}
@keyframes loaderPulse{
  0%,100%{ opacity:.92; transform:scale(1) }
  50%    { opacity:1;   transform:scale(1.035) }
}

.loader__bar{
  width:min(260px,52vw); height:2px;
  background:rgba(246,247,251,.16);
  overflow:hidden; border-radius:2px;
}
.loader__fill{
  display:block; height:100%; width:0%;
  background:var(--yellow);
  box-shadow:0 0 18px rgba(253,204,7,.6);
  transition:width .45s var(--ease-soft);
}
.loader__pct{
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.loader__pct i{ font-style:normal; margin-left:2px }

/* ============================================================
   STAGE — the video layer
   ============================================================ */
.stage{ position:fixed; inset:0; z-index:0; background:#05070f; overflow:hidden }

.stage__drift{
  position:absolute; inset:0;
  animation:drift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes drift{
  from{ transform:scale(1.02) translate3d(-.6%,0,0) }
  to  { transform:scale(1.08) translate3d(.6%,-.8%,0) }
}

.clip{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  z-index:1;
  pointer-events:none;
}
.clip.is-live{ opacity:1 }

/* Jumping several pages skips the clips entirely, so the destination's
   frozen frame crossfades in and the rail repositions instantly behind
   the cleared copy rather than sliding past every page in between. */
body.is-jumping .clip{ transition:opacity .5s var(--ease-soft) }
body.is-jumping .rail{ transition:none }

/* legibility scrim — heavier on the side the copy sits on */
.stage__tint{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(6,9,20,.88) 0%, rgba(6,9,20,.62) 34%, rgba(6,9,20,.18) 62%, rgba(6,9,20,.42) 100%),
    linear-gradient(180deg, rgba(6,9,20,.55) 0%, transparent 26%, transparent 62%, rgba(6,9,20,.72) 100%);
  transition:opacity .6s var(--ease-soft);
}
body.is-centered .stage__tint{
  background:
    radial-gradient(110% 80% at 50% 50%, rgba(6,9,20,.5) 0%, rgba(6,9,20,.82) 100%),
    linear-gradient(180deg, rgba(6,9,20,.5) 0%, transparent 30%, transparent 60%, rgba(6,9,20,.75) 100%);
}
.stage__vignette{
  position:absolute; inset:0;
  box-shadow:inset 0 0 min(220px,18vw) rgba(0,0,0,.75);
}
.stage__grain{
  position:absolute; inset:-60%;
  opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%  { transform:translate3d(0,0,0) }
  25% { transform:translate3d(-3%,2%,0) }
  50% { transform:translate3d(2%,-3%,0) }
  75% { transform:translate3d(-2%,-2%,0) }
  100%{ transform:translate3d(3%,1%,0) }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; z-index:40;
  top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(16px,2.6vw,30px) var(--gutter);
}
.nav::after{
  content:""; position:absolute; inset:0 0 auto; height:130%;
  background:linear-gradient(180deg, rgba(6,9,20,.6), transparent);
  z-index:-1; pointer-events:none;
}

.nav__brand{ display:flex; align-items:center; gap:11px }
.nav__word{
  font-size:15px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow);
  transition:opacity .3s;
}
.nav__brand:hover .nav__word{ opacity:.7 }

.nav__links{ display:flex; align-items:center; gap:4px }
.nav__links button{
  position:relative;
  padding:8px 14px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--ink-faint);
  transition:color .35s var(--ease-soft);
}
.nav__links button::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:1px;
  background:var(--yellow); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-soft);
}
.nav__links button:hover{ color:var(--ink) }
.nav__links button.is-on{ color:var(--yellow) }
.nav__links button.is-on::after{ transform:scaleX(1) }

/* ============================================================
   RAIL — the side-scrolling track
   ============================================================ */
.rail{
  position:fixed; inset:0; z-index:20;
  display:flex;
  width:calc(var(--n) * 100%);
  height:100%;
  transform:translate3d(calc(var(--i) * -100% / var(--n)), 0, 0);
  transition:transform var(--dur) var(--ease);
  will-change:transform;
  pointer-events:none;
}

.panel{
  position:relative;
  flex:0 0 calc(100% / var(--n));
  width:calc(100% / var(--n));
  height:100%;
  display:flex; align-items:center;
  padding:clamp(96px,12vh,150px) var(--gutter) clamp(120px,15vh,170px);
  opacity:0;
}
.panel.is-active{ opacity:1; pointer-events:auto }

.panel__inner{ width:100%; max-width:640px }
.panel__inner--center{
  max-width:1040px; margin-inline:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.panel__inner--center .lede,
.panel__inner--center .hero__sub{ max-width:56ch }

/* ── panel transition animations ─────────────────────────────
   The outgoing copy slides off in the scroll direction over the
   first third of the clip. The incoming copy stays hidden until
   the clip freezes — video first, then the page.                */
@keyframes panelOutFwd{
  0%       { opacity:1; transform:none; filter:blur(0) }
  42%,100% { opacity:0; transform:translate3d(-88px,0,0) scale(.965); filter:blur(7px) }
}
@keyframes panelOutRev{
  0%       { opacity:1; transform:none; filter:blur(0) }
  42%,100% { opacity:0; transform:translate3d(88px,0,0) scale(.965); filter:blur(7px) }
}
.panel.out-fwd{ animation:panelOutFwd var(--dur) var(--ease) both }
.panel.out-rev{ animation:panelOutRev var(--dur) var(--ease) both }

/* the panel that just landed staggers its children in, entering
   from whichever side the visitor came from */
.panel.is-active > .panel__inner > *{ animation:landFwd .85s var(--ease-soft) both }
.panel.is-active.from-rev > .panel__inner > *{ animation-name:landRev }
.panel.is-active > .panel__inner > *:nth-child(1){ animation-delay:.03s }
.panel.is-active > .panel__inner > *:nth-child(2){ animation-delay:.1s }
.panel.is-active > .panel__inner > *:nth-child(3){ animation-delay:.17s }
.panel.is-active > .panel__inner > *:nth-child(4){ animation-delay:.24s }
.panel.is-active > .panel__inner > *:nth-child(5){ animation-delay:.31s }
@keyframes landFwd{
  from{ opacity:0; transform:translate3d(52px,18px,0) }
  to  { opacity:1; transform:none }
}
@keyframes landRev{
  from{ opacity:0; transform:translate3d(-52px,18px,0) }
  to  { opacity:1; transform:none }
}

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; font-weight:600;
  color:var(--ink-dim);
}
.panel__inner--center .eyebrow{ justify-content:center }
.eyebrow__num{
  color:var(--navy); background:var(--yellow);
  padding:4px 8px; border-radius:4px;
  font-size:10px; letter-spacing:.12em; font-weight:800;
}

.display{
  /* capped so the longest headline still fits the 640px column on two
     lines — above ~70px "Concept to final cut," wraps to a third line */
  font-size:clamp(36px,5.2vw,70px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:700;
  margin-bottom:22px;
  text-wrap:balance;
}
.display--xl{ font-size:clamp(42px,7.2vw,100px) }

.lede{
  font-size:clamp(15px,1.32vw,19px);
  line-height:1.62;
  color:var(--ink-dim);
  max-width:52ch;
  margin-bottom:30px;
}
.lede--center{ margin-inline:auto }

/* ── hero ── */
.hero__mark{
  --s:min(124px,21vw);
  margin-bottom:clamp(18px,3vh,34px);
  filter:drop-shadow(0 16px 44px rgba(0,0,0,.6));
}
.hero__title{
  font-size:clamp(46px,9.2vw,132px);
  line-height:.86;
  letter-spacing:-.05em;
  font-weight:700;
  display:flex; gap:.2em; flex-wrap:wrap; justify-content:center;
  margin-bottom:clamp(22px,3.4vh,34px);
}
.hero__title .line{ overflow:hidden; display:block; padding-bottom:.06em }
.hero__title .line > span{ display:block }
.hero__title .line:nth-child(2) > span{ color:var(--yellow) }

.hero__sub{
  font-size:clamp(14px,1.28vw,18px);
  line-height:1.66; color:var(--ink-dim);
  margin-bottom:46px;
}

.hero__cue{
  display:flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
}
.hero__cue-arrows{ display:flex; gap:3px }
.hero__cue-arrows i{
  display:block; width:7px; height:7px;
  border-top:1.5px solid var(--yellow); border-right:1.5px solid var(--yellow);
  transform:rotate(45deg);
  animation:cue 1.6s var(--ease-soft) infinite;
}
.hero__cue-arrows i:nth-child(2){ animation-delay:.16s }
@keyframes cue{
  0%,100%{ opacity:.25; transform:rotate(45deg) translate3d(-3px,-3px,0) }
  50%    { opacity:1;   transform:rotate(45deg) translate3d(3px,3px,0) }
}

/* ── stats ── */
.stats{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px); list-style:none }
.stats li{ display:flex; flex-direction:column; gap:6px }
.stats b{
  font-size:clamp(30px,3.4vw,46px); font-weight:700; letter-spacing:-.03em;
  color:var(--yellow); line-height:1;
}
.stats span{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint) }

/* ── steps ── */
.steps{ list-style:none; counter-reset:s; display:grid; gap:1px; background:var(--line) }
.steps li{
  counter-increment:s;
  display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:3px;
  padding:12px 16px;
  background:rgba(8,11,22,.62);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.steps li:hover{ background:rgba(29,39,88,.6); transform:translateX(6px) }
.steps li::before{
  content:"0" counter(s);
  grid-row:1 / span 2;
  align-self:center;
  font-size:11px; font-weight:700; letter-spacing:.1em;
  color:var(--yellow);
}
.steps b{ font-size:15px; font-weight:600 }
.steps span{ font-size:13.5px; color:var(--ink-faint); line-height:1.5 }

/* ── floating platform icons ─────────────────────────────────
   The three platforms drift slowly around the open space under
   the copy. Two nested animations at different periods (X on the
   outer element, Y on the inner) keep the paths from ever quite
   repeating. Hover or focus pauses both mid-flight and rings the
   icon — animation-play-state freezes it exactly where it is.   */
/* In flow, not absolutely positioned: the drift box has to reserve its own
   height or the icons collide with the step list on shorter viewports. */
.floaters{
  position:relative;
  width:100%;
  height:clamp(84px, 12vh, 118px);
  margin-top:clamp(30px, 4.2vh, 46px);
  pointer-events:none;
}
.floaters__label{
  position:absolute; left:0; top:-22px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}

.floater{
  position:absolute;
  left:var(--x); top:var(--y);
  pointer-events:auto;
  cursor:pointer;
  outline:none;
  animation:floatX var(--tx) ease-in-out var(--lag,0s) infinite alternate;
}
.floater__inner{
  display:block; position:relative;
  animation:floatY var(--ty) ease-in-out var(--lag,0s) infinite alternate;
}
@keyframes floatX{
  from{ transform:translate3d(calc(var(--dx) * -1),0,0) }
  to  { transform:translate3d(var(--dx),0,0) }
}
@keyframes floatY{
  from{ transform:translate3d(0,calc(var(--dy) * -1),0) rotate(-4deg) }
  to  { transform:translate3d(0,var(--dy),0) rotate(4deg) }
}

/* the freeze */
.floater:hover,
.floater:hover .floater__inner,
.floater:focus-visible,
.floater:focus-visible .floater__inner{ animation-play-state:paused }

.floater img{
  width:46px; height:46px; border-radius:12px;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.55));
  transition:transform .45s var(--ease-soft), filter .45s var(--ease-soft);
}
.floater:hover img,
.floater:focus-visible img{
  transform:scale(1.06);
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.7));
}

/* the outline that appears on hover */
.floater__ring{
  position:absolute; inset:-11px;
  border:1.5px solid var(--yellow); border-radius:20px;
  opacity:0; transform:scale(.82);
  transition:opacity .38s var(--ease-soft), transform .38s var(--ease-soft);
}
.floater__ring::after{
  content:""; position:absolute; inset:-7px;
  border:1px solid rgba(253,204,7,.28); border-radius:26px;
}
.floater:hover .floater__ring,
.floater:focus-visible .floater__ring{ opacity:1; transform:scale(1) }

.floater__name{
  position:absolute; left:50%; top:calc(100% + 22px);
  transform:translate3d(-50%,5px,0);
  white-space:nowrap;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--yellow);
  opacity:0;
  transition:opacity .38s var(--ease-soft), transform .38s var(--ease-soft);
}
.floater:hover .floater__name,
.floater:focus-visible .floater__name{ opacity:1; transform:translate3d(-50%,0,0) }

.panel.is-active .floaters{ animation:landFwd .9s var(--ease-soft) .3s both }

/* ── cards ── */
.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.cards article{
  padding:18px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(8,11,22,.62);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .45s var(--ease-soft), transform .45s var(--ease-soft), background .45s;
}
.cards article:hover{
  border-color:rgba(253,204,7,.5);
  background:rgba(29,39,88,.5);
  transform:translateY(-5px);
}
.cards h3{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--yellow); margin-bottom:9px;
}
.cards p{ font-size:13.5px; line-height:1.58; color:var(--ink-faint) }

/* ── cta ── */
.cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:26px }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px; border-radius:99px;
  border:1px solid var(--line);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  transition:transform .4s var(--ease-soft), background .4s, color .4s, border-color .4s;
}
.btn:hover{ transform:translateY(-2px); border-color:rgba(246,247,251,.4) }
.btn--primary{
  background:var(--yellow); color:var(--navy); border-color:var(--yellow);
  box-shadow:0 12px 40px rgba(253,204,7,.24);
}
.btn--primary:hover{ box-shadow:0 18px 52px rgba(253,204,7,.34) }
.contact-line{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint) }

/* ============================================================
   HUD
   ============================================================ */
.hud{
  position:fixed; z-index:40; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:clamp(16px,3vw,34px);
  padding:0 var(--gutter) clamp(20px,3vh,34px);
}
.hud::before{
  content:""; position:absolute; inset:auto 0 0; height:190px;
  background:linear-gradient(0deg, rgba(6,9,20,.72), transparent);
  z-index:-1; pointer-events:none;
}

.hud__dots{ display:flex; align-items:center; gap:9px }
.hud__dots button{
  position:relative; width:26px; height:26px;
  display:grid; place-items:center;
}
.hud__dots button::before{
  content:""; width:7px; height:7px; border-radius:99px;
  background:rgba(246,247,251,.26);
  transition:background .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.hud__dots button:hover::before{ background:rgba(246,247,251,.6); transform:scale(1.2) }
.hud__dots button.is-on::before{
  background:var(--yellow); transform:scale(1.35);
  box-shadow:0 0 14px rgba(253,204,7,.7);
}

.hud__meta{ display:flex; align-items:baseline; gap:16px; white-space:nowrap }
.hud__count{
  font-size:11px; letter-spacing:.2em; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.hud__count b{ color:var(--yellow); font-weight:700 }
.hud__count i{ font-style:normal; margin:0 3px; opacity:.5 }
.hud__hint{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);
  transition:opacity .5s;
}
body.is-busy .hud__hint{ opacity:0 }

.hud__track{
  flex:1; height:1px; min-width:40px;
  background:var(--line); border-radius:2px; overflow:hidden;
}
.hud__fill{
  display:block; height:100%; width:0%;
  background:var(--yellow);
  transition:width var(--dur) var(--ease);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav__links{ display:none }
  .cards{ grid-template-columns:1fr }
  .cards article{ padding:14px }
  .cards p{ font-size:12.5px }
  /* too little room to drift on a phone — lay them out as a static row */
  .floaters{
    height:auto; margin-top:20px;
    display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  }
  .floaters__label{ position:static; flex-basis:100%; margin-bottom:3px }
  .floater{ position:relative; left:auto; top:auto; animation:none }
  .floater__inner{ display:flex; align-items:center; gap:8px; animation:none }
  .floater img{ width:30px; height:30px }
  .floater__ring{ inset:-7px -12px; border-radius:99px }
  .floater__ring::after{ display:none }
  .floater__name{
    position:static; transform:none; opacity:1;
    font-size:11px; letter-spacing:.1em; color:var(--ink-dim);
  }
  .panel__inner{ max-width:none }
  .hud__meta .hud__hint{ display:none }
}
@media (max-width:640px){
  .hero__title{ gap:.16em }
  .stats{ gap:20px }
  .stats li{ flex:1 1 40% }
  .steps li{ padding:12px 14px }
  .steps span{ font-size:12.5px }
  .hud__track{ display:none }
}
/* short viewports: the copy has to clear the nav and the HUD */
@media (max-height:820px){
  .display{ font-size:clamp(32px,4.6vw,58px); margin-bottom:16px }
  .display--xl{ font-size:clamp(36px,5.4vw,70px) }
  .lede{ font-size:15px; margin-bottom:18px }
  .eyebrow{ margin-bottom:14px }
  .steps li{ padding:7px 14px }
  .steps span{ font-size:12.5px; line-height:1.42 }
  .cards article{ padding:14px }
  .floaters{ height:clamp(68px,9.6vh,96px); margin-top:clamp(20px,2.8vh,32px) }
  .floater img{ width:38px; height:38px }
  .floater__name{ top:calc(100% + 16px) }
  .hero__mark{ --s:min(96px,18vw) }
}
@media (max-height:560px){
  .hero__mark{ display:none }
  .panel{ padding-top:78px; padding-bottom:88px }
}

/* ============================================================
   REDUCED MOTION — clips are cross-cut instead of played
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .stage__drift{ animation:none }
  .stage__grain{ animation:none }
  .loader__logo{ animation:none }
  .hero__cue-arrows i{ animation:none; opacity:.7 }
  .clip{ transition:opacity .45s linear }
  .panel.is-active > .panel__inner > *{ animation-duration:.01s; animation-delay:0s }
  .floater, .floater__inner{ animation:none }
  .panel.is-active .floaters{ animation-duration:.01s; animation-delay:0s }
}