/* Hold the existing hero sequence until the owner's shush has finished. */
.intro-active{overflow:hidden}
.intro-pending body::before{content:'';position:fixed;inset:0;z-index:9998;background:var(--wine)}
.intro-pending body>:not(#opening-intro){visibility:hidden}
.intro-pending .hero,.intro-pending .hero::before,.intro-pending .hero *{animation-name:none!important}
.opening-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;background:var(--wine);opacity:1;transition:opacity .6s .14s ease-in-out}
.opening-intro[hidden]{display:none}
.opening-mascot{display:block;width:min(720px,100vw,82svh);height:auto;max-height:100%;object-fit:contain;opacity:1;transform:translateY(0) scale(1);transition:opacity .34s ease,transform .48s cubic-bezier(.22,.8,.3,1)}
/* Separate alpha extraction from color painting. Dark matte pixels are fully
   transparent before exact brand ink is composited, including during fades.
   Keep filter definitions available while the intro hides the rest of the page. */
.brand-ink-filters{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;visibility:visible!important}
.wordmark img{filter:url("#callate-berry-mask-v2");mix-blend-mode:normal}
.hero-wordmark img,.opening-mascot{filter:url("#callate-cream-mask-v2");mix-blend-mode:normal}
.opening-skip{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 15px;border:1px solid #f8f1eb66;border-radius:999px;background:transparent;color:var(--cream);font:inherit;font-size:.875rem;cursor:pointer;transition:opacity .2s}
.opening-skip:hover{background:#f8f1eb12}
.opening-skip:focus-visible{outline:2px solid var(--cream);outline-offset:5px}
.opening-intro.is-leaving{opacity:0;pointer-events:none}
.is-leaving .opening-mascot{opacity:0;transform:translateY(-10px) scale(.95)}
.is-leaving .opening-skip{opacity:0}
@media(prefers-reduced-motion:reduce){.opening-intro,.opening-mascot,.opening-skip{transition:none}}

/* Pausing never leaves an entrance animation half-visible. */
.motion-paused{scroll-behavior:auto}
.entrance-settled .hero::before,.entrance-settled .hero-copy,.entrance-settled .hero-copy *{animation:none!important;clip-path:none!important}

/* Keep both motion controls together without overlapping mobile content. */
.hero-motion-controls{display:flex;justify-content:center;align-items:center;gap:8px;position:relative;z-index:4;margin:20px auto -30px}
.hero .hero-motion-controls .motion-toggle,.hero .intro-replay{position:relative;inset:auto;margin:0;min-height:44px;padding:10px 14px;border:0;background:transparent;color:var(--pink);font:inherit;font-size:.7rem;text-decoration:underline;text-underline-offset:4px;opacity:.9}
.intro-replay[hidden],.motion-paused .intro-replay{display:none}
@media(max-width:600px){.hero-motion-controls{margin:10px auto -28px}.hero .hero-motion-controls .motion-toggle,.hero .intro-replay{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.hero-motion-controls{display:none}}