/* BMT marketing motion/polish — shared enhancement layer.
   Effects ported by hand from the animata library (no React/build dep).
   Deliberately subtle: elevates the navy/cream/gold editorial tone, never flashy.
   All motion is gated by JS (it bails under prefers-reduced-motion) AND by the
   reduced-motion block at the bottom — belt and suspenders. Gold = 201,161,74. */

/* Keep the SPA slide (a brief ~28px translate) from spawning a horizontal
   scrollbar. `clip` (not `hidden`) does NOT create a scroll container, so it
   leaves the homepage's position:sticky hero working. */
body.bmt-mkt{ overflow-x:clip; }

/* ── Scroll-progress bar (element injected by enhance.js) ───────────────────── */
.bmt-fx-progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg, rgba(201,161,74,.35), #c9a14a);
  box-shadow:0 0 10px rgba(201,161,74,.5);
  z-index:9999; pointer-events:none;
  transition:width .08s linear;
}

/* ── Scroll reveal (one-shot; .bmt-fx-in added on first intersection) ───────── */
[data-fx~="reveal"]{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--fx-delay, 0ms);
  will-change:opacity, transform;
}
[data-fx~="reveal"].bmt-fx-in{ opacity:1; transform:none; }

/* ── Soft gold cursor spotlight on card surfaces ───────────────────────────── */
[data-fx~="glow"]{
  position:relative; isolation:isolate;
  transition:box-shadow .4s ease, border-color .4s ease;
}
[data-fx~="glow"]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:1;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
            rgba(201,161,74,.13), transparent 62%);
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
[data-fx~="glow"]:hover::after{ opacity:1; }
[data-fx~="glow"]:hover{
  border-color:rgba(201,161,74,.32);
  box-shadow:0 22px 60px -28px rgba(0,0,0,.7);
}
/* keep card content above the sheen overlay */
[data-fx~="glow"] > *{ position:relative; z-index:2; }

/* ── Primary CTA polish (scoped to marketing pages via body.bmt-mkt) ───────── */
.bmt-mkt .btn{
  position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.bmt-mkt .btn::after{
  content:""; position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); pointer-events:none;
}
.bmt-mkt .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px -10px rgba(201,161,74,.55);
}
.bmt-mkt .btn:hover::after{ animation:bmt-fx-shine .85s ease; }
@keyframes bmt-fx-shine{ to{ left:150%; } }

/* ── Verticals row (index) — subtle hover lift toward gold ─────────────────── */
.bmt-mkt .verticals span{ transition:transform .25s ease, color .25s ease; }
.bmt-mkt .verticals span:hover{ transform:translateY(-2px); color:var(--gold); }

/* ── Header: sticky bar that compacts to a small navbar on scroll ───────────── */
.bmt-mkt header{
  transition:padding .3s ease, background .3s ease, backdrop-filter .3s ease,
             border-color .3s ease;
}
.bmt-mkt header .brand{ transition:font-size .3s ease; }
.bmt-mkt header.bmt-fx-shrink{
  padding-top:12px; padding-bottom:12px;
  background:rgba(6,13,26,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bmt-mkt header.bmt-fx-shrink .brand{ font-size:21px; }

/* ── Fluid nav indicator (sliding gold underline that follows the tabs) ─────── */
/* Desktop only — on mobile the nav is a fixed dropdown, and forcing position:relative
   here (higher specificity than the mobile rule) kept it IN the header's flow,
   inflating the header to ~281px tall. Scope it so mobile keeps its fixed dropdown. */
@media (min-width:821px){ .bmt-mkt header nav{ position:relative; } }
.bmt-fx-navind{
  position:absolute; bottom:-4px; left:0; height:2px; width:0;
  background:var(--gold); border-radius:2px;
  transform:translateX(0); opacity:0; pointer-events:none;
  box-shadow:0 0 8px rgba(201,161,74,.55);
  transition:transform .35s cubic-bezier(.32,.72,0,1),
             width .35s cubic-bezier(.32,.72,0,1),
             opacity .25s ease;
}

/* ── Digitize-in: faint digital glow on the headline while it decodes ───────── */
.bmt-mkt h1.bmt-fx-digitizing{ text-shadow:0 0 12px rgba(201,161,74,.28); }

/* ── Footer: a slightly more shaded band, mirroring the header's dark tone ──── */
.bmt-mkt footer{
  background:rgba(6,13,26,.55);
  border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

/* ── Honor reduced-motion: show everything in its final state, no animation ── */
@media (prefers-reduced-motion: reduce){
  .bmt-fx-progress{ display:none; }
  [data-fx~="reveal"]{ opacity:1 !important; transform:none !important; transition:none !important; }
  [data-fx~="glow"]::after{ display:none; }
  .bmt-mkt .btn::after{ display:none; }
  .bmt-mkt .btn:hover{ transform:none; }
  .bmt-fx-navind{ display:none; }
  .bmt-mkt header, .bmt-mkt header .brand{ transition:none; }
}