.motion-experiment .stage{background:#f6edda}
.motion-experiment.intro-active{overflow:hidden}
.arrival{display:none;position:fixed;inset:0;z-index:100;pointer-events:none}
.intro-active .arrival{display:block}
.arrival-panel{position:absolute;inset:0;background:#f6edda;transition:transform .85s cubic-bezier(.76,0,.24,1);will-change:transform}
.arrival-wordmark{position:absolute;top:calc(50% - 174px);left:50%;font:clamp(27px,4vw,47px)/1.1 Fraunces,serif;letter-spacing:-.055em;white-space:nowrap;transform:translateX(-50%);transition:transform .85s cubic-bezier(.76,0,.24,1);transform-origin:center}
.arrival-ritual{position:absolute;left:50%;top:50%;width:220px;height:180px;transform:translate(-50%,-35%);text-align:center;transition:opacity .35s,transform .7s cubic-bezier(.22,1,.36,1)}
.arrival-cup{position:relative;overflow:hidden;isolation:isolate;width:85px;height:70px;margin:0 auto;background:#fbf3e4;border:2px solid #79513b;border-radius:5px 5px 35px 35px;box-shadow:inset -9px -8px 18px #8b5b2420}
.arrival-cup:after{content:'';position:absolute;left:0;right:0;top:0;height:9px;border-bottom:1px solid #79513b30;border-radius:50%}
.arrival-ritual:before{content:'';position:absolute;left:151px;top:10px;width:24px;height:30px;border:2px solid #79513b;border-left:0;border-radius:0 20px 20px 0}
.arrival-liquid{position:absolute;left:-15%;width:130%;bottom:-5px;height:0;background:linear-gradient(110deg,#b27749,#6a412d);border-radius:45% 45% 0 0;transition:height .08s linear;box-shadow:0 -3px 0 #d5af78}
.arrival-glint{position:absolute;left:13px;top:16px;width:5px;height:35px;border-radius:10px;background:#fff7e24a}
.arrival-saucer{width:124px;height:9px;border:1px solid #79513b88;border-radius:50%;margin:8px auto 20px;background:#efe0c5}
.arrival-steam{position:absolute;top:-34px;left:85px;display:flex;gap:10px}
.arrival-steam i{display:block;width:6px;height:29px;border-left:2px solid #9f7a52a6;border-radius:50%;animation:arrival-steam 2s ease-in-out infinite}
.arrival-steam i:nth-child(2){animation-delay:.3s}.arrival-steam i:nth-child(3){animation-delay:.6s}
.arrival-ritual p{font-size:11px;letter-spacing:.14em;color:#79513b}
.arrival-skip{pointer-events:auto;position:absolute;right:4vw;bottom:30px;padding:12px 0;border:0;background:none;color:#79513b;font-size:10px;letter-spacing:.06em}
.intro-active .site-header .brand{opacity:0}
.intro-leaving .arrival-panel{transform:translateY(-101%)}
.intro-leaving .arrival-ritual{opacity:0;transform:translate(-50%,-60%)}
.intro-leaving .arrival-skip{opacity:0}
.coffee-atmosphere{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;contain:layout paint}
.intro-active .coffee-atmosphere{z-index:101}
.coffee-bean{position:absolute;left:0;top:0;will-change:transform;object-fit:contain;filter:drop-shadow(2px 5px 4px #5d321222);pointer-events:none;user-select:none}
.motion-experiment .editorial-title .title-row{clip-path:inset(-15% -20% -18% -20%)}
.motion-experiment .entry-word,.motion-experiment .italic-row>em,.motion-experiment .italic-row>.inline-window{display:inline-block;transform:translateY(115%);opacity:0;transition:transform 1.05s cubic-bezier(.22,1,.36,1),opacity .6s}
.motion-experiment.entry-ready .entry-word,.motion-experiment.entry-ready .italic-row>em,.motion-experiment.entry-ready .italic-row>.inline-window{transform:translateY(0);opacity:1}
.motion-experiment .italic-row>em,.motion-experiment .italic-row>.inline-window{transition-delay:.11s}
.motion-experiment .title-row:last-child .entry-word{transition-delay:.21s}
.motion-experiment .hero-art{will-change:transform,opacity}
.motion-experiment .reveal-cup{will-change:transform,opacity}
@keyframes arrival-steam{0%,100%{opacity:.2;transform:translateY(3px) rotate(-7deg)}50%{opacity:.7;transform:translateY(-5px) rotate(7deg)}}
@media(max-width:760px){.arrival-wordmark{font-size:31px}.coffee-bean{filter:drop-shadow(1px 3px 3px #5d321219)}.arrival-skip{right:22px}.motion-experiment .entry-word,.motion-experiment .italic-row>em{transition-duration:.8s}}
@media(prefers-reduced-motion:reduce){.arrival,.coffee-atmosphere{display:none!important}.motion-experiment .entry-word,.motion-experiment .italic-row>em,.motion-experiment .italic-row>.inline-window{transform:none;opacity:1;transition:none}.motion-experiment.intro-active{overflow:auto}.intro-active .site-header .brand{opacity:1}}
