/* One photographic camera journey. Everything is scoped to the opening. */
#siteWrapper #coffee-story.coffee-cinema{position:relative;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#183b27;overflow:visible!important;color:#f3f0e5}
.coffee-cinema .cine-stage{position:relative;isolation:isolate}.coffee-cinema .cine-visual{position:relative;height:100dvh;min-height:320px;overflow:hidden;background:#183b27}.coffee-cinema .cine-first-frame,.coffee-cinema .cine-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}.coffee-cinema .cine-canvas{opacity:0}.coffee-cinema.is-rendered .cine-canvas{opacity:1}.coffee-cinema .cine-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,23,13,.35),transparent 25%);pointer-events:none}
#siteWrapper #coffee-story .cine-caption{position:absolute;left:clamp(24px,4.5vw,80px);bottom:max(40px,6svh);margin:0!important;padding:0!important;font:400 clamp(15px,1.15vw,19px)/1.4 Arial,Helvetica,sans-serif!important;letter-spacing:0!important;color:#fff9e9!important;text-shadow:0 1px 20px #07170a99;z-index:3;pointer-events:none}
.coffee-cinema .cine-scroll{position:absolute;right:clamp(24px,4.5vw,80px);bottom:max(40px,6svh);font:400 11px/1.5 Arial,Helvetica,sans-serif;color:#fff9e9;text-shadow:0 1px 10px #07170a;z-index:3}.coffee-cinema .cine-skip{position:absolute;left:20px;top:20px;transform:translateY(-200%);z-index:20;background:#f3f0e5;color:#183b27!important;padding:14px 20px;font:14px/1.4 Arial,sans-serif}.coffee-cinema .cine-skip:focus{transform:none;outline:3px solid #a88b57;outline-offset:3px}
.coffee-cinema .cine-film{position:relative;background:#183b27}.coffee-cinema.cine-enhanced{height:calc(max(100dvh,320px) + var(--cine-travel,520svh))!important}.coffee-cinema.cine-enhanced .cine-stage{position:sticky;top:0;height:100dvh;min-height:320px;overflow:hidden}.coffee-cinema.cine-enhanced .cine-visual{position:absolute;inset:0;height:100%;min-height:0}.coffee-cinema.cine-enhanced .cine-film{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;will-change:clip-path;overflow:hidden}.coffee-cinema.cine-enhanced .cine-film.is-active{visibility:visible;pointer-events:auto}
.coffee-cinema .cine-film-plane{position:relative;transform-origin:0 0}.coffee-cinema.cine-enhanced .cine-film-plane{position:absolute;inset:0;will-change:transform}
.coffee-cinema .cine-foreground{display:none;position:absolute;left:-5%;bottom:-10%;width:76%;height:110%;max-width:none;object-fit:contain;object-position:left bottom;pointer-events:none;opacity:0;transform-origin:left bottom}
.coffee-cinema.cine-enhanced .cine-foreground{display:block;will-change:transform,opacity}
.coffee-cinema .cine-mist{position:absolute;inset:-20%;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 49% 42%,rgba(232,237,215,.22),transparent 28%),radial-gradient(ellipse at 70% 49%,rgba(232,237,215,.14),transparent 25%);mix-blend-mode:screen}
@media(max-width:759px){.coffee-cinema .cine-foreground{left:-20%;width:130%;bottom:-12%;height:105%}}
.coffee-cinema.cine-pending{height:620svh!important}.coffee-cinema.cine-pending .cine-stage{position:sticky;top:0;height:100dvh;overflow:hidden}.coffee-cinema.cine-pending .cine-film{display:none}@media(max-width:759px){.coffee-cinema.cine-pending{height:560svh!important}}
#siteWrapper #coffee-story #home-film.copy-hero{position:relative!important;inset:auto!important;height:100dvh!important;min-height:320px!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;opacity:1!important;visibility:visible!important;overflow:hidden!important;background:#183b27 url('/assets/cinema17/home-poster.jpg') center/cover no-repeat!important}
#siteWrapper #coffee-story.cine-enhanced #home-film.copy-hero{height:100%!important;min-height:0!important;position:absolute!important;inset:0!important}
#home-film #mrgt-film{position:absolute!important;inset:0!important;display:block!important;object-fit:cover!important;width:100%!important;height:100%!important;max-width:none!important;opacity:1!important}
#coffee-story #home-film .cinema-film-narration{position:absolute;left:clamp(24px,4.5vw,80px);right:24px;bottom:max(40px,7svh);z-index:2;color:#fff9e9;text-shadow:0 2px 25px #0008;pointer-events:none}
#siteWrapper #coffee-story #home-film .cinema-film-narration h2{font:400 clamp(20px,2vw,30px)/1.2 Arial,Helvetica,sans-serif!important;letter-spacing:-.02em!important;color:#fff9e9!important;margin:12px 0!important;max-width:25ch!important}
#siteWrapper #coffee-story #home-film .cinema-film-narration p{font:400 11px/1.6 Arial,Helvetica,sans-serif!important;letter-spacing:0!important;color:#fff9e9!important;margin:0!important}
body.cine-before-film #siteWrapper #header.copy-header{visibility:hidden!important;opacity:0!important;pointer-events:none!important;transform:translateY(-120%)!important}
body.cine-at-film #siteWrapper #header.copy-header{visibility:visible!important;opacity:1!important;transform:none!important;position:fixed!important;z-index:1000!important;inset:14px 16px auto!important;width:auto!important}
body.cine-before-film #mrgt-atlas-return{visibility:hidden!important;pointer-events:none!important}
body.cine-before-film .copy-atlas-return{visibility:hidden!important;pointer-events:none!important}
body.cine-before-film #customer-navigation{display:none!important}
@media(max-width:760px){#siteWrapper #coffee-story .cine-caption{bottom:max(30px,6svh);font-size:15px!important}.coffee-cinema .cine-scroll{bottom:max(30px,6svh);font-size:10px}#siteWrapper #coffee-story #home-film .cinema-film-narration p{font-size:10px!important}body.cine-at-film #siteWrapper #header.copy-header{inset:8px 8px auto!important}}
@media(prefers-reduced-motion:reduce){.coffee-cinema .cine-scroll{display:none}.coffee-cinema .cine-canvas{display:none}.coffee-cinema .cine-first-frame{transform:none!important}#home-film *{transition:none!important}}

/* Close canopy opens with the same native progress, even before the compositor arrives. */
.coffee-cinema .cine-canopy{display:block;position:absolute;inset:0;left:0;bottom:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:clamp(0,calc((.2 - var(--cine-p,0))*100000),1);transform:none}
.coffee-cinema .cine-canopy img{position:absolute;display:block;max-width:none;object-fit:contain;pointer-events:none;will-change:transform}
.coffee-cinema .cine-leaf-left{left:-22%;bottom:-27%;height:90%;width:auto;transform-origin:left bottom;transform:translate3d(calc(var(--cine-p,0)*-1200%),calc(var(--cine-p,0)*140%),0) scale(calc(1 + var(--cine-p,0)*5.5)) rotate(calc(var(--cine-p,0)*-42deg))}
.coffee-cinema .cine-leaf-right{right:-23%;top:-34%;height:84%;width:auto;transform-origin:right top;transform:translate3d(calc(var(--cine-p,0)*1250%),calc(var(--cine-p,0)*-160%),0) scaleX(-1) scale(calc(1 + var(--cine-p,0)*6)) rotate(-62deg)}
.coffee-cinema .cine-caption{bottom:max(32px,calc(env(safe-area-inset-bottom) + 24px))!important}
.coffee-cinema .cine-canvas{transition:none}
.coffee-cinema .cine-skip{transform:none;clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap}
.coffee-cinema .cine-skip:focus{clip-path:none;width:auto;height:auto;padding:14px 20px;overflow:visible;white-space:normal}
@media(max-width:759px){.coffee-cinema .cine-leaf-left{left:-68%;bottom:-22%;height:72%}.coffee-cinema .cine-leaf-right{right:-66%;top:-25%;height:66%}}
@media(prefers-reduced-motion:reduce){.coffee-cinema .cine-canopy{display:none!important}.coffee-cinema .cine-canvas{transition:none}}