/* COFFEEFLOOR motion system — physical, responsive and deliberately restrained. */

:root {
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-snap: cubic-bezier(.2, .8, .2, 1);
}

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: gf-page-out 180ms cubic-bezier(.7, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: gf-page-in 480ms var(--ease-spring) both;
}

@keyframes gf-page-out {
  to { opacity: 0; transform: translate3d(0, -7px, 0) scale(.998); filter: blur(2px); }
}

@keyframes gf-page-in {
  from { opacity: 0; transform: translate3d(0, 13px, 0) scale(.994); filter: blur(3px); }
}

.motion-progress {
  position: fixed;
  z-index: 250;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}

.site-header {
  position: sticky;
  top: 0;
  transition: background-color 240ms ease, box-shadow 240ms ease, backdrop-filter 240ms ease;
}

.global-header {
  position: sticky;
  z-index: 30;
  top: -34px;
}

.global-header .site-header { position: relative; }

body.is-scrolled .site-header {
  background: rgba(244, 237, 222, .86);
  box-shadow: 0 10px 35px rgba(30, 25, 21, .09);
  backdrop-filter: blur(20px) saturate(150%);
}

.button > span:last-child,
.text-link > span:last-child,
.text-button > span:last-child,
.department-card__arrow {
  transition: transform 320ms var(--ease-spring);
}

.button:active,
.text-button:active,
.icon-button:active,
.cart-button:active,
.close-button:active,
.taste-chip:active,
.option-row button:active,
.pdp-thumb:active,
.search-suggestions button:active,
.store-card__add:active,
.quick-add:active {
  transform: scale(.96);
  transition-duration: 100ms;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover > span:last-child,
  .text-link:hover > span:last-child,
  .text-button:hover > span:last-child { transform: translate3d(5px, -2px, 0); }

  .department-card:hover .department-card__arrow { transform: translate3d(4px, -4px, 0) rotate(8deg); }
  .ticker:hover .ticker__track { animation-play-state: paused; }
}

/* First frame: cinematic hero materialization, then everything becomes interruptible. */
.hero { --hero-x: 0px; --hero-y: 0px; --hero-scale: 1.035; }

.hero__image {
  transform: scale(var(--hero-scale)) translate3d(var(--hero-x), var(--hero-y), 0);
  transform-origin: 58% 50%;
  will-change: transform;
}

.motion-prep:not(.motion-live) .hero__image { --hero-scale: 1.105; opacity: .55; filter: saturate(.72) blur(3px); }
.motion-prep:not(.motion-live) .hero__scrim { opacity: 0; }
.motion-prep:not(.motion-live) .hero h1 { opacity: 0; transform: translate3d(0, 38px, 0); clip-path: inset(0 0 100% 0); }
.motion-prep:not(.motion-live) .hero__content > p,
.motion-prep:not(.motion-live) .hero__actions,
.motion-prep:not(.motion-live) .hero-scenes { opacity: 0; transform: translate3d(0, 20px, 0); }
.motion-prep:not(.motion-live) .hero__proof,
.motion-prep:not(.motion-live) .hero__stamp,
.motion-prep:not(.motion-live) .hero-mascot { opacity: 0; transform: translate3d(0, 18px, 0) scale(.96); }

.motion-prep .hero__image { transition: transform 1450ms var(--ease-spring), opacity 900ms ease, filter 1000ms ease; }
.motion-prep .hero__scrim { transition: opacity 900ms ease 120ms; }
.motion-prep .hero h1 { transition: opacity 620ms ease 120ms, transform 900ms var(--ease-spring) 120ms, clip-path 900ms var(--ease-spring) 120ms; }
.motion-prep .hero__content > p { transition: opacity 620ms ease 280ms, transform 760ms var(--ease-spring) 280ms; }
.motion-prep .hero__actions { transition: opacity 620ms ease 390ms, transform 760ms var(--ease-spring) 390ms; }
.motion-prep .hero-scenes { transition: opacity 520ms ease 460ms, transform 720ms var(--ease-spring) 460ms, color 360ms ease, background-color 360ms ease, border-color 360ms ease; }
.motion-prep .hero__proof { transition: opacity 520ms ease 520ms, transform 780ms var(--ease-spring) 520ms; }
.motion-prep .hero__stamp { transition: opacity 520ms ease 620ms, transform 900ms var(--ease-spring) 620ms; }
.motion-prep .hero-mascot { transition: opacity 480ms ease 720ms, transform 760ms var(--ease-spring) 720ms; }
.motion-live .hero__proof { transform: translate3d(0, 0, 0) scale(1); }
.motion-live .hero__stamp { transform: rotate(7deg) scale(1); }
.motion-live .hero-mascot { transform: rotate(1.5deg) scale(1); }
.motion-intro-done .hero__image { transition: none; }

/* Scroll-driven reveals: short stagger, no interaction lockout. */
.motion-reveal {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 25px, 0) scale(.99);
  transition:
    opacity 560ms ease var(--reveal-delay, 0ms),
    filter 560ms ease var(--reveal-delay, 0ms),
    transform 760ms var(--ease-spring) var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.motion-reveal.is-inview {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-reveal.motion-settled { will-change: auto; }

.motion-reveal[data-reveal="left"] { transform: translate3d(-28px, 0, 0) scale(.99); }
.motion-reveal[data-reveal="right"] { transform: translate3d(28px, 0, 0) scale(.99); }
.motion-reveal[data-reveal="left"].is-inview,
.motion-reveal[data-reveal="right"].is-inview { transform: translate3d(0, 0, 0) scale(1); }

/* Pointer depth. The spring is driven in motion.js; CSS only composites the frame. */
.motion-tilt {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-lift: 0px;
  --pointer-x: 50%;
  --pointer-y: 50%;
  transform: perspective(1000px) translate3d(0, var(--tilt-lift), 0) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transform-style: preserve-3d;
  transition: transform 480ms var(--ease-spring), box-shadow 320ms var(--ease-spring), opacity 560ms ease, filter 560ms ease;
  will-change: transform;
}

.motion-tilt::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.36), transparent 42%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.motion-tilt.is-tilting { --tilt-lift: -5px; transition: box-shadow 220ms ease, opacity 560ms ease, filter 560ms ease; }
.motion-tilt.is-tilting::after { opacity: .42; }
.motion-tilt.motion-reveal { transform: perspective(1000px) translate3d(0, 25px, 0) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) scale(.99); }
.motion-tilt.motion-reveal.is-inview { transform: perspective(1000px) translate3d(0, var(--tilt-lift), 0) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) scale(1); }

.motion-tilt .product-card__visual,
.motion-tilt .store-card__visual,
.motion-tilt .article-card__top,
.motion-tilt .department-card__arrow { transform: translateZ(16px); }

/* Drawers, menus, dialogs and feedback surfaces materialize from their source. */
.drawer-backdrop { backdrop-filter: blur(0); transition: opacity 220ms ease, backdrop-filter 360ms ease; }
.drawer-backdrop.is-visible { backdrop-filter: blur(7px); }
.cart-drawer {
  box-shadow: -30px 0 80px rgba(30,25,21,.16);
  transition: transform 460ms var(--ease-drawer), box-shadow 360ms ease;
  will-change: transform;
  touch-action: pan-y;
}

.cart-drawer .drawer-header,
.cart-drawer .cart-items,
.cart-drawer .cart-empty,
.cart-drawer .cart-summary {
  opacity: 0;
  transform: translate3d(22px, 0, 0);
  transition: opacity 260ms ease, transform 420ms var(--ease-spring);
}

.cart-drawer.is-open .drawer-header { opacity: 1; transform: none; transition-delay: 100ms; }
.cart-drawer.is-open .cart-items,
.cart-drawer.is-open .cart-empty { opacity: 1; transform: none; transition-delay: 150ms; }
.cart-drawer.is-open .cart-summary { opacity: 1; transform: none; transition-delay: 190ms; }
.cart-drawer.is-dragging { transition: none; }

.mobile-menu {
  transform-origin: 90% 0;
  box-shadow: 0 30px 60px rgba(30,25,21,.13);
  will-change: transform, opacity, clip-path;
}

.search-dialog[open] { animation: gf-search-in 420ms var(--ease-spring) both; }
.quiz-dialog[open] { animation: gf-dialog-in 420ms var(--ease-spring) both; }
.search-dialog::backdrop,
.quiz-dialog::backdrop { background: rgba(30,25,21,.38); backdrop-filter: blur(6px); }

@keyframes gf-search-in {
  from { opacity: 0; transform: translate(-50%, -24px) scale(.995); filter: blur(4px); }
}

@keyframes gf-dialog-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.965); filter: blur(4px); }
}

.toast,
.global-toast {
  border-radius: 999px;
  box-shadow: 0 18px 60px rgba(30,25,21,.25);
  filter: blur(4px);
  transition: transform 420ms var(--ease-drawer), opacity 220ms ease, filter 320ms ease;
}

.toast.is-visible,
.global-toast.is-visible { filter: blur(0); }

.floating-cart {
  position: fixed;
  z-index: 75;
  right: 24px;
  bottom: 24px;
  width: 88px;
  height: 88px;
  padding: 8px;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--ink);
  background: var(--pink);
  border: 1px solid var(--ink);
  border-radius: 50%;
  box-shadow: 6px 6px 0 var(--ink), 0 18px 55px rgba(30,25,21,.24);
  opacity: 0;
  cursor: pointer;
  transform: translate3d(0,18px,0) scale(.82) rotate(8deg);
  transition: opacity 260ms ease, transform 580ms var(--ease-spring), box-shadow 220ms ease;
  will-change: transform, opacity;
}

.floating-cart.is-ready { opacity: 1; transform: translate3d(0,0,0) scale(1) rotate(0); }
.floating-cart__mascot { position: relative; width: 49px; height: 42px; display: grid; place-items: center; margin-top: -4px; transform: rotate(3deg); transition: transform 420ms var(--ease-spring); }
.floating-cart__mascot img { width: 100%; height: 100%; object-fit: contain; }
.floating-cart__label { margin-top: 3px; font-size: 8px; line-height: 1; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.floating-cart__count { position: absolute; right: -4px; top: -4px; min-width: 27px; height: 27px; padding: 0 6px; display: grid; place-items: center; color: var(--ink); background: var(--acid); border: 1px solid var(--ink); border-radius: 50%; font-size: 9px; font-weight: 900; }

@media (hover: hover) and (pointer: fine) {
  .floating-cart:hover { transform: translate3d(0,-5px,0) scale(1.04) rotate(-2deg); box-shadow: 8px 10px 0 var(--ink), 0 24px 65px rgba(30,25,21,.28); }
  .floating-cart:hover .floating-cart__mascot { transform: rotate(-5deg) translateY(-1px); }
}

.floating-cart:active { transform: translate3d(3px,3px,0) scale(.95); box-shadow: 2px 2px 0 var(--ink); transition-duration: 100ms; }

.cart-flight {
  position: fixed;
  z-index: 400;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--acid);
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  pointer-events: none;
  will-change: transform, opacity;
}

.cart-count.is-bumping,
.floating-cart__count.is-bumping { animation: gf-count-bump 460ms var(--ease-spring); }

@keyframes gf-count-bump {
  35% { transform: scale(1.32) rotate(-7deg); background: var(--orange); }
  70% { transform: scale(.94) rotate(2deg); }
}

.success-mark { animation: gf-success 760ms var(--ease-spring) both; }

@keyframes gf-success {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.82) rotate(-18deg); }
  70% { transform: translate3d(0, 0, 0) scale(1.06) rotate(3deg); }
}

.info-copy summary::after { content: "+"; transition: transform 360ms var(--ease-spring); }
.info-copy details[open] summary::after { content: "+"; transform: rotate(45deg); }
.info-copy details[open] p { animation: gf-answer-in 360ms var(--ease-spring) both; }

@keyframes gf-answer-in {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
}

@media (max-width: 760px) {
  .motion-progress { height: 2px; }
  .global-header { top: -34px; }
  .motion-reveal { transform: translate3d(0, 16px, 0); }
  .motion-reveal.is-inview { transform: translate3d(0, 0, 0); }
  .motion-reveal[data-reveal="left"],
  .motion-reveal[data-reveal="right"] { transform: translate3d(0, 16px, 0); }
  .motion-reveal[data-reveal="left"].is-inview,
  .motion-reveal[data-reveal="right"].is-inview { transform: translate3d(0, 0, 0); }
  .motion-tilt { transform: none; }
  .motion-tilt.motion-reveal { transform: translate3d(0, 16px, 0); }
  .motion-tilt.motion-reveal.is-inview { transform: none; }
  .floating-cart { right: 14px; bottom: 14px; width: 76px; height: 76px; box-shadow: 4px 4px 0 var(--ink), 0 14px 40px rgba(30,25,21,.2); }
  .floating-cart__mascot { width: 43px; height: 37px; }
}

@media (prefers-reduced-transparency: reduce) {
  body.is-scrolled .site-header { background: var(--cream); backdrop-filter: none; }
  .drawer-backdrop.is-visible,
  .search-dialog::backdrop,
  .quiz-dialog::backdrop { backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  body.is-scrolled .site-header { background: var(--cream); box-shadow: 0 0 0 1px var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .motion-progress { display: none; }
  .motion-prep:not(.motion-live) .hero__image,
  .motion-prep:not(.motion-live) .hero h1,
  .motion-prep:not(.motion-live) .hero__content > p,
  .motion-prep:not(.motion-live) .hero__actions,
  .motion-prep:not(.motion-live) .hero__proof,
  .motion-prep:not(.motion-live) .hero__stamp,
  .motion-prep:not(.motion-live) .hero-mascot { opacity: 1; filter: none; clip-path: none; transform: none; }
  .motion-reveal,
  .motion-reveal[data-reveal="left"],
  .motion-reveal[data-reveal="right"],
  .motion-tilt.motion-reveal {
    opacity: 0;
    filter: none;
    transform: none;
    transition: opacity 160ms ease;
  }
  .motion-reveal.is-inview,
  .motion-tilt.motion-reveal.is-inview { opacity: 1; transform: none; }
  .motion-tilt, .motion-tilt.is-tilting { transform: none; transition: none; }
  .motion-tilt::after { display: none; }
  .cart-drawer { transition: opacity 180ms ease; }
  .cart-drawer .drawer-header,
  .cart-drawer .cart-items,
  .cart-drawer .cart-empty,
  .cart-drawer .cart-summary { transform: none; transition: opacity 160ms ease; }
  .search-dialog[open], .quiz-dialog[open], .success-mark,
  .cart-count.is-bumping, .floating-cart__count.is-bumping, .info-copy details[open] p { animation: none; }
  .floating-cart, .floating-cart.is-ready { opacity: 1; transform: none; transition: none; }
  .ticker__track, .rotating-badge, .pulse-dot { animation-play-state: paused; }
}