/* ==========================================================================
   CASE HERO — «Смак Грузії» (approved 21 Oct, variant F «Мудборд»)
   --------------------------------------------------------------------------
   Cream, like the site; the name in the middle; three clips of the real ad
   carousel (IMG_7003 ice cream, 7004 khachapuri, 7005 khinkali — the
   live-action part only) as squares scattered round the name, never over
   the letters. No bar here: on desktop it docks 56 under the Hero, as on
   the main page (css/menu.css, .has-hero).

   Coordinates are the approved sketch's numbers turned into proportions,
   so the composition is the same picture at any width:
     phones  — drawn at 390 × 844: x and sizes in vw (÷ 3.9),
               y in % of the Hero's height (÷ 8.44);
     desktop — drawn at 1920 × 1080: everything in vw (÷ 19.2), the Hero
               keeps the 16 : 9 frame (56.25vw), like the sketch.
   Square positions are CENTRES (translate −50 %), so opening a square
   (×1.5) grows it from its middle.
   ========================================================================== */

.case-hero {
  position: relative;
  /* Phones: at least one screen, and never shorter than the drawn
     proportion (216.4vw = 844 at 390), so the squares can't reach the
     letters on a short phone — the Hero scrolls a little instead. */
  height: max(100vh, 216.4vw);
  height: max(100svh, 216.4vw);
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-ink);
}

/* «← Усі кейси» — top left, at the burger's height (icon centre y 40). */
.case-hero__back {
  position: absolute;
  z-index: 2;
  top: 2rem;                                   /* 32: the 16-px line centres on 40 */
  left: var(--page-margin);
  display: flex;
  align-items: center;
  gap: 0.625rem;                               /* 10, as the CTA label */
  color: var(--color-ink-soft);
}

.case-hero__back svg {
  width: 0.9375rem;                            /* 15 × 10, the site arrow */
  height: 0.625rem;
  fill: none;
  stroke: currentColor;
}

.case-hero__kicker {
  position: absolute;
  top: 13.27%;                                 /* 112 / 844 */
  left: 0;
  right: 0;
  text-align: center;
  color: var(--color-ink-soft);
}

/* Phones: two lines, no dot. Desktop: one line with « · ». */
.case-hero__sep { display: none; }

.case-hero__title {
  position: absolute;
  top: 36.97%;                                 /* 312 / 844 */
  left: 0;
  right: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  /* A Hero role for phones that the site didn't need before: 112 / 98 on
     the 390 frame — «СМАК» then fills 315 of the 350 field. Same 0.875
     leading as the desktop Hero (240 / 210). */
  font-size: 28.718vw;
  line-height: 0.875;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: center;
  font-variant-numeric: lining-nums;
}

/* --- Squares ---------------------------------------------------------------
   --x / --y: centre; --s: size at rest; --k: how much it grows when open
   (≈ ×1.5, the sketch's open size ÷ the rest size).
   Opening and closing is a SCALE, not a width change: the compositor does
   it alone, with no relayout per frame, so it stays smooth while the clips
   play (Vadim, 4 Nov: «более плавное расширение»). A slow ease-out — the
   square swells quickly, then settles. It stays on top until it has
   shrunk back (z-index waits for the end of the transition). */
.case-sq {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-hairline);
  transform: translate(-50%, -50%) scale(1);
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), z-index 0s linear 800ms;
}

.case-sq.is-open {
  z-index: 3;
  transform: translate(-50%, -50%) scale(var(--k));
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), z-index 0s;
}

.case-sq--1 { --x: 74.36vw; --y: 27.49%; --s: 28.72vw; --k: 1.5; }   /* 290, 232 · 112 → 168 */
.case-sq--2 { --x: 70.77vw; --y: 73.46%; --s: 36.92vw; --k: 1.5; }   /* 276, 620 · 144 → 216 */
.case-sq--3 { --x: 23.59vw; --y: 82.94%; --s: 24.62vw; --k: 1.5; }   /* 92, 700 · 96 → 144 */

.case-sq img,
.case-sq video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-sq video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;               /* the clip fades in over its first frame, and out on close */
}

.case-sq video.is-playing {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .case-sq { transition: none; }
}

/* --------------------------------------------------------------------------
   DESKTOP — the 1920 × 1080 sketch in vw
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .case-hero {
    height: 56.25vw;                           /* 1080 at 1920 */
  }

  .case-hero__back {
    top: 2.917vw;                              /* 56 */
  }

  .case-hero__kicker { top: 10.417vw; }       /* 200 */
  .case-hero__sep { display: inline; }
  .case-hero__br { display: none; }

  .case-hero__title {
    top: 15.104vw;                             /* 290 */
    font-size: var(--hero-size);               /* 240 at 1920 (12.5vw) */
    line-height: var(--hero-leading);          /* 210 */
  }

  .case-sq--1 { --x: 18.75vw;  --y: 17.188vw; --s: 11.458vw; --k: 1.5455; }  /* 360, 330 · 220 → 340 */
  .case-sq--2 { --x: 81.25vw;  --y: 33.333vw; --s: 14.583vw; --k: 1.5; }     /* 1560, 640 · 280 → 420 */
  .case-sq--3 { --x: 29.167vw; --y: 44.792vw; --s: 10.417vw; --k: 1.6; }     /* 560, 860 · 200 → 320 */
}