/* Home: the offers inside the hero film (template-parts/home/hero-offers.php).
   Default — no JS, or reduced motion: the hero's last frame, then the offers as a list of scenes.
   Film — html.film-on (set by assets/js/home/film.js when motion is allowed): every act sits on one sticky stage. */

.film { position: relative; background: var(--blue-900); }
.offers-start { scroll-margin-top: var(--header-h); }

/* ---------- a scene (list) ---------- */
.scene { position: relative; color: var(--cream); background: var(--blue-900); }
.scene__view { position: relative; overflow: hidden; }
.plate { position: relative; aspect-ratio: var(--ar, 16 / 9); }
@media (max-aspect-ratio: 1/1) { .plate { aspect-ratio: var(--ar-m, var(--ar, 16 / 9)); } } /* clips: the phone crop */
.plate__bg, .plate__clip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.plate__clip { opacity: 0; transition: opacity 0.3s; }
.plate__clip.is-live { opacity: 1; }
.plate__drop { position: absolute; display: block; height: auto; filter: drop-shadow(0 4px 3px rgb(10 4 20 / 0.5)); pointer-events: none; }
.plate--card { background: radial-gradient(120% 90% at 70% 40%, var(--red-600), var(--red-800) 55%, var(--blue-900)); }
.plate__tap { display: none; position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; } /* the film only */
.scene h2:focus:not(:focus-visible) { outline: none; } /* focus lands on a scene's title after a jump */
.scene__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 62%, var(--blue-900) 100%); }
.concept { position: absolute; right: 12px; bottom: 8px; z-index: 1; margin: 0; font-size: 0.68rem; letter-spacing: 0.04em; color: rgb(253 248 242 / 0.6); }

.stamp {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  width: clamp(72px, 9vw, 128px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red-600);
  color: var(--cream);
  font: 800 clamp(0.7rem, 1vw, 1rem)/1 var(--font-display);
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 0 0 4px var(--cream), 0 10px 24px rgb(0 0 0 / 0.35);
  transform: translate(-50%, -50%) rotate(-12deg);
  pointer-events: none;
}
.stamp span { display: block; font-size: 2em; }

.scene__copy { display: grid; gap: 10px; justify-items: start; padding: 20px var(--gutter) 44px; }
.scene__when { display: flex; align-items: center; gap: 10px; }
.badge { padding: 4px 10px 3px; border-radius: 99px; background: var(--red-600); color: var(--cream); font-size: 0.72rem; letter-spacing: 0.08em; animation: badge-pulse 1.6s ease-in-out infinite; }
.badge[hidden] { display: none; }
@keyframes badge-pulse { 50% { box-shadow: 0 0 0 7px rgb(179 18 26 / 0.25); } }
@media (prefers-reduced-motion: reduce) { .badge { animation: none; } }
.scene__big { font-size: clamp(3.6rem, 18vw, 10rem); color: var(--cream); }
.scene__big.is-long { font-size: clamp(2.8rem, 12.5vw, 6.4rem); }
.scene__title { margin: 0; font: 800 clamp(1.3rem, 5.2vw, 2.1rem)/1.1 var(--font-body); }
.scene__text { margin: 0; max-width: 34ch; color: var(--muted); }
.scene .cta { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 6px; }
.scene__fine { margin: 0; color: rgb(253 248 242 / 0.6); }

/* film-only parts */
.film .wipe, .film .chapters, .scene--all { display: none; }

/* ---------- all offers (grid, last act) ---------- */
.all { display: grid; gap: 14px; align-content: center; height: 100%; padding-top: calc(var(--header-h) + 12px); padding-bottom: 16px; }
.all__list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.all__item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 10px 12px 10px 16px; border: 1px solid rgb(253 248 242 / 0.16); border-radius: var(--radius); background: rgb(253 248 242 / 0.06); }
.all__item.is-today { border-color: var(--cream); background: rgb(253 248 242 / 0.12); }
.all__when { grid-column: 1; display: flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.all__what { grid-column: 1; font-weight: 600; line-height: 1.2; }
.all__what strong { font-size: 1.25rem; margin-right: 4px; }
.all__item .ticket { grid-column: 2; grid-row: 1 / span 2; }
.all__note { margin: 0; color: rgb(253 248 242 / 0.6); }

.flyer { position: fixed; z-index: 200; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--cream); pointer-events: none; }

/* ---------- film mode ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* The film's length from the first paint (film.js's timeline: hero 2.2/3 units, each offer 0.6 + 1.8, the grid
     0.6 + 1.4, a 0.2 tail; one unit = 50svh), so anchors below it and scroll restoration land where they should. */
  html.film-on .film { --hero-len: 2.2; height: calc(100svh + (var(--hero-len) + var(--offers, 0) * 2.4 + 2.2) * 50svh); }
  html.film-on .film .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  html.film-on .film .act { position: absolute; inset: 0; display: none; }
  html.film-on .film .act.is-on { display: block; }
  html.film-on .scene__view { position: absolute; inset: 0 0 auto 0; height: 61svh; }
  html.film-on .plate { position: absolute; left: 0; top: 0; aspect-ratio: auto; transform-origin: 50% 60%; will-change: transform; }
  html.film-on .plate__drop { will-change: transform; }
  html.film-on .scene__copy { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); padding: 0 var(--gutter); }
  html.film-on .scene__copy > * { will-change: transform, opacity; }
  html.film-on .scene__text, html.film-on .scene__fine { display: none; }
  html.film-on .stamp { transform: translate(-50%, -50%) scale(0) rotate(-30deg); transition: transform 0.55s var(--ease-spring); }
  html.film-on .stamp.is-on { transform: translate(-50%, -50%) scale(1) rotate(-12deg); }
  html.film-on .plate__tap { display: block; }

  html.film-on .film .wipe { display: block; position: absolute; inset: 0; z-index: 5; visibility: hidden; pointer-events: none; }
  .wipe--blue { background: var(--blue-700); }
  .wipe--red { background: linear-gradient(115deg, var(--red-700), var(--red-600)); }

  html.film-on .film .chapters { display: flex; position: absolute; z-index: 6; left: 0; right: 0; top: calc(61svh - 46px); gap: 8px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; transition: opacity 0.4s, visibility 0s; }
  html.film-on .film .chapters.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s, visibility 0s 0.4s; } /* no focus while hidden */
  .chapters button, .chapters__skip { flex: none; padding: 7px 13px; border: 1px solid rgb(253 248 242 / 0.35); border-radius: 99px; background: rgb(4 12 39 / 0.5); color: var(--cream); font: 600 0.8rem/1 var(--font-body); text-decoration: none; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.3s, color 0.3s; }
  .chapters button.is-on { background: var(--cream); color: var(--ink); }

  html.film-on .scene--all.is-on { display: block; }
  /* the grid fits a phone screen; whatever doesn't scrolls inside it, never off the top */
  html.film-on .all { align-content: safe center; overflow-y: auto; }
}
@media (prefers-reduced-motion: no-preference) and (max-aspect-ratio: 1/1) {
  html.film-on .all { gap: 10px; }
  html.film-on .all h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  html.film-on .all__list { gap: 6px; }
  html.film-on .all__item { padding: 6px 8px 6px 12px; }
  html.film-on .all__when { font-size: 0.62rem; }
  html.film-on .all__what { font-size: 0.86rem; }
  html.film-on .all__what strong { font-size: 1.02rem; }
  html.film-on .all__note { font-size: 0.7rem; }
}
@media (prefers-reduced-motion: no-preference) and (min-aspect-ratio: 1/1) {
  html.film-on .film { --hero-len: 3; }
  html.film-on .scene__view { inset: 0; height: auto; }
  html.film-on .scene__shade {
    background:
      linear-gradient(90deg, rgb(40 2 4 / 0.82) 0%, rgb(60 3 6 / 0.45) 30%, transparent 56%),
      linear-gradient(180deg, rgb(20 2 4 / 0.35) 0%, transparent 25%, transparent 72%, rgb(4 12 39 / 0.6) 100%);
  }
  html.film-on .scene__copy { top: 50%; bottom: auto; transform: translateY(-50%); max-width: min(46vw, 640px); gap: 14px; }
  html.film-on .scene__text, html.film-on .scene__fine { display: block; }
  html.film-on .scene__big { font-size: clamp(4rem, 9vw, 10rem); }
  html.film-on .scene__big.is-long { font-size: clamp(2.9rem, 5.2vw, 5.4rem); }
  html.film-on .film .chapters { top: auto; bottom: 28px; right: auto; max-width: 62vw; flex-wrap: wrap; overflow: visible; }
}