/* ============================================================
 * EXCLUSIVE VAULT LINK — footer link with lock animations
 * ============================================================
 * The "Exklusiven Vorteil sichern" link in the footer leads to
 * a hidden Sanktum page (sanktum.html) — but only for users
 * who've already redeemed the 5 diamant codewords. Until then,
 * clicking the link does NOT navigate; instead, a closed padlock
 * fades in above the link for ~2 seconds and fades out. This
 * teaches users that something is locked here without giving
 * away what (and without breaking immersion with a system alert).
 *
 * After the user redeems the diamant codewords, the same link
 * navigates normally to sanktum.html. The redeemer page also
 * plays a separate "lock breaks" animation at that moment so
 * the user understands which lock was just opened.
 * ============================================================ */
/* Tresor section — its own dedicated row between the Rules section
   and the footer. Centered, no separator lines (the user explicitly
   requested no divider).

   Spacing note: the footer has its own 7rem margin-top which would
   otherwise stack on top of any padding-bottom we set here, making
   the gap below Tresor much larger than the gap above. We therefore
   use a negative margin-bottom to pull the footer up by ~3rem,
   leaving roughly equal space on both sides of the Tresor link. */
.tresor-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 1.5rem 1.5rem;
  margin-bottom: -3rem;
}
/* Wrapper exists purely so the .lock-popup can be positioned
   relative to JUST the link — not the whole row width. Without
   this, position:absolute on the popup would center over the
   entire viewport width. */
.tresor-wrap {
  position: relative;
  display: inline-block;
}
.exclusive-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  /* No hover effect — the Tresor link is a destination, not an
     invitation. The lock animation that fires on locked clicks is
     the only feedback the user needs. */
}
.vault-icon {
  /* Aspect 3:4 fürs Frauenkirche-Bild — wenn jemand das Asset
     irgendwann tauscht, sollte es weiterhin proportional bleiben. */
  width: 44px;
  height: 58px;
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
  /* Slight downward offset so it visually centers with the cap
     height of the surrounding text. */
  margin-bottom: 1px;
}
@media (max-width: 600px) {
  .tresor-section { padding: 3.5rem 1rem 1rem; margin-bottom: -2.5rem; }
  .exclusive-link { font-size: 1.3rem; }
  .vault-icon { width: 38px; height: 50px; }
}

/* Ankunfts-Puls: Wird gesetzt, wenn der Nutzer direkt aus der
   Sanktum-Freischaltung per /#sanktum ankommt (js/18-vault-
   spurensuche.js). Der Link glüht zweimal golden auf — dezente
   Bestätigung "das hier ist jetzt offen", kein Dauerfeuerwerk. */
.tresor-wrap.sanktum-arrived .exclusive-link {
  animation: sanktum-arrive-pulse 3.2s ease-in-out;
}
@keyframes sanktum-arrive-pulse {
  0%, 100% {
    text-shadow: none;
    transform: scale(1);
  }
  18%, 62% {
    text-shadow:
      0 0 14px rgba(244, 217, 122, 0.85),
      0 0 32px rgba(244, 217, 122, 0.45);
    transform: scale(1.045);
  }
  40% {
    text-shadow:
      0 0 6px rgba(244, 217, 122, 0.4),
      0 0 14px rgba(244, 217, 122, 0.2);
    transform: scale(1.01);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tresor-wrap.sanktum-arrived .exclusive-link { animation: none; }
}

/* Lock animation overlay — sits directly ON the link itself,
   centered both horizontally and vertically over the "Tresor"
   text. When the user clicks the locked link, the padlock fades
   in over the wording, holds, then fades out. The overlap effect
   reads like "this is locked away behind a padlock" — much more
   directly than a floating popup above the text. */
.lock-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Seitenverhältnis der Schloss-Illustration (461:640) */
  width: 54px;
  height: 75px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 50;
}
.lock-popup.show {
  animation: lock-popup-cycle 2.4s ease-out forwards;
}
@keyframes lock-popup-cycle {
  /* Animation now uses translate(-50%, -50%) as the centering base
     so the lock overlays the link text exactly. Subtle scale + Y
     offset still convey the "drops into place" feel. */
  0%   { opacity: 0; visibility: visible; transform: translate(-50%, calc(-50% + 8px)) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  20%  { transform: translate(-50%, calc(-50% - 2px)) scale(1.05); }
  25%  { transform: translate(-50%, -50%) scale(1); }
  /* hold the lock visible for ~1.4s */
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; visibility: hidden; transform: translate(-50%, calc(-50% - 4px)) scale(0.95); }
}

/* Das Schloss ist jetzt eine Illustration (assets/schloss.webp),
   kein CSS-gezeichnetes SVG mehr. Für die Unlock-Animation liegen
   Bügel (assets/schloss-buegel.webp) und Korpus
   (assets/schloss-korpus.webp) als getrennte Ebenen vor, damit sie
   unabhängig animiert werden können. */
.lock-popup-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

/* ============================================================
 * VAULT-UNLOCK ANIMATION — plays on the redeemer page when the
 * user successfully redeems the diamant codewords.
 * Same lock, but breaks open and falls.
 *
 * Zweiteiliger Aufbau: Der Bügel liegt HINTER dem Korpus (die
 * Bügelbeine stecken in den beiden Sockeln oben am Korpus). Die
 * Prozentwerte stammen aus der Vermessung der Illustrationen:
 * Bügelbein-Abstand auf Sockel-Abstand skaliert.
 * ============================================================ */
.vault-unlock-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(20, 18, 14, 0.96);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  padding: 2rem;
}
.vault-unlock-stage.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s;
}
.vault-unlock-text {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #f4d97a;
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(10px);
  text-shadow:
    0 0 12px rgba(244, 217, 122, 0.5),
    0 0 24px rgba(244, 217, 122, 0.3);
}
.vault-unlock-stage.show .vault-unlock-text {
  animation: vault-text-fade-in 0.8s ease-out 0.4s forwards;
}
@keyframes vault-text-fade-in {
  to { opacity: 1; transform: translateY(0); }
}
.vault-unlock-lock {
  /* Seitenverhältnis der Gesamtkomposition (640:742) */
  width: 156px;
  height: 181px;
  position: relative;
}
/* Bügel — hinten, Beine treffen die beiden Sockel des Korpus */
.vault-unlock-lock .lock-shackle-group {
  position: absolute;
  top: 0;
  left: 18.4%;
  width: 62.8%;
  z-index: 1;
}
/* Korpus — vorn, Sockelringe verdecken die Bügelbein-Enden */
.vault-unlock-lock .lock-body-group {
  position: absolute;
  top: 32.2%;
  left: 0;
  width: 100%;
  z-index: 2;
}
.vault-unlock-lock .lock-shackle-group img,
.vault-unlock-lock .lock-body-group img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
}
/* The shackle "snaps" — slight rotation + lift so it looks like
   it cracked open. We animate the shackle's parent group. */
.vault-unlock-stage.show .lock-shackle-group {
  animation: shackle-snap 1.5s ease-in 0.8s forwards;
  transform-origin: 25% 50%;
}
@keyframes shackle-snap {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-1px, 0) rotate(-2deg); }   /* tiny rattle */
  25%  { transform: translate(2px, 0)  rotate(3deg); }
  30%  { transform: translate(-1px, 0) rotate(-1deg); }
  /* CRACK — shackle snaps free, lifts slightly, then falls */
  40%  { transform: translate(0, -8px) rotate(8deg); }
  100% { transform: translate(60px, 200px) rotate(70deg); opacity: 0; }
}
/* Lock body falls a moment after shackle snaps — gravity */
.vault-unlock-stage.show .lock-body-group {
  animation: body-fall 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1.4s forwards;
}
@keyframes body-fall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-40px, 280px) rotate(-25deg); opacity: 0; }
}
/* Continue button appears after the animation finishes */
.vault-unlock-continue {
  margin-top: 2rem;
  padding: 0.8rem 2rem;
  background: transparent;
  border: 1px solid #f4d97a;
  color: #f4d97a;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: background 0.2s, color 0.2s;
}
.vault-unlock-stage.show .vault-unlock-continue {
  animation: vault-continue-fade 0.6s ease-out 3s forwards;
}
@keyframes vault-continue-fade {
  to { opacity: 1; }
}
.vault-unlock-continue:hover {
  background: #f4d97a;
  color: #1a1613;
}
@media (prefers-reduced-motion: reduce) {
  .lock-popup, .vault-unlock-stage * { animation: none !important; }
}