/* ===========================================================
   NAO BITES — motion layer  (loads after styles.css/build.css)
   Cinematic intro, scroll reveals, custom cursor, ambient FX.
   Everything here is progressive enhancement: with JS off, or
   prefers-reduced-motion, the site renders fully without it.
   =========================================================== */

/* ---------- Reveal initial states (set by motion.js via .has-motion) ----------
   We only hide things once we KNOW motion will run, so no-JS users never
   get stuck looking at a blank, un-revealed page. */
.has-motion [data-reveal] { opacity: 0; will-change: transform, opacity; }
.has-motion [data-reveal="up"]    { transform: translateY(38px); }
.has-motion [data-reveal="left"]  { transform: translateX(-44px); }
.has-motion [data-reveal="right"] { transform: translateX(44px); }
.has-motion [data-reveal="zoom"]  { transform: scale(.92); }

/* ===========================================================
   CINEMATIC INTRO — a closed kraft box that opens to reveal the site
   =========================================================== */
.intro {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background:
    radial-gradient(60rem 40rem at 50% 30%, rgba(192,149,74,.18), transparent 60%),
    linear-gradient(168deg, #1f4031 0%, var(--green) 60%, #16271d 100%);
  overflow: hidden;
}
.intro[hidden] { display: none; }
.intro__stage { position: relative; width: min(78vw, 360px); aspect-ratio: 1/1; perspective: 1200px; }

/* the box body */
.intro__box { position: absolute; inset: 14% 8% 4%; transform-style: preserve-3d; }
.intro__base {
  position: absolute; inset: 0; border-radius: 14px;
  background: linear-gradient(150deg, #c89a6a, #a9743f);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 2px 10px rgba(0,0,0,.25);
}
.intro__base::after {            /* inner shadow well so the open box reads as deep */
  content: ""; position: absolute; inset: 9%; border-radius: 8px;
  background: radial-gradient(circle at 50% 35%, #5a3c22, #2f1d10);
  box-shadow: inset 0 6px 18px rgba(0,0,0,.6);
}
.intro__logo {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 46%; height: 46%; align-self: center; justify-self: center;
  border-radius: 50%; border: 3px solid var(--gold-2);
  background: var(--cream) center/cover no-repeat;
  box-shadow: 0 14px 36px -12px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(14px) scale(.7);
}
/* lid — hinged at the back, flips up and away */
.intro__lid {
  position: absolute; left: 0; right: 0; top: 0; height: 52%;
  transform-origin: top center; transform: rotateX(0deg);
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(160deg, #d6a972, #b9814b);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.6), inset 0 2px 8px rgba(255,255,255,.18);
  z-index: 3;
}
.intro__lid::before {            /* real NAO BITES wordmark printed on the lid */
  content: ""; position: absolute; inset: 0;
  background: url("assets/img/logo-horizontal.png") center / 64% auto no-repeat;
}
.intro__seal {                   /* wax seal holding the lid shut */
  position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 38% 32%, #d8ab5e, #9c6f2c 70%);
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.55), inset 0 -3px 6px rgba(0,0,0,.35);
  display: grid; place-items: center;
  color: #5a3c14; font-family: "Cinzel", serif; font-weight: 600; font-size: 1.1rem;
}
.intro__tag {
  position: absolute; left: 0; right: 0; bottom: -3.4rem; text-align: center;
  font-family: "Poppins", sans-serif; letter-spacing: .42em; font-size: .72rem;
  color: var(--gold-2); opacity: 0;
}
.intro__skip {
  position: absolute; bottom: 1.6rem; right: 1.6rem;
  font-family: "Poppins", sans-serif; font-size: .8rem; letter-spacing: .08em;
  color: rgba(245,241,232,.6); background: transparent; border: none; cursor: pointer;
  transition: color .2s;
}
.intro__skip:hover { color: var(--cream); }

/* ===========================================================
   MAGNETIC / TILT helpers (transforms applied inline by JS;
   we only need the smoothing + 3d context here)
   =========================================================== */
.magnetic { will-change: transform; }
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt__inner { transform-style: preserve-3d; }

/* A subtle sheen that follows the cursor across tilt cards */
.tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.28), transparent 45%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 3;
}
.tilt:hover::after { opacity: 1; }

/* The marquee already loops via CSS; give bubbles a hover lift */
.has-motion .bubble { transition: transform .25s ease, box-shadow .25s ease; }
.has-motion .bubble:hover { transform: translateY(-4px) scale(1.02); }

/* ===========================================================
   REDUCED MOTION — strip everything non-essential
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  .intro { display: none !important; }
  .top-scene__orb { animation: none !important; }
}