/* ============================================================
   SIGNAL — shared 3D-accent + Rospuek branding layer
   Reusable across every episode in public/ai-series/NN-slug/.
   Pairs with ./series-3d.js. Purely ADDITIVE: it styles only the
   appended end-card + opt-in tilt hooks, and never overrides an
   episode's existing rules. Brand tokens fall back to Signal's.
   ============================================================ */

/* ---- Rospuek branding credit line (drop into any colophon) ---- */
.rospuek-credit{
  margin:22px 0 0; font-family:var(--sans, 'Inter', system-ui, sans-serif);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted, #9c968a); line-height:1.9; font-weight:400;
}
.rospuek-credit .dot{ color:var(--gold, #d9c08a); margin:0 .5em; }
.rospuek-credit strong{ color:#c8c2b5; font-weight:500; }

/* ============================================================
   THE END-CARD — a full-bleed Rospuek emblem outro the recorded
   scroll comes to rest on. Static-safe: the <img> fallback looks
   premium on its own; series-3d.js upgrades it to a live 3D coin.
   ============================================================ */
.endcard{
  position:relative; z-index:2; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(60px,12vh,120px) 20px;
  background:
    radial-gradient(120% 78% at 50% 34%, rgba(217,192,138,.12), rgba(5,5,6,0) 58%),
    radial-gradient(140% 100% at 50% 108%, rgba(185,153,90,.10), rgba(5,5,6,0) 60%),
    #050506;
}
/* soften the seam where the sources footer meets the outro */
.endcard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:180px; z-index:1;
  background:linear-gradient(180deg, #050506, rgba(5,5,6,0));
  pointer-events:none;
}
/* inner vignette to seat the emblem on its stage */
.endcard::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 240px 60px rgba(0,0,0,.7);
}
.endcard-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }

/* the emblem stage holds the WebGL canvas + the img fallback, stacked */
.emblem-stage{
  position:relative; width:min(76vw, 440px); aspect-ratio:1/1; margin:0 auto;
}
.emblem-stage canvas.emblem-gl{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity 1.1s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.emblem-stage.gl-live canvas.emblem-gl{ opacity:1; }

/* premium static fallback — a glowing, gently floating medallion */
.emblem-fallback{
  position:absolute; top:50%; left:50%; width:66%; height:auto;
  transform:translate(-50%,-50%); border-radius:50%;
  filter:drop-shadow(0 18px 60px rgba(0,0,0,.7)) drop-shadow(0 0 46px rgba(217,192,138,.28));
  animation:emblemFloat 6.5s var(--ease, cubic-bezier(.22,.61,.36,1)) infinite;
  transition:opacity .8s ease;
}
.emblem-stage.gl-live .emblem-fallback{ opacity:0; }
/* a soft aura ring behind the fallback */
.emblem-stage::before{
  content:""; position:absolute; top:50%; left:50%; width:82%; height:82%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(217,192,138,.20), rgba(217,192,138,0) 66%);
  filter:blur(6px); pointer-events:none;
}
@keyframes emblemFloat{
  0%,100%{ transform:translate(-50%,-50%) translateY(0) rotate(-.6deg); }
  50%{ transform:translate(-50%,-52%) translateY(-8px) rotate(.6deg); }
}

/* wordmark + closing lines under the emblem */
.endcard .rospuek-mark{
  font-family:var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-weight:500; font-size:clamp(30px,8.4vw,54px); letter-spacing:.30em;
  text-transform:uppercase; color:#fbf6ea; margin:clamp(26px,5vh,44px) 0 0;
  padding-left:.30em; /* optical centering for the tracked caps */
  text-shadow:0 6px 44px rgba(217,192,138,.22);
}
.endcard .rospuek-tag{
  font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic;
  font-size:clamp(16px,4.4vw,21px); color:#d7d1c4; margin:14px 0 0; line-height:1.4;
  max-width:26ch;
}
.endcard .rospuek-rule{
  width:54px; height:1px; margin:clamp(22px,4vh,34px) auto 0;
  background:linear-gradient(90deg, transparent, var(--gold, #d9c08a), transparent);
}
.endcard .rospuek-credit{ margin-top:18px; }

@media (max-width:560px){
  .emblem-stage{ width:min(82vw, 360px); }
}

/* reduced-motion: hold the fallback still; JS also renders one static frame */
@media (prefers-reduced-motion:reduce){
  .emblem-fallback{ animation:none; }
  .emblem-stage canvas.emblem-gl{ transition:none; }
}

/* ============================================================
   OPT-IN 3D TILT — subtle pointer-driven depth on cards.
   Classes are added at runtime by series-3d.js, so with no JS
   (or on the recorded auto-scroll, where there's no pointer)
   nothing moves and the approved layout is untouched.
   ============================================================ */
.tilt-scene{ perspective:1100px; }
.tilt-el{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease, cubic-bezier(.22,.61,.36,1));
  will-change:transform;
}
.tilt-el .tilt-lift{ transform:translateZ(24px); transition:transform .5s var(--ease, cubic-bezier(.22,.61,.36,1)); }
@media (prefers-reduced-motion:reduce){
  .tilt-el, .tilt-el .tilt-lift{ transition:none !important; transform:none !important; }
}
@media (hover:none){
  /* touch devices: no tilt (would fight scrolling) */
  .tilt-el{ transform:none !important; }
}