.scene--hero { height: 180vh; }
.scene--flavours { height: 360vh; }
.scene--ice { height: 140vh; }
.scene--share { height: 130vh; }
.scene--close { height: 110vh; }

.in-flavours .hud--bl, .in-flavours .hud--br { opacity: 0; }

/* hero */
.hero__ghost {
  display: grid; justify-items: center;
  transform: translateY(-2vh);
}
.hero__ghost .mega { will-change: transform; }
.hero__copy {
  position: absolute; left: var(--gutter); bottom: clamp(56px, 9vh, 110px);
  max-width: min(40rem, 52vw);
}
.hero__copy .h1 { font-size: clamp(3rem, 7.2vw, 7rem); }
.hero__cta { margin-top: var(--s-3); }
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(56px, 9vh, 110px);
  display: flex; align-items: center; gap: 12px; margin: 0;
}
.hero__scroll span {
  width: 1px; height: 44px; background: currentColor; transform-origin: top;
  animation: drip 1.8s var(--ease-out) infinite;
}
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }


/* flavours */
.fl__names { position: relative; width: 100%; height: 100%; }
.fl__name {
  position: absolute; inset: 0; display: grid; place-items: start center;
  padding-top: clamp(84px, 12vh, 130px);
  margin: 0; text-align: center; white-space: normal;
  color: var(--fg);
  opacity: 0; transform: translateY(8%) scale(0.96);
  transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
}
.fl__name.is-on { opacity: 0.95; transform: none; }
.fl__name { will-change: transform, opacity; }
.fl__name .mega { font-size: clamp(3.2rem, 10vw, 10rem); white-space: nowrap; }
@media (max-width: 720px) {
  .fl__name .mega { font-size: clamp(2.6rem, 14vw, 4.4rem); white-space: normal; text-align: center; max-width: calc(100vw - 32px); line-height: 0.86; }
}
.fl__copy {
  position: absolute; left: var(--gutter); bottom: clamp(56px, 10vh, 120px);
  max-width: 24rem;
}
.fl__line { font-size: var(--t-h3); font-weight: 800; line-height: 1.1; margin: 0 0 var(--s-2); }
.fl__tags { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.fl__tags li {
  padding: 8px 14px; border-radius: 9999px;
  border: 1.5px solid currentColor; font-weight: 700; font-size: 0.85rem;
}
.fl__picker {
  position: absolute; right: var(--gutter); bottom: clamp(56px, 10vh, 120px);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.fl__pick {
  border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px 8px 14px; border-radius: 9999px;
  font-weight: 700; font-size: 0.9rem; opacity: 0.6;
  transition: opacity 0.3s, background-color 0.3s;
}
.fl__pick::after {
  content: ""; width: 26px; height: 2px; background: currentColor;
  transform-origin: right; transform: scaleX(0.4); transition: transform 0.4s var(--ease-out);
}
.fl__pick:hover, .fl__pick[aria-pressed="true"] { opacity: 1; }
.fl__pick[aria-pressed="true"]::after { transform: scaleX(1); }

/* ice */
.ice__mist {
  position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(40% 30% at 30% 70%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(35% 25% at 70% 30%, rgba(255, 255, 255, 0.12), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(255, 255, 255, 0.14), transparent 70%);
  opacity: var(--mist, 0);
  will-change: transform, opacity;
  animation: mist 9s ease-in-out infinite alternate;
}
@keyframes mist { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(3%, -2%, 0) scale(1.08); } }
.ice__copy {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  max-width: min(36rem, 44vw); text-align: left;
}
.ice__copy .h1, .close__copy .h1 { font-size: clamp(2.8rem, 6.4vw, 6.4rem); }

/* share */
.share__copy {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  max-width: min(38rem, 50vw);
}
.share__script { font-size: 1.25em; display: block; line-height: 1; margin-bottom: 0.05em; }
.share__form {
  margin-top: var(--s-4);
  display: flex; gap: 10px; align-items: center;
  padding: 6px; border-radius: 9999px;
  background: rgba(20, 3, 6, 0.28);
  box-shadow: inset 0 0 0 1.5px rgba(255, 244, 232, 0.35);
  max-width: 30rem;
}
.share__input {
  flex: 1; min-width: 0; height: 52px; padding: 0 20px;
  border: 0; outline: 0; background: transparent;
  font-size: 1.4rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--cream);
}
.share__input::placeholder { color: rgba(255, 244, 232, 0.55); text-transform: none; font-weight: 600; }
.share__form:focus-within { box-shadow: inset 0 0 0 2px var(--cream); }
.share__hint { margin: var(--s-2) 0 0 20px; }

/* close */
.close__glow {
  position: absolute; left: 50%; top: 36%; z-index: 1; pointer-events: none;
  width: 62vmin; height: 62vmin; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 45%, transparent 70%);
}
.close__copy {
  position: absolute; left: 50%; bottom: clamp(56px, 10vh, 120px);
  transform: translateX(-50%); text-align: center; width: min(92vw, 60rem);
}
.close__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: var(--s-3); }

/* phones: the can sits up top, copy sits below it */
@media (max-width: 720px) {
  .hero__copy { max-width: none; right: var(--gutter); bottom: 64px; }
  .hero__scroll { display: none; }
  .fl__copy { bottom: 116px; right: var(--gutter); max-width: none; }
  .fl__picker { flex-direction: row; left: var(--gutter); right: var(--gutter); bottom: 40px; justify-content: space-between; }
  .fl__pick { padding: 8px 6px; font-size: 0.8rem; }
  .fl__pick::after { display: none; }
  .ice__copy, .share__copy {
    left: var(--gutter); right: var(--gutter); top: auto; bottom: 64px; transform: none; max-width: none;
  }
  .share__form { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scene { height: auto !important; }
  .sticky { position: relative; min-height: 100svh; height: auto; }
  .fl__name:first-child { opacity: 0.95; transform: none; }
}