/* ════════════════════════════════════════════════════════════
   VCDS HELPER (US) · the experience (v3)
   One stage for the whole story: the 3D car fills the screen, the camera orbits with the scroll,
   and the chapters (text, cards, stamp, cluster, module labels) float in and out over it.
   The section is as tall as the story (--h screens, set by exp.js); the stage is sticky inside it.
   Without html.exp (less motion, old browser, GSAP missing) everything lies in plain flow.
   ════════════════════════════════════════════════════════════ */

/* ── plain flow (no experience) ──────────────────────────── */
.xp{position:relative;background:var(--bg)}
.xp__stage{position:relative}
#palco{display:none}
.xp__scrim{display:none}
.xp__layers{padding:28px 0 8px}
.xp__t{padding:0 max(var(--pad),env(safe-area-inset-left,0px)) 0 max(var(--pad),env(safe-area-inset-right,0px));max-width:calc(var(--shell) + var(--pad) * 2);margin:0 auto 34px}
.xp__t h2{font-size:clamp(28px,7.2vw,44px);margin-bottom:8px}
.xp__t .xp__in>p:not(.kicker):not(.lead):not(.tag){color:var(--muted);font-size:clamp(14.5px,3.9vw,16.5px);line-height:1.5;max-width:60ch}
.xp__t .xp__in>p strong{color:var(--ink)}
.xp__cta{margin-top:14px}
.xp__cardbox{padding:0 var(--pad);max-width:calc(var(--shell) + var(--pad) * 2);margin:0 auto 24px}
.xp__cardbox .card{margin:0}
.stamp.xp__stamp{position:static;transform:rotate(-2deg);margin:0 var(--pad) 24px;justify-self:start;display:inline-grid;opacity:1}
.cluster{display:block;width:min(80%,320px);margin:0 var(--pad) 24px;opacity:1}
.mods{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--pad);margin-bottom:24px}
.mod{font:600 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc-2);padding:4px 7px;border:1px solid rgba(30,167,227,.5);border-radius:3px;background:rgba(3,11,31,.75);white-space:nowrap;position:relative}
.mod b{display:block;font-size:13px;color:var(--ink)}
.mod__lock{display:none}
.xp__rail{display:none}
.xp__fonte{padding:0 var(--pad);font-size:12px;line-height:1.5;color:var(--soft);max-width:72ch;margin:0 auto 32px}

/* hero text (both modes) */
.tag{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;line-height:1.35;color:var(--acc);margin-bottom:16px;max-width:65ch}
.hero__h1{font-size:clamp(46px,12.4vw,66px);line-height:.96;letter-spacing:-.015em;margin-bottom:16px;color:var(--ink)}
.hero__h1>span{display:block}
.hero__h1 .hero__l2{color:var(--acc-2)}
.xp__t--hero .lead{font-size:15px;line-height:1.52;margin-bottom:16px;max-width:46ch}
.hero__cta{display:flex;flex-direction:column;gap:8px}
.hero__cta .btn:first-child{min-height:50px;font-size:.95rem;width:100%}
.hero__cta .btn--ghost{align-self:flex-start;min-height:44px;padding:8px 0;border-color:transparent;color:var(--muted);font-size:13.5px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line-2)}
.hero__cta .btn--ghost:hover,.hero__cta .btn--ghost:focus-visible{color:var(--acc-2);border-color:transparent}
.hero__hint{display:none}
@media (min-width:561px){
  .hero__cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
  .hero__cta .btn:first-child{width:auto}
}

/* ── the experience ──────────────────────────────────────── */
html.exp .xp{height:calc(100svh * var(--h,14));z-index:1}
html.exp .xp__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg)}
html.exp #palco{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
html.exp.tem3d #palco{opacity:1}
/* a scrim keeps the text readable over the stage: from the bottom on the phone, from the left on wide screens */
html.exp .xp__scrim{display:block;position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(3,11,31,.95) 0%,rgba(3,11,31,.62) 30%,rgba(3,11,31,0) 60%)}
/* the hero reads from the top on the phone: this one fades out when the story starts */
html.exp .xp__scrim--top{background:linear-gradient(to bottom,rgba(3,11,31,.94) 0%,rgba(3,11,31,.55) 42%,rgba(3,11,31,0) 68%)}
html.exp .xp__layers{position:absolute;inset:0;padding:0}
/* each chapter sits at the bottom of the screen (phone); the inner block is what moves */
html.exp .xp__t{position:absolute;left:0;right:0;top:0;bottom:calc(38px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;margin:0;max-width:none;pointer-events:none}
html.exp .xp__in{width:100%;max-width:620px;opacity:0;will-change:transform,opacity}
html.exp .xp__t.vivo{pointer-events:auto}
html.exp .xp__t--hero{align-items:flex-start;top:calc(var(--hd) + 14px);bottom:auto}
html.exp .xp__t--hero .xp__in{opacity:1}
html.exp .xp__t h2{font-size:clamp(27px,7.2vw,46px);margin-bottom:8px}
html.exp .hero__hint{display:flex;align-items:center;gap:10px;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
html.exp .hero__hint i{display:block;width:34px;height:1px;background:var(--acc);animation:hint 1.6s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scaleX(.4);opacity:.4}50%{transform:scaleX(1);opacity:1}}
/* cards: a box in the upper part of the screen, the card inside moves (3D tilt) */
html.exp .xp__cardbox{position:absolute;left:0;right:0;top:calc(var(--hd) + 10px);bottom:46%;display:flex;align-items:flex-start;justify-content:center;padding:0 var(--pad);margin:0;perspective:1200px;pointer-events:none}
html.exp .xp__card{opacity:0;will-change:transform,opacity;transform-origin:50% 50%;max-width:520px;width:100%}
html.exp .xp__card .proc__ls>div{opacity:0}
html.exp .stamp.xp__stamp{position:absolute;right:14px;top:calc(var(--hd) + 14px);display:grid;opacity:0;margin:0}
html.exp .cluster{position:absolute;left:var(--pad);top:calc(var(--hd) + 12px);width:min(58%,260px);margin:0;opacity:0;will-change:transform,opacity}
html.exp .mods{position:absolute;inset:0;display:block;padding:0;margin:0;pointer-events:none}
html.exp .mod{position:absolute;left:0;top:0;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity;transition:opacity .2s linear}
html.exp .mod__lock{display:none;position:absolute;right:-9px;top:-9px;width:16px;height:16px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 2px var(--bg)}
html.exp .mod.trancado .mod__lock{display:block}
html.exp .mod.mini{font-size:0;padding:3px 5px;letter-spacing:0}
html.exp .mod.mini b{font-size:12px}
html.exp .mod.trancado{color:var(--warn);border-color:rgba(255,193,77,.7)}
html.exp .xp__fonte{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(8px + env(safe-area-inset-bottom,0px));margin:0;font-size:9.5px;line-height:1.3;color:var(--soft);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* chapter rail: one tick per chapter, the current one lit */
html.exp .xp__rail{display:flex;position:absolute;right:12px;top:50%;transform:translateY(-50%);flex-direction:column;gap:7px;z-index:3}
html.exp .xp__rail i{display:block;width:4px;height:14px;border-radius:2px;background:rgba(242,246,251,.16);transition:background-color .25s,height .25s}
html.exp .xp__rail i.on{background:var(--acc);height:22px}

@media (min-width:980px){
  html.exp .xp__scrim{background:linear-gradient(to right,rgba(3,11,31,.92) 0%,rgba(3,11,31,.55) 34%,rgba(3,11,31,0) 60%)}
  html.exp .xp__scrim--top{display:none}
  html.exp .xp__t{left:calc((100vw - var(--shell)) / 2 + var(--pad));right:auto;width:40%;max-width:540px;top:0;bottom:0;align-items:center}
  html.exp .xp__t--hero{top:0;bottom:0;align-items:center;width:46%;max-width:620px}
  html.exp .xp__t h2{font-size:clamp(34px,3.4vw,54px)}
  html.exp .xp__t .xp__in>p:not(.kicker):not(.lead):not(.tag){font-size:17px}
  html.exp .hero__h1{font-size:clamp(58px,6.2vw,96px);margin-bottom:24px}
  html.exp .xp__t--hero .lead{font-size:clamp(.95rem,1.25vw,1.08rem);line-height:1.55;margin-bottom:28px;max-width:50ch}
  html.exp .hero__cta .btn--ghost{padding:13px 24px;border-color:var(--line-2);color:var(--ink);font-size:.92rem;text-decoration:none}
  html.exp .hero__cta .btn--ghost:hover,html.exp .hero__cta .btn--ghost:focus-visible{border-color:var(--acc);color:var(--acc-2)}
  html.exp .xp__cardbox{left:52%;right:calc((100vw - var(--shell)) / 2 + var(--pad));top:0;bottom:0;align-items:center;padding:0}
  html.exp .xp__card{max-width:560px}
  html.exp .cluster{left:auto;right:calc((100vw - var(--shell)) / 2 + var(--pad));top:auto;bottom:10%;width:min(26%,300px)}
  html.exp .stamp.xp__stamp{right:calc((100vw - var(--shell)) / 2 + var(--pad) + 40px);top:16%}
  html.exp .xp__rail{right:24px;gap:9px}
  html.exp .xp__fonte{left:calc((100vw - var(--shell)) / 2 + var(--pad));right:auto;max-width:46%;font-size:11px;white-space:normal}
}
@media (max-height:640px){
  html.exp .xp__t h2{font-size:clamp(24px,6.4vw,38px)}
  html.exp .xp__t .xp__in>p:not(.kicker):not(.lead):not(.tag){font-size:14px;line-height:1.42}
  html.exp .hero__h1{font-size:clamp(40px,11vw,56px)}
  html.exp .xp__t--hero .lead{font-size:14px;margin-bottom:12px}
  html.exp .xp__cardbox{bottom:40%}
}

@media (prefers-reduced-motion:reduce){
  html.exp .xp{height:auto}
  html.exp .xp__stage{position:static;height:auto;overflow:visible}
}