/* The scene stays in a native sticky frame; only its video time is scrubbed. */
:root { --header-height: 88px; --scene-dark: #211c24; }
html { scroll-padding-top: calc(var(--header-height) + 20px); }
.site-header { position: sticky; top: 0; }
.hero-story { position: relative; background: var(--scene-dark); }
.hero-story.is-scroll { height: calc(100svh - var(--header-height) + var(--scroll-distance, 2400px)); }
.hero-story .hero {
  height: calc(100svh - var(--header-height)); min-height: 0; max-height: none;
  background: #efd0e8; color: var(--ink); overflow: hidden;
  display: flex; align-items: center;
}
.hero-story.is-scroll .hero { position: sticky; top: var(--header-height); }
.hero-media { position: absolute; inset: 0; pointer-events: none; }
.hero-video, .hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: contain; object-position: right center;
}
.hero-video { opacity: 0; }
.hero-story.is-ready .hero-video { opacity: 1; }
.hero-story.is-ready .hero-poster { opacity: 0; }
.hero-wash-light, .hero-wash-dark { position: absolute; inset: 0; }
.hero-wash-light {
  background: linear-gradient(90deg, #efd0e8 0%, rgba(239,208,232,.96) 30%, transparent 49%),
    linear-gradient(0deg, #efd0e8 0%, transparent 16%, transparent 84%, #efd0e8 100%);
}
.hero-wash-dark {
  opacity: 0;
  background: linear-gradient(90deg, #211c24 0%, rgba(33,28,36,.96) 30%, transparent 46%),
    linear-gradient(0deg, #211c24 0%, transparent 18%, transparent 90%, #211c24 100%);
}
.hero-story.is-night .hero { background: var(--scene-dark); color: var(--paper); }
.is-night .hero-wash-light { opacity: 0; }
.is-night .hero-wash-dark { opacity: 1; }
.hero-cta { transition: transform .3s; }
.is-night .hero-cta { background: var(--lime); color: var(--ink); }
.hero-story .hero-content {
  position: relative; z-index: 1; width: 47%; max-width: 770px;
  padding: 0 0 40px 5%;
}
.hero-copy-stack { display: grid; }
.hero-copy-stack > div { grid-area: 1 / 1; align-self: center; }
.hero-copy-end { opacity: 0; visibility: hidden; transform: translateY(14px); }
.hero-story .hero h1 { font-size: clamp(64px, 8vw, 132px); margin: 28px 0 25px; }
.hero-copy-end h2 { font-size: clamp(54px, 6.6vw, 108px); margin: 28px 0 25px; }
.hero-copy-stack p { font-size: clamp(14px, 1.25vw, 18px); line-height: 1.65; }
.hero-story .title-dot { color: inherit; }
.hero-cta { margin-top: 28px; position: relative; }
.hero-cta:hover { filter: brightness(1.15); }
.hero-bottom {
  position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: 10px; letter-spacing: .1em; font-weight: 600;
}
.hero-instruction { display: flex; align-items: center; gap: 12px; }
.hero-instruction > span:first-child { font-size: 20px; }
.hero-load-status:empty { display: none; }
.hero-story.is-loading .hero-cue { display: none; }
.hero-journey { display: none; align-items: center; gap: 16px; }
.is-scroll .hero-journey { display: flex; }
.hero-step { min-width: 138px; }
.hero-progress { width: 100px; height: 2px; background: #97778e66; overflow: hidden; }
.hero-progress > span { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; }
.flavors { background: var(--scene-dark); color: var(--paper); padding-top: 82px; }
.flavors .product-art { color: var(--ink); }
.flavors .product-buy { border-color: #f6edf138; }
.flavors .product-buy button { border-color: #f6edf18c; }
.flavors .product-buy button:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }

@media (max-width: 1100px) and (min-width: 768px) {
  .hero-story .hero-content { width: 47%; padding-left: 4.5%; }
  .hero-story .hero .eyebrow { font-size: 9px; gap: 8px; }
  .hero-story .hero h1 { font-size: 8.2vw; }
  .hero-copy-end h2 { font-size: 6.7vw; }
}
@media (max-width: 767px) {
  :root { --header-height: 76px; }
  .hero-story .hero { display: block; }
  .hero-story .hero-content { width: 100%; max-width: none; padding: 26px 6% 0; }
  .hero-story .hero .eyebrow { font-size: 9px; gap: 8px; }
  .hero-story .tiny-star { font-size: 20px; }
  .hero-story .hero h1 { font-size: clamp(58px, 16vw, 93px); line-height: .89; margin: 17px 0 15px; }
  .hero-copy-end h2 { font-size: clamp(47px, 12.8vw, 75px); line-height: .94; margin: 17px 0 15px; }
  .hero-copy-stack p { font-size: 13px; line-height: 1.5; }
  .hero-cta { margin-top: 17px; padding: 14px 19px; font-size: 12px; }
  /* This frame retains the rightmost 75% of the source and its full height.
     All three cans fit; a portrait cover crop would lose the lavender can. */
  .hero-media {
    inset: auto 0 47px; width: 100%; height: min(75vw, calc(100% - 330px));
  }
  .hero-video, .hero-poster { object-fit: cover; object-position: right center; }
  .hero-wash-light { background: linear-gradient(180deg, #efd0e8 0%, transparent 16%); }
  .hero-wash-dark { background: linear-gradient(180deg, #211c24 0%, transparent 16%), linear-gradient(0deg, #211c24 0%, transparent 14%); }
  .hero-bottom { left: 6%; right: 6%; bottom: 15px; gap: 10px; font-size: 8px; letter-spacing: .055em; }
  .hero-instruction { gap: 7px; }
  .hero-instruction > span:first-child { font-size: 16px; }
  .hero-journey { gap: 8px; }
  .hero-step { min-width: 0; }
  .hero-progress { width: 38px; }
  .hero-journey > span:last-child { display: none; }
  .flavors { padding-top: 48px; }
}
@media (max-width: 767px) and (max-height: 730px) {
  .hero-story .hero-content { padding-top: 18px; }
  .hero-story .hero h1 { font-size: 57px; margin: 12px 0; }
  .hero-copy-end h2 { font-size: 46px; margin: 12px 0; }
  .hero-copy-stack p { font-size: 12px; }
  .hero-cta { margin-top: 13px; padding: 12px 18px; }
  .hero-media { height: min(75vw, calc(100% - 320px)); bottom: 40px; }
}
@media (max-width: 767px) and (max-height: 620px) and (orientation: portrait) {
  .hero-video, .hero-poster { object-fit: contain; }
}
@media (max-height: 540px) and (orientation: landscape) {
  :root { --header-height: 60px; }
  .site-header { height: var(--header-height); }
  .hero-story .hero { display: flex; }
  .hero-story .hero-content { width: 47%; padding: 12px 0 24px 5%; }
  .hero-story .hero .eyebrow { font-size: 8px; }
  .hero-story .hero h1 { font-size: clamp(40px, 10svh, 65px); margin: 12px 0; }
  .hero-copy-end h2 { font-size: clamp(35px, 8svh, 52px); margin: 12px 0; }
  .hero-copy-stack p { font-size: 11px; line-height: 1.4; }
  .hero-cta { margin-top: 12px; padding: 11px 16px; font-size: 11px; }
  .hero-media { inset: 0; width: 100%; height: 100%; }
  .hero-video, .hero-poster { object-fit: contain; }
  .hero-wash-light { background: linear-gradient(90deg, #efd0e8, transparent 50%); }
  .hero-wash-dark { background: linear-gradient(90deg, #211c24, transparent 50%); }
  .hero-bottom { bottom: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-story.is-scroll { height: auto; }
  .hero-story.is-scroll .hero { position: relative; top: auto; }
}