/* Motion and lighting layer, additive. Everything here is scoped to html.js-effects and switched off by
   html[data-effects="off"] (the footer toggle) or by prefers-reduced-motion, so the pages read exactly as
   designed without it. */

/* ---- scroll reveal ---- */
html.js-effects:not([data-effects="off"]) .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
html.js-effects:not([data-effects="off"]) .reveal.is-visible { opacity: 1; transform: none; }

/* ---- lighting: a soft top light on paper cards, a warm glow behind navy tiles ---- */
html.js-effects:not([data-effects="off"]) .claim-card,
html.js-effects:not([data-effects="off"]) .source-card,
html.js-effects:not([data-effects="off"]) .wall-card,
html.js-effects:not([data-effects="off"]) .confidence-card,
html.js-effects:not([data-effects="off"]) .rec-status,
html.js-effects:not([data-effects="off"]) .rec-day-witness { background-image: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 38%); }
html.js-effects:not([data-effects="off"]) .rec-stats div { background-image: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%); }

/* ---- hover and focus: lift, deepen the shadow, brighten the gold edge ---- */
html.js-effects:not([data-effects="off"]) .claim-card,
html.js-effects:not([data-effects="off"]) .source-card,
html.js-effects:not([data-effects="off"]) .photo-card,
html.js-effects:not([data-effects="off"]) .wall-card,
html.js-effects:not([data-effects="off"]) .confidence-card,
html.js-effects:not([data-effects="off"]) .slide-open { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
html.js-effects:not([data-effects="off"]) .claim-card:hover,
html.js-effects:not([data-effects="off"]) .source-card:hover,
html.js-effects:not([data-effects="off"]) .wall-card:hover,
html.js-effects:not([data-effects="off"]) .confidence-card:hover { transform: translateY(-4px); box-shadow: 9px 11px 0 rgba(197,34,47,.8), 0 22px 40px rgba(3,18,30,.28); }
html.js-effects:not([data-effects="off"]) .photo-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px rgba(3,18,30,.32); }
html.js-effects:not([data-effects="off"]) .slide-open:hover,
html.js-effects:not([data-effects="off"]) .slide-open:focus-visible { transform: translateY(-4px) scale(1.01); box-shadow: 9px 11px 0 rgba(197,34,47,.85), 0 24px 44px rgba(3,18,30,.4); border-color: #efca70; }
html.js-effects:not([data-effects="off"]) .btn { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
html.js-effects:not([data-effects="off"]) .btn:hover, html.js-effects:not([data-effects="off"]) .btn:focus-visible { transform: translateY(-2px); filter: brightness(1.06); }
html.js-effects:not([data-effects="off"]) .btn-primary:hover { box-shadow: 8px 8px 0 var(--gold), 0 16px 30px rgba(197,34,47,.35); }
html.js-effects:not([data-effects="off"]) nav a { transition: background .2s ease, box-shadow .2s ease; }
html.js-effects:not([data-effects="off"]) nav a:hover { box-shadow: inset 0 -3px 0 var(--gold); }
html.js-effects:not([data-effects="off"]) .carousel-btn { transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
html.js-effects:not([data-effects="off"]) .carousel-btn:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 24px rgba(3,18,30,.45); }

/* ---- hero spotlight: a warm light that follows the pointer over the photo ---- */
/* (the design's own ::after carries the navy gradient; the light sits in ::before above it) */
html.js-effects:not([data-effects="off"]) .hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(233,199,120,.28), rgba(233,199,120,.08) 35%, transparent 70%); mix-blend-mode: screen; }
html.js-effects:not([data-effects="off"]) .hero-photo.is-lit::before { opacity: 1; }

/* ---- section lighting: a faint vignette on navy sections, a top glow on paper sections ---- */
html.js-effects:not([data-effects="off"]) .section-navy { background-image: radial-gradient(1200px 500px at 20% -10%, rgba(233,199,120,.10), transparent 60%); }
html.js-effects:not([data-effects="off"]) .rec-hero, html.js-effects:not([data-effects="off"]) .lib-hero, html.js-effects:not([data-effects="off"]) .wall-hero, html.js-effects:not([data-effects="off"]) .pv-hero { background-image: radial-gradient(900px 420px at 15% 0%, rgba(233,199,120,.14), transparent 60%); }

/* ---- the footer toggle ---- */
.effects-toggle { padding: 0; color: inherit; background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html.js-effects .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js-effects .hero-photo::before { display: none; }
}