/* Foreground photography escapes a separate, quiet backdrop. */
.hero-immersive {
  grid-template-columns: .9fr 1.1fr;
  min-height: 760px;
  max-height: 1080px;
  padding-top: 45px;
  padding-bottom: 82px;
}
.hero-immersive .hero-content { z-index: 5; }
.hero-immersive h1 { font-size: clamp(61px,5.7vw,94px); }
.hero-immersive .hero-description { max-width: 37ch; }
.hero-pop {
  height: clamp(620px,calc(100svh - 210px),820px);
  max-height: none;
  overflow: visible;
  isolation: isolate;
}
.pop-backdrop {
  position: absolute;
  inset: 16% -1% 12% 8%;
  border: 1px solid #b8c79a;
  border-radius: 47% 47% 11px 11px / 40% 40% 11px 11px;
  background: #e5edc9;
  transform: rotate(5deg);
  overflow: hidden;
  z-index: 0;
}
.pop-backdrop::before {
  content: '';
  position: absolute;
  width: 90%; height: 70%;
  top: -18%; left: -18%;
  background: #d3e1ae;
  border-radius: 0 100% 0 100%;
  transform: rotate(28deg);
  filter: blur(22px);
  opacity: .56;
}
.pop-backdrop::after { content: ''; position: absolute; inset: 17px; border: 1px solid #bdcda1; border-radius: inherit; }
.pop-backdrop-word {
  position: absolute;
  top: 20%; left: 9%;
  font: 700 clamp(70px,8.8vw,150px)/.93 var(--display);
  letter-spacing: -.03em;
  color: #fffdf4;
  opacity: .8;
}
.pop-backdrop-note { position: absolute; bottom: 8%; left: 8%; color: var(--leaf); font-size: 7px; letter-spacing: .16em; writing-mode: vertical-rl; transform: rotate(180deg); }
.pop-orbit { position: absolute; inset: 10% -2% 20% 4%; border: 1px solid #a7b98b; border-radius: 50%; transform: rotate(-23deg); z-index: 1; }
.pop-cup-position { position: absolute; height: 112%; aspect-ratio: 1122/1402; width: auto; left: 54%; top: -5%; transform: translateX(-50%); z-index: 3; pointer-events: none; }
.pop-cup-parallax, .pop-cup-float { width: 100%; height: 100%; position: relative; }
.pop-cup-parallax { transform: translate3d(var(--cup-x,0px),var(--cup-y,0px),0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pop-cup-float { transform: rotate(-8deg); transform-origin: 50% 65%; animation: cup-float 6.5s ease-in-out infinite; filter: drop-shadow(22px 25px 14px rgba(61,73,30,.16)); }
.hero-pop .hero-cup { width: 100%; height: 100%; object-fit: contain; }
.hero-pop .hero-cup-logo { left: 49.5%; top: 65%; width: 21%; height: auto; transform: translate(-50%,-50%); filter: none; }
.pop-ground { position: absolute; left: 31%; width: 42%; height: 5%; bottom: -1%; background: #485831; border-radius: 50%; filter: blur(15px); opacity: .15; z-index: 1; }
.pop-fruit-position { position: absolute; right: -17%; bottom: -6%; width: 55%; z-index: 4; pointer-events: none; }
.pop-fruit-parallax { transform: translate3d(var(--fruit-x,0px),var(--fruit-y,0px),0); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.pop-fruit-float { width: 100%; height: auto; filter: drop-shadow(0 17px 10px rgba(61,73,30,.15)); animation: fruit-float 7.5s ease-in-out -2s infinite; }
.hero-pop .hero-mot { width: 25%; left: 2%; bottom: -1%; z-index: 5; transform: rotate(-4deg); }
.hero-pop .mot-speech { transform: rotate(2deg); }
.hero-pop .hero-seal { top: 2%; right: -1%; z-index: 5; }
.pop-spark { position: absolute; font-size: 39px; top: 16%; left: 8%; color: var(--leaf); transform: rotate(17deg); }
.pop-leaf { position: absolute; width: 68px; height: 29px; border-radius: 95% 0 95% 0; background: #637f3f; box-shadow: inset 0 -1px 0 #395927, 4px 7px 9px #4a622822; z-index: 4; pointer-events: none; }
.pop-leaf::before { content: ''; position: absolute; height: 1px; background: #c0d393; left: 7%; right: 7%; top: 49%; transform: rotate(-20deg); opacity: .65; }
.pop-leaf-one { right: 0; top: 39%; transform: rotate(-38deg); animation: leaf-float 8s ease-in-out infinite; }
.pop-leaf-two { left: 8%; top: 41%; width: 43px; height: 20px; transform: rotate(23deg); opacity: .8; }
.hero-pop .hero-art-caption { left: 20%; bottom: -8%; font-size: 7px; letter-spacing: .08em; }
.pop-motion-toggle { position: absolute; right: 0; bottom: -9%; z-index: 7; display: inline-flex; align-items: center; gap: 7px; padding: 8px 0 8px 8px; min-height: 40px; background: transparent; color: var(--leaf); font-size: 9px; cursor: pointer; }
.pop-motion-toggle[hidden] { display: none; }
.pop-motion-icon { border: 1px solid #a5b592; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.pop-motion-toggle:hover .pop-motion-icon { background: var(--leaf); color: var(--paper); }
.hero-immersive .hero-scroll { right: 53%; }
.hero-pop.pop-arriving .pop-cup-position { animation: cup-arrive 1.1s cubic-bezier(.16,1,.3,1) both; }
.hero-pop.pop-arriving .pop-fruit-position { animation: fruit-arrive 1.2s .15s cubic-bezier(.16,1,.3,1) both; }
.hero-pop[data-in-view=false] .pop-cup-float, .hero-pop[data-in-view=false] .pop-fruit-float, .hero-pop[data-in-view=false] .pop-leaf-one { animation-play-state: paused; }
html[data-motion=paused] .pop-cup-float, html[data-motion=paused] .pop-fruit-float, html[data-motion=paused] .pop-leaf-one, html[data-motion=paused] .ticker-track { animation-play-state: paused; }
html[data-motion=paused] .hero-pop.pop-arriving .pop-cup-position, html[data-motion=paused] .hero-pop.pop-arriving .pop-fruit-position { animation-play-state: paused; }
html[data-motion=paused] .pop-cup-parallax, html[data-motion=paused] .pop-fruit-parallax { transform: none; }
html:not([data-motion]) .pop-cup-float, html:not([data-motion]) .pop-fruit-float, html:not([data-motion]) .pop-leaf-one, html:not([data-motion]) .ticker-track { animation: none; }
@keyframes cup-float { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-13px) rotate(-6deg); } }
@keyframes fruit-float { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes leaf-float { 0%,100% { transform: translateY(0) rotate(-38deg); } 50% { transform: translateY(-14px) rotate(-26deg); } }
@keyframes cup-arrive { from { opacity: 0; transform: translate(-44%,45px) scale(.88); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
@keyframes fruit-arrive { from { opacity: 0; transform: translate(15px,30px) rotate(-8deg); } to { opacity: 1; transform: translate(0,0) rotate(0); } }
@media(min-width:1600px) { .hero-immersive { min-height: 870px; } .hero-pop { height: 760px; } }
@media(max-width:1100px) {
  .hero-immersive { min-height: 720px; grid-template-columns: .95fr 1.05fr; }
  .hero-immersive h1 { font-size: 65px; }
  .hero-pop { height: 590px; }
  .pop-cup-position { height: 112%; left: 56%; top: -4%; }
  .pop-fruit-position { right: -17%; width: 60%; bottom: -5%; }
  .hero-pop .hero-art-caption { font-size: 5px; left: 13%; }
  .pop-motion-toggle { font-size: 8px; bottom: -10%; }
}
@media(max-width:900px) {
  .hero-immersive { min-height: 660px; padding-top: 45px; }
  .hero-immersive h1 { font-size: clamp(48px,6.6vw,65px); }
  .hero-pop { height: 510px; }
  .pop-cup-position { height: 112%; top: -4%; }
  .hero-pop .hero-seal { top: 6%; right: -2%; }
  .hero-pop .hero-mot { width: 29%; left: 0; bottom: 0; }
  .pop-spark { font-size: 28px; top: 18%; }
  .pop-leaf-one { width: 45px; height: 22px; }
  .pop-motion-toggle .pop-motion-label { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .hero-pop .hero-art-caption { bottom: -9%; }
}
@media(max-width:600px) {
  .hero-immersive { padding-top: 31px; padding-bottom: 68px; height: auto; min-height: 0; max-height: none; }
  .hero-immersive .hero-scroll { right: var(--gutter); }
  .hero-immersive h1, html[lang=en] .hero-immersive h1 { font-size: clamp(46px,12.7vw,69px); }
  .hero-pop { order: 2; height: 130vw; max-height: 650px; margin-top: 39px; margin-bottom: 49px; width: 100%; }
  .pop-backdrop { inset: 15% -1% 11% 5%; border-radius: 48% 48% 9px 9px / 36% 36% 9px 9px; transform: rotate(5deg); }
  .pop-backdrop-word { font-size: 24vw; top: 21%; left: 6%; }
  .pop-backdrop-note { font-size: 5px; left: 7%; bottom: 10%; }
  .pop-cup-position { height: 112%; top: -4%; left: 54%; }
  .pop-cup-float { animation-duration: 8s; }
  .pop-fruit-position { width: 59%; bottom: -4%; right: -16%; }
  .hero-pop .hero-mot { width: 27%; bottom: 0; left: 0; }
  .hero-pop .hero-seal { top: 3%; right: -1%; width: 69px; height: 69px; }
  .hero-pop .hero-seal img { width: 39px; height: 33px; }
  .pop-orbit { inset: 10% -1% 18% 0; }
  .hero-pop .hero-art-caption { left: 12%; bottom: -7%; font-size: 5px; gap: 7px; }
  .pop-motion-toggle { right: -4px; bottom: -9%; }
  .pop-motion-toggle .pop-motion-icon { width: 27px; height: 27px; }
  .pop-ground { bottom: -1%; left: 30%; width: 40%; }
  .pop-spark { font-size: 26px; top: 17%; left: 3%; }
  .pop-leaf-one { width: 40px; height: 19px; right: -2%; }
  .pop-leaf-two { width: 30px; height: 15px; left: 0; top: 39%; }
}
@media(max-width:360px) {
  .hero-immersive h1, html[lang=en] .hero-immersive h1 { font-size: 42px; }
  .hero-pop { height: 133vw; margin-bottom: 44px; }
  .hero-pop .hero-art-caption { font-size: 4.4px; left: 10%; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-pop *, .hero-pop *::before, .hero-pop *::after { animation: none !important; transition: none !important; }
  .pop-cup-parallax, .pop-fruit-parallax { transform: none; }
}