/* ============================================================
   Moose Ridge · experience layer (homepage, local/experimental)
   Award-tier motion pass, loaded AFTER style.css. Everything here
   degrades to static under prefers-reduced-motion. No smooth scroll.
   ============================================================ */

/* ---------- 1. film grain (filmic warmth, subtly alive) ---------- */
.fx-grain {
  position: fixed; inset: -24px; z-index: 50; pointer-events: none;
  opacity: .055; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .fx-grain { animation: fx-grain-jit .6s steps(2) infinite; }
}
@keyframes fx-grain-jit {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-5px, 4px); }
  100% { transform: translate(4px, -3px); }
}
/* phones: keep the texture, drop the per-frame jitter (battery/GPU) */
@media (max-width: 768px) { .fx-grain { animation: none; opacity: .04; } }

/* ---------- 2. reveal choreography ---------- */
[data-fx] { will-change: transform, opacity; }
[data-fx="up"]   { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease, cubic-bezier(.16,1,.3,1)), transform .8s var(--ease, cubic-bezier(.16,1,.3,1)); transition-delay: var(--fx-delay, 0ms); }
[data-fx="up"].fx-in   { opacity: 1; transform: none; }
[data-fx="clip"] { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.05); transition: clip-path 1.05s var(--ease, cubic-bezier(.16,1,.3,1)), transform 1.2s var(--ease, cubic-bezier(.16,1,.3,1)), opacity .5s ease; transition-delay: var(--fx-delay, 0ms); }
/* revealed via the site's existing .reveal observer (main.js), which is proven reliable */
.reveal.in [data-fx="clip"] { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-fx] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* ---------- 3. tactile buttons ---------- */
.btn { transition: transform .28s var(--ease, cubic-bezier(.16,1,.3,1)), box-shadow .28s var(--ease, cubic-bezier(.16,1,.3,1)), background-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn--sun:hover  { box-shadow: 0 12px 30px -10px rgba(221,133,32,.65); }
.btn--leaf:hover { box-shadow: 0 12px 30px -10px rgba(32,51,44,.5); }
.btn .btn-ico { display: inline-block; transition: transform .28s var(--ease, cubic-bezier(.16,1,.3,1)); }
.btn:hover .btn-ico { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .btn, .btn .btn-ico { transition: none; } .btn:hover { transform: none; } }

/* tactile product cards (lift + image push-in) */
.product { transition: transform .3s var(--ease, cubic-bezier(.16,1,.3,1)), box-shadow .3s var(--ease, cubic-bezier(.16,1,.3,1)); }
.product:hover { transform: translateY(-4px); }
.product__top { overflow: hidden; }
.product__top img { transition: transform .6s var(--ease, cubic-bezier(.16,1,.3,1)); }
.product:hover .product__top img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .product:hover { transform: none; } .product:hover .product__top img { transform: none; } }

/* ---------- 4. branded page transition (leaving the page) ---------- */
.fx-curtain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: var(--forest-deep, #16241e);
  transform: translateY(100%);
  display: flex; align-items: center; justify-content: center;
}
.fx-curtain.fx-cover { transform: translateY(0); transition: transform .55s cubic-bezier(.76,0,.24,1); }
.fx-curtain__mark { width: 78px; height: 77px; color: var(--sun, #DD8520); opacity: 0; transform: translateY(10px) scale(.9); }
.fx-curtain.fx-cover .fx-curtain__mark { opacity: 1; transform: none; transition: opacity .4s ease .15s, transform .5s var(--ease, cubic-bezier(.16,1,.3,1)) .15s; }
@media (prefers-reduced-motion: reduce) { .fx-curtain { display: none !important; } }

/* ---------- 5. day-cycle hero (driven by experience.js) ---------- */
/* The injected warm "morning" wash + sun motion are set per-frame in JS;
   no transitions here so it tracks the scroll exactly. */
.hero__scene .fx-daywash { transition: none; }

/* ---------- 6. starlight finale: the closing CTA becomes a night sky ---------- */
.cta-strip.is-night { position: relative; overflow: hidden; min-height: 64vh; display: flex; align-items: center; background: linear-gradient(180deg, #0b1a2b 0%, #102420 56%, #0b1510 100%); }
.cta-strip.is-night .container { position: relative; z-index: 3; }
.cta-strip.is-night .topo-bg { z-index: 2; opacity: .18; }
.cta-strip.is-night .script { color: var(--sun, #DD8520); }
.cta-strip.is-night h2 { color: #fdf6e3; }
.night-sky { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.night-stars { position: absolute; inset: 0; }
.night-star { position: absolute; border-radius: 50%; background: #fdf6e3; opacity: .85; box-shadow: 0 0 4px rgba(253,246,227,.55); }
.night-star.is-gold { background: var(--sun, #DD8520); box-shadow: 0 0 6px rgba(221,133,32,.7); }
@media (prefers-reduced-motion: no-preference) { .night-star { animation: night-tw 3.6s ease-in-out infinite; } }
@keyframes night-tw { 0%,100% { opacity: .25; } 50% { opacity: .95; } }
.night-cel { position: absolute; inset: 0; width: 100%; height: 100%; }
.night-moon { fill: #f3ecd6; }
.night-moon-shadow { fill: #0b1a2b; }
.night-ridge--far { fill: #0e201a; }
.night-ridge--near { fill: #07100a; }
.night-moose { position: absolute; left: 13%; bottom: 12%; width: 78px; height: auto; opacity: .95; filter: brightness(0); }
.night-shoot { position: absolute; top: 16%; left: 58%; width: 2px; height: 2px; background: #fff; border-radius: 50%; box-shadow: 0 0 6px 1px rgba(255,255,255,.9); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .night-shoot { animation: night-shoot 9s ease-in 3s infinite; } }
@keyframes night-shoot { 0%,100% { transform: translate(0,0); opacity: 0; } 3% { opacity: 1; } 11% { transform: translate(-240px,130px); opacity: 0; } }

/* ---------- 7. day-grade: the page cools into evening as you descend ---------- */
.fx-daygrade { position: fixed; inset: 0; z-index: 49; pointer-events: none; mix-blend-mode: soft-light; background: #16314f; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fx-daygrade { display: none; } }

/* ---------- 8. intro loader (first visit per session, skippable) ---------- */
html.fx-intro-lock { overflow: hidden; }
.fx-intro { position: fixed; inset: 0; z-index: 300; background: radial-gradient(120% 90% at 50% 30%, #14271d 0%, #0b1712 70%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fx-intro--out { transform: translateY(-100%); transition: transform .6s cubic-bezier(.76,0,.24,1); }
.fx-intro__scene { position: relative; display: flex; flex-direction: column; align-items: center; }
.fx-intro__glow { position: absolute; top: 50%; left: 50%; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(221,133,32,.5) 0%, rgba(221,133,32,0) 68%); transform: translate(-50%, -58%) scale(.4); opacity: 0; animation: fx-glow 1.15s ease-out forwards; }
.fx-intro__moose { position: relative; width: 96px; height: 94px; opacity: 0; transform: scale(.72) translateY(10px); animation: fx-moose .6s cubic-bezier(.16,1,.3,1) .08s forwards; }
.fx-intro__word { position: relative; margin-top: 1.1rem; text-align: center; opacity: 0; transform: translateY(12px); animation: fx-word .5s cubic-bezier(.16,1,.3,1) .26s forwards; }
.fx-intro__word b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: .18em; color: #fdf6e3; }
.fx-intro__word span { display: block; margin-top: .35rem; font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .42em; color: var(--sun, #DD8520); }
.fx-intro__line { position: relative; height: 2px; width: 0; margin-top: 1rem; background: var(--sun, #DD8520); border-radius: 2px; animation: fx-line .6s cubic-bezier(.16,1,.3,1) .34s forwards; }
.fx-intro__skip { position: absolute; bottom: 26px; right: 28px; background: none; border: 0; color: rgba(246,235,225,.5); font-family: var(--font-body); font-size: .82rem; letter-spacing: .04em; cursor: pointer; transition: color .2s; }
.fx-intro__skip:hover { color: rgba(246,235,225,.95); }
@keyframes fx-glow { to { opacity: 1; transform: translate(-50%, -58%) scale(1); } }
@keyframes fx-moose { to { opacity: 1; transform: none; } }
@keyframes fx-word { to { opacity: 1; transform: none; } }
@keyframes fx-line { to { width: 190px; } }
@media (prefers-reduced-motion: reduce) { .fx-intro { display: none !important; } html.fx-intro-lock { overflow: auto; } }

/* ---------- 9. volumetric steam rising from the latte ---------- */
.split__media { position: relative; }
.fx-steam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .fx-steam { display: none; } }

/* ---------- 10. the moose, your guide: a trail-progress companion (desktop) ---------- */
.moose-trail { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); height: 54vh; width: 34px; z-index: 40; pointer-events: none; }
.moose-trail__line { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; transform: translateX(-50%); color: var(--sun, #DD8520); background: repeating-linear-gradient(currentColor 0 3px, transparent 3px 9px); opacity: .3; }
.moose-trail__sun { position: absolute; left: 50%; top: -5px; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--sun, #DD8520); box-shadow: 0 0 8px rgba(221,133,32,.55); }
.moose-trail__moon { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #e5ddc8; }
.moose-trail__moose { position: absolute; left: 50%; top: 0; width: 30px; height: 30px; color: var(--sun, #DD8520); filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); will-change: top, transform; }
@media (max-width: 1180px) { .moose-trail { display: none; } }

/* ---------- 12. opt-in sound toggle ---------- */
.fx-sound { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line, rgba(32,51,44,.2)); background: var(--cream, #F6EBE1); color: var(--forest, #20332C); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(22,36,30,.16); transition: transform .2s var(--ease, cubic-bezier(.16,1,.3,1)), background .2s, color .2s; }
.fx-sound:hover { transform: translateY(-2px); }
.fx-sound.is-on { background: var(--forest, #20332C); color: var(--sun, #DD8520); }
.fx-sound svg { width: 18px; height: 18px; }

/* ---------- 13. the pour: a top-down latte that pours + a foam heart blooms ---------- */
.pour-stage { position: relative; width: 232px; height: 232px; margin: 2.4rem auto 0; }
.pour-stage svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 16px 26px rgba(22,36,30,.14)); }
.pour-saucer { fill: #fffdfa; }
.pour-rim { fill: none; stroke: rgba(32,51,44,.16); stroke-width: 3; }
.pour-coffee { fill: #84551f; transform-origin: 120px 120px; }
.pour-crema { fill: #9a6a30; opacity: .0; }
.pour-heart { fill: #f1e7d3; transform-origin: 120px 116px; }
.pour-ripple { fill: none; stroke: rgba(255,250,240,.7); stroke-width: 3; opacity: 0; transform-origin: 120px 120px; }
.pour-steam { position: absolute; top: 2%; width: 12px; height: 74px; border-radius: 50%; background: linear-gradient(to top, rgba(255,250,240,0), rgba(255,250,240,.5)); filter: blur(5px); opacity: 0; }
.pour-steam--1 { left: 43%; }
.pour-steam--2 { left: 53%; }
@media (prefers-reduced-motion: no-preference) {
  .pour-coffee { transform: scale(0); }
  .pour-heart { opacity: 0; transform: scale(.35); }
  .pour-sec.in .pour-ripple { animation: pour-ripple .7s ease-out .05s 1; }
  .pour-sec.in .pour-coffee { animation: pour-fill .9s cubic-bezier(.16,1,.3,1) .12s forwards; }
  .pour-sec.in .pour-crema { animation: pour-crema .6s ease .8s forwards; }
  .pour-sec.in .pour-heart { animation: pour-art .8s cubic-bezier(.16,1,.3,1) 1s forwards; }
  .pour-sec.in .pour-steam { animation: pour-steam 3.6s ease-in-out 1.7s infinite; }
  .pour-sec.in .pour-steam--2 { animation: pour-steam 3.6s ease-in-out 2.6s infinite; }
}
@keyframes pour-fill { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes pour-crema { to { opacity: .5; } }
@keyframes pour-art { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
@keyframes pour-ripple { 0% { transform: scale(.18); opacity: .7; } 100% { transform: scale(1.02); opacity: 0; } }
@keyframes pour-steam { 0% { opacity: 0; transform: translateY(8px) scaleX(1); } 35% { opacity: .55; } 100% { opacity: 0; transform: translateY(-34px) scaleX(1.5); } }

/* ---------- 14. section polish (consistency pass) ---------- */
/* tactile lift on the icon cards (principles, stay-a-while), matching products */
.card { transition: transform .3s var(--ease, cubic-bezier(.16,1,.3,1)), box-shadow .3s var(--ease, cubic-bezier(.16,1,.3,1)); }
.card:hover { transform: translateY(-4px); }
/* gallery: clip-reveal (via .reveal.in) + a slow hover zoom */
.gallery figure { overflow: hidden; }
.gallery figure img { transition: transform .65s var(--ease, cubic-bezier(.16,1,.3,1)); }
.gallery figure:hover img { transform: scale(1.06); }
/* journal posts: same slow hover zoom for cohesion (covers already present) */
.post__top { overflow: hidden; }
.post__top img { transition: transform .55s var(--ease, cubic-bezier(.16,1,.3,1)); }
.post:hover .post__top img { transform: scale(1.05); }
/* SVG-icon feature lists (replacing emoji bullets) */
.feat-list { list-style: none; padding: 0; display: grid; gap: .7rem; }
.feat-list li { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.feat-list svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--sun, #DD8520); }
@media (prefers-reduced-motion: reduce) { .card:hover, .gallery figure:hover img, .post:hover .post__top img { transform: none; } }

/* ---------- 15. coffee-club bag: a slow, premium float (homepage) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .club-bag { animation: club-bob 6.5s ease-in-out infinite; }
}
@keyframes club-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 768px) { .club-bag { animation: none; } }