/* Opening: two campaign posters, one persistent key visual. */
.hero-sequence { position: relative; background: var(--green); }
.hero-sequence .hero {
  height: 100svh; min-height: 600px; max-height: none;
  padding: clamp(78px, 10svh, 115px) 6vw 30px;
  isolation: isolate; overflow: clip;
}
.hero-sequence.has-opening { height: 310svh; }
.has-opening .hero { position: sticky; top: 0; min-height: 0; }
.hero-sequence .hero-top { position: relative; z-index: 12; opacity: 0; }
.has-opening .hero-top { opacity: calc(1 - var(--green-reveal, 0)); }
.hero-sequence .bk-stamp { width: clamp(60px, 8svh, 86px); height: clamp(60px, 8svh, 86px); }
.hero-sequence .bk-stamp img { width: 59%; }
.has-opening .bk-stamp { opacity: var(--green-reveal, 0); }
.hero-sequence .hero-top > .eyebrow { transition: color .2s; }
.has-opening .hero[data-opening-phase="red"] .hero-top > .eyebrow,
.has-opening .hero[data-opening-phase="fracture"] .hero-top > .eyebrow { color: var(--cream); }
.hero-green-art { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-sequence .hero-title { display: contents; }
.hero-sequence .hero-word {
  position: absolute; z-index: 2; left: 7%; top: max(11%, 94px);
  font-family: var(--display); font-size: min(26vw, 34svh);
  font-weight: 400; letter-spacing: -.045em; line-height: .9;
  color: var(--cream); text-align: left;
  transform: translate3d(calc(var(--px, 0px) * -.35), calc(var(--py, 0px) * -.3), 0) rotate(-4deg);
  transition: transform .35s ease-out;
}
.hero-sequence .hero-word:last-child {
  left: auto; right: 7%; top: auto; bottom: 4.5%; z-index: 2;
  text-align: right; transform: translate3d(calc(var(--px, 0px) * -.25), calc(var(--py, 0px) * -.2), 0) rotate(-4deg);
}
.has-opening .hero-word,
.has-opening .hero-leaf,
.has-opening .hero-line { opacity: var(--green-reveal, 0); }
.has-opening .hero-word:last-child { opacity: var(--type-reveal, 0); }
.hero-sequence .hero-product {
  width: min(60vw, 78svh, 1160px); max-width: none;
  --rest-product-scale: .98;
  left: 50%; top: var(--product-top, 52.5%); z-index: 8;
  transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) scale(var(--product-scale, var(--rest-product-scale)));
  filter: none; perspective: 900px; transition: none; pointer-events: none;
}
.hero-burger-image {
  position: relative; isolation: isolate;
  transform: rotate(var(--product-angle, -6deg));
  filter: none;
}
.hero-burger-image::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* Ombra nera e sfocata: basta la versione piccola della foto. */
  background: url("../assets/burgerking-preview/whopper-hd-640.webp") center / 100% 100% no-repeat;
  filter: brightness(0) blur(18px); opacity: .28; pointer-events: none;
  transform: translate3d(calc(var(--px, 0px) * -2.2), calc(29px - var(--py, 0px) * 1.9), 0) scale(.98);
  transition: transform .3s ease-out;
}
.hero-burger-image img { position: relative; z-index: 1; width: 100%; height: auto; }
.hero-sequence .hero-leaf { z-index: 10; }
.hero-sequence .leaf-one { width: clamp(50px, 7vw, 135px); top: 24%; right: 10%; }
.hero-sequence .leaf-two { width: clamp(50px, 7vw, 135px); bottom: 16%; left: 12%; }
.hero-sequence .hero-line { width: 58%; }
.hero-sequence .hero-line.one { left: -28%; top: 8%; }
.hero-sequence .hero-line.two { right: -25%; bottom: -25%; }
.hero-red-poster { display: none; }
.has-opening .hero-red-poster {
  display: block; position: absolute; inset: 0; z-index: 5;
  background: #d62300; color: var(--cream); pointer-events: none;
  opacity: var(--poster-opacity, 1);
}
.hero-red-poster p { position: absolute; margin: 0; text-align: center; left: 0; width: 100%; }
.whopper-intro {
  top: 18.5%; font-family: var(--display); font-size: min(5vw, 8svh);
  line-height: 1; letter-spacing: -.035em;
}
.whopper-name {
  top: 25%; font-family: var(--display); font-size: min(15.4vw, 24svh);
  line-height: .95; letter-spacing: -.045em; white-space: nowrap;
}
.whopper-signoff { bottom: 6%; font-family: var(--body); font-size: 10px; letter-spacing: .12em; }
.hero-fracture {
  position: absolute; inset: 0; z-index: 6; perspective: 1100px;
  perspective-origin: 50% 52%; pointer-events: none; overflow: clip;
  opacity: var(--shards-visible, 0);
}
.poster-shard { position: absolute; backface-visibility: visible; }
.hero-sequence .hero-sticker {
  position: absolute; left: auto; right: 1%; top: 18%; bottom: auto; z-index: 12;
  width: clamp(96px, min(12.4vw, 20svh), 196px); height: auto; aspect-ratio: 1;
  padding: 0; background: none; border-radius: 0;
  font-size: clamp(16px, min(2.05vw, 3.4svh), 32px); line-height: 1; white-space: nowrap;
  transform: rotate(10deg); transform-origin: 50% 50%;
  translate: calc(var(--px, 0px) * .45) calc(var(--py, 0px) * .4);
  transition: translate .35s ease-out;
  filter: drop-shadow(1px 4px 1px #50231435); animation: none !important;
}
.sticker-face {
  position: absolute; inset: 0; border-radius: 50%; background: var(--orange);
  display: grid; place-content: center; color: var(--brown);
}
.sticker-face::before { content: ""; position: absolute; inset: 8%; border: 1px solid #50231432; border-radius: 50%; }
.sticker-face > span { position: relative; transform: rotate(-3deg); }
.has-opening .hero-sticker { opacity: 0; }
.hero-sequence .hero-bottom { z-index: 15; left: 6vw; right: 6vw; bottom: 25px; }
.hero-sequence .hero-bottom .scroll-cue { margin-left: auto; }
.hero-sequence .scroll-cue > .cue-copy {
  width: auto; height: auto; border: 0; border-radius: 0;
  display: inline; font-size: 11px; transform: none;
}
.hero-sequence .scroll-cue > .cue-arrow { width: 36px; height: 36px; }
.hero-sequence .hero-note { display: none; }
.has-opening .hero-bottom { color: var(--cream); }
.has-opening .hero[data-opening-phase="green"] .hero-bottom,
.has-opening .hero[data-opening-phase="sticker"] .hero-bottom { color: var(--brown); }
.has-opening .hero-tagline { opacity: var(--green-reveal, 0); }
.hero-scroll-track { display: none; }
.has-opening .hero-scroll-track { display: block; position: absolute; inset: auto 0 0; height: 3px; z-index: 20; background: #50231418; }
.hero-scroll-track > span { display: block; width: 100%; height: 100%; transform: scaleX(var(--opening-progress, 0)); transform-origin: left; background: var(--cream); }
@media (min-width: 741px) and (max-aspect-ratio: 6/5) {
  .hero-sequence .hero-word { font-size: 28vw; top: 14%; left: 7%; }
  .hero-sequence .hero-word:last-child { top: auto; bottom: 9%; right: 7%; }
  .hero-sequence .hero-product { --rest-product-scale: 1.04; width: 88vw; top: var(--product-top, 52%); }
  .hero-sequence .hero-sticker { width: 17vw; font-size: 2.8vw; right: 3%; }
  .whopper-intro { top: 25%; font-size: 10vw; }
  .whopper-name { top: 34%; font-size: 16.6vw; }
}
@media (max-width: 740px) {
  .hero-sequence.has-opening { height: 285svh; }
  .hero-sequence .hero { padding: 84px 24px 24px; min-height: 620px; }
  .hero-sequence.has-opening .hero { min-height: 0; }
  .hero-sequence .hero-top { opacity: 1; }
  .hero-sequence .hero-top > .eyebrow { font-size: 7px; }
  .hero-sequence .bk-stamp { width: 58px; height: 58px; }
  .hero-sequence .hero-word { font-size: 27vw; left: 7%; top: 28%; letter-spacing: -.04em; }
  .hero-sequence .hero-word:last-child { left: auto; right: 7%; top: auto; bottom: 19.5%; }
  .hero-sequence .hero-product { --rest-product-scale: 1.08; width: 95vw; max-width: 650px; top: var(--product-top, 56%); }
  .hero-sequence .hero-sticker { width: 27vw; min-width: 96px; max-width: 150px; font-size: clamp(16px, 4.6vw, 25px); right: 5%; top: 22%; }
  .hero-sequence .leaf-one { right: 6%; top: 23%; width: 13vw; }
  .hero-sequence .leaf-two { bottom: 18%; left: 6%; width: 13vw; }
  .whopper-intro { top: 27%; font-size: 12vw; line-height: 1; }
  .whopper-name { top: 36%; font-size: 17.4vw; line-height: .95; letter-spacing: -.05em; }
  .whopper-signoff { bottom: 15%; font-size: 8px; }
  .hero-sequence .hero-bottom { bottom: 24px; left: 24px; right: 24px; font-size: 10px; gap: 12px; }
  .hero-sequence .scroll-cue > .cue-copy { font-size: 9px; max-width: 105px; line-height: 1.5; text-align: right; }
  .hero-sequence .scroll-cue { gap: 10px; }
  .hero-sequence .scroll-cue > .cue-arrow { width: 29px; height: 29px; font-size: 15px; }
}
/* Telefono in verticale con poca altezza (iPhone SE, o un iPhone qualsiasi con le barre di Safari
   visibili): l'hamburger copriva quasi tutto BASED. Qui PLANT resta sotto le scritte in alto,
   BASED scende verso il fondo quanto serve e l'hamburger si mette in mezzo (un po' più piccolo se
   lo schermo è molto basso). Su un telefono alto (da circa 840 px) i valori coincidono con quelli
   di prima: non cambia niente. */
@media (max-width: 740px) and (max-aspect-ratio: 1/1) {
  .hero-sequence .hero {
    --word-top: max(28svh, 172px);
    --word-bottom: clamp(72px, 54.8svh - 297px, 19.5svh);
    /* L'hamburger scende di metà di quanto si allarga lo spazio tra le due parole. */
    --burger-shift: calc((19.5svh - var(--word-bottom) + var(--word-top) - 28svh) / 2);
  }
  .hero-sequence .hero-word { top: var(--word-top); }
  .hero-sequence .hero-word:last-child { top: auto; bottom: var(--word-bottom); }
  .hero-sequence .hero-product {
    width: min(95vw, 50svh);
    /* Nel poster rosso iniziale l'hamburger resta dov'era; si sposta mentre arriva il verde. */
    top: calc(var(--product-top, 56%) + var(--green-reveal, 1) * var(--burger-shift));
  }
  .hero-sequence .leaf-one { top: max(23svh, 190px); }
  .hero-sequence .leaf-two { bottom: max(calc(var(--word-bottom) - 1.5svh), 66px); }
}
@media (max-height: 580px) and (min-aspect-ratio: 6/5) {
  .hero-sequence .hero { min-height: 400px; padding-top: 70px; }
  .hero-sequence.has-opening .hero { min-height: 0; }
  .hero-sequence .bk-stamp { visibility: hidden; width: 42px; height: 42px; }
  .hero-sequence .hero-top > .eyebrow { font-size: 8px; }
  .hero-sequence .hero-top { opacity: 0; }
  .has-opening .hero-top { opacity: calc(1 - var(--green-reveal, 0)); }
  .hero-sequence .hero-word { font-size: 31svh; top: 26%; }
  .has-opening .hero-word { opacity: var(--type-reveal, 0); }
  .hero-sequence .hero-word:last-child { top: auto; bottom: 10%; right: 4%; }
  .hero-sequence .hero-product { width: 78svh; top: var(--product-top, 57%); }
  .hero-sequence .hero-sticker { width: 22svh; min-width: 0; font-size: 3.7svh; }
  .whopper-intro { top: 26%; font-size: 9svh; }
  .whopper-name { top: 36%; font-size: 23svh; }
  .whopper-signoff { display: none; }
  .hero-sequence .hero-bottom { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sequence.has-opening { height: auto; }
  .hero-sequence .hero { position: relative; }
  .hero-sequence .hero-product { transform: translate(-50%, -50%) scale(var(--rest-product-scale)); }
  .hero-burger-image::before { transform: translate(0, 29px) scale(.98); }
  .hero-sequence .hero-sticker { translate: none; }
  .hero-sequence .hero-word, .hero-sequence .hero-word:last-child { transform: rotate(-4deg); }
}