/* Wide summer photograph and an independent, branded foreground drink. */
.hero.hero-cinematic {
  --scene-focus: 50%;
  --scene-shift: -50%;
  --cinematic-rim-safe: 16px;
  --cinematic-frame-top: 40px;
  display: block;
  min-height: max(780px, calc(61.2vw + 42px));
  height: calc(100svh - 90px);
  max-height: none;
  padding: 0 var(--gutter) 100px;
  background: transparent;
  overflow: clip;
}
.hero-cinematic .hero-content { display: block; position: relative; width: 31%; height: 88%; min-height: 650px; padding: 70px 0 95px; align-content: center; z-index: 5; }
.hero-cinematic .hero-content > .eyebrow { color: #f9f7df; font-size: 9px; margin-bottom: 22px; letter-spacing: .11em; }
.hero-cinematic h1 { color: #fffdf0; font-size: clamp(57px,5vw,80px); line-height: 1.08; letter-spacing: -.02em; }
html[lang=en] .hero-cinematic h1 { font-size: clamp(40px,4.1vw,74px); }
html[lang=zh-CN] .hero-cinematic h1 { font-size: clamp(60px,5.5vw,88px); }
.hero-cinematic h1 .hero-small { color: #fffdf4; font-size: .59em; white-space: normal; }
.hero-cinematic .hero-highlight { color: var(--lemon); }
.hero-cinematic .hero-highlight::before { background: #104a7730; height: 14%; }
.hero-cinematic .hero-description { color: #fffdf0; font-size: 13px; max-width: 31ch; margin-top: 25px; text-shadow: 0 1px 7px #16547f30; }
.hero-cinematic .nature-flavours { gap: 6px; }
.hero-cinematic .nature-flavours span { color: #fffdf0; border-color: #ffffff60; background: #174f792d; font-size: 8px; padding: 5px 8px; }
.hero-cinematic .nature-flavours span::before { background: var(--lemon); }
.hero-cinematic .hero-buttons { gap: 13px; margin-top: 25px; align-items: flex-start; flex-direction: column; }
.hero-cinematic .button-dark { background: var(--lemon); color: #173d36; border-color: #173d36; box-shadow: 3px 3px 0 #173d36; }
.hero-cinematic .button-dark:hover { background: #fff847; }
.hero-cinematic .text-link { color: #fffdf4; }
.hero-cinematic .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; align-self: auto; z-index: 1; }
.cinematic-scenery { position: absolute; inset: 0 0 12%; background: #3d9fe5; overflow: hidden; container-type: size; clip-path: inset(var(--cinematic-frame-top) 0 0); }
/* Keep both full source canvases in one coordinate system. The photograph is
   clipped 40px below the foreground, without moving the person or the frame. */
.cinematic-base-canvas,
.hero-cinematic .pop-cup-float {
  --cinematic-canvas-width: max(100cqw,calc(100cqh * 1.7768331562));
  --cinematic-canvas-height: calc(var(--cinematic-canvas-width) * .5627198124);
  --cinematic-canvas-top: clamp(
    calc(100cqh - var(--cinematic-canvas-height)),
    calc(var(--cinematic-rim-safe) - var(--cinematic-canvas-height) * .0212539851),
    0px
  );
  width: var(--cinematic-canvas-width);
  top: var(--cinematic-canvas-top);
}
.cinematic-base-canvas { position: absolute; height: auto; aspect-ratio: 1672/941; left: var(--scene-focus); transform: translateX(var(--scene-shift)); }
.cinematic-base-canvas > img:first-child { display: block; width: 100%; height: auto; max-width: none; }
.cinematic-scenery::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#0e507fbd 0%,#164f7a86 24%,#1e5c8310 47%,transparent 66%); pointer-events: none; }
.hero-cinematic .pop-cup-position { position: absolute; inset: 0 0 12%; width: 100%; height: 88%; aspect-ratio: auto; transform: none; pointer-events: none; z-index: 3; }
.hero-cinematic .pop-cup-parallax { position: relative; height: 100%; width: 100%; container-type: size; transform: translate3d(var(--cup-x,0px),var(--cup-y,0px),0); }
.hero-cinematic .pop-cup-float { position: absolute; height: auto; aspect-ratio: 1672/941; left: var(--scene-focus); transform: translateX(var(--scene-shift)) scale(1.045); transform-origin: 53.8% 2.1254%; animation: cinematic-approach 8s ease-in-out infinite; filter: drop-shadow(14px 17px 14px #14465a22); }
.hero-cinematic .hero-cup { position: static; display: block; width: 100%; height: auto; max-width: none; object-fit: contain; }
.hero-cinematic .hero-cup-logo { position: absolute; left: 53.8%; top: 54%; width: 10%; height: auto; transform: translate(-50%,-50%) rotate(14deg); filter: none; }
.hero-cinematic .hero-seal { width: 77px; height: 77px; left: 31%; right: auto; top: 8%; transform: rotate(-9deg); box-shadow: 3px 3px 0 #173d36; z-index: 6; }
.hero-cinematic .hero-seal img { width: 46px; height: 38px; }
.hero-cinematic .hero-seal span { font-size: 7px; }
.hero-cinematic .hero-mot { position: absolute; left: 27%; bottom: 1.8%; width: 10%; max-width: 145px; min-width: 110px; transform: rotate(-4deg); z-index: 6; }
.hero-cinematic .mot-speech { font-size: 9px; background: #fffdf4; }
.hero-cinematic .pop-motion-toggle { right: var(--gutter); bottom: 1.4%; color: #294f3d; padding: 7px 12px; border-radius: 25px; background: #fffdf4c7; border: 1px solid #b7bda4; z-index: 7; }
.hero-cinematic .hero-scroll { right: 75%; z-index: 6; bottom: 25px; font-size: 7px; border-color: #b4bcaa; }
.cinematic-visual-note { position: absolute; left: 65%; bottom: 3%; max-width: 32ch; font-size: 8px; color: #63725a; z-index: 6; }
.hero-cinematic .hero-pop.pop-arriving .pop-cup-position { animation: cinematic-enter 1.1s cubic-bezier(.16,1,.3,1) both; }
html[data-motion=paused] .hero-cinematic .pop-cup-float { animation-play-state: paused; }
html[data-motion=paused] .hero-cinematic .pop-cup-parallax { transform: none; }
@keyframes cinematic-approach { 0%,100% { transform: translateX(var(--scene-shift)) scale(1.045); } 50% { transform: translateX(var(--scene-shift)) scale(1.135); } }
@keyframes cinematic-enter { from { opacity: .2; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }

/* Two real fruit-tea colours against the brand's summer blue. */
.story { background: radial-gradient(ellipse at 78% 4%,#bfeeff99,transparent 47%),linear-gradient(130deg,#3aabdf,#93ddf5); overflow: hidden; }
.story-visual.story-toast { min-height: 680px; isolation: isolate; }
.toast-photo-group { position: absolute; width: 110%; aspect-ratio: 1122/1402; left: -12%; top: -9%; transform: rotate(-3deg); transform-origin: 50% 70%; isolation: isolate; }
.toast-photo { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 14px #1e65822b); }
.toast-photo {
  -webkit-mask-image: linear-gradient(to bottom,#000 0 59%,transparent 66%),linear-gradient(to right,#000 0 92%,transparent 100%);
  mask-image: linear-gradient(to bottom,#000 0 59%,transparent 66%),linear-gradient(to right,#000 0 92%,transparent 100%);
  mask-composite: add;
}
.toast-photo-soft-tail {
  position: absolute; inset: 0; width: 100%; height: auto; z-index: -1; pointer-events: none;
  filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom,transparent 0 59%,#000 68%),linear-gradient(to right,transparent 0 89%,#000 96%,transparent 100%);
  mask-image: linear-gradient(to bottom,transparent 0 59%,#000 68%),linear-gradient(to right,transparent 0 89%,#000 96%,transparent 100%);
  mask-composite: intersect;
}
.toast-logo { position: absolute; height: auto; filter: drop-shadow(0 1px 0 #ffffff80); }
.toast-logo-left { left: 30.3%; top: 59%; width: 19%; transform: translate(-50%,-50%) rotate(14deg); }
.toast-logo-right { left: 73.4%; top: 66%; width: 18%; transform: translate(-50%,-50%) rotate(-8deg); }
.toast-word { position: absolute; left: -1%; top: -2%; color: #faffff38; font: 700 clamp(70px,7vw,110px)/1 var(--display); transform: rotate(-7deg); z-index: -1; letter-spacing: .01em; }
.toast-mot-note { position: absolute; left: 6%; bottom: -2%; display: flex; align-items: center; gap: 10px; padding: 11px 15px; max-width: 30ch; border: 1px solid #244e59; border-radius: 25px; background: #fffdf4; transform: rotate(-4deg); color: #254d50; font-size: 10px; box-shadow: 3px 3px 0 #fcf000; z-index: 3; }
.toast-mot-note img { width: 37px; height: 32px; }
.story .story-copy h2 { color: #153e52; }
.story .story-copy .eyebrow, .story .story-intro, .story .story-details p, .story .story-details h3 { color: #204d60; }
.nature-visual-note { background: #93ddf5; color: #315d6a; }

@media(min-width:1600px) {
  .hero-cinematic .hero-content { width: 32%; min-height: 720px; }
  .hero-cinematic .hero-mot { left: 28%; }
  .story-visual.story-toast { min-height: 770px; }
}
@media(max-width:1100px) {
  .hero.hero-cinematic { min-height: 720px; }
  .hero-cinematic .hero-content { width: 31%; min-height: 620px; padding-top: 50px; padding-bottom: 75px; }
  .hero-cinematic h1 { font-size: 5vw; }
  html[lang=en] .hero-cinematic h1 { font-size: 4.1vw; }
  html[lang=zh-CN] .hero-cinematic h1 { font-size: 5.5vw; }
  .hero-cinematic .hero-description { font-size: 12px; }
  .hero-cinematic .hero-seal { left: 31%; width: 68px; height: 68px; top: 8%; }
  .hero-cinematic .hero-seal img { width: 39px; height: 33px; }
  .hero-cinematic .hero-mot { min-width: 95px; }
  .hero-cinematic .nature-flavours span { font-size: 7px; padding: 5px 6px; }
  .story-visual.story-toast { min-height: 590px; }
  .toast-photo-group { width: 119%; left: -16%; top: -3%; }
}
@media(max-width:900px) {
  .hero.hero-cinematic { min-height: 690px; }
  .hero-cinematic .hero-content { width: 32%; min-height: 590px; padding-top: 45px; }
  .hero-cinematic h1 { font-size: 47px; }
  html[lang=en] .hero-cinematic h1 { font-size: 42px; }
  html[lang=zh-CN] .hero-cinematic h1 { font-size: 52px; }
  .hero-cinematic .hero-description { font-size: 11px; }
  .hero-cinematic .hero-content > .eyebrow { font-size: 7px; }
  .hero-cinematic .hero-seal { width: 60px; height: 60px; top: 10%; }
  .hero-cinematic .hero-seal img { width: 34px; height: 29px; }
  .hero-cinematic .hero-mot { left: 29%; min-width: 84px; }
  .cinematic-visual-note { left: 43%; max-width: 30ch; font-size: 6px; }
  .story-visual.story-toast { min-height: 530px; }
  .toast-photo-group { width: 127%; left: -21%; top: 1%; }
  .toast-mot-note { left: 0; bottom: 0; font-size: 9px; padding: 10px 12px; }
}
@media(max-width:900px) {
  .hero.hero-cinematic { --scene-focus: 70%; --scene-shift: -70%; display: flex; flex-direction: column; gap: 0; height: auto; min-height: 0; max-height: none; padding: 31px var(--gutter) 69px; background: linear-gradient(#278fda,#3a9ee0 66%,#1d82bf); }
  .hero-cinematic .hero-content { display: contents; }
  .hero-cinematic .hero-content > .eyebrow { order: 0; font-size: 8px; margin-bottom: 19px; }
  .hero-cinematic h1, html[lang=en] .hero-cinematic h1 { order: 1; font-size: clamp(44px,12.2vw,67px); max-width: 100%; }
  html[lang=zh-CN] .hero-cinematic h1 { font-size: clamp(56px,15vw,78px); }
  .hero-cinematic h1 .hero-small { white-space: normal; }
  .hero-cinematic .hero-art { position: relative; inset: auto; order: 2; width: calc(100% + 2 * var(--gutter)); margin: 27px calc(-1 * var(--gutter)) 39px; height: 115vw; max-height: 600px; min-height: 390px; background: var(--paper); }
  .cinematic-scenery { border-radius: 0; }
  .cinematic-scenery::after { background: linear-gradient(#268fd800,#268fd800 78%,#278dcb22); }
  .hero-cinematic .hero-seal { left: auto; right: 4%; top: -10%; width: 67px; height: 67px; }
  .hero-cinematic .hero-seal img { width: 39px; height: 33px; }
  .hero-cinematic .hero-mot { left: 4%; width: 24%; min-width: 0; max-width: 120px; bottom: 0; }
  .hero-cinematic .mot-speech { font-size: 8px; }
  .hero-cinematic .pop-motion-toggle { right: 4%; bottom: 0; padding: 5px 7px; }
  .hero-cinematic .hero-description { order: 3; font-size: 13px; max-width: 35ch; margin-top: 0; }
  .hero-cinematic .nature-flavours { order: 4; margin-top: 15px; }
  .hero-cinematic .nature-flavours span { font-size: 8px; padding: 6px 9px; }
  .hero-cinematic .hero-buttons { order: 5; flex-direction: row; align-items: center; gap: 20px; margin-top: 24px; }
  .cinematic-visual-note { position: static; order: 6; color: #e3f4f8; font-size: 8px; max-width: 42ch; margin-top: 22px; line-height: 1.7; }
  .hero-cinematic .hero-scroll { left: var(--gutter); right: var(--gutter); bottom: 18px; color: #e3f4f8; border-color: #ffffff54; }
}
@media(max-width:600px) {
  .story-visual.story-toast { min-height: 138vw; max-height: 780px; margin-bottom: 24px; }
  .toast-photo-group { width: 109%; left: -5%; top: -5%; }
  .toast-word { font-size: 24vw; top: 0; }
  .toast-mot-note { left: 4%; bottom: 0; font-size: 10px; }
}
@media(max-width:360px) {
  .hero-cinematic h1, html[lang=en] .hero-cinematic h1 { font-size: 40px; }
  html[lang=zh-CN] .hero-cinematic h1 { font-size: 52px; }
  .hero-cinematic .hero-art { height: 120vw; min-height: 380px; }
  .hero-cinematic .hero-buttons { gap: 13px; }
  .hero-cinematic .hero-seal { width: 61px; height: 61px; }
  .hero-cinematic .hero-mot { width: 23%; }
  .toast-mot-note { font-size: 9px; padding: 10px 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-cinematic .pop-cup-float { transform: translateX(var(--scene-shift)) scale(1.045); }
  .hero-cinematic .pop-cup-parallax { transform: none; }
}