/* Sweet Help case study: the hero, the before/after and the finale. Markup: src/_includes/e2/sweethelp/{hero,ba,finale}.njk; behaviour:
   e2-sweethelp.js. The story and the gallery have their own sheet (e2-sweethelp-c.css). App green #25D366 (deep #1DA851). The page stays the
   dark E2 template: only the stages and the clips take the mint world. Real UI (Figma exports) stays crisp images; chat bubbles are plain
   rounded bubbles (never a phone-handset glyph). */

.sh-hero, .sh-ba, .sh-fin { --sh-green: #25d366; --sh-green-deep: #1da851; --sh-spring: cubic-bezier(.34, 1.56, .64, 1); }

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

/* The real redesigned dashboard in a window, tilted towards the reader; the pointer leans it a few degrees more. */
.sh-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; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 50px 100px -20px rgba(4,40,22,.7), 0 30px 60px rgba(4,40,22,.4);
}
.sh-window img { display: block; width: 100%; height: auto; }

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

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

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

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

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

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