/* Emil design engineering: transform/opacity motion, immediate keyboard actions,
   quiet offscreen scenes, and a static reduced-motion presentation. */
:root{--motion-out:cubic-bezier(.23,1,.32,1);--motion-smooth:cubic-bezier(.45,0,.55,1)}
.reading-progress{position:absolute;inset:auto 0 -1px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}
.hero{overflow:hidden}
.hero-image{animation:coffee-breathe 26s var(--motion-smooth) infinite}
.hero-seal{position:absolute;right:max(56px,calc((100vw - 1240px)/2));bottom:56px;width:176px;height:176px;border-radius:50%;background:var(--accent);color:var(--ink);box-shadow:0 4px 18px #0000001a;pointer-events:none}
.seal-type{position:absolute;inset:0;width:100%;height:100%;animation:seal-turn 32s linear infinite}
.seal-type text{font:700 12px Arial,Helvetica,sans-serif;letter-spacing:1.8px;fill:currentColor}
.seal-centre{position:absolute;inset:38px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;mix-blend-mode:multiply;animation:pineapple-float 5s var(--motion-smooth) infinite}
.seal-centre img{width:32px;height:auto;mix-blend-mode:multiply}
.seal-centre span{font-size:8px;font-weight:700;letter-spacing:.13em}
.brand-ribbon{overflow:hidden;background:var(--accent);color:var(--ink);padding-block:20px;border-block:1px solid #b49636}
.ribbon-track{display:flex;width:max-content;animation:ribbon-travel 30s linear infinite}
.ribbon-group{display:flex;align-items:center;gap:52px;padding-right:52px;flex-shrink:0}
.ribbon-group span{font:400 clamp(32px,4vw,58px)/1.1 Georgia,serif;letter-spacing:-.035em;white-space:nowrap}
.ribbon-group svg{width:34px;height:34px;flex-shrink:0}
.coffee-feature{position:relative;isolation:isolate;overflow:hidden}
.feature-layout{position:relative;z-index:1}
.feature-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.orbit-line{position:absolute;right:-180px;bottom:-230px;width:680px;height:680px;border:1px dashed #efc64760;border-radius:50%;animation:seal-turn 72s linear infinite}
.orbit-line-two{right:-100px;bottom:-150px;width:520px;height:520px;border-style:solid;transform:rotate(-18deg) scaleX(.78);animation:orbit-drift 22s var(--motion-smooth) infinite alternate}
.floating-bean{position:absolute;width:46px;height:70px;border:2px solid #efc64775;border-radius:50%;transform:rotate(35deg);animation:bean-float 9s var(--motion-smooth) infinite}
.floating-bean::after{content:'';position:absolute;inset:7px 20px;border-left:2px solid #efc64775;border-radius:50%;transform:rotate(8deg)}
.bean-one{left:47%;top:5%;animation-delay:-2s}
.bean-two{right:4%;top:45%;width:34px;height:54px;animation-delay:-6s}
.bean-two::after{inset:6px 14px}
.coffee-doodle{display:flex;align-items:center;gap:20px;color:var(--accent);margin-bottom:20px}
.coffee-doodle svg{width:94px;height:79px;overflow:visible;flex-shrink:0}
.coffee-doodle>span{font-size:12px;font-weight:600;letter-spacing:.025em}
.steam{animation:steam-rise 4.2s var(--motion-smooth) infinite}
.steam-two{animation-delay:-1.4s}.steam-three{animation-delay:-2.8s}
.hero-image,.ambient{animation-play-state:paused}
.motion-enabled .motion-scene.is-motion-active .ambient,.motion-enabled .hero.is-motion-active .hero-image{animation-play-state:running}
.motion-paused .ambient,.motion-paused .hero-image{animation-play-state:paused!important}
.reveal{transition:transform 620ms var(--motion-out),opacity 620ms var(--motion-out);transition-delay:var(--reveal-delay,0ms)}
.reveal-pending{opacity:0;transform:translateY(28px)}
.gallery-item{cursor:zoom-in}
.gallery-item img{transition:transform 600ms var(--motion-out)}
.gallery-open{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--ink);font-size:22px;transition:transform 200ms var(--motion-out),opacity 200ms ease;pointer-events:none}
.gallery-photo figcaption{display:flex;align-items:center;justify-content:space-between;gap:14px}
.gallery-caption-arrow{color:var(--green);opacity:0;transform:translateX(-8px);transition:transform 220ms var(--motion-out),opacity 220ms ease}
.button{transition:transform 160ms var(--motion-out),background 180ms ease,box-shadow 180ms ease}
.button:active,.nav-toggle:active,.mobile-shortcuts a:active,.mobile-shortcuts button:active{transform:scale(.97)}
.nav-toggle,.mobile-shortcuts a,.mobile-shortcuts button{transition:transform 160ms var(--motion-out),background 180ms ease,color 180ms ease}
.text-link span,.button>span{transition:transform 220ms var(--motion-out)}
.gallery-photo:focus-within .gallery-caption-arrow{opacity:1;transform:none}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';display:block;font:400 25px/1 Arial,sans-serif;color:var(--green);transition:transform 200ms var(--motion-out)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.keyboard-input{scroll-behavior:auto}
.keyboard-input .reveal,.keyboard-input .keyboard-input .gallery-item img,.keyboard-input .faq-list summary::after{transition:none}
.keyboard-input button:active,.keyboard-input .button:active{transform:none}
@media(hover:hover) and (pointer:fine){
 .button:hover{transform:translateY(-3px);box-shadow:0 7px 0 #284d4214}.button:active{transform:translateY(0) scale(.97);box-shadow:none}
 .gallery-item:hover img{transform:scale(1.055)}
 .gallery-item:hover .gallery-open{transform:rotate(-12deg) scale(1.08)}
 .gallery-photo:hover .gallery-caption-arrow{opacity:1;transform:translateX(0)}
 .text-link:hover span,.button:hover>span{transform:translate(3px,-3px)}
 .keyboard-input .button:hover{transform:none}
}
@keyframes seal-turn{to{transform:rotate(360deg)}}
@keyframes coffee-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes pineapple-float{0%,100%{transform:translateY(3px) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes ribbon-travel{to{transform:translateX(-50%)}}
@keyframes steam-rise{0%,100%{opacity:.25;transform:translateY(4px)}50%{opacity:1;transform:translateY(-9px)}}
@keyframes bean-float{0%,100%{transform:translateY(0) rotate(35deg)}50%{transform:translateY(-24px) rotate(55deg)}}
@keyframes orbit-drift{from{transform:translate(0,0) rotate(-18deg) scaleX(.78)}to{transform:translate(-35px,-25px) rotate(16deg) scaleX(.9)}}
@media(max-width:767px){
 .hero-seal{top:calc(var(--header-height) + 34px);right:clamp(16px,5vw,26px);bottom:auto;width:clamp(112px,31vw,154px);height:clamp(112px,31vw,154px);border:1px solid rgba(255,255,255,.72);background:transparent;color:rgba(255,255,255,.88);box-shadow:none}
 .seal-centre{inset:27px;gap:5px;mix-blend-mode:normal}.seal-centre img{width:24px;filter:invert(1);mix-blend-mode:normal}.seal-centre span{font-size:6px}
 .brand-ribbon{padding-block:19px}.ribbon-group{gap:28px;padding-right:28px}.ribbon-group svg{width:24px;height:24px}
 .coffee-doodle svg{width:78px;height:66px}.coffee-doodle{gap:18px;margin-bottom:22px}
 .orbit-line{width:460px;height:460px;right:-220px;bottom:-190px}.orbit-line-two{width:330px;height:330px;right:-150px;bottom:-100px}
 .bean-one{left:auto;right:5%;top:3%}.bean-two{display:none}
 .reveal-pending{transform:translateY(20px)}
}
@media(max-height:650px) and (max-width:767px){.hero-seal{display:none}}
@media(prefers-reduced-motion:reduce){
 .hero-image,.ambient{animation:none!important;transform:none}
 .reveal,.reveal-pending{opacity:1;transform:none;transition:none}
 .gallery-item img,.gallery-open,.gallery-caption-arrow,.button,.faq-list summary::after{transition:none}
 .button:hover,.gallery-item:hover img,.gallery-item:hover .gallery-open,.text-link:hover span,.button:hover>span{transform:none}
}