/* Native scroll and one persistent atmosphere layer. No scroll masks or 3D. */
@view-transition { navigation: none; }
html { scroll-behavior: auto; }
body { isolation: isolate; }
.site-header { view-transition-name: none; }
.motion-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.motion-backdrop > span { position: absolute; width: min(1000px, 85vw); height: min(800px, 75vh); border-radius: 50%; background: radial-gradient(ellipse, #bb7f4418 0%, #a46e3210 32%, transparent 70%); }
.motion-backdrop > span:first-child { left: -20%; top: -15%; }
.motion-backdrop > span:last-child { right: -22%; bottom: -18%; background: radial-gradient(ellipse, #9a654c1a 0%, #9862330c 35%, transparent 70%); }
#page-view,body > main,body > .site-footer { position: relative; z-index: 1; }
.menu-hero,.story-hero,.visit-hero { perspective: none; }
.hero-media,.menu-hero-photo,.story-hero-image,.visit-hero-photo { overflow: hidden; }
.hero-media > video,.hero-media > img,.menu-hero-photo > img,.story-hero-image > img,.visit-hero-photo > img { transform-origin: 50% 50%; }
/* Retired parallax attributes do not need permanent compositor reservations.
   Active view-timeline/WAAPI effects manage their own short-lived layers. */
[data-parallax] > img { will-change: auto; }
@keyframes stillroom-section-reveal { from { opacity: .56; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes stillroom-section-reveal-soft { from { opacity: .86; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@supports (animation-timeline:view()) and (animation-range:entry-crossing 0% entry-crossing 42%) {
  /* A fixed portion of the viewport, independent of the block's height.
     Reverse scrolling naturally fades the block toward the lower edge again. */
  .scroll-reveal { animation: stillroom-section-reveal 1s linear both; animation-timeline: view(block); animation-range: entry-crossing 0% entry-crossing 42%; }
}

/* The router owns this single veil. Glass is drawn with gradients, not blur. */
.site-transition { position: fixed; inset: 0; z-index: 30000; display: grid; place-items: center; opacity: 0; visibility: hidden; pointer-events: none; background: radial-gradient(ellipse at 62% 28%, #604833 0, #30261e 43%, #171310 100%); }
.transition-glass { width: min(500px, 80vw); min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 46px 36px; border: 1px solid #f2e1c92b; border-radius: 26px; background: linear-gradient(125deg,#ffffff20 0,#ffffff06 43%,#ffffff09 100%); box-shadow: inset 0 1px 0 #fff3,inset 0 -1px 0 #ffffff08,0 30px 80px #0002; }
.transition-wordmark { color: #f2e5d3; font-family: var(--sans); font-size: clamp(46px, 7vw, 75px); font-weight: 600; letter-spacing: -.075em; line-height: 1.15; }
.transition-wordmark > span { color: #d7b085; }
.transition-line { display: block; width: 86px; height: 1px; margin: 28px 0 22px; background: linear-gradient(90deg,transparent,#e1c6a4,transparent); }
.transition-caption { font: 8px/1.5 var(--mono); letter-spacing: .17em; color: #e1ceb6; }

/* Process photographs occupy one complete frame. Only opacity changes. */
.story-process-photo [data-process-photo] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: none; transform: none; pointer-events: none; transition: opacity 420ms ease; }
.story-process[data-process-active] [data-process-photo] { opacity: 0; }
.story-process[data-process-active] [data-process-photo].is-current { opacity: 1; }
.story-process.process-scroll-blend [data-process-photo] { transition: none; }
.story-process.process-scroll-blend [data-process-photo="0"] { z-index: 0; }
.story-process.process-scroll-blend [data-process-photo="1"] { z-index: 1; }
.story-process.process-scroll-blend [data-process-photo="2"] { z-index: 2; }
.story-process-photo .process-photo-caption { z-index: 4; }
.process-step::before { transform: scaleY(0); transition: transform 420ms ease; }
.process-step.is-active::before { transform: scaleY(1); }
.process-step.is-active { border-color: #c9a47870; }

/* Keep the process photographs beside the reading experience on narrow pages.
   This is a compact native sticky frame, with no added scroll stage or pinning.
   Its opaque surface/gutter separates previously read text from the photograph. */
@media(max-width:800px) {
  .story-process .story-process-photo { position: sticky; top: 92px; height: clamp(150px, 26svh, 240px); min-height: 0; z-index: 3; align-self: start; background: #191511; border-radius: 16px; box-shadow: 0 -12px 0 8px #191511, 0 12px 0 8px #191511; }
  .story-process .story-process-copy { position: relative; z-index: 0; }
  .story-process .process-photo-caption { padding: 36px 18px 15px; }
  .story-process .process-photo-caption > .eyebrow { font-size: 8px; }
}
@media(max-width:640px) { .story-process .story-process-photo { top: 82px; } }
@media(max-width:800px) and (max-height:520px) { .story-process .story-process-photo { height: 110px; } }

.brew-story:not(.is-enhanced) [data-brew-beat]:not(:first-child) { display: none; }
.brew-story.is-enhanced { position: absolute; inset: 0; pointer-events: none; }
.brew-story.is-enhanced [data-brew-beat] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 240ms ease; }
.brew-story.is-enhanced [data-brew-beat].is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.brew-step { position: relative; text-align: left; }
.brew-step::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 240ms ease; }
.brew-step.is-active::after,.brew-step.is-complete::after { transform: scaleX(1); }
.brew-step.is-active > strong { color: #fff8ee; }
.brew-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.scroll-film { filter: none; opacity: 0; transition: opacity 300ms ease; }
.film-ready .scroll-film { opacity: 1; }
.film-fallback .scroll-film { opacity: 0; }
@media(max-width:600px) { .transition-glass { min-height: 225px; padding: 35px 24px; border-radius: 20px; } .transition-caption { font-size: 7px; } }
@media(prefers-reduced-motion:reduce) { .scroll-reveal { animation-name: stillroom-section-reveal-soft; } .story-process-photo [data-process-photo],.brew-story.is-enhanced [data-brew-beat] { transition-duration: 120ms; } }