/* ============================================================
   HERO + COVER
   ------------------------------------------------------------
   - Hero wrappers
   - Banner image fixes
   - Title and tagline
   - Candle flame Easter Egg
============================================================ */

.hero-bg {
  position:absolute; inset:0;
  border-radius:var(--radius-lg);
  background:rgba(0,0,0,.10);
}

.hero-img {
  position:absolute; inset:0;
  background:url('../../images/covers/Desktop_Wallpaper_011.png') center/cover no-repeat;
  opacity:.25;
  filter:saturate(.9);
}

#cover { margin-bottom:clamp(16px, 4vh, 48px); }

/* HERO IMAGE FIX */
.photo.banner {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 18px;
}
.photo.banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.hero-sheet { padding: 0; overflow: hidden; }

.hero-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
}
.hero-wrapper img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.hero-title {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Caveat", cursive;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 700;
  color: #FBF8F2; /* ✅ always off-white */
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
  white-space: nowrap;
}

.tagline {
  text-align: center;
  max-width: 80ch;
  margin: 0 auto;
}

/* 🔥 Candle Flame Easter Egg */
.flame-overlay {
  position: absolute;
  top: -1%; left: 75%;
  width: 34px; height: 54px;
  border-radius: 50% 50% 45% 55%;
  background: radial-gradient(ellipse at center, #ff9800 0%, #ff5722 70%, rgba(0,0,0,0) 100%);
  box-shadow: 0 0 22px 8px rgba(255, 140, 0, 0.6);
  animation: flicker 1s infinite;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
}

/* Flicker animation */
@keyframes flicker {
  0%   { transform: scale(1) translateY(0); opacity: .9; }
  25%  { transform: scale(1.05) translateY(-1px); opacity: .8; }
  50%  { transform: scale(.95) translateY(1px); opacity: 1; }
  75%  { transform: scale(1.1) translateY(-2px); opacity: .85; }
  100% { transform: scale(1) translateY(0); opacity: .9; }
}

/* Glow effect when flame is lit */
body.flame-lit {
  background: linear-gradient(180deg, #1b1b1b, #2e2b28);
}