/* ============================================================
   AURA — motion.css   (additive premium-motion layer)
   ────────────────────────────────────────────────────────────
   Loaded AFTER css/styles.css; it NEVER edits that file. Apple-like
   micro-motion only — transform / opacity / box-shadow, 180–420ms,
   one shared easing. NO page fade-out. NO dependencies.

   SAFETY CONTRACT:
   • Base content + images are ALWAYS visible. No animation here gates
     visibility (opacity is never 0 at rest), so a blocked, throttled,
     or background-tab-paused animation can never leave anything blank.
     (Page-enter is transform-only; image fade lives in js/motion.js and
     only ever touches a not-yet-loaded image with guaranteed reveal.)
   • Everything is disabled under prefers-reduced-motion (bottom block).
   • Layout-safe: only transform/opacity/box-shadow animate — no reflow,
     no layout shift.
   ============================================================ */

/* ── 1. PAGE ENTER ───────────────────────────────────────────
   A soft upward settle of the page's <main> content on load.
   Transform-only (opacity stays 1) so it can never blank the page.
   Scoped to <main> so it doesn't collide with animations.js, which
   reveals the *sections inside* main, not main itself. Pages without
   a <main> already animate via animations.js. ── */
@keyframes aura-rise { from { transform: translateY(10px); } to { transform: translateY(0); } }
main { animation: aura-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ── 2. BUTTONS — premium press + soft shadow ────────────────
   Layers OVER the existing .btn rules in styles.css (which already
   give a hover lift); we add a gentle shadow on hover and a pressed
   state on click. ── */
.btn {
  transition: transform 0.19s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease, background-color 0.2s ease,
              color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { box-shadow: 0 8px 22px -12px rgba(26, 14, 8, 0.5); }
.btn:active { transform: translateY(0) scale(0.975); }

/* Optional glassy variant (opt-in, e.g. buttons over imagery). */
.btn-glass {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

/* ── 3. CARDS — soft hover ring-glow ─────────────────────────
   Layers over the existing .style-card lift + image-zoom in styles.css.
   Adds a gentle elevation shadow + a faint blush ring on hover. ── */
.style-card { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease; }
.style-card:hover {
  box-shadow: 0 18px 42px -24px rgba(26, 14, 8, 0.55),
              0 0 0 1px rgba(192, 132, 160, 0.35);
}

/* ── 4. AURA NOTES — situation cards stagger in ──────────────
   When the accordion opens, the cards rise in sequence. Transform-only
   (the panel itself carries the fade); per-card delay via :nth-child so
   no JS change to aura-note.js is needed. ── */
@keyframes aura-note-rise { from { transform: translateY(8px); } to { transform: translateY(0); } }
.aura-notes-panel.open .aura-note-card { animation: aura-note-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.aura-notes-panel.open .aura-note-card:nth-child(1) { animation-delay: 0.02s; }
.aura-notes-panel.open .aura-note-card:nth-child(2) { animation-delay: 0.06s; }
.aura-notes-panel.open .aura-note-card:nth-child(3) { animation-delay: 0.10s; }
.aura-notes-panel.open .aura-note-card:nth-child(4) { animation-delay: 0.14s; }
.aura-notes-panel.open .aura-note-card:nth-child(5) { animation-delay: 0.18s; }
.aura-notes-panel.open .aura-note-card:nth-child(6) { animation-delay: 0.22s; }
.aura-notes-panel.open .aura-note-card:nth-child(7) { animation-delay: 0.26s; }
.aura-notes-panel.open .aura-note-card:nth-child(8) { animation-delay: 0.30s; }

/* (Image fade-in is handled in js/motion.js with inline opacity so the
   base markup never carries opacity:0 — see that file.) */

/* ── REDUCED MOTION — turn all of the above off ──────────────
   Animations removed entirely; transitions kept only for instant,
   non-moving color changes. No movement that could cause dizziness. ── */
@media (prefers-reduced-motion: reduce) {
  main,
  .aura-notes-panel.open .aura-note-card { animation: none; }
  .btn { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
  .btn:active { transform: none; }
  .style-card { transition: none; }
}