/* Sweet Spot case study: the hero, the scroll story ("The thank-you moment"), the before/after and the finale. Markup:
   src/_includes/e2/sweetspot/*.njk. Real UI (Figma exports) stays crisp images; the thank-you page mock and the captions are HTML; the
   world and the 3D objects are Higgsfield renders. App pink #FF2E9F; the world is dusk berry (#2A0A24 to #8A1260). The page itself stays
   the dark E2 template: only the stage and the clips take the world. Sizes inside a stage use em on a 1cqw base (the frame is an
   inline-size container) with a vw fallback first.
   Without JS, with reduced motion, on a short screen or a phone, a story is static (its last state, then the steps as a list): `.is-live`
   (set by e2-sweetspot.js) is what pins it. */

.ss-hero, .ss-story, .ss-ba, .ss-fin { --ss-pink: #ff2e9f; --ss-pink-deep: #c2007a; --ss-spring: cubic-bezier(.34, 1.56, .64, 1); }

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

/* The real redesigned Offers screen, tilted towards the reader; the pointer leans it a few degrees more. */
.ss-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;
}
.ss-hero--a .ss-window { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 50px 100px -20px rgba(24,0,20,.85), 0 30px 60px rgba(24,0,20,.5); }
.ss-window img { display: block; width: 100%; height: auto; }

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

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

/* ---------- The story: static by default; .is-live pins it ---------- */
.ss-story { --head: 128px; --pad-b: 24px; position: relative; }
.ss-col { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.ss-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow count" "title title" "note note";
  align-items: center; gap: 4px 16px;
}
.ss-eyebrow { grid-area: eyebrow; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
.ss-title { grid-area: title; font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.05em; }
.ss-note { grid-area: note; font-size: 14px; line-height: 1.4; color: var(--text-3); max-width: 70ch; }
.ss-count {
  grid-area: count; display: none; gap: .45em; align-items: baseline; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--text-3); border: 1px solid var(--border-strong);
}
.ss-count b { font-weight: 600; color: #fff; }

/* The stage. Static: a padded box over the world; live: a 16:9 frame. */
.ss-frame { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; padding: 16px; container-type: inline-size; background: #2a0a24; }
.ss-world { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ss-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ss-story--a .ss-frame::before { background: radial-gradient(120% 100% at 50% 40%, rgba(42,10,36,.25), rgba(42,10,36,.6)); }
.ss-grid { display: grid; gap: 16px; font-size: 14px; }

/* The window: a real screen in a browser-like frame. */
.ss-win { border-radius: 1em; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 2.4em 4.4em -1.6em rgba(24,0,20,.7); }
.ss-win__bar { display: flex; gap: .45em; align-items: center; height: 2.1em; padding: 0 1em; background: #f1f1f3; }
.ss-win__bar i { width: .7em; height: .7em; border-radius: 50%; background: #d4d4d8; }
.ss-win__view { position: relative; overflow: hidden; background: #f6f6f7; }
.ss-crop { position: relative; display: block; overflow: hidden; border-radius: .8em; background: #f6f6f7; width: 100%; }
.ss-crop img { display: block; max-width: none; height: auto; }

/* ---------- Look a: the thank-you page ---------- */
.ss-shop { display: flex; justify-content: center; }
.ss-page {
  position: relative; width: 100%; max-width: 46em; font-size: 1em; color: #1a1a1a; background: #fff; border-radius: 1.4em; padding: 1.6em 1.8em 1.4em;
  box-shadow: 0 2.4em 4.4em -1.6em rgba(24,0,20,.75);
}
.ss-tag { position: absolute; right: 1.2em; top: 1.1em; font-family: var(--mono); font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: #6b6b73; background: #f1f1f3; padding: .3em .7em; border-radius: 999px; }
.ss-store { font-weight: 600; font-size: 1.1em; letter-spacing: -.02em; margin-bottom: 1em; }
.ss-conf { display: flex; align-items: center; gap: .8em; margin-bottom: 1.1em; }
.ss-conf__tick { flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--ss-pink); display: grid; place-items: center; }
.ss-conf__tick svg { width: 1.3em; height: 1.3em; }
.ss-conf__t { font-weight: 600; font-size: 1.35em; letter-spacing: -.03em; }

.ss-offer {
  border-radius: 1em; padding: 1em 1.1em 1.1em; margin-bottom: 1.1em; background: #fff1f8; box-shadow: 0 0 0 1px #ffc2e2;
  opacity: 0; transform: translateY(1.6em) scale(.97); transform-origin: 50% 100%; transition: opacity .45s ease, transform .6s var(--ss-spring);
}
.ss-offer__text { font-weight: 600; font-size: 1.1em; letter-spacing: -.02em; margin-bottom: .8em; }
.ss-offer__row { display: flex; align-items: center; gap: 1em; margin-bottom: .9em; }
.ss-offer__art { flex: none; width: 5.4em; height: 5.4em; border-radius: .8em; background: #fff; box-shadow: 0 0 0 1px #ffd6ea; display: grid; place-items: center; }
.ss-offer__gift { width: 82%; height: auto; opacity: 0; transform: scale(.5) rotate(-10deg); transition: opacity .3s ease, transform .6s var(--ss-spring); filter: drop-shadow(0 .5em .5em rgba(194,0,122,.3)); }
.ss-offer__prod { display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.ss-offer__name { font-weight: 600; letter-spacing: -.01em; }
.ss-offer__disc { align-self: flex-start; display: inline-flex; gap: .3em; align-items: baseline; font-size: .95em; color: var(--ss-pink-deep); background: #ffd6ea; padding: .2em .7em; border-radius: 999px; opacity: 0; transform: scale(.7); transform-origin: 0 50%; transition: opacity .25s ease, transform .5s var(--ss-spring); }
.ss-offer__disc b { font-size: 1.15em; letter-spacing: -.02em; }
.ss-offer__btn {
  display: block; text-align: center; font-weight: 600; color: #fff; background: #1a1a1a; border-radius: .7em; padding: .8em 1em;
  transition: transform .18s ease, background-color .2s ease, box-shadow .2s ease;
}

.ss-sum { border-top: 1px solid #ececef; padding-top: .9em; }
.ss-sum__head { position: relative; display: flex; align-items: flex-end; height: 4.2em; margin-bottom: .6em; }
.ss-bag { position: relative; display: block; height: 4.2em; aspect-ratio: 508 / 640; }
.ss-bag img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-bag__dim { filter: grayscale(1) brightness(1.4) opacity(.45); }
.ss-bag__full { clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0); transition: clip-path .9s cubic-bezier(.3, .7, .2, 1); }
.ss-bag__n { position: absolute; right: -.7em; top: -.2em; min-width: 1.7em; height: 1.7em; padding: 0 .3em; border-radius: 999px; background: var(--ss-pink); color: #fff; font-size: .8em; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.ss-checkobj { height: 3em; width: auto; margin: 0 0 .1em 1.4em; opacity: 0; transform: scale(.3) rotate(-18deg); transform-origin: 50% 70%; transition: opacity .2s ease, transform .6s var(--ss-spring); filter: drop-shadow(0 .4em .4em rgba(194,0,122,.35)); }
.ss-line { display: flex; align-items: center; gap: .8em; padding: .5em 0; font-size: .95em; }
.ss-line__img { flex: none; width: 2.6em; height: 2.6em; border-radius: .6em; background: linear-gradient(135deg, #f1f1f3, #e4e4e8); }
.ss-line__img--gift { background: #ffd6ea; box-shadow: inset 0 0 0 2px #fff; }
.ss-line span { flex: 1; min-width: 0; font-weight: 500; }
.ss-line small { display: block; font-size: .8em; color: var(--ss-pink-deep); font-weight: 500; }
.ss-line em { font-style: normal; font-size: .85em; min-width: 1.8em; text-align: center; padding: .15em .5em; border-radius: 999px; background: #f1f1f3; color: #52525b; }
.ss-line--added { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; transition: max-height .5s ease, opacity .4s ease, padding .4s ease; }

/* The states, drawn by the scroll (is-offer from step 3, is-gift 4, is-disc 6, is-press, is-added); the static story shows them all. */
.ss-frame.is-offer .ss-offer, .ss-story:not(.is-live) .ss-offer { opacity: 1; transform: none; }
.ss-frame.is-gift .ss-offer__gift, .ss-story:not(.is-live) .ss-offer__gift { opacity: 1; transform: none; }
.ss-frame.is-disc .ss-offer__disc, .ss-story:not(.is-live) .ss-offer__disc { opacity: 1; transform: none; }
.ss-frame.is-press .ss-offer__btn { transform: scale(.94); background: var(--ss-pink); box-shadow: 0 0 0 .35em rgba(255,46,159,.28); }
.ss-frame.is-added .ss-offer__btn, .ss-story:not(.is-live) .ss-offer__btn { background: var(--ss-pink); }
.ss-frame.is-added .ss-bag__full, .ss-story:not(.is-live) .ss-bag__full { --fill: 100%; }
.ss-frame.is-added .ss-checkobj, .ss-story:not(.is-live) .ss-checkobj { opacity: 1; transform: none; }
.ss-frame.is-added .ss-line--added, .ss-story:not(.is-live) .ss-line--added { max-height: 4em; opacity: 1; padding: .5em 0; }
.ss-frame:not(.is-added) .ss-bag { --fill: 0%; }
.ss-story:not(.is-live) .ss-bag__n span { font-size: 0; }
.ss-story:not(.is-live) .ss-bag__n span::after { content: "2"; font-size: 1rem; }

/* The Create Offer window: panned by --ty (% of its own height), spotlit by --hy / --hh. */
.ss-win__page { display: grid; transform: translateY(calc(var(--ty) * -1)); transition: transform .65s cubic-bezier(.3, .7, .2, 1); position: relative; }
.ss-win__img { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
.ss-win__img--thanks { opacity: 0; transition: opacity .35s ease; }
.ss-frame[data-mode="thanks"] .ss-win__img--thanks { opacity: 1; }
.ss-spot {
  position: absolute; left: 3.5%; width: 95%; top: var(--hy); height: var(--hh); border-radius: 7px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--ss-pink), 0 0 0 100vmax rgba(30,4,26,.24); transition: top .55s cubic-bezier(.3, .7, .2, 1), height .55s cubic-bezier(.3, .7, .2, 1);
}
.ss-cap { position: relative; display: grid; padding: .9em 1.1em 1em; background: #fff; color: #1a1a1a; }
.ss-cap__item { grid-area: 1 / 1; display: flex; gap: .8em; align-items: flex-start; opacity: 0; transform: translateY(.5em); transition: opacity .3s ease, transform .4s ease; pointer-events: none; }
.ss-cap__item.is-on { opacity: 1; transform: none; }
.ss-cap__n { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: var(--ss-pink); color: #fff; font-weight: 600; font-size: .85em; font-variant-numeric: tabular-nums; }
.ss-cap__txt { display: flex; flex-direction: column; gap: .15em; min-width: 0; font-size: .95em; line-height: 1.35; color: #52525b; }
.ss-cap__txt b { color: #1a1a1a; font-weight: 600; font-size: 1.05em; letter-spacing: -.01em; }
.ss-modes { grid-area: 2 / 1; display: flex; flex-wrap: wrap; gap: .5em; margin-top: .8em; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .3s ease; }
.ss-frame[data-mode] .ss-modes { opacity: 1; max-height: 4em; }
.ss-mode { display: inline-flex; align-items: center; gap: .5em; padding: .35em .8em; border-radius: 999px; font-size: .85em; font-weight: 500; color: #71717a; background: #f1f1f3; transition: background-color .25s ease, color .25s ease; }
.ss-mode i { width: .9em; height: .9em; border-radius: 50%; box-shadow: inset 0 0 0 .13em #a1a1aa; transition: box-shadow .25s ease; }
.ss-frame[data-mode="post"] .ss-mode[data-ss-mode="post"], .ss-frame[data-mode="thanks"] .ss-mode[data-ss-mode="thanks"] { background: #ffd6ea; color: var(--ss-pink-deep); }
.ss-frame[data-mode="post"] .ss-mode[data-ss-mode="post"] i, .ss-frame[data-mode="thanks"] .ss-mode[data-ss-mode="thanks"] i { box-shadow: inset 0 0 0 .13em var(--ss-pink-deep), inset 0 0 0 .3em #ffd6ea, inset 0 0 0 1em var(--ss-pink-deep); }

/* ---------- Static story: the steps as a list ---------- */
.ss-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; counter-reset: ss; }
.ss-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 14px; border-radius: 20px; background: var(--surface-1); border: 1px solid var(--border); }
.ss-step__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ss-pink); color: #fff; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.ss-step__txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--text-3); padding-top: 3px; }
.ss-step__txt b { color: #fff; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.ss-step > .ss-crop { grid-column: 1 / -1; }

/* Static stage content */
.ss-story:not(.is-live) .ss-win { display: none; }
.ss-story--a:not(.is-live) .ss-grid { grid-template-columns: 1fr; }
.ss-story:not(.is-live) .ss-page { font-size: 14px; }

/* ---------- Live (pinned) story ---------- */
.ss-story.is-live { height: 330vh; height: 330svh; }
.is-live .ss-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; }
.is-live .ss-col {
  width: min(100%, calc((100vh - var(--header-h) - var(--head) - var(--pad-b)) * 16 / 9));
  width: min(100%, calc((100svh - var(--header-h) - var(--head) - var(--pad-b)) * 16 / 9));
}
.is-live .ss-count { display: inline-flex; }
.is-live .ss-frame { aspect-ratio: 16 / 9; padding: 0; border-radius: 32px; }
.is-live .ss-grid {
  position: absolute; inset: 0; padding: 3.4cqw 4cqw; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3cqw; align-items: center;
  font-size: 1.12vw; font-size: 1.12cqw;
}
.is-live .ss-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.is-live .ss-page { font-size: 1.04em; }
.is-live .ss-win__view { width: 100%; }

@media (min-width: 900px) and (max-height: 759px) {
  .ss-story { --head: 46px; }
  .is-live .ss-head { grid-template-areas: "title count"; }
  .is-live .ss-eyebrow, .is-live .ss-note { display: none; }
}

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

/* ---------- Finale ---------- */
.ss-fin { margin-top: clamp(48px, 8vw, 120px); }
.ss-fin__frame { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; border-radius: 32px; container-type: inline-size; background: #2a0a24; }
.ss-fin__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-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(--ss-spring) .3s;
}
.ss-fin--a .ss-fin__line { color: #fff; text-shadow: 0 .06em .5em rgba(42,10,36,.6); }
.ss-fin.is-in .ss-fin__line, .ss-fin.is-still .ss-fin__line { opacity: 1; transform: none; }

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 699px) {
  .ss-hero { aspect-ratio: 4 / 5; border-radius: 20px; }
  .ss-window { width: 88%; top: 48%; }
  .ss-float { width: calc(var(--w) * 1.9); }
  .ss-float[data-k="1"] { left: 5%; top: 4%; }
  .ss-float[data-k="2"] { left: 74%; top: 3%; }
  .ss-float[data-k="3"] { left: 6%; top: 77%; width: 22%; }
  .ss-float[data-k="4"] { left: 64%; top: 77%; width: 26%; }
  .ss-float[data-k="5"] { left: 78%; top: 80%; width: 15%; }
  .ss-title { font-size: clamp(24px, 7vw, 30px); }
  .ss-note { font-size: 13px; }
  .ss-tab { padding: 8px 14px; }
  .ss-tabs { border-radius: 20px; }
  .ss-ba__stage, .ss-fin__frame { border-radius: 20px; }
  .ss-fin__frame { aspect-ratio: 4 / 5; }
  .ss-fin__video { object-position: 50% 30%; }
  .ss-fin__line { bottom: 8cqw; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .ss-steps { grid-template-columns: 1fr 1fr; }
}

/* ---------- Reduced motion: no float, no tilt, nothing springs ---------- */
@media (prefers-reduced-motion: reduce) {
  .ss-float img { animation: none !important; }
  .ss-window, .ss-offer, .ss-offer__gift, .ss-offer__disc, .ss-checkobj, .ss-line--added, .ss-fin__line { transition: none !important; }
}