/* ==========================================================================
   Motion - pre-animation states (opt-in via .js-motion) + reduced-motion
   Content is fully visible by default. JS adds .js-motion to <html> to arm
   the hidden pre-states, so if JS fails nothing is ever hidden.
   ========================================================================== */

.js-motion .am-anim{opacity:0;transform:translateY(24px)}
.js-motion .am-anim-line{transform:scaleX(0);transform-origin:left center}
.js-motion .am-hero-line{opacity:0;transform:translateY(100%)}
.js-motion .am-hero-fade{opacity:0;transform:translateY(16px)}
.js-motion .am-book-wrap{opacity:0;transform:scale(.96)}

/* Typographic fallback panel (only used when no cover art is present) */
.am-book-fallback{
  transform:perspective(1200px) rotateY(-14deg) rotateX(4deg);
  transform-style:preserve-3d;
  filter:drop-shadow(var(--am-shadow-lg));
  max-width:62vw;margin-inline:auto;
}
@media (min-width:1024px){.am-book-fallback{max-width:420px}}
.am-book-stage{position:relative}
.am-book-stage::before{
  content:"";position:absolute;left:50%;bottom:-6%;width:70%;height:14%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.45),transparent 70%);
  filter:blur(14px);z-index:-1;
}
.am-book-canvas{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.am-book-canvas.is-live{opacity:1}

/* --- Gavel glow watermark -------------------------------------------------- */
.am-has-gavel{position:relative;overflow:hidden;isolation:isolate}
.am-has-gavel>*:not(.am-gavel){position:relative;z-index:1}
.am-gavel{
  position:absolute;pointer-events:none;z-index:0;
  /* Sits fully inside the section now - it was hung off the corner at -10%
     and the head was being sliced off by the section's overflow. */
  right:clamp(.5rem,1.5vw,2.5rem);
  bottom:clamp(.5rem,1.5vw,2rem);
  width:clamp(300px,40vw,560px);
  mix-blend-mode:screen;          /* black source drops out entirely */
  opacity:.55;                     /* present and legible, still a watermark */
  filter:hue-rotate(-18deg) saturate(1.15) contrast(1.08);
  /* Soft all-round falloff so it dissolves into the section instead of
     stopping at a hard edge. */
  -webkit-mask-image:radial-gradient(ellipse 76% 76% at 52% 50%,#000 42%,rgba(0,0,0,.7) 64%,rgba(0,0,0,.25) 82%,transparent 96%);
  mask-image:radial-gradient(ellipse 76% 76% at 52% 50%,#000 42%,rgba(0,0,0,.7) 64%,rgba(0,0,0,.25) 82%,transparent 96%);
  animation:am-gavel-breathe 9s ease-in-out infinite;
}
.am-gavel img{width:100%;height:auto;display:block}
.am-gavel--left{right:auto;left:clamp(.5rem,1.5vw,2.5rem);transform:scaleX(-1)}
@keyframes am-gavel-breathe{
  0%,100%{opacity:.5;transform:translateY(0) scale(1)}
  50%{opacity:.62;transform:translateY(-9px) scale(1.015)}
}
.am-gavel--left{animation-name:am-gavel-breathe-l}
@keyframes am-gavel-breathe-l{
  0%,100%{opacity:.5;transform:scaleX(-1) translateY(0)}
  50%{opacity:.62;transform:scaleX(-1) translateY(-9px)}
}
/* Give the gavel room so it is never clipped by the content above it. */
.am-has-gavel{padding-bottom:clamp(6rem,4rem + 8vw,10rem)}
@media (max-width:767px){
  .am-gavel{
    width:min(80vw,360px);opacity:.42;
    right:.5rem;bottom:.5rem;
  }
  .am-has-gavel{padding-bottom:clamp(9rem,6rem + 14vw,13rem)}
}

/* Reduced motion: everything final, instantly, no exceptions */
@media (prefers-reduced-motion: reduce){
  .js-motion .am-anim,
  .js-motion .am-anim-line,
  .js-motion .am-hero-line,
  .js-motion .am-hero-fade,
  .js-motion .am-book-wrap{opacity:1!important;transform:none!important}
  .am-gavel{animation:none;opacity:.45}
  .am-book-fallback{transform:none;filter:drop-shadow(var(--am-shadow-md))}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}