/* Emil design engineering: visible ambient motion for a cafe showcase.
   Core information remains static; ambient effects run only in visible sections. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--ease-float:cubic-bezier(.45,0,.55,1)}
.hero{overflow:clip}
.hero-image{transform-origin:54% 50%;animation:hero-breathe 12s var(--ease-float) infinite alternate}
.hero-orbit{position:absolute;right:24px;top:calc(var(--header-height) + 30px);width:110px;height:110px;border-radius:50%;background:var(--paper);color:var(--accent);pointer-events:none;animation:badge-float 4.8s var(--ease-float) infinite alternate}
.orbit-type{display:block;width:100%;height:100%;animation:orbit-turn 18s linear infinite}
.orbit-type text{fill:currentColor;font-family:var(--sans);font-size:8.3px;font-weight:500;letter-spacing:1.15px}
.orbit-flower{position:absolute;inset:30%;width:40%;height:40%;fill:none;stroke:currentColor;stroke-width:1.7}
.orbit-flower circle{fill:currentColor;stroke:none}
.cafe-strip{padding-bottom:0;overflow:hidden}
.cafe-marquee{overflow:hidden;border-top:1px solid var(--line);margin-top:18px;padding-block:13px 18px;pointer-events:none}
.marquee-track{display:flex;width:max-content;animation:coffee-flow 25s linear infinite}
.marquee-group{display:flex;align-items:center;gap:30px;padding-right:30px;flex:none;font-family:var(--display);font-size:49px;font-weight:500;line-height:1.1;letter-spacing:-.03em;white-space:nowrap;color:var(--accent)}
.marquee-group i{display:block;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;flex:none;position:relative}
.marquee-group i::after{content:'';position:absolute;inset:5px;border-radius:50%;background:currentColor}
.feature-section{position:relative;isolation:isolate;overflow:clip}
.feature-grid{position:relative;z-index:1}
.feature-stage{min-width:0}
.feature-photo{animation:plate-float 6s var(--ease-float) infinite alternate;transform-origin:50% 55%;box-shadow:0 18px 35px rgb(9 25 15 / .18)}
.feature-rings{position:absolute;right:-160px;top:40%;width:340px;height:340px;color:#d3dec9;opacity:.22;pointer-events:none;z-index:0}
.feature-rings svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2}
.ring-lines{transform-origin:150px 150px;animation:orbit-turn 24s linear infinite reverse}
.coffee-sketch{display:flex;align-items:center;gap:18px;margin-bottom:27px;color:var(--accent);pointer-events:none}
.coffee-sketch svg{width:90px;height:75px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.coffee-sketch>span{font-size:10px;letter-spacing:.15em;font-weight:500}
.steam-line{animation:coffee-steam 2.7s ease-in-out infinite;transform-origin:center}
.steam-line:nth-child(2){animation-delay:-.9s}
.steam-line:nth-child(3){animation-delay:-1.8s}
/* Paused outside the viewport and while a dialog or another browser tab is active. */
.ambient{animation-play-state:paused}
.motion-enabled [data-motion-zone].is-active .ambient{animation-play-state:running}
.motion-sleep .ambient,.dialog-open .ambient{animation-play-state:paused!important}
.reveal-pending{opacity:0;transform:translateY(26px)}
.button,.icon-link,.nav-toggle,.close-button,.viewer-stage button,.enlarge{transition:transform 160ms var(--ease-out),background-color 180ms ease,color 180ms ease}
.button-icon{transition:transform 220ms var(--ease-out)}
.text-link span,.button>span{display:inline-block;transition:transform 220ms var(--ease-out)}
.gallery-item .portrait img{transition:transform 520ms var(--ease-out)}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:'';position:absolute;bottom:5px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 220ms var(--ease-out)}
html:not([data-input="keyboard"]) .button:active{transform:scale(.97)}
html:not([data-input="keyboard"]) :is(.icon-link,.nav-toggle,.close-button):active{transform:scale(.92)}
html:not([data-input="keyboard"]) .viewer-stage button:active{transform:translateY(-50%) scale(.94)}
.viewer-count{font-size:11px;white-space:nowrap;color:#d8ddd5;min-width:32px;font-variant-numeric:tabular-nums}
.viewer-loading{position:absolute;inset:0 0 auto;height:2px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity 120ms ease}
.viewer-loading span{display:block;width:35%;height:100%;background:#d3dec9;transform:translateX(-100%)}
.lightbox[aria-busy="true"] .viewer-loading{opacity:1}
.lightbox[aria-busy="true"] .viewer-loading span{animation:image-loading 1s linear infinite}
@media(hover:hover) and (pointer:fine){
  .button:hover{transform:translateY(-2px)}
  .button:hover>span,.text-link:hover span{transform:translate(3px,-3px)}
  .button-with-icon:hover .button-icon{transform:translate(2px,-2px)}
  .icon-link:hover{transform:translateY(-2px)}
  .gallery-item:hover .portrait img{transform:scale(1.045)}
  .gallery-item:hover .enlarge{transform:rotate(90deg)}
  .desktop-nav a:hover::after{transform:scaleX(1);transform-origin:left}
}
html[data-input="keyboard"] :is(.button,.icon-link,.nav-toggle,.close-button,.viewer-stage button,.text-link span,.button>span){transition:none}
@media(min-width:640px){
  .hero-orbit{width:140px;height:140px;right:42px;top:calc(var(--header-height) + 42px)}
  .marquee-group{font-size:67px;gap:42px;padding-right:42px}.cafe-marquee{margin-top:23px;padding-block:17px 23px}
  .feature-rings{width:420px;height:420px;right:-155px;top:8%}
  .coffee-sketch svg{width:100px;height:84px}
}
@media(min-width:1024px){
  .hero-orbit{width:166px;height:166px;top:clamp(116px,14vh,156px);bottom:auto;right:max(80px,calc((100vw - 1280px)/2 + 24px))}
  .marquee-group{font-size:44px;gap:28px;padding-right:28px;min-width:100vw;justify-content:space-around}.marquee-group i{width:14px;height:14px}.marquee-group i::after{inset:3px}
  .cafe-marquee{margin-top:18px;padding-block:10px 14px}.feature-rings{width:520px;height:520px;right:-170px;top:16%}
  .coffee-sketch{margin-bottom:32px}.coffee-sketch svg{width:112px;height:94px}
}
@media(max-width:360px){.hero-orbit{width:96px;height:96px;right:20px}.marquee-group{font-size:43px}.viewer-toolbar{padding-left:14px;gap:8px}.viewer-toolbar>div{gap:7px}.viewer-toolbar h2{font-size:10px}.viewer-count{font-size:10px;min-width:25px}.viewer-original{font-size:10px;gap:5px}}
@keyframes hero-breathe{from{transform:scale(1.005) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-.6%,.4%,0)}}
@keyframes badge-float{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-10px) rotate(3deg)}}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@keyframes coffee-flow{to{transform:translate3d(-50%,0,0)}}
@keyframes plate-float{from{transform:translateY(4px) rotate(-.8deg)}to{transform:translateY(-9px) rotate(.8deg)}}
@keyframes coffee-steam{0%{transform:translateY(4px);opacity:0}25%{opacity:.85}70%{opacity:.6}100%{transform:translateY(-10px);opacity:0}}
@keyframes image-loading{to{transform:translateX(390%)}}
@media(prefers-reduced-motion:reduce){
  .ambient{animation:none!important;transform:none!important}
  .hero-orbit{transform:none}.steam-line{opacity:.8}
  .reveal-pending{opacity:1;transform:none}
  .marquee-track{width:100%}.marquee-group{justify-content:center;width:100%;white-space:normal;font-size:38px;padding:0 20px;text-align:center}
  .marquee-group:not(:first-child),.marquee-group i,.marquee-group span:not(:first-child){display:none}
  .button,.icon-link,.text-link span,.gallery-item .portrait img,.enlarge{transform:none!important}
  .viewer-loading span{animation:none!important;transform:none;width:100%}
}