/* Cité des rêves — effets des vœux exaucés : bannière de la Tentative de Pétra,
   Œufs corrompus, têtes géantes. Le lecteur du huitième vœu est une brique commune
   (css/components/now-playing.css). */

.petra-banner {
  position: fixed; top: 76px; left: 50%; z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px;
  background: rgba(40, 6, 14, .92); border: 1px solid #e86a8a; color: #ffd9e1;
  font-size: .8rem; box-shadow: 0 10px 30px -10px rgba(232, 106, 138, .6);
}
.petra-banner[hidden] { display: none; }
.petra-banner svg { width: 8px; height: 8px; color: #e86a8a; }
.petra-banner p { margin: 0; }
.petra-banner b { text-transform: uppercase; letter-spacing: .12em; }
.petra-banner button { width: 26px; height: 26px; border: 0; background: none; color: #ffd9e1; font-size: 1.1rem; cursor: pointer; }


.eggs { position: fixed; inset: 0; z-index: 65; pointer-events: none; }
.egg {
  position: absolute; width: 46px; height: 62px; padding: 0; border: 0; cursor: crosshair; pointer-events: auto;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background: radial-gradient(ellipse at 40% 35%, #2a2a33, #000 60%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 22px 6px rgba(255, 255, 255, .45);
  animation: egg-float 3.2s ease-in-out infinite alternate;
}
@keyframes egg-float { to { transform: translateY(-12px) rotate(4deg); } }

body.corrupted { --photo-filter: grayscale(1) contrast(1.55) brightness(.62) !important; }
body.corrupted .taken-veil { opacity: .9; }
.big-heads :is(h1, h2, h3) { scale: 1.32; transition: scale .6s cubic-bezier(.3, 1.6, .5, 1); }
:is(h1, h2, h3) { transition: scale .6s ease; }

@media (max-width: 680px) {
  .petra-banner { top: 66px; width: calc(100vw - 32px); }
}