/* One real tin, one quiet opening. The float moves inside a reserved frame. */
.home-page .experience-hero {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center; gap:3vw; padding:36px 7% 64px;
  height:calc(100svh - 82px); min-height:600px;
  background:#f5f1e8; color:var(--pink); overflow:hidden;
}
.home-page .experience-hero::after { content:none; }
.home-page .experience-hero .experience-copy {
  text-align:left; max-width:640px; margin:0; padding:0;
}
.home-page .experience-hero .experience-copy h1 {
  font-size:clamp(48px,5.9vw,86px); line-height:1.03; letter-spacing:-.035em;
}
.home-page .experience-hero .experience-copy>p {
  font-size:13px; line-height:1.8; margin:26px 0 24px; max-width:320px;
}
.home-page .experience-hero .experience-actions { justify-content:flex-start; gap:12px 22px; }
.home-page .experience-hero .experience-actions .button {
  width:auto; min-height:44px; padding:11px 18px; gap:16px; font-size:12px;
}
.home-page .experience-hero .experience-actions .button>.action-arrow:last-child {
  width:auto; height:auto; flex-basis:auto; font-size:16px;
}
.home-page .experience-hero .experience-shop { min-height:44px; gap:10px; font-size:12px; }
.home-page .experience-hero .experience-shop .action-arrow { width:auto; height:auto; flex-basis:auto; font-size:14px; }
.hero-product-stage {
  position:relative; z-index:1; margin:0; justify-self:center;
  width:min(100%,60svh,560px); aspect-ratio:4/5; padding:0;
}
.hero-product-tilt,.hero-product-float { width:100%; height:100%; }
.hero-product-tilt { transition:transform 700ms cubic-bezier(.22,1,.36,1); }
.hero-product-float {
  position:relative; z-index:1; transform:translateY(-4px) rotate(-5deg);
  animation:koume-float 8s ease-in-out infinite; animation-play-state:paused;
}
.hero-product-stage img { display:block; width:100%; height:100%; object-fit:contain; }
.hero-tin-design { position:relative; z-index:1; }
.hero-memory-layer {
  position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none;
  background:var(--pink);
}
.experience-hero[data-reveal='active'] .hero-memory-layer {
  mask:url('assets/koume-tin-new-800.webp') center/contain no-repeat;
  -webkit-mask:url('assets/koume-tin-new-800.webp') center/contain no-repeat;
}
.hero-memory-layer img { position:absolute; inset:0; object-fit:cover; opacity:0; }
.hero-ground {
  position:absolute; left:16%; right:12%; bottom:5%; height:3.5%;
  border-radius:50%; background:#49342e; opacity:.1; filter:blur(9px);
  animation:koume-shadow 8s ease-in-out infinite; animation-play-state:paused;
}
.hero-product-stage figcaption {
  position:absolute; top:100%; left:0; right:0; margin-top:10px;
  text-align:center; font-family:var(--sans); font-size:9px;
  line-height:1.5; letter-spacing:.13em; color:var(--soft-ink);
}
.hero-motion-toggle {
  position:absolute; z-index:3; bottom:15px; left:7%; display:inline-flex;
  align-items:center; gap:8px; min-height:44px; padding:0; border:0;
  background:transparent; color:var(--soft-ink); font-family:var(--sans);
  font-size:10px; cursor:pointer;
}
.hero-motion-toggle[hidden] { display:none; }
.hero-motion-toggle::before { content:''; width:6px; height:6px; border:1px solid currentColor; border-radius:50%; background:currentColor; opacity:.5; }
.experience-hero[data-motion='paused'] .hero-motion-toggle::before { background:transparent; }
.hero-motion-toggle:focus-visible { outline:2px solid var(--pink); outline-offset:4px; }
.experience-hero[data-motion='running'] :is(.hero-product-float,.hero-ground) { animation-play-state:running; }
@keyframes koume-float {
  0%,100% { transform:translateY(-4px) rotate(-5deg); }
  50% { transform:translateY(-18px) rotate(-3.5deg); }
}
@keyframes koume-shadow {
  0%,100% { transform:scaleX(1); opacity:.1; }
  50% { transform:scaleX(.9); opacity:.065; }
}
@media(max-width:1000px) and (min-width:751px) {
  .home-page .experience-hero { gap:16px; padding-inline:5%; }
  .home-page .experience-hero .experience-copy h1 { font-size:clamp(43px,5.6vw,60px); }
  .home-page .experience-hero .experience-actions { gap:12px; }
  .home-page .experience-hero .experience-actions .button { gap:10px; padding-left:14px; font-size:11px; }
  .home-page .experience-hero .experience-shop { font-size:11px; gap:8px; }
}
@media(max-width:750px) {
  .experience-hero[data-reveal='active'] .hero-memory-layer {
    mask-image:url('assets/koume-tin-new-400.webp');
    -webkit-mask-image:url('assets/koume-tin-new-400.webp');
  }
  .home-page .experience-hero {
    grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);
    height:calc(100svh - 70px); min-height:620px; gap:14px; padding:30px 6% 54px;
  }
  .home-page .experience-hero .experience-copy { text-align:center; margin:0 auto; }
  .home-page .experience-hero .experience-copy h1 { font-size:clamp(36px,9.5vw,60px); line-height:1.04; }
  .home-page .experience-hero .experience-copy>p { margin:16px auto 18px; font-size:11px; max-width:none; }
  .home-page .experience-hero .experience-actions { justify-content:center; gap:12px 18px; }
  .home-page .experience-hero .experience-actions .button { font-size:11px; padding-left:15px; gap:12px; }
  .home-page .experience-hero .experience-shop { font-size:11px; }
  .hero-product-stage { height:auto; width:min(100%,max(240px,calc(80svh - 280px)),360px); max-width:86%; aspect-ratio:4/5; min-height:0; align-self:center; }
  .hero-product-stage figcaption { font-size:8px; margin-top:5px; }
  .hero-product-float { animation-name:koume-float-mobile; }
  .hero-ground { filter:blur(6px); }
  .hero-motion-toggle { left:6%; bottom:4px; font-size:9px; }
}
@keyframes koume-float-mobile {
  0%,100% { transform:translateY(-2px) rotate(-4deg); }
  50% { transform:translateY(-9px) rotate(-3deg); }
}
@media(max-width:360px) {
  .home-page .experience-hero { padding-top:24px; }
  .home-page .experience-hero .experience-actions { gap:12px; }
  .home-page .experience-hero .experience-copy h1 { font-size:34px; }
  .home-page .experience-hero .experience-actions .button { padding-left:12px; gap:8px; }
}
@media(min-width:751px) and (max-height:700px) {
  .home-page .experience-hero { min-height:500px; }
  .home-page .experience-hero .experience-copy h1 { font-size:clamp(46px,5.4vw,70px); }
}
@media(min-width:600px) and (max-width:750px) and (max-height:600px) {
  .home-page .experience-hero { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto; min-height:380px; padding:24px 5% 48px; gap:16px; }
  .home-page .experience-hero .experience-copy { text-align:left; }
  .home-page .experience-hero .experience-copy h1 { font-size:clamp(32px,5.6vw,42px); }
  .home-page .experience-hero .experience-actions { justify-content:flex-start; gap:8px; }
  .home-page .experience-hero .experience-actions .button { gap:8px; padding-left:12px; }
  .hero-product-stage { width:min(100%,60svh); max-width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-product-float,.hero-ground { animation:none; }
  .hero-product-tilt { transition:none; transform:none!important; }
}
.motion-still :is(.hero-product-float,.hero-ground) { animation:none; }
.motion-still .hero-product-tilt { transition:none; transform:none!important; }