/* Inner-page motion layer (loaded by _partials/page_hero.html, so public
   inner pages only). Kept deliberately quiet: a serif accent that matches the
   homepage, scroll reveals, a small card tilt with a cursor glow, and the
   hero evidence frame playing a clip instead of a photo. 31 Oct 2026. */

@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic-latin.26082c73a711.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

/* Headline line 2: the homepage's serif italic instead of the shimmer gradient. */
.wbf-hero h1 .eam-h1-line.accent {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: -.01em; line-height: 1.02; padding-right: .08em;
  background: linear-gradient(100deg, #9DE8EF, #c4b5fd 45%, #7C3AED);
  background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: none;
}

/* Scroll reveals: only once motion.js has tagged <html>, so no-JS stays visible. */
.mx-js .mx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); transition-delay: var(--mx-delay, 0ms); }
.mx-js .mx-reveal.is-in { opacity: 1; transform: none; }

/* Card tilt + cursor glow (fine pointers only; motion.js sets the variables). */
/* isolation keeps the glow (z-index -1) above the card's background but under its content. */
.mx-tilt { position: relative; isolation: isolate; }
.mx-tilt:hover { transform: perspective(900px) rotateX(var(--mx-rx, 0deg)) rotateY(var(--mx-ry, 0deg)) translateY(-4px); }
.mx-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx-x, 50%) var(--mx-y, 50%), rgba(124,58,237,.22), transparent 45%); }
.mx-tilt:hover .mx-glow { opacity: 1; }

/* Hero evidence frame holding a clip (page_hero.html `video=`). */
.eam-hero-figure--video { max-width: 480px; }
.eam-hero-figure video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: #0B0F1C; }
@media (max-width: 900px) { .eam-hero-figure--video { max-width: 360px; } }
@media (max-width: 640px) { .eam-hero-figure--video { max-width: 300px; } }

@media (prefers-reduced-motion: reduce) {
  .mx-js .mx-reveal { opacity: 1; transform: none; transition: none; }
  .mx-tilt:hover { transform: none; }
}