/* ============================================================
   PROJEKT AMADEUS 02 BETA — "KUPFERLICHT"
   Die Stiche bewegen sich nicht. Das Licht bewegt sich über sie.
   Alle Effekte liegen ÜBER den unangetasteten Originalen
   (Alpha-Masken, Transformationen) — nie im Artwork selbst.
   Nur transform/opacity werden animiert (Compositor-only).
   Aktiv nur mit JS (.am-js) und ohne prefers-reduced-motion.
   ============================================================ */

:root{
  --am-ease-stage: cubic-bezier(.22,1,.36,1);
  --am-ease-sweep: cubic-bezier(.55,0,.12,1);
  --am-glow-idle: .20;
  --am-glow-pointer: .34;
  --am-pulse-o: .08;
  --am-reflect-o: .22;        /* Spiegelung auf dunklen Seiten */
  --am-reflect-o-light: .12;  /* Spiegelung auf hellen Seiten (zarter) */
}

/* ---------- Szene & Tilt (Prägetiefe) ---------- */
.am-js .am-scene{
  position:relative;
  display:inline-block;
  max-width:100%;
  perspective:1200px;
  isolation:isolate;
}
.am-js .am-tilt{
  position:relative;
  transform:rotateX(var(--am-rx,0deg)) rotateY(var(--am-ry,0deg)) translateZ(0);
}
.am-js .am-live .am-tilt{will-change:transform}
.am-js .am-tilt > img{display:block}

/* ---------- Overlays (Glanz nur auf den Gravurlinien) ---------- */
.am-mask{
  position:absolute; inset:0;
  pointer-events:none;
  /* mask-image wird per JS auf die WebP des Motivs gesetzt */
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  overflow:hidden;
}

/* Der Lichtstrich — einmalig beim Auftritt */
.am-sweep{mix-blend-mode:soft-light; opacity:0}
.on-dark .am-sweep{mix-blend-mode:screen}
.am-swept .am-sweep{opacity:1}
.am-sweep i{
  position:absolute; top:-30%; bottom:-30%; left:0; width:55%;
  transform:translateX(-140%) skewX(-16deg);
  background:linear-gradient(90deg, transparent, rgba(255,241,220,var(--am-sweep-a,.62)) 50%, transparent);
}
.on-dark .am-sweep i{background:linear-gradient(90deg, transparent, rgba(254,247,236,calc(var(--am-sweep-a,.62)*.55)) 50%, transparent)}
.am-swept .am-sweep i{animation:amSweep 1.6s var(--am-ease-sweep) 1 forwards}
/* Wiederkehrende Striche sind leiser als der Auftritt (steht NACH
   .am-swept-Regeln, gewinnt bei gleicher Spezifität) */
.am-resweep .am-sweep{opacity:.5}
@keyframes amSweep{
  from{transform:translateX(-140%) skewX(-16deg)}
  to{transform:translateX(340%) skewX(-16deg)}
}

/* Das wandernde Licht (Pointer bzw. autonome Drift) */
.am-glow{mix-blend-mode:soft-light; opacity:0}
.on-dark .am-glow{mix-blend-mode:screen}
.am-glow i{
  /* left/top-Prozente loesen korrekt gegen Breite BZW. Hoehe auf
     (Margins wuerden beide gegen die Breite rechnen — Jury-Befund A) */
  position:absolute; left:-25%; top:-25%; width:150%; height:150%;
  background:radial-gradient(closest-side, rgba(255,244,225,.55), transparent 72%);
  transform:translate3d(0,0,0);
}
.on-dark .am-glow i{background:radial-gradient(closest-side, rgba(254,247,236,.5), transparent 72%)}
.am-js .am-live .am-glow i{will-change:transform}

/* Kerzenlicht-Puls — nur Dunkelseiten, atmet phasenversetzt */
.am-pulse{mix-blend-mode:screen; opacity:0}
.am-pulse i{
  position:absolute; inset:-20%;
  background:radial-gradient(ellipse at 42% 38%, rgba(254,247,236,1), transparent 68%);
}
.am-live .am-pulse{animation:amPulse 9s ease-in-out infinite; animation-delay:var(--am-pulse-delay,0s)}
@keyframes amPulse{
  0%,100%{opacity:0}
  50%{opacity:var(--am-pulse-o)}
}

/* ---------- Spiegelung auf poliertem Grund (überall; hell zarter) ---------- */
.am-reflect{
  position:relative; display:block; width:100%;
  overflow:hidden; pointer-events:none;
  margin-top:2px;
  opacity:var(--am-reflect-o-light);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 78%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 78%);
}
.on-dark .am-reflect{opacity:var(--am-reflect-o)}
.am-reflect img{
  display:block; width:100%; height:auto;
  transform:scaleY(-1);
  filter:blur(2px) saturate(.9);
}

/* ---------- Auftritt des Hero-Stichs (hat kein .rv) ---------- */
/* Boot-Zustand: Head-Inline-Script verbirgt den Hero, bis amadeus.js
   übernimmt — kein Aufblitzen beim unverschlüsselten Erstladen
   (Jury-Befund D); Rettungsanker im Inline-Script nach 3 s. */
.am-boot .hero-etch{opacity:0}
.am-js .hero-etch.am-enter{
  opacity:0;
  transform:translateY(14px) scale(.985);
}
.am-js .hero-etch.am-enter.am-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--am-ease-stage), transform .9s var(--am-ease-stage);
}
.am-js .hero-etch.am-enter figcaption{opacity:0; transition:opacity .7s ease .55s}
.am-js .hero-etch.am-enter.am-in figcaption{opacity:1}

/* ---------- Würde bewahren ---------- */
@media (prefers-reduced-motion: reduce){
  .am-sweep, .am-glow, .am-pulse{display:none !important}
  .am-tilt{transform:none !important}
  .am-scene{transform:none !important}
  .am-js .hero-etch.am-enter{opacity:1; transform:none}
  .am-js .hero-etch.am-enter figcaption{opacity:1}
}