/* Shop the Look case study ("Style it your way"): the hero, the before/after and the finale. The pinned story has its own sheet,
   e2-shopthelook-b.css (prefix stb-). Markup: src/_includes/e2/shopthelook/{hero,ba,finale}.njk. Real UI (Figma exports) stays crisp images;
   the world and the 3D objects are Higgsfield renders. App blue #0482AC to #00A8E8. The page itself stays the dark E2 template: only the
   stage and the clips take the world. */

.st-hero, .st-ba, .st-fin { --st-blue: #00a8e8; --st-blue-deep: #0482ac; --st-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- Hero ---------- */
.st-hero {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; width: 100%; border-radius: 32px;
}
.st-hero--b { background: #06243a; }
.st-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.st-hero__shade { position: absolute; inset: 0; z-index: -1; }
.st-hero--b .st-hero__shade { background: radial-gradient(120% 90% at 50% 45%, rgba(4,20,36,.25) 35%, rgba(4,20,36,.7) 100%); }
.st-hero__scene { position: absolute; inset: 0; --px: 0; --py: 0; perspective: 1800px; }

/* The real redesigned Looks screen, tilted towards the reader; the pointer leans it a few degrees more. */
.st-window {
  position: absolute; left: 50%; top: 50%; width: 50%; border-radius: 14px; overflow: hidden; z-index: 1;
  transform: translate(-50%, -50%) rotateX(calc(7deg - var(--py) * 4deg)) rotateY(calc(var(--px) * 6deg));
  transition: transform .2s linear;
}
.st-hero--b .st-window { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 50px 100px -20px rgba(0,10,24,.85), 0 30px 60px rgba(0,10,24,.5); }
.st-window img { display: block; width: 100%; height: auto; }

.st-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);
}
.st-hero--b .st-float { filter: drop-shadow(0 18px 26px rgba(0,10,24,.6)); }
.st-float img { display: block; width: 100%; height: auto; animation: st-bob var(--d) ease-in-out var(--delay) infinite alternate; }
.st-float--far { z-index: 0; opacity: .92; filter: blur(.6px); }
@keyframes st-bob {
  from { transform: translateY(-4%) rotate(calc(var(--r) * -1)); }
  to { transform: translateY(4%) rotate(var(--r)); }
}

/* ---------- Section headings ---------- */
.st-h { font-weight: 600; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -.05em; }

/* ---------- Before and after ---------- */
.st-ba { display: flex; flex-direction: column; gap: 32px; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--border); }
.st-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;
}
.st-tab:hover { color: #fff; }
.st-tab[aria-selected="true"] { background: #fff; color: #000; }
.st-ba__stage { display: flex; justify-content: center; padding: clamp(16px, 4vw, 48px); border-radius: 32px; background: var(--surface-1); }
.st-ba--b .st-ba__stage { background: linear-gradient(160deg, #06243a, #0a4568 60%, #0a5a86); }
.st-ba .e2-slider { width: min(100%, 920px); }
.st-ba .e2-slider__img { transition: opacity .25s ease; }
.st-ba.is-swapping .e2-slider__img { opacity: .2; }

/* ---------- Finale ---------- */
.st-fin { margin-top: clamp(48px, 8vw, 120px); }
.st-fin__frame { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; border-radius: 32px; container-type: inline-size; background: #06243a; }
.st-fin__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-fin__line {
  position: absolute; left: 0; right: 0; bottom: 6cqw; margin: 0; text-align: center; font-weight: 600; font-size: clamp(28px, 5.2vw, 72px); font-size: clamp(28px, 5.2cqw, 72px);
  line-height: 1; letter-spacing: -.05em; opacity: 0; transform: translateY(.4em); transition: opacity .8s ease .3s, transform .9s var(--st-spring) .3s;
}
.st-fin--b .st-fin__line { color: #fff; text-shadow: 0 .06em .5em rgba(0,20,40,.7); }
.st-fin.is-in .st-fin__line, .st-fin.is-still .st-fin__line { opacity: 1; transform: none; }

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 699px) {
  .st-hero { aspect-ratio: 4 / 5; border-radius: 20px; }
  .st-window { width: 88%; top: 48%; }
  .st-float { width: calc(var(--w) * 1.9); }
  .st-float[data-k="1"] { left: 5%; top: 4%; }
  .st-float[data-k="2"] { left: 74%; top: 3%; }
  .st-float[data-k="3"] { left: 6%; top: 77%; width: 22%; }
  .st-float[data-k="4"] { left: 64%; top: 77%; width: 26%; }
  .st-float[data-k="5"] { left: 78%; top: 80%; width: 15%; }
  .st-tab { padding: 8px 14px; }
  .st-tabs { border-radius: 20px; }
  .st-ba__stage, .st-fin__frame { border-radius: 20px; }
  .st-fin__frame { aspect-ratio: 4 / 5; }
  .st-fin__video { object-position: 50% 30%; }
  .st-fin__line { bottom: 8cqw; }
}

/* ---------- Reduced motion: no float, no tilt, nothing springs ---------- */
@media (prefers-reduced-motion: reduce) {
  .st-float img { animation: none !important; }
  .st-window, .st-fin__line { transition: none !important; }
}