/* The scroll story (src/story/): text sections scroll over the fixed street canvas while the camera
   walks up to the door and through Mochi's place. --story-leave (0 to 1, set by story.js as the
   camera leaves the hold) fades the hero's overlays; without JavaScript it stays 0. */
:root{--story-glow:0 1px 2px #1d130b99,0 2px 16px #1d130b8c}
.logo-wrap,.hero-copy{opacity:calc(1 - var(--story-leave,0))}
.story{position:relative;z-index:2}
.story-flash{position:fixed;inset:0;z-index:0;opacity:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 46%,#fff8e8,#ffe4b4 48%,#f3bd7f)}
.story-hero{height:100vh;height:100svh}
.story-walk{height:160vh}
.story-beat{position:relative;z-index:1;display:flex;align-items:center;min-height:150vh;padding:0 max(6.5vw,calc(env(safe-area-inset-left) + 24px))}
.story-right{justify-content:flex-end;padding:0 max(6.5vw,calc(env(safe-area-inset-right) + 24px))}
.story-end{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:120vh;padding:0 24px 14vh}
.story-card{position:relative;max-width:min(31rem,44vw);text-shadow:var(--story-glow)}
.story-card::before{content:"";position:absolute;z-index:-1;inset:-48% -36% -48% -30%;background:radial-gradient(closest-side,#1d130b8f,#1d130b4d 56%,#1d130b00);pointer-events:none}
.story-card h2{margin:0;font-size:clamp(32px,4.1vw,60px);font-weight:800;line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.story-card p{margin:.75em 0 0;font-size:clamp(17px,1.4vw,21px);font-weight:650;line-height:1.38;text-wrap:pretty}
.story-cta{display:flex;flex-direction:column;align-items:center;max-width:min(36rem,100%);text-align:center}
.story-cta h2{font-size:clamp(28px,3.3vw,46px)}
.story-logo{display:block;width:min(64vw,300px);height:auto;margin-bottom:clamp(14px,2.4vh,26px);filter:drop-shadow(0 6px 22px #3a1f0a59)}
/* The same note as the hero's: a quiet pill, plain text, no badge art. */
.story-card .story-soon{display:inline-flex;align-items:center;gap:.6em;margin:clamp(18px,3vh,30px) 0 0;padding:.75em 1.25em .75em 1.05em;border:1px solid #fff4dc8f;border-radius:999px;background:#241a1259;font-size:clamp(13px,1.05vw,15px);font-weight:800;letter-spacing:.015em;line-height:1.2;white-space:nowrap}
.story-soon svg{flex:none;width:1.15em;height:1.15em;filter:drop-shadow(0 1px 2px #1d130b80)}
/* Phones: the words sit centred toward the bottom; the camera centres his place above them. */
@media(max-aspect-ratio:3/4){
  .story-beat{justify-content:center;padding:0 16px}
  .story-card{max-width:30rem;text-align:center}
  .story-card::before{inset:-40% -14%}
  .story-card h2{font-size:clamp(27px,7.6vw,38px)}
  .story-card p{font-size:clamp(16px,4.3vw,19px)}
}
/* Words come up as they arrive and fade as they leave, where the browser can tie that to scrolling. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .story-card{animation:story-card linear both;animation-timeline:view();animation-range:entry 5% exit 95%}
    @keyframes story-card{0%{opacity:0;translate:0 28px}24%,76%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -20px}}
    .story-end .story-card{animation-name:story-end;animation-range:entry 5% cover 45%}
    @keyframes story-end{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
  }
}