@font-face{
  font-family:'Archia';
  src:url('assets/fonts/archia-regular-webfont.woff2') format('woff2'),
      url('assets/fonts/archia-regular-webfont.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --type:'Archia',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
body{
  font-family:var(--type);
  background:#0a0d12;color:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block}

/* ============ fixed background stage ============ */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0a0d12}
.layer{
  position:absolute;inset:0;
  opacity:0;transform:scale(1.05);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease);
  will-change:opacity,transform;
}
.layer.on{opacity:1;transform:scale(1)}
.layer img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1.1s var(--ease)}   /* eases the zoom back on exit instead of snapping */
/* slow continuous push-in while a layer is active (keeps running across 2–5) */
.layer.on img{animation:drift 26s var(--ease) forwards}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.12)}}

/* ============ scrolling text steps ============ */
.steps{position:relative;z-index:1}
.step{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(40px,9vh,120px) clamp(24px,6vw,90px);
}
.copy{
  width:100%;max-width:min(960px,90vw);text-align:center;
  opacity:0;                       /* JS drives opacity + parallax by scroll position */
  will-change:opacity;             /* promote opacity only — transform promotion softens text */
}

/* hero logo (step 1) */
.hero-logo{
  width:clamp(64px,7vw,88px);height:auto;margin:0 auto clamp(22px,3vh,34px);
  border-radius:20px;
}

.line{
  font-size:clamp(26px,3.6vw,52px);line-height:1.32;letter-spacing:-.01em;color:#fff;
}

/* smooth typed reveal — chars pre-laid-out, only opacity+blur animate (no reflow) */
.line .word{display:inline-block;white-space:nowrap}
.line .ch{opacity:0}
.step.active .line .ch{
  animation:chReveal .5s var(--ease) both;
  animation-delay:calc(var(--i,0) * 0.024s);
}
@keyframes chReveal{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
/* once revealed, drop the filter entirely so glyphs render crisp (filter:blur(0) still rasterizes/softens text) */
.step.typed .line .ch{animation:none;opacity:1;filter:none}

/* ============ CTA ============ */
.cta{
  display:inline-block;margin-top:clamp(28px,4.5vh,44px);
  font-family:var(--type);font-weight:700;font-size:clamp(18px,1.8vw,24px);letter-spacing:.005em;
  color:#1a2733;background:#fff;padding:19px 46px;border-radius:100px;
  text-decoration:none;
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease) .1s,transform .55s var(--ease) .1s,background .25s,box-shadow .25s;
  pointer-events:none;
}
.step.typed .cta{opacity:1;transform:none;pointer-events:auto}
.cta:hover{background:#eaf4ff;box-shadow:0 6px 18px rgba(0,0,0,.16);transform:translateY(-3px)}

/* restart (end) — icon only, returns to the beginning */
.restart{
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;margin:clamp(20px,3vh,28px) auto 0;padding:0;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.55);
  border-radius:100px;backdrop-filter:blur(3px);
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease) .25s,transform .55s var(--ease) .25s,background .25s,box-shadow .25s;
  pointer-events:none;
}
.step.typed .restart{opacity:1;transform:none;pointer-events:auto}
.restart:hover{background:rgba(255,255,255,.24);box-shadow:0 4px 12px rgba(0,0,0,.16)}
.restart svg{display:block}

/* ============ scroll cue (first view) ============ */
.scrollcue{
  position:fixed;left:50%;bottom:clamp(20px,4vh,40px);transform:translateX(-50%);
  z-index:6;display:grid;place-items:center;
  width:48px;height:48px;padding:0;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.55);
  border-radius:100px;backdrop-filter:blur(3px);
  opacity:1;transition:opacity .5s var(--ease),transform .5s var(--ease),background .25s,box-shadow .25s;
}
.scrollcue svg{animation:cuebob 1.8s ease-in-out infinite}
@keyframes cuebob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
.scrollcue.hide{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(10px)}
.scrollcue:hover{background:rgba(255,255,255,.22);box-shadow:0 4px 12px rgba(0,0,0,.16)}

/* ============ reduced motion ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .layer{transition:opacity .2s linear;transform:none}
  .layer.on{transform:none}
  .layer.on img{animation:none}
  .copy{opacity:1 !important;transform:none !important}
  .line .ch{opacity:1}
  .step.active .line .ch{animation:none}
  .cta{opacity:1;transform:none;pointer-events:auto;transition:none}
  .restart{opacity:1;transform:none;pointer-events:auto;transition:none}
  .scrollcue svg{animation:none}
}