/* motion.css: Ten Mile Creek motion layer (owned by the motion designer).
   Principle: things arrive the way a pour fills a glass, from below, with weight.
   Hidden states exist only once motion.js sets html.mx-ready, so no-JS and
   reduced-motion visitors see everything. */

:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);   /* arrivals */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* badge pop */
  --ease-pour: cubic-bezier(.65, 0, .35, 1);      /* wipes, like liquid */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);    /* color, shadow */
}

/* ---------- Scroll reveals (generic) ---------- */
.mx-rv { transition: opacity .7s var(--ease-soft) var(--mx-d, 0ms), transform .9s var(--ease-out-expo) var(--mx-d, 0ms); }
html.mx-ready:not(.mx-done) .mx-rv:not(.is-in) { opacity: 0; transform: translate3d(0, 24px, 0); }

/* Photos: a pour wipe rising from the bottom, image settles via JS parallax */
/* The wipe is on the <img>, never on the observed frame: browsers report a fully
   clipped element as not intersecting, so the frame would never reveal itself. */
.mx-ph { transition: transform .5s var(--ease-out-expo); will-change: transform; }
html.mx-ready .ph img { transition: clip-path .8s var(--ease-pour) var(--mx-d, 0ms); clip-path: inset(0 0 0 0 round 2px); }
html.mx-ready:not(.mx-done) .mx-ph:not(.is-in) img { clip-path: inset(100% 0 0 0 round 2px); }

/* Eyebrow rule draws in from the left */
.eyebrow::before { transform-origin: 0 50%; transition: transform .9s var(--ease-pour) .15s; }
html.mx-ready:not(.mx-done) .eyebrow:not(.is-in)::before { transform: scaleX(0); }

/* ---------- Hero headline: word masks ---------- */
.mx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .08em; margin: -.1em 0 -.08em; }
.mx-wi { display: inline-block; transition: transform 1s var(--ease-out-expo) var(--d, 0ms); }
html.mx-ready:not(.mx-done) .hero h1:not(.is-in) .mx-wi { transform: translate3d(0, 110%, 0); }

/* ---------- Fizz (hero bubbles) ---------- */
.hero { position: relative; }
.hero > .wrap { position: relative; z-index: 1; }
.mx-fizz { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mx-bub {
  position: absolute; bottom: -24px; left: var(--x, 50%);
  width: var(--s, 8px); height: var(--s, 8px); border-radius: 50%;
  border: 1.5px solid rgba(201, 162, 74, .8); opacity: 0;
  animation: mx-rise var(--t, 9s) linear var(--dl, 0s) infinite;
  will-change: transform, opacity;
}
.mx-fizz.is-paused .mx-bub { animation-play-state: paused; }
@keyframes mx-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: .85; }
  75%  { opacity: .5; }
  100% { transform: translate3d(var(--sw, 0px), calc(0px - var(--mx-travel, 640px)), 0); opacity: 0; }
}

/* ---------- Pine divider: trees grow up from the ground ---------- */
.trees svg use { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s var(--ease-out-expo) calc(var(--i, 0) * 90ms); }
html.mx-ready:not(.mx-done) .trees:not(.is-in) use { transform: scaleY(0); }
.trees.is-in use { transform: scaleY(1); }

/* ---------- Marquee: JS drives position (pauses on hover, speeds on scroll) ---------- */
html.mx-ready .strip-track { animation: none; will-change: transform; }

/* ---------- Header: soft shadow, compact logo, creek-line progress ---------- */
.site-header { transition: box-shadow .4s var(--ease-soft); }
.site-header.is-scrolled { box-shadow: 0 14px 26px -22px rgba(17, 16, 16, .55); }
.brand-logo { transform-origin: 0 50%; transition: scale .5s var(--ease-out-expo); }
.site-header.is-scrolled .brand-logo { scale: .8; }
.mx-progress {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none; z-index: 2;
}

/* ---------- Buttons: magnetic offset (set by JS) and press feedback ---------- */
.btn {
  transform: translate3d(var(--mx-bx, 0px), var(--mx-by, 0px), 0);
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft), transform .4s var(--ease-out-expo);
}
.btn:active {
  transform: translate3d(var(--mx-bx, 0px), calc(var(--mx-by, 0px) + 1px), 0) scale(.97);
  transition-duration: .12s;
}

/* ---------- Tap list: gold beer fill rises behind the row ---------- */
.beer { position: relative; isolation: isolate; }
.beer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--gold); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .5s var(--ease-out-expo);
}
.beer:hover::before, .beer:focus-within::before { transform: scaleY(1); }
.beer-name { transition: transform .45s var(--ease-out-expo); }
.beer:hover .beer-name { transform: translateX(10px); color: var(--ink); }
.beer:hover .beer-no, .beer:hover .beer-tag { color: var(--ink); }

/* ---------- Badge: spring pop in, slow spin (JS) ---------- */
.badge-ring { transform-box: fill-box; transform-origin: 50% 50%; }
.badge { transition: opacity .4s var(--ease-soft), scale .9s var(--ease-spring); }
html.mx-ready:not(.mx-done) .badge:not(.is-in) { opacity: 0; scale: .6; }

/* ---------- Footer: a slow creek line drifts along the bottom ---------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% + 60px); height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath d='M0 6 Q15 0 30 6 T60 6' fill='none' stroke='%23C9A24A' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 60px 12px repeat-x;
  opacity: .3; pointer-events: none; animation: mx-creek 2.4s linear infinite;
}
@keyframes mx-creek { to { transform: translate3d(-60px, 0, 0); } }

/* ---------- Reduced motion: keep state changes, drop motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .beer::before, .beer-name, .btn, .badge, .site-header, .brand-logo { transition: none !important; }
  .beer:hover .beer-name { transform: none; }
  .site-footer::after { animation: none; }
}