/* Booster SEO case study: the Higgsfield hero and the "level up" score stage. Markup: src/_includes/e2/booster/*.njk.
   Real UI (Figma exports) stays crisp HTML/images on top; the worlds and the 3D medals are Higgsfield renders. */

/* ---------- Hero ---------- */
.bx-hero {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; width: 100%; border-radius: 32px; background: #07051a;
}
.bx-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* A light vignette keeps the floating window the brightest thing in the frame. */
.bx-hero__shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(4,2,16,.55) 100%); }
.bx-hero__scene { position: absolute; inset: 0; --px: 0; --py: 0; perspective: 1800px; }

/* The real dashboard, tilted towards the reader; the pointer leans it a few degrees more. */
.bx-window {
  position: absolute; left: 50%; top: 50%; width: 58%; border-radius: 14px; overflow: hidden; z-index: 1;
  transform: translate(-50%, -50%) rotateX(calc(7deg - var(--py) * 4deg)) rotateY(calc(var(--px) * 6deg));
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 50px 120px -20px rgba(70,40,190,.65), 0 30px 60px rgba(0,0,0,.55);
  transition: transform .2s linear;
}
.bx-window img { display: block; width: 100%; height: auto; }

/* Floating medals: the span carries the pointer parallax (deeper medals move more), the img the slow float. */
.bx-float {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: 2;
  translate: calc(var(--px) * var(--z) * 36px) calc(var(--py) * var(--z) * 24px);
  filter: drop-shadow(0 18px 30px rgba(20,8,60,.55));
}
.bx-float img { display: block; width: 100%; height: auto; animation: bx-bob var(--d) ease-in-out var(--delay) infinite alternate; }
.bx-float--far { z-index: 0; filter: drop-shadow(0 10px 20px rgba(20,8,60,.5)) blur(.6px); opacity: .9; }
@keyframes bx-bob {
  from { transform: translateY(-4%) rotate(calc(var(--r) * -1)); }
  to { transform: translateY(4%) rotate(var(--r)); }
}

/* ---------- Level up ---------- */
.bx-level { position: relative; height: 340vh; height: 340svh; }
.bx-level__sticky {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
  display: flex; align-items: center; justify-content: center;
}
.bx-stage {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; background: #05040f;
  aspect-ratio: 16 / 9; width: min(100%, calc((100svh - var(--header-h) - 48px) * 16 / 9));
}
.bx-stage__bg, .bx-stage__finale { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bx-stage__finale { z-index: 3; opacity: 0; transition: opacity .5s ease; }
.bx-stage__finale.is-on { opacity: 1; }
.bx-stage__glow {
  position: absolute; left: 50%; top: var(--mtop); width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 1;
  background: radial-gradient(closest-side, rgba(150,110,255,.55), rgba(120,80,255,.18) 55%, transparent 72%);
  opacity: .55; mix-blend-mode: screen; pointer-events: none;
}

/* Medals: one per level, placed exactly where the finale clip's first frame has the 100 medal. */
.bx-tier {
  position: absolute; left: 50%; top: var(--mtop); height: var(--mh); width: auto; z-index: 2;
  translate: -50% -50%; transform: scale(.55); opacity: 0;
  transition: transform .25s ease, opacity .2s ease, filter .3s ease;
  filter: drop-shadow(0 24px 40px rgba(10,4,40,.6));
}
.bx-tier.is-on { opacity: 1; transform: scale(1); transition: transform .75s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease; animation: bx-hover 3.2s ease-in-out .8s infinite alternate; }
@keyframes bx-hover { from { translate: -50% -50%; } to { translate: -50% calc(-50% - 2.5%); } }
.bx-stage.is-burst .bx-tier.is-on { animation: bx-flash .9s ease-out, bx-hover 3.2s ease-in-out .8s infinite alternate; }
@keyframes bx-flash { 0% { filter: brightness(2.4) drop-shadow(0 0 40px rgba(190,160,255,.9)); } 100% { filter: brightness(1) drop-shadow(0 24px 40px rgba(10,4,40,.6)); } }
.bx-stage.is-burst .bx-stage__glow { animation: bx-glow .9s ease-out; }
@keyframes bx-glow { 0% { opacity: 1; scale: 1.25; } 100% { opacity: .55; scale: 1; } }

/* Burst: a ring and ten four-point sparkles thrown out from the medal on each level-up. */
.bx-burst { position: absolute; left: 50%; top: var(--mtop); width: calc(var(--mh) * 1.1); aspect-ratio: 1; translate: -50% -50%; z-index: 2; pointer-events: none; }
.bx-burst::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 0 2px rgba(200,180,255,.9), 0 0 40px 6px rgba(150,110,255,.6), inset 0 0 40px 6px rgba(150,110,255,.5);
}
.bx-burst i {
  position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; opacity: 0; translate: -50% -50%;
  background: #f1ecff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 6px rgba(190,160,255,.9));
}
.bx-stage.is-burst .bx-burst::before { animation: bx-ring .9s cubic-bezier(.2,.8,.2,1); }
.bx-stage.is-burst .bx-burst i { animation: bx-spark 1s cubic-bezier(.2,.8,.2,1); }
.bx-stage.is-burst .bx-burst i:nth-child(odd) { animation-duration: 1.2s; }
@keyframes bx-ring { 0% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 1.7; } }
@keyframes bx-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--dist) * -1)) scale(1); }
}

/* Score readout and the real progress bar */
.bx-score { position: absolute; left: 4%; top: 6%; z-index: 4; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.bx-score__label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.bx-score__num { font-weight: 600; font-size: clamp(56px, 8vw, 128px); line-height: .85; letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 6px 40px rgba(120,80,255,.5); }
.bx-bar {
  position: absolute; left: 50%; bottom: 5%; translate: -50% 0; z-index: 4; width: min(64%, 760px);
  padding: 10px 18px 6px; border-radius: 14px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.bx-bar img { display: block; width: 100%; height: auto; }
.bx-bar__fill { position: absolute; left: 18px; right: 18px; top: 10px; width: calc(100% - 36px); clip-path: inset(0 calc(100% - var(--fill)) 0 0); }

/* ---------- Section headings (same scale as the story title) ---------- */
.bx-h { font-weight: 600; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -.05em; }

/* ---------- Onboarding: four real cards fanned over a calm backdrop ---------- */
.bx-flow { position: relative; aspect-ratio: 16 / 9; border-radius: 32px; overflow: hidden; isolation: isolate; background: #06040f; }
.bx-flow__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; animation: bx-drift 40s ease-in-out infinite alternate; }
@keyframes bx-drift { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1%); } }
.bx-flow__cards { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; perspective: 1600px; }
.bx-card {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); border-radius: 12px;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transform-style: preserve-3d;
  opacity: 0; translate: 0 48px;
  transition: opacity .7s ease calc(var(--k) * .16s), translate 1s var(--ease-out) calc(var(--k) * .16s);
}
.bx-flow.is-in .bx-card { opacity: 1; translate: 0 0; }
.bx-card img {
  display: block; width: 100%; height: auto; border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 90px -20px rgba(60,30,170,.7), 0 18px 40px rgba(0,0,0,.5);
  animation: bx-bob2 7s ease-in-out calc(var(--k) * -1.8s) infinite alternate;
}
@keyframes bx-bob2 { from { transform: translateY(-1.5%); } to { transform: translateY(1.5%); } }
.bx-card__n { position: absolute; left: 2px; top: -26px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.bx-card--welcome { --x: 4%; --y: 10%; --w: 41%; --ry: 14deg; --rx: 4deg; }
.bx-card--audit { --x: 9%; --y: 56%; --w: 35%; --ry: 10deg; }
.bx-card--score { --x: 53%; --y: 9%; --w: 36%; --ry: -10deg; }
.bx-card--summary { --x: 50%; --y: 30%; --w: 45%; --ry: -12deg; --rx: 3deg; }
/* the audit card is "running": a blue beam passes over its document icon */
.bx-card__scan {
  position: absolute; left: 45%; width: 10%; top: 14%; height: 5%; border-radius: 4px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(70,120,255,.55), transparent); mix-blend-mode: multiply;
  animation: bx-scan 1.6s ease-in-out infinite alternate;
}
@keyframes bx-scan { from { top: 14%; } to { top: 54%; } }

/* ---------- Improve score: the feature tiles, illustrations moving ---------- */
.bx-feat { display: flex; flex-direction: column; gap: 40px; }
.bx-feat__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bx-ft {
  display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 18px; border-radius: 20px; background: #fff; color: #111;
  opacity: 0; translate: 0 28px; transition: opacity .6s ease calc(var(--k) * .07s), translate .8s var(--ease-out) calc(var(--k) * .07s);
}
.bx-feat.is-in .bx-ft { opacity: 1; translate: 0 0; }
.bx-ft__svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.bx-ft__body { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
.bx-ft__name { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.bx-ft__line, .bx-ft__status { font-size: 14px; line-height: 1.4; color: #55555d; }
.bx-ft__status { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.bx-switch { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: #dcdce2; transition: background-color .3s ease; }
.bx-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.bx-ft.is-on .bx-switch { background: #7b4dea; }
.bx-ft.is-on .bx-switch::after { transform: translateX(14px); }

/* Illustration parts (classes added by scripts/build_features.py). fill-box makes each part turn about its own centre. */
.bx-ft__svg .ix-spin, .bx-ft__svg .ix-target, .bx-ft__svg .ix-shrink, .bx-ft__svg .ix-gp, .bx-ft__svg .ix-type { transform-box: fill-box; transform-origin: center; }
.bx-ft__svg .ix-spin { animation: ix-spin 7s linear infinite; }
@keyframes ix-spin { to { rotate: 360deg; } }
.bx-ft__svg .ix-twinkle { transform-box: fill-box; transform-origin: center; animation: ix-pulse 2.4s ease-in-out infinite; }
.bx-ft__svg .ix-gp { animation: ix-gp 3.2s ease-in-out infinite; }
.bx-ft__svg .ix-gp.k1 { animation-delay: .12s; } .bx-ft__svg .ix-gp.k2 { animation-delay: .24s; } .bx-ft__svg .ix-gp.k3 { animation-delay: .36s; }
@keyframes ix-gp { 0%, 60%, 100% { scale: 1; } 70% { scale: 1.1; } 80% { scale: .97; } }
.bx-ft__svg .ix-tag { animation: ix-bob 2.6s ease-in-out infinite alternate; }
@keyframes ix-bob { from { translate: 0 -2px; } to { translate: 0 2px; } }
.bx-ft__svg .ix-target { animation: ix-pulse 2.4s ease-in-out infinite; }
@keyframes ix-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
.bx-ft__svg .ix-dart { animation: ix-dart 3s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes ix-dart { 0% { translate: 14px -14px; opacity: 0; } 22% { translate: 0 0; opacity: 1; } 85% { translate: 0 0; opacity: 1; } 100% { translate: 0 0; opacity: 0; } }
.bx-ft__svg .ix-word { animation: ix-word 3s ease-in-out infinite; }
@keyframes ix-word { 0%, 20%, 100% { stroke: #CAB5FC; } 30%, 80% { stroke: #7B4DEA; } }
.bx-ft__svg .ix-type { transform-origin: left center; animation: ix-type 3.4s ease-in-out infinite; }
@keyframes ix-type { 0% { scale: 0 1; } 35%, 85% { scale: 1 1; } 100% { scale: 0 1; } }
.bx-ft__svg .ix-line { animation: ix-fade 3.4s ease-in-out infinite; }
.bx-ft__svg .ix-line.k1 { animation-delay: .15s; } .bx-ft__svg .ix-line.k2 { animation-delay: .3s; } .bx-ft__svg .ix-line.k3 { animation-delay: .45s; }
@keyframes ix-fade { 0%, 15% { opacity: 0; } 40%, 85% { opacity: 1; } 100% { opacity: 0; } }
.bx-ft__svg .ix-link-a { animation: ix-link-a 3s ease-in-out infinite; }
.bx-ft__svg .ix-link-b { animation: ix-link-b 3s ease-in-out infinite; }
@keyframes ix-link-a { 0%, 25% { translate: 0 0; } 45%, 70% { translate: -5px 5px; } 85%, 100% { translate: 0 0; } }
@keyframes ix-link-b { 0%, 25% { translate: 0 0; } 45%, 70% { translate: 5px -5px; } 85%, 100% { translate: 0 0; } }
.bx-ft__svg .ix-spark { animation: ix-spark 3s ease-in-out infinite; }
@keyframes ix-spark { 0%, 25% { opacity: 1; } 45%, 70% { opacity: 0; } 85%, 100% { opacity: 1; } }
.bx-ft__svg .ix-newurl { animation: ix-newurl 2.6s ease-in-out infinite; }
@keyframes ix-newurl { 0%, 100% { stroke: #CAB5FC; } 50% { stroke: #7B4DEA; } }
.bx-ft__svg .ix-arrow { animation: ix-arrow 2.2s ease-in-out infinite alternate; }
.bx-ft__svg .ix-down { --dx: 0px; --dy: 4px; } .bx-ft__svg .ix-up { --dx: 0px; --dy: -4px; }
.bx-ft__svg .ix-left { --dx: -4px; --dy: 0px; } .bx-ft__svg .ix-right { --dx: 4px; --dy: 0px; }
@keyframes ix-arrow { from { translate: 0 0; } to { translate: var(--dx) var(--dy); } }
.bx-ft__svg .ix-shrink { animation: ix-shrink 2.2s ease-in-out infinite alternate; }
@keyframes ix-shrink { from { scale: 1; } to { scale: .88; } }
.bx-ft__svg .ix-knob { animation: ix-knob 3.6s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes ix-knob { 0%, 15% { translate: -40px 0; } 35%, 85% { translate: 0 0; } 100% { translate: -40px 0; } }
.bx-ft__svg .ix-track { animation: ix-track 3.6s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes ix-track { 0%, 15% { fill: #CEC2EA; } 35%, 85% { fill: #B9A3F2; } 100% { fill: #CEC2EA; } }
/* parts only move while the tiles are on screen */
.bx-feat:not(.is-in) .bx-ft__svg * { animation-play-state: paused; }

/* ---------- Before and after ---------- */
.bx-ba { display: flex; flex-direction: column; gap: 32px; }
.bx-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--border); }
.bx-tab {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text-3); background: none; border: 0; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; transition: background-color .2s ease, color .2s ease;
}
.bx-tab:hover { color: #fff; }
.bx-tab[aria-selected="true"] { background: #fff; color: #000; }
.bx-ba__stage { display: flex; justify-content: center; padding: clamp(16px, 4vw, 48px); border-radius: 32px; background: var(--surface-1); }
.bx-ba .e2-slider { aspect-ratio: 1000 / 740; width: min(100%, 920px); }
.bx-ba .e2-slider__img { transition: opacity .25s ease; }
.bx-ba.is-swapping .e2-slider__img { opacity: .2; }

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 999px) { .bx-feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .bx-flow { aspect-ratio: auto; padding: 56px 16px 28px; border-radius: 20px; }
  .bx-flow__cards { position: static; display: flex; flex-direction: column; gap: 44px; perspective: none; }
  .bx-card { position: relative; left: auto; top: auto; width: 100%; transform: none; }
  .bx-ft { padding: 8px 8px 14px; border-radius: 16px; }
  .bx-ft__name { font-size: 14px; } .bx-ft__line, .bx-ft__status { font-size: 12px; }
  .bx-tabs { border-radius: 20px; }
  .bx-hero { aspect-ratio: 4 / 5; border-radius: 20px; }
  .bx-window { width: 88%; top: 52%; }
  /* On a 4:5 phone frame the dashboard fills the middle band, so the medals sit above and below it. */
  .bx-float { width: calc(var(--w) * 1.9); }
  .bx-float[data-n="40"] { left: 6%; top: 5%; }
  .bx-float[data-n="60"] { left: 74%; top: 4%; }
  .bx-float[data-n="80"] { left: 8%; top: 76%; width: 20%; }
  .bx-float[data-n="100"] { left: 62%; top: 72%; width: 30%; }
  .bx-stage { aspect-ratio: 4 / 5; width: 100%; border-radius: 20px; }
  .bx-score { left: 6%; top: 5%; }
  .bx-bar { width: 90%; padding: 6px 10px 3px; border-radius: 10px; }
  .bx-bar__fill { left: 10px; right: 10px; top: 6px; width: calc(100% - 20px); }
}

/* ---------- Reduced motion: no float, no tilt, the stage shows level 100 without the clip ---------- */
@media (prefers-reduced-motion: reduce) {
  .bx-float img, .bx-tier.is-on, .bx-flow__bg, .bx-card img, .bx-card__scan, .bx-ft__svg * { animation: none !important; }
  .bx-card, .bx-ft { opacity: 1; translate: none; transition: none; }
  .bx-window { transform: translate(-50%, -50%); transition: none; }
  .bx-float { translate: none; }
  .bx-level { height: auto; }
  .bx-level__sticky { position: static; height: auto; padding: 24px 0; }
}