/* ============================================================
   AllTheMuse — "Alive" pass (2026-10-12)
   Ten upgrades that make the product feel alive, not static:
     1. Living hero (Ken Burns drift — parallax is .m-para in markup)
     2. Skeleton shimmer (reuses .m-skel / .lskel)
     3. Progressive image loading (blur-up, data-blurup)
     4. Physical touch (spring press states)
     5. Animated numbers ([data-countup])
     6. Collapsing nav (body.nav-scrolled)
     7. Cinematic collect moment (.atm-collect)
     8. Ambient depth (body::before aurora wash)
     9. Card-to-detail morph (.atm-morph-fly / .atm-morph-land)
    10. Motion in empty states (.state-art float)

   Additive only. Transform/opacity only. Respects
   prefers-reduced-motion (see guard at bottom) and both themes.
   ============================================================ */

/* ---------- 1. Living hero — crossfade between slides ----------
   The old Ken Burns drift was retired with the cinematic overlay hero
   (2026-10-12): the stacked hero shows the full body uncropped, and a
   scale drift would clip it. Parallax comes from motion.js. */

/* ---------- 3. Progressive image loading (blur-up) ----------
   JS (alive.js) adds .is-sharp on img load; also sweeps cached imgs.
   No scale: scaling the image inside its overflow-hidden frame cropped the
   edges (full-picture rule, 2026-10-18) — blur fade only. */
img[data-blurup] {
  filter: blur(16px);
  transition: filter 0.55s ease;
  will-change: filter;
}
img[data-blurup].is-sharp {
  filter: blur(0);
  transform: none;
  will-change: auto;
}

/* ---------- 4. Physical touch — spring press states ----------
   Extends the existing spring system (.btn:active already scales). */
.btn {
  transition:
    transform 0.14s var(--motion-spring-soft, cubic-bezier(0.2, 0.8, 0.25, 1)),
    box-shadow 0.2s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: scale(0.965); }
/* Landing poster cards: tactile press on touch devices */
.lcard { -webkit-tap-highlight-color: transparent; }
@media (hover: none), (pointer: coarse) {
  .lcard-hit { transition: transform 0.16s ease-out; }
  .lcard-hit:active { transform: scale(0.96); }
}
@media (hover: hover) and (pointer: fine) {
  .lcard-hit:focus-visible { transform: translateY(-4px); }
}
/* Shared product cards (gallery, vault, contest…): press everywhere */
.mcard { -webkit-tap-highlight-color: transparent; }
.mcard:active { transform: scale(0.97); }

/* ---------- 5. Animated numbers ----------
   JS animates [data-countup] from 0 to the real value on reveal. */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ---------- 6. Collapsing nav — iOS large-title style ----------
   JS toggles body.nav-scrolled past 32px. */
.nav {
  transition: box-shadow 0.35s ease, background-color 0.35s ease;
}
.nav-inner {
  transition: padding 0.35s cubic-bezier(0.16, 0.8, 0.24, 1);
}
.nav .logo { transition: font-size 0.35s cubic-bezier(0.16, 0.8, 0.24, 1); }
body.nav-scrolled .nav {
  box-shadow: 0 10px 34px rgba(10, 8, 24, 0.1);
  -webkit-backdrop-filter: blur(28px) saturate(1.9);
  backdrop-filter: blur(28px) saturate(1.9);
}
body.nav-scrolled .nav-inner { padding: 0.42rem 1.25rem; }
body.nav-scrolled .nav .logo { font-size: 1.12rem; }

/* ---------- 7. Cinematic collect moment ----------
   window.AtmAlive.celebrateCollect({img, name, sub}) builds this. */
.atm-collect {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8, 6, 18, 0.66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.35s ease;
}
.atm-collect.go { opacity: 1; }
.atm-collect-card { text-align: center; max-width: 340px; }
.atm-collect-art {
  position: relative;
  width: min(58vw, 220px); aspect-ratio: 3 / 4;
  margin: 0 auto 22px;
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  transform: scale(0.6); opacity: 0;
}
.atm-collect.go .atm-collect-art {
  animation: atmCollectArt 0.7s var(--motion-spring, cubic-bezier(0.22, 0.9, 0.28, 1.08)) forwards;
}
@keyframes atmCollectArt {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.atm-collect-art img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 5%; box-sizing: border-box; }
.atm-collect-sweep {
  position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
  transform: translateX(-110%);
}
.atm-collect.go .atm-collect-sweep { animation: atmSweep 1.1s ease 0.25s forwards; }
@keyframes atmSweep { to { transform: translateX(110%); } }
.atm-collect-kicker {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #d8b25e;
  opacity: 0; transform: translateY(10px);
}
.atm-collect-card h3 {
  margin: 0 0 8px; color: #fff;
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  opacity: 0; transform: translateY(10px);
}
.atm-collect-sub {
  margin: 0; color: rgba(255, 255, 255, 0.75);
  font-size: 14px; line-height: 1.6;
  opacity: 0; transform: translateY(10px);
}
.atm-collect.go .atm-collect-kicker { animation: atmRiseIn 0.5s ease 0.3s forwards; }
.atm-collect.go .atm-collect-card h3 { animation: atmRiseIn 0.5s ease 0.4s forwards; }
.atm-collect.go .atm-collect-sub { animation: atmRiseIn 0.5s ease 0.5s forwards; }
@keyframes atmRiseIn { to { opacity: 1; transform: none; } }
/* Scroll lock for overlays (landing.css defines this only on the landing) */
.no-scroll { overflow: hidden !important; }
/* The daily-drop claim overlay gets the same art treatment */
.celebrate-overlay .celebrate-card img {
  animation: atmCollectArt 0.6s var(--motion-spring, cubic-bezier(0.22, 0.9, 0.28, 1.08)) both;
}

/* ---------- 7b. The gift-box moment (Build 4) ----------
   window.AtmGift.open / AtmAlive.celebrateCollect. Geometry mirrors
   Mohamed's approved example; colors come from --gift-accent /
   --gift-deep, set per call from the muse's rarity tier. */
.atm-gift {
  position: fixed; inset: 0; z-index: 480;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8, 6, 18, 0.66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.32s ease;
  cursor: pointer;
}
.atm-gift.go { opacity: 1; }
.atm-gift-scene { position: relative; width: 300px; height: 320px; flex: none; }
.atm-gift-boxwrap { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 170px; animation: atmGiftBob 2.4s ease-in-out infinite; }
.atm-gift-boxwrap.shake { animation: atmGiftShake .32s ease-in-out; }
.atm-gift-scene.open .atm-gift-boxwrap { animation: none; }
@keyframes atmGiftBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-7px); } }
@keyframes atmGiftShake {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  20% { transform: translateX(-52%) rotate(-4deg); }
  40% { transform: translateX(-48%) rotate(4deg); }
  60% { transform: translateX(-52%) rotate(-3deg); }
  80% { transform: translateX(-48%) rotate(2deg); }
}
.atm-gift-boxbody {
  position: relative; height: 120px; border-radius: 12px;
  background: linear-gradient(160deg, var(--gift-accent), var(--gift-deep));
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.atm-gift-boxbody::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 26px;
  transform: translateX(-50%);
  background: linear-gradient(#ffd76a, #f5a623);
  box-shadow: inset 0 0 0 1px rgba(120, 70, 0, .18);
}
.atm-gift-lid {
  position: relative; height: 34px; margin: 0 -8px 0; border-radius: 9px; z-index: 3;
  background: linear-gradient(160deg, var(--gift-accent), var(--gift-deep));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: transform .55s cubic-bezier(.3, .7, .3, 1), opacity .5s ease;
}
.atm-gift-lid::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 26px;
  transform: translateX(-50%);
  background: linear-gradient(#ffd76a, #f5a623);
}
.atm-gift-scene.open .atm-gift-lid {
  transform: translate(64px, -118px) rotate(36deg);
  opacity: 0;
}
.atm-gift-bow { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); width: 64px; height: 28px; z-index: 4; }
.atm-gift-bow i {
  position: absolute; top: 0; width: 30px; height: 26px; border-radius: 50%;
  border: 6px solid #f5a623; box-sizing: border-box; background: transparent;
}
.atm-gift-bow i:first-child { left: 0; transform: rotate(-24deg); }
.atm-gift-bow i:last-child { right: 0; transform: rotate(24deg); }
.atm-gift-rays {
  position: absolute; left: 50%; top: 36%; width: 340px; height: 340px;
  transform: translate(-50%, -50%) scale(.35);
  border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 205, 84, .34) 0deg 9deg, transparent 9deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 38%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0 38%, transparent 68%);
  transition: opacity .5s ease, transform .6s ease;
}
.atm-gift-scene.open .atm-gift-rays {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  animation: atmGiftSpin 14s linear infinite;
}
@keyframes atmGiftSpin { to { transform: translate(-50%, -50%) scale(1) rotate(360deg); } }
.atm-gift-card {
  position: absolute; left: 50%; bottom: 60px; width: 172px; z-index: 2;
  transform: translate(-50%, 30px) scale(.55);
  opacity: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 4px #ffd76a, 0 26px 60px rgba(0, 0, 0, .5);
  background: #fff;
}
.atm-gift-card img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: contain; }
.atm-gift-scene.open .atm-gift-card {
  animation: atmGiftRise .78s cubic-bezier(.2, 1.55, .35, 1) forwards;
}
@keyframes atmGiftRise {
  to { transform: translate(-50%, -96px) scale(1); opacity: 1; }
}
.atm-gift-spark {
  position: absolute; left: 50%; top: 36%; width: 9px; height: 9px;
  border-radius: 50%; z-index: 5; pointer-events: none;
}
.atm-gift-caption { text-align: center; margin-top: 6px; padding: 0 12px; }
.atm-gift-name {
  color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}
.atm-gift-sub {
  color: rgba(255, 255, 255, .78); font-size: 14.5px; margin-top: 6px; line-height: 1.55;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s ease .08s, transform .45s ease .08s;
}
.go-name .atm-gift-name,
.go-name .atm-gift-sub { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .atm-gift-boxwrap, .atm-gift-scene.open .atm-gift-rays { animation: none !important; }
}

/* ---------- 7c. The Mystery Gift front door (Build 5) ----------
   The same gift scene staged as a full-screen takeover. There is
   deliberately NO close control before the reveal. */
.atm-mystery {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8, 6, 18, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0; transition: opacity 0.32s ease;
  cursor: pointer;
}
.atm-mystery.go { opacity: 1; }
.atm-mystery-line {
  color: #fff; text-align: center;
  font-size: 23px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3;
  margin: 0 0 10px; max-width: 340px;
}
.atm-mystery-actions {
  margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.atm-mystery-actions.show { opacity: 1; transform: none; pointer-events: auto; }
.atm-mystery-claim {
  background: linear-gradient(160deg, var(--gift-accent), var(--gift-deep));
  color: #fff; border: none; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 16.5px;
  padding: 14px 26px; border-radius: 999px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}
.atm-mystery-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255, 255, 255, .75); font: inherit; font-size: 14.5px; font-weight: 600;
  padding: 8px 14px;
}

/* ---------- 7d. The inline gift stage (Build 6) ----------
   The gift scene rendered inside a page card (Your 2 Minutes,
   step 1). The caption sits on the page's own surface here, so it
   takes the page's ink colors instead of the overlay's white. */
.atm-gift-host { text-align: center; }
.atm-gift-host .atm-gift-scene { margin: 0 auto; }
.atm-gift-host .atm-gift-caption { margin-top: 2px; }
.atm-gift-host .atm-gift-name { color: var(--ink); }
.atm-gift-host .atm-gift-sub { color: var(--muted); }
.atm-gift-emoji {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-size: 92px; line-height: 1; background: #fff; width: 100%;
}

/* ---------- 8. Ambient depth — faint aurora wash ----------
   One fixed layer, transform-only drift, very restrained. */
body::before {
  content: "";
  position: fixed; inset: -12%; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(880px 520px at 10% 6%, rgba(124, 108, 240, 0.12), transparent 62%),
    radial-gradient(760px 520px at 90% 20%, rgba(56, 189, 180, 0.09), transparent 62%),
    radial-gradient(1000px 720px at 50% 108%, rgba(216, 178, 94, 0.08), transparent 62%);
  animation: atmAmbient 80s ease-in-out infinite alternate;
  will-change: transform;
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(880px 520px at 10% 6%, rgba(124, 108, 240, 0.2), transparent 62%),
    radial-gradient(760px 520px at 90% 20%, rgba(56, 189, 180, 0.13), transparent 62%),
    radial-gradient(1000px 720px at 50% 108%, rgba(216, 178, 94, 0.1), transparent 62%);
}
@keyframes atmAmbient {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -3.5%, 0) scale(1.07); }
}

/* ---------- 9. Card-to-detail morph ----------
   Departure: .atm-morph-fly expands from the card rect to full screen.
   Arrival:   .atm-morph-land reverses it on the detail page. */
.atm-morph-fly,
.atm-morph-land {
  position: fixed; z-index: 500;
  pointer-events: none; overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  transition:
    left 0.38s cubic-bezier(0.22, 0.9, 0.28, 1),
    top 0.38s cubic-bezier(0.22, 0.9, 0.28, 1),
    width 0.38s cubic-bezier(0.22, 0.9, 0.28, 1),
    height 0.38s cubic-bezier(0.22, 0.9, 0.28, 1),
    border-radius 0.38s ease,
    opacity 0.3s ease;
  margin: 0;
}
.atm-morph-fly img,
.atm-morph-land img { width: 100%; height: 100%; object-fit: contain; display: block; }
.atm-morph-land { transition-duration: 0.45s, 0.45s, 0.45s, 0.45s, 0.45s, 0.3s; }
body.atm-arriving #muse-detail { animation: atmArriveIn 0.6s ease 0.15s both; }
@keyframes atmArriveIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 10. Motion in empty states ----------
   The state glyph gently floats — never dead text. */
.state-art, .empty-state-art { animation: atmFloat 6s ease-in-out infinite; }
@keyframes atmFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ---------- community stat skeletons (landing #9) ---------- */
.comm-stat.m-skel { min-height: 96px; border-radius: var(--r-lg); }
.comm-stat.m-skel b, .comm-stat.m-skel span { visibility: hidden; }

/* ============================================================
   Reduced motion — EVERYTHING STILL. No exceptions.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .state-art, .empty-state-art,
  body::before,
  .celebrate-overlay .celebrate-card img { animation: none !important; }
  img[data-blurup] {
    filter: none !important; transform: none !important;
    transition: none !important;
  }
  .atm-collect, .atm-morph-fly, .atm-morph-land { display: none !important; }
  body.atm-arriving #muse-detail { animation: none !important; }
  .nav, .nav-inner, .nav .logo, .btn, .lcard-hit { transition: none !important; }
  .lcard-hit:active, .mcard:active, .btn:active { transform: none !important; }
}
html.m-reduced-motion .state-art,
html.m-reduced-motion .empty-state-art,
html.m-reduced-motion body::before,
html.m-reduced-motion .celebrate-overlay .celebrate-card img { animation: none !important; }
html.m-reduced-motion img[data-blurup] {
  filter: none !important; transform: none !important; transition: none !important;
}
html.m-reduced-motion .atm-collect,
html.m-reduced-motion .atm-morph-fly,
html.m-reduced-motion .atm-morph-land { display: none !important; }
html.m-reduced-motion body.atm-arriving #muse-detail { animation: none !important; }