/* Garden motion layer: atmosphere is separate from content and layout. */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-breathe: cubic-bezier(.45, 0, .55, 1); }
.garden-light { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.sunwash { position: absolute; width: 75%; height: 90%; right: -20%; top: -35%; background: radial-gradient(ellipse, rgba(255,235,165,.32), transparent 64%); animation: sunlight 12s var(--ease-breathe) infinite alternate; }
.leaf-shadow { position: absolute; width: 60%; height: 65%; right: -25%; top: 0; border-radius: 70% 0 70% 0; background: linear-gradient(125deg, transparent 25%, rgba(22,48,23,.3) 50%, transparent 76%); transform-origin: right top; animation: canopy 9s var(--ease-breathe) infinite alternate; }
.hero-image { animation: garden-breathe 18s var(--ease-breathe) infinite alternate; }
.hero-content { position: relative; }
.garden-seal { position: absolute; z-index: 1; top: -18px; right: 0; width: 142px; aspect-ratio: 1; border-radius: 50%; background: var(--sage-pale); color: var(--sage-dark); box-shadow: 0 8px 28px rgba(32,37,31,.12); pointer-events: none; }
.seal-ring { width: 100%; height: 100%; animation: seal-turn 26s linear infinite; }
.seal-ring text { fill: currentColor; font: 700 12px "Segoe UI", sans-serif; letter-spacing: 1.4px; }
.seal-leaf { position: absolute; width: 34px; height: 47px; border-radius: 100% 0 100% 0; background: var(--sage-dark); left: calc(50% - 17px); top: calc(50% - 23px); transform: rotate(12deg); }
.seal-leaf::after { content: ""; position: absolute; width: 1px; height: 37px; background: var(--sage-pale); left: 50%; top: 7px; transform: rotate(32deg); }
.story-inset { animation: coffee-float 7s var(--ease-breathe) infinite alternate; }
.experience-main img { animation: garden-breathe 16s var(--ease-breathe) infinite alternate; }
.brand-ribbon { overflow: hidden; border-block: 1px solid var(--line); padding-block: 18px; background: var(--sage-pale); color: var(--sage-dark); }
.ribbon-track { display: flex; width: max-content; animation: ribbon-travel 36s linear infinite; }
.ribbon-track > span { display: flex; flex: none; align-items: center; gap: 40px; padding-right: 40px; font-size: clamp(1.5rem, 3.5vw, 3.2rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.2; white-space: nowrap; }
.ribbon-track i { font-size: .7em; font-style: normal; }
.lightbox-position { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); margin: 0; color: #f7f9f5; font-size: .85rem; font-variant-numeric: tabular-nums; pointer-events: none; }
.lightbox figure { touch-action: pan-y pinch-zoom; }
.button, .menu-toggle, .social-link, .mobile-actions a, .lightbox button { transition: transform 160ms var(--ease-out), scale 160ms var(--ease-out), background-color 200ms ease, color 200ms ease; }
.menu-item img, .gallery-item img { transition: transform 280ms var(--ease-out); }
:is(button, a):focus-visible { outline: 3px solid var(--sage); outline-offset: 5px; }
:is(.button, .menu-toggle, .social-link, .mobile-actions a, .lightbox button):active { scale: .97; }
.gallery-item:active img { transform: scale(1.015); }
.reveal { opacity: 1; transform: none; transition: opacity 550ms linear, transform 750ms cubic-bezier(.22, 1, .36, 1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.reveal-pending { opacity: 0; transform: translateY(16px); transition: none; }
.reveal:focus-within { opacity: 1; transform: none; transition: none; }
/* Ambient loops run only while their section is visible. */
.ambient-loop, .hero-image { animation-play-state: paused; }
.motion-inview .ambient-loop, .motion-inview.hero .hero-image { animation-play-state: running; }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation-play-state: paused !important; }
html.motion-paused { scroll-behavior: auto; }
html.motion-static .reveal { opacity: 1; transform: none; transition: none; }
html.keyboard-input { scroll-behavior: auto; }
html.keyboard-input :is(.button, .menu-toggle, .gallery-item img, .mobile-actions) { transition: none; }
html.keyboard-input :is(button, a):active { scale: none; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-3px); }
  .social-link:hover { transform: rotate(-8deg); }
  .menu-item:hover img, .gallery-item:hover img { transform: scale(1.055); }
  .brand-ribbon:hover .ribbon-track { animation-play-state: paused; }
}
@media (max-width: 760px) {
  .garden-seal { width: 100px; right: 8px; top: -24px; }
  .seal-leaf { scale: .75; }
  .brand-ribbon { padding-block: 15px; }
  .ribbon-track > span { gap: 24px; padding-right: 24px; }
  .lightbox-position { bottom: 24px; }
  .lightbox-prev { left: 22px; }
  .lightbox-next { right: 22px; }
}
@keyframes garden-breathe { from { transform: scale(1.01) translateX(-.3%); } to { transform: scale(1.085) translateX(.8%); } }
@keyframes sunlight { from { transform: translate(-12%, 0) scale(.95); opacity: .6; } to { transform: translate(-32%, 20%) scale(1.2); opacity: 1; } }
@keyframes canopy { from { transform: rotate(-12deg) translateX(0); } to { transform: rotate(14deg) translateX(-14%); } }
@keyframes seal-turn { to { transform: rotate(360deg); } }
@keyframes coffee-float { from { transform: translateY(3px) rotate(-3deg); } to { transform: translateY(-13px) rotate(2deg); } }
@keyframes ribbon-travel { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ambient-loop, .hero-image { animation: none !important; }
  .reveal, .reveal.reveal-pending { opacity: 1; transform: none; transition: none; }
  .ribbon-track { transform: none; }
  .button:hover, .gallery-item:hover img, .menu-item:hover img { transform: none; }
  :is(button, a):active { scale: none; }
}