/* ================= intro v4: bold lettering over a fluid dashboard promo ================= */
.intro { display: none; position: relative; height: 340vh; padding: 0; background: var(--void); }
.js .intro { display: block; }
.intro-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; pointer-events: none; background: #050505; }

/* the promo: dashboard as floating 3D cards */
.reel { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 45%, #161616, #050505 80%); }
.reel-stage { position: absolute; inset: 0; perspective: 1150px; perspective-origin: 50% 46%; }
.reel-scene { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.fc { position: absolute; left: 0; top: 0; width: var(--w); transform-style: preserve-3d; backface-visibility: hidden;
  transform: translate3d(var(--x), var(--y), var(--z)) translate(-50%, -50%) rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--rz));
  animation: bob var(--bob) ease-in-out var(--d) infinite, sway calc(var(--bob) * 1.9) ease-in-out var(--d) infinite; will-change: transform, translate, rotate; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes sway { 0%, 100% { rotate: -.7deg; } 50% { rotate: .7deg; } }
.fc.far { opacity: .88; }
.fc-in, .fc-dev { width: 100%; position: relative; contain: layout style; }
.fc-in .dv-card, .fc-in .dv-kpi { box-shadow: 0 14px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); background: linear-gradient(160deg, #262626, #111); }
.fc-in .dv-kpi.hi { background: var(--white); }
.fc .frame-tablet, .fc .frame-phone { box-shadow: 0 18px 36px rgba(0,0,0,.6); }
.fc-in .cline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes pop { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.fc-in .dv-bar i { animation: grow .9s cubic-bezier(.2,.8,.2,1); transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }

.reel-sweep { position: absolute; inset: -20%; pointer-events: none; opacity: .09;
  background: linear-gradient(105deg, transparent 38%, #fff 49%, transparent 60%); animation: sweep 9s ease-in-out infinite; will-change: transform; }
@keyframes sweep { 0% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.reel .pt { position: absolute; left: 0; top: 0; border-radius: 50%; background: #fff; pointer-events: none; animation: drift var(--t) linear infinite, twinkle var(--k) ease-in-out infinite; }
@keyframes drift { from { translate: 0 0; } to { translate: var(--dx) -420px; } }
@keyframes twinkle { 0%, 100% { opacity: .08; } 50% { opacity: .7; } }

.cur { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 5; pointer-events: none; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.cur svg { width: 100%; height: 100%; display: block; }
.cur i { position: absolute; left: -10px; top: -10px; width: 46px; height: 46px; border: 2px solid #fff; border-radius: 50%; opacity: 0; transform: scale(.3); }
.cur.click i { animation: ripple .6s ease-out; }
@keyframes ripple { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
.fc.appr { overflow: visible; }

/* legibility: the dashboard stays visible, the lettering sits on a soft dark pool */
.reel-dim { position: absolute; inset: 0; background:
  radial-gradient(ellipse 55% 38% at 50% 50%, rgba(5,5,5,.36), rgba(5,5,5,0) 100%),
  radial-gradient(ellipse 80% 70% at 50% 50%, rgba(5,5,5,0), rgba(5,5,5,.42) 100%); }

/* the bold lettering */
.intro-title { position: absolute; left: 0; right: 0; top: 50%; display: grid; justify-items: center; gap: 22px; transform: translateY(-54%); will-change: transform, opacity; transform-origin: 50% 54%; }
.t-word { font: 600 clamp(3.4rem, 14.5vw, 16.5rem)/.78 var(--sans); letter-spacing: -.06em; color: #fff; text-transform: uppercase; white-space: nowrap; padding-right: .06em;
  }
.t-sub { color: var(--fog); text-shadow: 0 2px 14px #000; letter-spacing: .3em; }
.t-guide { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 92vw; margin-top: 6px; pointer-events: auto; }
.t-guide .btn.ghost { background: rgba(5,5,5,.6); }
.t-line { max-width: 90vw; text-align: center; font: 400 clamp(1.6rem, 3.6vw, 3rem)/1.05 var(--serif); letter-spacing: -.02em; color: var(--chalk); text-shadow: 0 2px 18px #000; }

.intro-cap { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); white-space: nowrap; margin: 0; padding: 9px 18px; background: rgba(5,5,5,.62); color: var(--fog); }
.intro-hint { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); margin: 0; padding: 10px 18px 8px; background: rgba(5,5,5,.62); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--fog); }
.intro-hint span { display: block; width: 1px; height: 36px; background: linear-gradient(var(--white), transparent); animation: hint 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.intro-veil { position: absolute; inset: 0; background: var(--void); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .intro { display: none; } .fc, .reel-sweep, .reel .pt { animation: none; } }
@media (max-width: 640px) { .intro { height: 280vh; } .t-sub { letter-spacing: .2em; } }

.intro-stage.deep .fc { will-change: auto; }

/* per-letter life */
.t-word { display: inline-flex; }
.ch { display: inline-block; will-change: transform; color: transparent; line-height: 1; padding: .14em .02em; margin: -.14em 0;
  background: linear-gradient(100deg, #fff 30%, #9c9c9c 48%, #fff 66%); background-size: 320% 100%;
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 10px 50px rgba(0,0,0,.65);
  animation: chIn 1.25s cubic-bezier(.16,.84,.2,1) calc(var(--i) * 70ms + 150ms) backwards, shine 5.5s linear calc(var(--i) * -0.18s) infinite; }
@keyframes chIn { from { opacity: 0; transform: translateY(46%) rotateX(-70deg) scale(.9); filter: blur(14px); } }
@keyframes shine { from { background-position: 160% 0; } to { background-position: -160% 0; } }
@media (prefers-reduced-motion: reduce) { .ch { animation: none; color: #fff; background: none; } }

/* once the word is swelling, drop the shine: solid white stays crisp at any size */
.intro-title.flat .ch { background: none; color: #fff; -webkit-text-fill-color: #fff; animation: none; will-change: auto; }
.t-sub { color: var(--gold); }