/* ============================================================
   INGOLUTION — scroll cinematic
   Green CI + black/white only. No orange.
   ============================================================ */

:root{
  --bg:#fafafa;
  --ink:#14140f;
  --muted:#6b6f63;

  /* Ingolution CI — sampled from the logo (#858324 olive-gold) */
  --ci:#858324;
  --ci-deep:#6a6820;
  --ci-glow:#c2c24e;   /* luminous, for dark backgrounds */
  --ci-olive:#858324;

  /* the data — complementary orange */
  --data:#ff6a1f;

  --loss:#0b0b0c;
  --line:#e4e3dd;

  --ease:cubic-bezier(.16,1,.3,1);
}

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

html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- HUD ---------- */
.hud{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2.4vw,28px) clamp(16px,3vw,40px);
  pointer-events:none;
}
.hud__brand{position:relative;display:inline-block;pointer-events:auto;line-height:0}
.hud__logo{height:clamp(18px,2vw,24px);width:auto;transition:opacity .5s var(--ease)}
.hud__logo--white{position:absolute;top:0;left:0;opacity:0}
.hud.is-dark .hud__logo--green{opacity:0}
.hud.is-dark .hud__logo--white{opacity:.95}
.hud__progress{
  position:relative;width:clamp(90px,14vw,200px);height:2px;
  background:rgba(20,20,15,.12);border-radius:2px;overflow:hidden;
  transition:background .5s var(--ease);
}
.hud.is-dark .hud__progress{background:rgba(255,255,255,.18)}
.hud__bar{position:absolute;inset:0 100% 0 0;background:var(--ci-deep);border-radius:2px;will-change:right;transition:background .5s var(--ease)}
.hud.is-dark .hud__bar{background:var(--ci-glow)}

/* ---------- chapter ticks ---------- */
.chapters{
  position:fixed;z-index:40;right:clamp(12px,1.8vw,26px);top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:11px;pointer-events:none;
}
.chapters span{
  width:6px;height:6px;border-radius:50%;
  background:rgba(20,20,15,.18);transition:transform .35s var(--ease),background .35s var(--ease);
}
.chapters span.on{background:var(--ci-deep);transform:scale(1.7)}
@media (max-width:640px){.chapters{display:none}}

/* ---------- stage / pin ---------- */
/* taller track = more scroll between every section (longer journey) */
.stage{height:1500vh;position:relative}
@media (max-width:640px){.stage{height:1150vh}}
.stage__pin{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:var(--bg);
}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- overlays ---------- */
.overlays{position:absolute;inset:0;z-index:20;pointer-events:none}
.layer{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(18px,2.6vw,34px);
  opacity:0;will-change:opacity,transform,filter;
  padding:0 6vw;
}

.kicker{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(44px,10vw,150px);line-height:.92;letter-spacing:-.03em;
  text-transform:uppercase;color:var(--ink);
}

.mailrow{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 20px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 14px 40px -22px rgba(20,20,15,.4);
  font-size:clamp(13px,1.6vw,17px);color:var(--muted);max-width:92vw;
}
.mailrow__dot{width:10px;height:10px;border-radius:50%;background:var(--data);flex:0 0 auto;box-shadow:0 0 0 4px rgba(255,92,42,.20);animation:dotpulse 2.1s var(--ease) infinite}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 4px rgba(255,92,42,.20)}50%{box-shadow:0 0 0 9px rgba(255,92,42,.06)}}
.mailrow__txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mailrow__cursor{color:var(--ci-deep);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.tag{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:clamp(30px,6.4vw,92px);line-height:.95;letter-spacing:-.025em;
  text-transform:uppercase;
}
.tag--warn{color:#f5f5f1}
.tag--safe{color:var(--ci-glow)}
.tag--data{color:var(--data)}
.tag--sm{font-size:clamp(20px,3.4vw,46px);letter-spacing:-.01em}

/* ransom */
.ransom{position:absolute;inset:0;pointer-events:none}
.fig{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translate(var(--x),var(--y));
  display:flex;flex-direction:column;align-items:center;
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:clamp(20px,3.2vw,44px);color:#f5f5f1;letter-spacing:-.02em;
  white-space:nowrap;opacity:0;
}
.fig i{width:1px;height:clamp(28px,5vw,66px);background:linear-gradient(rgba(245,245,241,.55),rgba(245,245,241,0));margin-top:12px}

/* end */
.layer--end{gap:clamp(20px,3vw,40px)}
.brandmark{width:clamp(96px,13vw,168px);height:auto;opacity:0}
.end__line{
  font-family:'Inter',sans-serif;font-size:clamp(14px,1.8vw,20px);
  color:var(--muted);max-width:30ch;line-height:1.5;
}
.end__cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{
  font-weight:600;font-size:clamp(14px,1.5vw,16px);
  padding:14px 26px;border-radius:999px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  pointer-events:none;
}
.btn--primary{background:var(--ci);color:#fff;box-shadow:0 16px 40px -18px rgba(133,131,36,.6)}
.btn--ghost{border:1px solid rgba(20,20,15,.22);color:var(--ink)}
.layer--end.is-live .btn{pointer-events:auto}
.layer--end.is-live .btn--primary:hover{transform:translateY(-3px);box-shadow:0 22px 50px -18px rgba(79,143,70,.9)}
.layer--end.is-live .btn--ghost:hover{transform:translateY(-3px);border-color:var(--ci-deep)}

/* ---------- hint + replay ---------- */
.hint{
  position:absolute;left:50%;bottom:clamp(22px,4vh,46px);transform:translateX(-50%);
  z-index:30;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  transition:opacity .5s var(--ease);will-change:opacity;
}
.hint i{width:1px;height:34px;background:linear-gradient(var(--muted),transparent);animation:drop 1.6s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}41%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.replay{
  position:absolute;left:50%;bottom:clamp(26px,5vh,52px);transform:translateX(-50%);
  z-index:30;background:transparent;border:1px solid rgba(20,20,15,.22);
  color:var(--ink);font-family:inherit;font-size:13px;font-weight:500;
  padding:11px 22px;border-radius:999px;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.replay.show{opacity:1;pointer-events:auto}
.replay:hover{transform:translateX(-50%) translateY(-2px);border-color:var(--ci-deep)}

/* ---------- preloader (lazy load) ---------- */
#preloader{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:var(--bg);transition:opacity .6s var(--ease);
}
#preloader.is-done{opacity:0;pointer-events:none}
.pre-logo{width:clamp(170px,24vw,300px);height:auto;opacity:.92}
.pre-bar{width:clamp(130px,16vw,220px);height:2px;background:rgba(20,20,15,.12);border-radius:2px;overflow:hidden}
.pre-bar span{display:block;height:100%;width:0;background:var(--ci);border-radius:2px;transition:width .35s var(--ease)}
body.preloading{overflow:hidden}

/* ---------- fallback (reduced motion / no-JS) ---------- */
.fallback{
  display:none;min-height:100vh;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:24px;padding:10vh 8vw;
}
.fallback[hidden]{display:none}
.fallback.show{display:flex}
.fallback__logo{width:min(360px,70vw)}
.fallback h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(30px,5vw,60px);letter-spacing:-.03em;line-height:1.02;max-width:18ch}
.fallback p{font-size:clamp(15px,2vw,19px);color:var(--muted);max-width:54ch;line-height:1.6}
.fallback__safe{color:var(--ci-deep);font-weight:500}