/* ============================================================
   MUNCHIO — FX: brand reveal loader, page transitions, micro-motion
   Loaded directly in <head> (NOT helmet) so the loader is styled
   before the dc-runtime boots. Self-contained: hard-coded colors
   because token stylesheets arrive later via helmet.
     #9E1419 red-deep · #E5311B chili · #F0B711 mustard
     #F4E4CE cream · #C8502A rust · #181410 ink
   fx.js drives the classes:
     html.mx-cold  → first visit this session (loader shows)
     html.mx-warm  → repeat visit (loader skipped entirely)
     html.mx-ready → curtain cleared; hero animations may play
   ============================================================ */

/* ---------- First-visit brand reveal ----------
   Deep red field with a vignette and fine film grain; the wordmark wipes in,
   catches a single sweep of light, and a hairline tracks real page progress
   (--p, set by fx.js). Exit: the stage lifts away, then the panel retracts
   upward on a thin mustard edge. */
#mx-loader {
  position: fixed; inset: 0; z-index: 9999;
  height: 100vh; height: 100dvh;
  box-sizing: border-box;
  display: none; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%, rgba(30,3,5,.55) 100%),
    radial-gradient(70% 55% at 50% 45%, #B11A21 0%, #9E1419 45%, #6E0D11 100%);
  --p: 0;
}
/* Film grain: an inline SVG noise tile, kept very faint. */
#mx-loader::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The trailing edge revealed as the panel lifts. */
#mx-loader::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, rgba(240,183,17,0), #F0B711 20%, #F0B711 80%, rgba(240,183,17,0));
}
/* Only shown once fx.js has marked a first visit; the element ships hidden. */
html.mx-cold #mx-loader { display: flex; }
html.mx-warm #mx-loader { display: none; }
html.mx-cold:not(.mx-ready) { overflow: hidden; }

.mx-stage { position: relative; display: flex; flex-direction: column; align-items: center; }

/* The shadow lives on the wrapper so it follows the wiped-in pixels instead
   of being cut into a box by the logo's clip-path. */
.mx-mark { position: relative; width: clamp(200px, 30vw, 300px); filter: drop-shadow(0 18px 34px rgba(0,0,0,.38)); }
.mx-logo {
  display: block; width: 100%; height: auto;
  clip-path: inset(0 100% 0 0);
  animation: mx-wipe .95s cubic-bezier(.65,0,.35,1) .05s forwards, mx-settle 1.3s cubic-bezier(.16,1,.3,1) .05s both;
}
/* One sweep of light, clipped to the wordmark's own shape. */
.mx-sheen {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(/assets/brand-logo.webp) center / 100% auto no-repeat;
          mask: url(/assets/brand-logo.webp) center / 100% auto no-repeat;
  background: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,248,225,.7) 50%, rgba(255,255,255,0) 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  mix-blend-mode: soft-light;
  animation: mx-sheen 1.15s cubic-bezier(.4,0,.2,1) 1.05s forwards;
}

.mx-progress {
  position: relative; width: clamp(150px, 18vw, 200px); height: 1px; margin-top: 34px;
  background: rgba(244,228,206,.18); overflow: hidden;
  opacity: 0; animation: mx-fade .6s ease .55s forwards;
}
.mx-progress span {
  position: absolute; inset: 0; background: #F0B711; transform-origin: left center;
  transform: scaleX(var(--p)); transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.mx-lines {
  display: flex; align-items: center; gap: 14px; margin-top: 22px;
  font-family: var(--font-body, 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif); font-weight: 600;
  font-size: 10px; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
  color: rgba(244,228,206,.72);
}
.mx-lines span { opacity: 0; transform: translateY(6px); animation: mx-rise-in .7s cubic-bezier(.16,1,.3,1) forwards; }
.mx-lines span:nth-of-type(1) { animation-delay: .75s; }
.mx-lines span:nth-of-type(2) { animation-delay: .85s; }
.mx-lines span:nth-of-type(3) { animation-delay: .95s; }
.mx-lines span:nth-of-type(4) { animation-delay: 1.05s; }
.mx-lines i { width: 3px; height: 3px; border-radius: 50%; background: #F0B711; opacity: 0; animation: mx-fade .6s ease 1.1s forwards; }

@keyframes mx-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes mx-settle { from { transform: scale(1.04); filter: blur(2px); } to { transform: scale(1); filter: blur(0); } }
@keyframes mx-sheen { to { background-position: -30% 0; } }
@keyframes mx-fade { to { opacity: 1; } }
@keyframes mx-rise-in { to { opacity: 1; transform: none; } }

/* Exit: the stage lifts and fades, then the panel retracts upward. */
#mx-loader.mx-done { animation: mx-lift .8s cubic-bezier(.76,0,.24,1) .22s forwards; }
#mx-loader.mx-done .mx-stage { animation: mx-out .38s cubic-bezier(.4,0,1,1) forwards; }
@keyframes mx-lift { to { transform: translateY(-101%); } }
@keyframes mx-out { to { opacity: 0; transform: translateY(-14px); } }

/* Hold hero entrances until the curtain clears, so the reveal hands off
   into the stagger. Warm visits get mx-ready immediately (no hold). */
html.mx-cold:not(.mx-ready) .h-anim,
html.mx-cold:not(.mx-ready) .h-float { animation-play-state: paused !important; }

/* ---------- Cross-page continuity (View Transitions, MPA) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: mx-vt-out .26s cubic-bezier(.4,0,.6,1) both; }
  ::view-transition-new(root) { animation: mx-vt-in .42s .06s cubic-bezier(.16,1,.3,1) both; }
  ::view-transition-group(mx-logo) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  /* The header logo morphs from page to page — one continuous brand. */
  header img[alt="Munchio"] { view-transition-name: mx-logo; }
}
@keyframes mx-vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes mx-vt-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Reveal utilities (scroll-driven, self-defusing) ----------
   Scrubbed by the view() timeline where supported; elsewhere the 0s
   animation completes instantly and the element simply shows. fx.js also
   applies .mx-r automatically to unanimated sections and footers. */
.mx-r {
  animation: mx-rise linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 44%;
}
.mx-pop {
  animation: mx-popin linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 38%;
}
@keyframes mx-rise { from { opacity: 0; transform: translateY(34px); } }
@keyframes mx-popin { from { opacity: 0; transform: translateY(16px) scale(.94); } }

/* ---------- Micro-physicality ---------- */
/* Every press has weight. Instant on purpose — it reads as tactile. */
button:not(:disabled):active { transform: translateY(1px) scale(.98); }

/* Bag icon pops the moment something lands in it (class from fx.js). */
.mx-cart-pop { animation: mx-cartpop .5s cubic-bezier(.3,1.6,.4,1); }
@keyframes mx-cartpop {
  0% { transform: scale(1); }
  35% { transform: scale(1.28) rotate(-6deg); }
  70% { transform: scale(.94) rotate(3deg); }
  100% { transform: scale(1); }
}

/* Keyboard focus, on brand. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #F0B711; outline-offset: 2px;
}

/* ---------- Reduced motion: calm everything, block nothing ---------- */
@media (prefers-reduced-motion: reduce) {
  .mx-stage, .mx-r, .mx-pop { animation: none !important; }
  .mx-logo { animation: none !important; clip-path: none; }
  .mx-sheen { display: none; }
  .mx-progress, .mx-lines span, .mx-lines i { animation: none !important; opacity: 1; transform: none; }
  #mx-loader.mx-done { animation: none !important; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
  html.mx-cold:not(.mx-ready) .h-anim,
  html.mx-cold:not(.mx-ready) .h-float { animation-play-state: running !important; }
}