/* Progressive enhancement: removing enhanced-motion disables visual effects. */
.motion-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.enhanced-motion .hero { perspective: 1100px; }
.enhanced-motion .hero-media { overflow: visible; transform-style: preserve-3d; }
.enhanced-motion .hero-video { border-radius: 8px; }
.hero-video { aspect-ratio: 9 / 16; }
.contact-section .contact-grid > div > p { color: var(--ink); }
.enhanced-motion .motion-tilt { transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.enhanced-motion .sound-toggle { z-index: 5; }
.topping-layer { display: none; }
.enhanced-motion .topping-host { position: relative; }
.enhanced-motion .topping-layer { display: block; position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; z-index: 3; }
.floating-topping { position: absolute; left: 3%; top: 15%; width: 23px; height: 23px; opacity: var(--opacity); filter: blur(var(--blur)); transform: translateZ(var(--depth)) rotate(var(--rotation)) scale(var(--scale)); animation: topping-float var(--speed) ease-in-out var(--offset) infinite alternate paused; }
.floating-topping:nth-child(2) { left: auto; right: 3%; top: 34%; }
.floating-topping:nth-child(3) { left: 5%; top: auto; bottom: 9%; }
#how-it-works .floating-topping:nth-child(3) { left: 34%; top: 42%; bottom: auto; }
.topping-bubble { width: 25px; height: 25px; border: 2px solid var(--white); border-radius: 50%; background: #ffffff33; }
.is-floating .floating-topping { animation-play-state: running; }
@keyframes topping-float { to { transform: translate3d(4px, -9px, var(--depth)) rotate(calc(var(--rotation) + 5deg)) scale(var(--scale)); } }
.enhanced-motion.motion-steps .steps-grid { perspective: 1100px; }
.enhanced-motion.motion-steps .step-card { transform-style: preserve-3d; overflow: clip; isolation: auto; border-bottom: 5px solid var(--blue-soft); }
.enhanced-motion.motion-steps .step-number { transform: translateZ(30px); }
.enhanced-motion.motion-steps .step-card h3 { transform: translateZ(20px); }
.enhanced-motion .carousel-enhanced .flavour-stage { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr); column-gap: 56px; }
.enhanced-motion .carousel-enhanced .flavour-copy { grid-row: 1 / 3; }
.enhanced-motion .carousel-enhanced .flavour-cup-wrap { grid-column: 2; min-width: 0; min-height: 520px; perspective: 1200px; touch-action: pan-y; user-select: none; }
.enhanced-motion .carousel-enhanced .flavour-controls { grid-column: 2; width: min(100%, 440px); justify-self: center; position: relative; z-index: 4; }
.enhanced-motion .carousel-enhanced .flavour-card-outline { width: 56%; height: 94%; border-radius: 30px; }
.enhanced-motion .carousel-enhanced .flavour-cup { width: 59%; max-width: 340px; z-index: 2; transform: translate3d(var(--drag, 0px), 0, 65px); animation: none; }
.flavour-neighbours { display: none; }
.enhanced-motion .flavour-neighbours { display: block; position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.flavour-neighbour { position: absolute; width: 42%; top: 16%; text-align: center; opacity: .6; transform-style: preserve-3d; }
.flavour-neighbour img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 22px; }
.flavour-neighbour span { display: block; margin-top: 12px; font-weight: 800; color: var(--white); }
.flavour-neighbour-prev { left: -4%; transform: translateX(var(--drag, 0px)) rotateY(38deg) translateZ(-90px) scale(.9); }
.flavour-neighbour-next { right: -4%; transform: translateX(var(--drag, 0px)) rotateY(-38deg) translateZ(-90px) scale(.9); }
.enhanced-motion .flavour-showcase { background: radial-gradient(ellipse at 70% 35%, transparent, var(--ink)), var(--flavour-bg, #315f93); transition: background-color 450ms ease; }
.enhanced-motion .location-feature { perspective: 1100px; }
.enhanced-motion .location-popout-image.motion-tilt { transform: perspective(1100px) rotate(-1.5deg) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.enhanced-motion .directions-widget { position: relative; z-index: 2; border-bottom: 4px solid var(--blue-soft); }
.enhanced-motion.motion-buttons .button, .enhanced-motion.motion-buttons .flavour-arrow { transition: transform 180ms ease, background-color 180ms ease; }
.enhanced-motion.motion-buttons .button:hover, .enhanced-motion.motion-buttons .flavour-arrow:hover { transform: translateY(-2px); }
.enhanced-motion.motion-buttons .button:active, .enhanced-motion.motion-buttons .flavour-arrow:active { transform: translateY(1px); }
.flavour-cup-wrap:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; border-radius: 30px; }
.nav-toggle, .crew-close { min-width: 44px; min-height: 44px; }
/* Intrinsic HTML dimensions reserve space; responsive CSS retains image ratios. */
.location-popout-image, .local-partner-cloud img, .pengy-bouncer { height: auto; }
/* Base usability fixes also apply if the enhancement module fails to load. */
body, a, button, input, select, textarea, label, summary, [role="button"] { cursor: auto !important; }
a, button, summary, [role="button"] { cursor: pointer !important; }
input, textarea { cursor: text !important; }
.scroll-yogurt { display: none !important; }
.pengy-bouncer { will-change: auto; }
.flavour-cup.is-twirling { animation: none; }
@media (max-width: 900px) {
  .enhanced-motion .location-popout-image.motion-tilt { transform: translateX(-50%) perspective(1100px) rotate(-2deg) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
  .enhanced-motion .carousel-enhanced .flavour-stage { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .enhanced-motion .carousel-enhanced .flavour-copy { grid-row: auto; }
  .enhanced-motion .carousel-enhanced .flavour-cup-wrap, .enhanced-motion .carousel-enhanced .flavour-controls { grid-column: 1; }
  .enhanced-motion .carousel-enhanced .flavour-cup-wrap { min-height: clamp(300px, 75vw, 510px); width: 100%; max-width: 640px; justify-self: center; }
}
@media (max-width: 767px) {
  .floating-topping:nth-child(n+2) { display: none; }
  .floating-topping { filter: none; }
  .flavour-neighbour span { font-size: .8rem; }
  .enhanced-motion .carousel-enhanced .flavour-cup { transform: translateX(var(--drag, 0px)); }
  .enhanced-motion .flavour-neighbour { top: 12%; }
  .enhanced-motion .flavour-neighbour-prev { left: 0; }
  .enhanced-motion .flavour-neighbour-next { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .enhanced-motion .motion-tilt { transform: none; }
  .enhanced-motion .carousel-enhanced .flavour-cup { transform: none; }
}