/* ==========================================================================
   HOME — Local CSS (Single Source of Truth)
   Built to layer cleanly on top of your global /styles.css
   - Does NOT redefine global :root theme tokens
   - Does NOT reset body / html / a / img (global already does)
   - Uses your global tokens: --bg, --fg, --muted, --accent, etc.
   - Avoids negative z-index so the hero video cannot disappear behind body paint
   ========================================================================== */

/* ==========================================================================
   01) HOME TOKENS + BASE
   ========================================================================== */

body.dex-home{
  --home-max: 1180px;
  --home-r: 22px;

  --home-glass: rgba(255,255,255,.06);
  --home-glass2: rgba(255,255,255,.09);

  --home-stroke: rgba(255,255,255,.14);
  --home-stroke2: rgba(255,255,255,.22);

  --home-ink: var(--fg);
  --home-muted: var(--muted);
  --home-muted2: rgba(255,255,255,0.55);

  background: var(--bg);
}

/* Utility wrapper used by the Home sections */
.dex-home .wrap{
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 0 22px;
}

/* Keep content above the fixed page background */
.dex-home .hero,
.dex-home main,
.dex-home footer{
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   02) PAGE BACKGROUND (below hero)
   JSON image ONLY. No gradient darkening.
   ========================================================================== */

.dex-home .homeBg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

  opacity: 0; /* tweak 0.35 to 0.80 */
  filter: brightness(1.08) contrast(1.06) saturate(1.08);
  mix-blend-mode: normal;


}

/* ==========================================================================
   03) HERO (dramatic gate)
   ========================================================================== */

.dex-home .hero{
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 0 54px;
  isolation: isolate;

  will-change: opacity, transform;
}

/* Video layer */
.dex-home .heroVideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  z-index: 0;

  filter: saturate(1.05) contrast(1.05);
  transform: translateZ(0);
  pointer-events: none;
}

/* Optional image layer (if used) */
.dex-home .heroBg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 55%;

  opacity: 1;
  will-change: opacity;
  transition: opacity .12s linear;
}

/* Hero darkening stays ONLY here */
.dex-home .heroOverlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(70% 55% at 50% 40%,
      rgba(10,10,14,.15) 0%,
      rgba(5,5,9,.72) 55%,
      rgba(5,5,9,.92) 100%),
    linear-gradient(to bottom,
      rgba(5,5,9,.10),
      rgba(5,5,9,.65));
  pointer-events: none;
}

.dex-home .heroGrain{
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .08;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="140" height="140" filter="url(%23n)" opacity=".55"/></svg>');
  mix-blend-mode: overlay;
  pointer-events: none;
}

.dex-home .heroInner{
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 18px;
  padding: 0 10px;
}

.dex-home .introLine{
  font-size: clamp(16px, 2.2vw, 22px);
  color: var(--home-muted);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s ease, transform .8s ease;

  position: relative;
  top: 70px;
}

.dex-home .logoHold{
  display: grid;
  place-items: center;
  gap: 14px;
  opacity: 0;
  transform: scale(1.02);
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.55));
  transition: opacity 1s ease, transform 1s ease;
}

.dex-home .logoMark{
  width: min(240px, 55vw);
  height: auto;
  display: block;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.dex-home .logoText{
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: .8px;
  font-weight: 650;
  margin: 0;
  color: var(--home-ink);
}

.dex-home .heroMeta{
  max-width: 780px;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--home-muted);
  line-height: 1.55;
  margin: 0;
}

.dex-home .scrollCue{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--home-muted2);
  font-size: 13px;
  opacity: .85;
  user-select: none;
  z-index: 3;
}

.dex-home .scrollPip{
  width: 28px;
  height: 44px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.22);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,.18);
}

.dex-home .scrollPip::after{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  position: absolute;
  top: 10px;
  animation: homePip 1.35s ease-in-out infinite;
}

@keyframes homePip{
  0%{transform: translateY(0); opacity: .25}
  45%{opacity: .8}
  100%{transform: translateY(16px); opacity: .18}
}

/* Intro states (driven by your JS) */
body.dex-home.intro .introLine{opacity: 1; transform: translateY(0)}
body.dex-home.intro .logoHold{opacity: 0; transform: scale(1.02)}
body.dex-home.intro.step-logo .introLine{opacity: 0; transform: translateY(-6px)}
body.dex-home.intro.step-logo .logoHold{opacity: 1; transform: scale(1.0)}
body.dex-home.intro-skip .introLine{display:none}
body.dex-home.intro-skip .logoHold{opacity: 1; transform: scale(1.0)}

/* ==========================================================================
   03.x) CINEMATIC INTRO SEQUENCE
   - black screen + intro line
   - black beat
   - reveal hero bg + logoHold
   ========================================================================== */

/* ==========================================================================
   INTRO VISIBILITY CHOREOGRAPHY (PUT AT END OF FILE)
   ========================================================================== */

/* Default hard gate */
body.dex-home:not(.home-ready) .homeBg,
body.dex-home:not(.home-ready) .heroBg,
body.dex-home:not(.home-ready) .heroVideo,
body.dex-home:not(.home-ready) .logoHold,
body.dex-home:not(.home-ready) .introLine,
body.dex-home:not(.home-ready) .scrollCue{
  opacity: 0;
}

/* Scroll cue only after hero is visible */
body.dex-home.intro:not(.step-reveal) .scrollCue{
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}
body.dex-home.intro.step-reveal .scrollCue{
  opacity: .85;
  transform: translateX(-50%) translateY(0);
}

/* STEP 1: black screen, intro line only */
body.dex-home.intro .heroBg,
body.dex-home.intro .heroVideo,
body.dex-home.intro .homeBg,
body.dex-home.intro .logoHold{
  opacity: 0;
}
body.dex-home.intro .introLine{
  opacity: 1;
  transform: translateY(0);
}

/* STEP 2: line fades out */
body.dex-home.intro.step-line-off .introLine{
  opacity: 0;
  transform: translateY(-6px);
}

/* STEP 3: logo only, still black */
body.dex-home.intro.step-logo .logoHold{
  opacity: 1;
  transform: translateY(0) scale(1.0);
}

/* CRITICAL: keep hero media OFF until step-reveal */
body.dex-home.intro.step-logo .heroBg,
body.dex-home.intro.step-logo .heroVideo{
  opacity: 0;
}

/* STEP 4: reveal hero media AFTER logo */
body.dex-home.intro.step-reveal .heroBg,
body.dex-home.intro.step-reveal .heroVideo{
  opacity: 1;
}

/* Keep page background OFF until step-bg */
body.dex-home.intro.step-reveal .homeBg{
  opacity: 0;
}

/* STEP 5: now fade page background in */
body.dex-home.intro.step-bg .homeBg{
  opacity: .65;
}

/* Hero media fade timing */
.dex-home .heroBg,
.dex-home .heroVideo{
  transition: opacity 2000ms ease;
  will-change: opacity;
}
/* ==========================================================================
   04) SECTION TITLES
   ========================================================================== */

.dex-home .sectionTitle{
  font-size: 18px;
  color: var(--home-muted);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin: 0 0 14px;
}


/* ==========================================================================
   05) ACTION STRIP (conversion)
   - Frosted command bar
   ========================================================================== */

.dex-home .actions{
  padding: 34px 0 14px;
}

.dex-home .actionPanel{
  position: relative;
  border-radius: calc(var(--home-r) + 4px);

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 34px 130px rgba(0,0,0,.55);

  backdrop-filter: blur(12px) saturate(1.18);
  -webkit-backdrop-filter: blur(12px) saturate(1.18);

  padding: 20px 22px;
  display: flex;
  gap: 18px;
  align-items: center;

  width: fit-content;
  max-width: 920px;
  margin: 0 auto;
  justify-content: flex-start;

  overflow: visible; /* pills hover cut off fix */
}

/* Subtle top sheen */
.dex-home .actionPanel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(90% 120% at 20% 0%,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,0) 60%);
  opacity: .8;
}

.dex-home .actionLeft{ min-width: 0; }

/* START HERE: neutral + premium */
.dex-home .actionTitle{
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(245,245,247,.72);
  margin-bottom: 12px;
}

.dex-home .actionChips{
  display: flex;
  gap: 12px;

  max-width: 620px;
  overflow-x: auto;
  overflow-y: visible;

  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  padding: 6px 16px 6px 0;
  scroll-padding-right: 16px;
}

.dex-home .actionChips::-webkit-scrollbar{ display: none; }

.dex-home .chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 14px;
  border-radius: 999px;

  border: 1px solid var(--home-stroke);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.88);

  font-size: 14px;
  line-height: 1;

  transition: border-color .18s ease, transform .18s ease, background .18s ease;
  flex: 0 0 auto;
  transform: translateZ(0);
}

.dex-home .chip:hover{
  border-color: rgba(255,255,255,.26);
  background: rgba(0,0,0,.24);
  transform: translateY(-1px);
}

/* Dots: subtle graphite, no gold */
.dex-home .chipDot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(245,245,247,.35);
  box-shadow: none;
}

/* Hover + focus: bring back the gold outline (clean, not cheap) */
.dex-home .chip:hover,
.dex-home .chip:focus-visible{
  border-color: rgba(232,198,139,.85);
  background: rgba(0,0,0,.24);
  box-shadow:
    0 0 0 1px rgba(232,198,139,.18) inset,
    0 10px 26px rgba(0,0,0,.32);
  transform: translateY(-1px);
  outline: none;
}

/* Optional: make the dot also “wake up” on hover */
.dex-home .chip:hover .chipDot,
.dex-home .chip:focus-visible .chipDot{
  box-shadow: 0 0 0 4px rgba(232,198,139,.12);
}

.dex-home .actionRight{
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  gap: 10px;

  margin-left: auto;
  min-width: 150px; /* keeps it stable */
}

.dex-home .actionPrimary{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 20px;
  border-radius: 999px;

 border: 1px solid rgba(232,198,139,.42);
background: linear-gradient(180deg,
  rgba(255,255,255,.08) 0%,
  rgba(255,255,255,.03) 55%,
  rgba(0,0,0,.12) 100%);
color: rgba(245,245,247,.92);

  font-weight: 650;
  font-size: 14px;
  letter-spacing: .45px;

  box-shadow:
    0 14px 42px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08);

  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dex-home .actionPrimary:hover{
  transform: translateY(-1px);
  border-color: rgba(232,198,139,.82);
  box-shadow:
    0 18px 58px rgba(0,0,0,.40),
    0 0 0 1px rgba(232,198,139,.18) inset;
}

.dex-home .actionSub{
  font-size: 13px;
  color: var(--home-muted2);
  text-align: center;
  line-height: 1.25;
}


/* ==========================================================================
   ACTION STRIP — Mobile chips wrap into 2 to 3 rows
   ========================================================================== */

@media (max-width: 768px){

  /* Let chips wrap instead of scroll */
  .dex-home .actionChips{
    display: flex;
    flex-wrap: wrap;
    white-space: normal;

    overflow-x: visible;
    overflow-y: visible;

    max-width: 100%;
    padding: 2px 0 0;
    gap: 10px;
  }

  /* Make chips take a “row friendly” width */
  .dex-home .chip{
    flex: 1 1 calc(50% - 10px);   /* 2 columns by default */
    justify-content: center;
    text-align: center;

    padding: 11px 12px;
    font-size: 13.5px;
  }

  /* If the screen is small, go 1 per row (prevents ugly truncation) */
  @media (max-width: 380px){
    .dex-home .chip{
      flex-basis: 100%;
    }
  }
}

/* ==========================================================================
   ACTION STRIP — Mobile: center Contact + subtext
   ========================================================================== */

@media (max-width: 768px){

  .dex-home .actionPanel{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }

  .dex-home .actionLeft{
    width: 100%;
  }

  .dex-home .actionRight{
    width: 100%;
    margin-left: 0;
    min-width: 0;
    justify-items: center;
  }

  .dex-home .actionPrimary{
    margin: 0 auto;
  }

  .dex-home .actionSub{
    text-align: center;
  }
}
/* ==========================================================================
   HOME — Start Here chip pulse (Events-style)
   Drop this into your home CSS (after .chip styles so it wins)
   ========================================================================== */

/* Glow-only pulse with a long rest between hits */
@keyframes dex-home-pulse-spaced{
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); }
  8%   { box-shadow: 0 0 0 6px rgba(255,255,255,0.20); } /* peak */
  23%  { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); }    /* done */
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); }    /* rest */
}

/* Make sure chips can show the glow cleanly */
.dex-home .chip{
  position: relative;
  isolation: isolate; /* keeps glow from blending weird */
  will-change: box-shadow;
}

/* When JS adds .pulse-run */
.dex-home .chip.pulse-run{
  animation: dex-home-pulse-spaced 5.2s ease-out 1s 2;
}

/* Optional: slightly tighter glow so it feels more “Dexxtra” (not AI neon) */
.dex-home .chip.pulse-run{
  box-shadow: 0 0 0 0 rgba(255,255,255,0.0); /* explicit reset */
}

/* ACTION STRIP: prevent chip glow clipping inside the scroll container */
.dex-home .actionChips{
  padding: 6px 16px 6px 10px;   /* was: 6px 16px 6px 0 */
  scroll-padding-left: 16px;   /* nicer snap feel */
}

/* ==========================================================================
   06) VERTICAL STACK (premium)
   ========================================================================== */

.dex-home .laneStack{ padding: 18px 0 10px; }

.dex-home #laneTitle{
  position: relative;
  left: 110px;
}

.dex-home .stack{
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.5vh, 32px);
  padding: 10px 0 16px;
}

/* Width cap for the list */
.dex-home section.laneStack .stack{
  max-width: 750px;
  margin: 0 auto;
}

.dex-home section.laneStack .stackLink{ width: 100%; }

.dex-home .stackCard{
  position: relative;
  border-radius: var(--home-r);
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 22px 95px rgba(0,0,0,.42);

  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);

  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  scroll-margin-top: 18px;
}

/* Outer glow layer */
.dex-home .stackCard::before{
  content: "";
  position: absolute;
  inset: -60% -40% auto -40%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(232,198,139,.14), rgba(232,198,139,0));
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}

/* Inner sheen */
.dex-home .stackCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(90% 120% at 20% 0%,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,0) 55%);
  opacity: .75;
}

.dex-home .stackCard:hover{
  transform: translateY(-2px);
  border-color: var(--home-stroke2);
  background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.04));
  box-shadow: 0 28px 110px rgba(0,0,0,.40);
}

.dex-home .stackCard:hover::before{ opacity: 1; }

.dex-home .stackInner{
  padding: 18px 18px 16px;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 128px;
}

.dex-home section.laneStack .stackInner{
  grid-template-columns: 200px 1fr auto;
}

.dex-home .stackLeft{ display:flex; flex-direction:column; gap:8px; }

.dex-home .stackTitle{
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
}

.dex-home .stackTag{
  display: inline-flex;
  width: max-content;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(232,198,139,.35);
  color: var(--accent);
  background: rgba(232,198,139,.06);
}

.dex-home .stackCopy{ display:flex; flex-direction:column; gap:6px; min-width:0; }

.dex-home .stackRole{
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dex-home .stackPoints{
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.45;
}

.dex-home .stackPoints div{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dex-home .stackEnter{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.86);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .92;
}

.dex-home .stackArrow{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.dex-home .stackCard:hover .stackArrow{
  transform: translateX(2px);
  border-color: rgba(232,198,139,.35);
  background: rgba(0,0,0,.22);
}

.dex-home .stackLink{ display:block; }


/* Highlight state (lane jump) */
.dex-home .stackCard.is-highlight{
  border-color: rgba(232,198,139,.85);
  box-shadow: 0 28px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(232,198,139,.25) inset;
}

.dex-home .stackCard.is-highlight::before{ opacity: 1; }

@keyframes lanePulse{
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

.dex-home .stackCard.is-highlight{
  animation: lanePulse var(--hl-ms, 2200ms) ease;
}
.dex-home .stackCard:hover::after{
  opacity: .35; /* was .75 */
}

/* ==========================================================================
   07) CLOSER + FOOTER
   ========================================================================== */

.dex-home .closer{
  padding: 44px 0 74px;
  text-align: center;
}

.dex-home .closerLine{
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 650;
  letter-spacing: .6px;
  margin: 0;
}

.dex-home .closerSub{
  margin: 12px auto 0;
  max-width: 780px;
  color: var(--home-muted);
  line-height: 1.6;
  font-size: 15px;
}

.dex-home .closer .closerLine,
.dex-home .closer .closerSub{
  position: relative;
  top: 15px;
}

.dex-home .homeFooter{
  padding: 18px 22px 24px;
  font-size: 15px;
  text-align: left;
  color: rgba(245,245,247,.78);
}

.dex-home .homeFooter .copyright{
  position: relative;
  top: 4px;
}


/* ==========================================================================
   08) RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) and (orientation: portrait){
  .dex-home .actionPanel{ flex-direction:column; align-items:stretch; width:100%; max-width:none; padding:18px; }
  .dex-home .actionRight{ align-items:stretch; }
  .dex-home .actionPrimary{ width:100%; }
  .dex-home .actionChips{ max-width:none; }

  .dex-home section.laneStack .stack{ max-width:none; }
  .dex-home section.laneStack .stackInner{ grid-template-columns: 1fr auto; }

  .dex-home .stackInner{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "left enter"
      "copy enter";
    row-gap: 10px;
    min-height: unset;
  }

  .dex-home .stackLeft{ grid-area:left; }
  .dex-home .stackCopy{ grid-area:copy; }
  .dex-home .stackEnter{
  grid-area: enter;
  align-self: center;
  justify-self: end;
}

  .dex-home .stackRole{ white-space:normal; }
  .dex-home .stackPoints div{ white-space:normal; }
}

@media (max-width: 520px){
  .dex-home .hero{ min-height:86vh; padding-top:64px; }
  .dex-home .stackInner{ padding:16px 16px 14px; }
  .dex-home .stackTitle{ font-size:20px; }
  .dex-home .stackEnter span{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .dex-home .scrollPip::after{ animation:none; }
  .dex-home .stackCard,
  .dex-home .chip,
  .dex-home .introLine,
  .dex-home .logoHold{ transition:none; }
}


/* =========================================================
   ACTION PANEL
   ========================================================= */

.dex-home .actionPanel{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}

.dex-home .actionPanel.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Dramatic first-load override */
body.intro-mode .dex-home .actionPanel{
  transform: translateY(40px);
}

body.intro-mode .dex-home .actionPanel.reveal-dramatic{
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
}



/* =========================================================
   STACK CARDS (base hidden state)
   ========================================================= */

.dex-home .stackCard{
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22,.61,.36,1);
}

.dex-home .stackCard.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   HOME — Intro Offline Clamp (no hand cursor while hidden)
   ========================================================================== */

body.dex-home.intro-mode .actionPanel,
body.dex-home.intro-mode #actionChips .chip,
body.dex-home.intro-mode .stackLink,
body.dex-home.intro-mode .stackCard,
body.dex-home.intro-mode .stackInner{
  pointer-events: none;
  cursor: default;
}

body.dex-home.intro-mode .stackLink *,
body.dex-home.intro-mode #actionChips .chip *{
  cursor: default;
}