/* ============================================================
   Huminic Motors — cinematic scroll intro (v2)
   Ports the scrollytelling engine's section/fade/parallax
   technique (../scrollytelling) into a self-contained, crimson
   pinned cross-fade story that glides into the site and vanishes.
   ============================================================ */

/* the site is hidden behind the intro only while it's playing (no flash) */
html:not(.intro-on) #hm-intro { display:none !important; }
html.intro-on .hdr,
html.intro-on .ver-switch,
html.intro-on #huminic-dealer-widget { display:none !important; }
html.intro-on { scroll-behavior:auto; }
html.intro-on body { background:#050506; overflow:hidden; height:100vh; }

/* fixed cinematic overlay; progress driven by wheel/touch/keys in intro.js.
   z-index sits above the injected chat widget so nothing peeks through. */
#hm-intro { position:fixed; inset:0; z-index:2147483000; background:#050506; }

.intro-stage {
  position:absolute; inset:0; overflow:hidden;
  display:grid; place-items:center; isolation:isolate;
}

/* per-beat crossfade background layers (color / gradient / image) — set by intro.js */
.intro-bg-a, .intro-bg-b { position:absolute; inset:0; z-index:0; background-color:#0a0a0b; background-size:cover; background-position:center; }
.intro-bg-b { opacity:0; }
/* "trip to the future" light-streak layer, faded in near its beat */
.intro-trails { position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; overflow:hidden; mix-blend-mode:screen; }
.intro-trails::before, .intro-trails::after { content:""; position:absolute; inset:-30%;
  background:repeating-linear-gradient(104deg, transparent 0 34px, rgba(255,120,90,0) 34px 40px, rgba(255,150,110,.55) 41px 43px, transparent 44px 78px);
  animation:trailsMove 1.1s linear infinite; }
.intro-trails::after { background:repeating-linear-gradient(104deg, transparent 0 52px, rgba(184,60,50,0) 52px 60px, rgba(255,90,70,.4) 61px 62px, transparent 63px 120px); animation-duration:.7s; opacity:.7; }
@keyframes trailsMove { to { transform:translateX(-78px); } }
@media (prefers-reduced-motion: reduce){ .intro-trails::before, .intro-trails::after { animation:none; } }
.intro-grid { position:absolute; inset:0; z-index:1; opacity:.06;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 78%); }
.intro-vignette { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(3,3,4,.85)); }

/* beats — absolutely stacked, cross-faded by scroll progress via JS */
.intro-beat {
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(24px,8vw,120px); max-width:1180px; margin:0 auto; left:0; right:0;
  opacity:0; transform:translateY(26px); will-change:opacity,transform; pointer-events:none;
}
.intro-beat .ib-kicker {
  font-family:'Archivo',sans-serif; font-size:.8rem; letter-spacing:.24em; text-transform:uppercase;
  color:#e0855d; margin-bottom:22px; display:inline-flex; align-items:center; gap:12px;
}
.intro-beat .ib-kicker::before { content:""; width:34px; height:2px; background:var(--accent,#b8201c); display:inline-block; }
.intro-beat .ib-stat {
  font-family:'Archivo',sans-serif; font-weight:700; line-height:.9; color:#fff;
  font-size:clamp(3.4rem,12vw,9rem); letter-spacing:-.02em; margin-bottom:10px;
}
.intro-beat .ib-stat em { font-style:normal; color:var(--accent,#b8201c); }
.intro-beat .ib-statlabel { font-family:'Archivo',sans-serif; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,242,239,.55); margin-bottom:26px; }
.intro-beat h2, .intro-beat .ib-h {
  font-family:'Archivo',sans-serif; font-weight:600; text-transform:none;
  font-size:clamp(1.9rem,4.6vw,3.6rem); line-height:1.12; letter-spacing:-.01em; color:#fff;
  max-width:22ch; margin:0;
}
.intro-beat h2 .hl, .intro-beat .ib-h .hl { color:var(--accent,#b8201c); }
.intro-beat.center { align-items:center; text-align:center; }
.intro-beat.center h2, .intro-beat.center .ib-h { max-width:20ch; margin-left:auto; margin-right:auto; }

/* final beat */
.intro-beat.final h2, .intro-beat.final .ib-h { font-size:clamp(2.4rem,6.4vw,5rem); max-width:16ch; text-shadow:0 0 40px rgba(184,32,28,.4); }

/* per-line wrappers (used by the carry engine): full-stage, single centered line */
.intro-line { z-index:2; }
.intro-final-cta {
  margin-top:34px; display:inline-flex; align-items:center; gap:12px; align-self:center;
  font-family:'Archivo',sans-serif; font-weight:600; font-size:1rem; letter-spacing:.02em;
  padding:16px 30px; border-radius:4px; background:var(--accent,#b8201c); color:#fff; cursor:pointer;
  border:0; pointer-events:auto; transition:.25s; box-shadow:0 14px 40px rgba(184,32,28,.4);
}
.intro-final-cta:hover { background:#d5312b; transform:translateY(-2px); }
.intro-final-cta svg { width:18px; height:18px; animation:cueBounce 1.6s ease-in-out infinite; }

/* progress rail (right) */
.intro-progress { position:absolute; z-index:4; right:clamp(16px,3vw,42px); top:50%; transform:translateY(-50%);
  width:2px; height:min(42vh,320px); background:rgba(255,255,255,.14); border-radius:2px; }
.intro-progress .fill { position:absolute; top:0; left:0; right:0; height:0; background:var(--accent,#b8201c); border-radius:2px; }
.intro-count { position:absolute; z-index:4; right:clamp(16px,3vw,42px); top:calc(50% + min(24vh,180px)); transform:translateX(40%);
  font-family:'Archivo',sans-serif; font-size:.78rem; letter-spacing:.1em; color:rgba(244,242,239,.5); }
.intro-count b { color:#fff; }

/* skip */
.intro-skip { position:absolute; z-index:5; top:clamp(18px,3vw,30px); right:clamp(18px,4vw,42px);
  font-family:'Archivo',sans-serif; font-size:.82rem; color:rgba(244,242,239,.65);
  background:rgba(10,10,11,.5); border:1px solid rgba(255,255,255,.16); border-radius:999px;
  padding:9px 18px; cursor:pointer; backdrop-filter:blur(6px); transition:.2s; }
.intro-skip:hover { color:#fff; border-color:#fff; }
.intro-brand { position:absolute; z-index:5; top:clamp(16px,3vw,28px); left:clamp(18px,4vw,42px);
  display:inline-flex; flex-direction:column; align-items:center; gap:2px; background:var(--accent,#b8201c); color:#fff; padding:9px 18px; }
.intro-brand .lm-word { font-family:'Archivo',sans-serif; font-weight:700; font-size:1rem; line-height:1; }
.intro-brand .lm-sub { font-family:'Archivo',sans-serif; font-weight:600; font-size:.4rem; letter-spacing:.4em; padding-left:.4em; }

/* scroll cue (first beat only) */
.intro-cue { position:absolute; z-index:5; bottom:clamp(22px,4vw,40px); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(244,242,239,.6);
  font-family:'Archivo',sans-serif; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; transition:opacity .4s; }
.intro-cue svg { width:22px; height:22px; animation:cueBounce 1.6s ease-in-out infinite; }
@keyframes cueBounce { 0%,100%{ transform:translateY(0); opacity:.6; } 50%{ transform:translateY(6px); opacity:1; } }

/* swipe-up idle hint — shown by intro.js only if the visitor parks on beat 1 >5s,
   for ~2s, over a very-blurred backdrop. Prominent but discreet, centered. */
.intro-swipe {
  position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
  background:rgba(6,6,7,.30);
  -webkit-backdrop-filter:blur(16px) saturate(1.05); backdrop-filter:blur(16px) saturate(1.05);
}
.intro-swipe.show { opacity:1; }
.intro-swipe-card {
  display:flex; flex-direction:column; align-items:center; gap:20px; padding:30px 42px 34px;
  border-radius:20px; background:rgba(14,12,13,.42); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.intro-swipe-icon { position:relative; width:52px; height:96px; }
.isw-arrow { position:absolute; left:50%; top:-2px; margin-left:-14px; width:28px; height:28px; color:#fff;
  animation:iswArrow 1.5s ease-in-out infinite; }
.isw-arrow svg { width:28px; height:28px; }
.isw-finger { position:absolute; left:50%; bottom:6px; width:26px; height:26px; margin-left:-13px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 7px rgba(255,255,255,.16), 0 8px 22px rgba(0,0,0,.5);
  animation:iswFinger 1.5s ease-in-out infinite; }
.intro-swipe-label { font-family:'Archivo',sans-serif; font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; color:#fff; }
@keyframes iswFinger { 0%{ transform:translateY(34px); opacity:0; } 22%{ opacity:1; } 72%{ opacity:1; } 100%{ transform:translateY(-34px); opacity:0; } }
@keyframes iswArrow  { 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(-5px); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .isw-finger, .isw-arrow { animation:none; } }

/* glide-out on completion — the whole overlay lifts + fades to reveal the site */
#hm-intro.gliding { transition:opacity .8s cubic-bezier(.4,0,.2,1); opacity:0; pointer-events:none; }
#hm-intro.gliding .intro-stage { transition:transform .8s cubic-bezier(.4,0,.2,1); transform:scale(1.12) translateY(-8%); }
.hero.site-glide-in { animation:siteGlideIn 1s cubic-bezier(.22,1,.36,1) both; }
@keyframes siteGlideIn { from { opacity:.2; transform:translateY(40px) scale(1.02); } to { opacity:1; transform:none; } }

/* tiny "replay the intro" button, tucked above-right of the Customer Login */
.cust-wrap { position:relative; display:inline-flex; }
.intro-replay {
  position:absolute; top:-9px; right:-9px; z-index:3;
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent,#b8201c); color:#fff; border:2px solid #0a0a0b;
  box-shadow:0 2px 8px rgba(0,0,0,.45); transition:.2s var(--ease,ease);
}
.intro-replay:hover { background:#d5312b; transform:scale(1.14) rotate(-25deg); }
.intro-replay svg { width:12px; height:12px; }

@media (prefers-reduced-motion: reduce) {
  .intro-bg, .intro-cue svg, .intro-final-cta svg { animation:none; }
  #hm-intro.gliding .intro-stage { transition:opacity .3s; }
  .hero.site-glide-in { animation:none; }
}
@media (max-width:640px){
  .intro-progress, .intro-count { display:none; }
}

/* ============================================================ INTRO MEDIA GRAPHICS */
.ib-media { width:100%; max-width:900px; margin:28px auto 0; }   /* fits the beat padding; space above from the heading */
.agent-compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.agent-card { background:rgba(20,18,20,.62); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:20px; text-align:left; }
.agent-card.bad { border-color:rgba(190,80,70,.45); }
.agent-card.good { border-color:rgba(63,191,106,.45); }
.agent-card .ac-tag { font-family:'Archivo',sans-serif; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; font-weight:600; }
.agent-card.bad .ac-tag { color:#e0725d; }
.agent-card.good .ac-tag { color:#5fd08a; }
.agent-card .ac-bubble { font-family:'Inter',sans-serif; font-size:.98rem; line-height:1.45; color:#fff; background:rgba(255,255,255,.06); border-radius:10px; padding:12px 14px; }
.agent-card .ac-cap { font-family:'Inter',sans-serif; font-size:.82rem; color:rgba(244,242,239,.6); margin-top:10px; }
@media (max-width:640px){ .agent-compare { grid-template-columns:1fr; } .agent-card .ac-cap { display:none; } }

.intro-table { width:100%; max-width:720px; margin:0 auto; border:1px solid rgba(255,255,255,.14); border-radius:10px; overflow:hidden; background:rgba(16,14,16,.68); }
.intro-table table { width:100%; border-collapse:collapse; }
.intro-table th, .intro-table td { padding:12px 14px; text-align:center; border-bottom:1px solid rgba(255,255,255,.08); font-family:'Archivo',sans-serif; font-size:.94rem; }
.intro-table tr:last-child th, .intro-table tr:last-child td { border-bottom:none; }
.intro-table thead th { font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(244,242,239,.55); }
.intro-table th:first-child, .intro-table td:first-child { text-align:left; }
.intro-table tbody th { color:#fff; font-weight:600; }
.intro-table .us { background:rgba(184,32,28,.15); }
.intro-table .us th { color:#e0855d; }
.intro-table .win { color:#5fd08a; }
.intro-table .lose { color:#e0725d; }

@media (max-width:560px){
  .intro-table th, .intro-table td { padding:9px 8px; font-size:.76rem; }
  .agent-card { padding:15px; }
  .agent-card .ac-bubble { font-size:.9rem; }
  .ib-media { margin-top:20px; }
}