/* ══════════════════════════════════════
   CSS LANTERN ILLUSTRATION
   ══════════════════════════════════════ */
.lantern-wrap {
  display: flex;
  justify-content: center;
  padding-top: 28px;
  position: relative;
  overflow: visible;
}

.lantern {
  position: relative;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 0 40px rgba(255, 180, 0, 0.25));
  transform-origin: top center;
  animation: swing 4s ease-in-out infinite;
}

/* SVG lantern styling */
.lantern-svg {
  width: 120px;
  height: auto;
  display: block;
  pointer-events: none;
}
/* When using SVG, hide the CSS-drawn parts */
.lantern-wrap--svg .lantern-hook,
.lantern-wrap--svg .lantern-cap,
.lantern-wrap--svg .lantern-top-rail,
.lantern-wrap--svg .lantern-body,
.lantern-wrap--svg .lantern-bottom-rail,
.lantern-wrap--svg .lantern-base,
.lantern-wrap--svg .lantern-chain {
  display: none;
}

/* ── Top hook / bail ── */
.lantern-hook {
  width: 24px;
  height: 28px;
  border: 3px solid #a0780a;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  position: relative;
  z-index: 2;
}

/* ── Top cap ── */
.lantern-cap {
  width: 80px;
  height: 14px;
  background: linear-gradient(180deg, #c49a2a 0%, #8a6b10 50%, #6b520a 100%);
  border-radius: 4px 4px 0 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 -1px 4px rgba(255, 200, 50, 0.3);
}

/* Small vent / chimney on top cap */
.lantern-cap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 20px;
  height: 6px;
  background: linear-gradient(180deg, #8a6b10, #6b520a);
  border-radius: 3px 3px 0 0;
}

/* ── Top frame rail ── */
.lantern-top-rail {
  width: 84px;
  height: 5px;
  background: linear-gradient(180deg, #b8890a, #7a5a00);
  border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 100, 0.4);
}

/* ── Glass body ── */
.lantern-body {
  position: relative;
  width: 76px;
  height: 90px;
  overflow: hidden;
  border-left: 3px solid #8a6b10;
  border-right: 3px solid #8a6b10;
  border-radius: 4px 4px 6px 6px;
  /* Glass pane: warm amber gradient */
  background:
    linear-gradient(
      180deg,
      rgba(255, 220, 100, 0.15) 0%,
      rgba(255, 180, 0, 0.35) 30%,
      rgba(255, 140, 0, 0.45) 60%,
      rgba(200, 80, 0, 0.25) 100%
    );
  box-shadow:
    inset 0 0 30px rgba(255, 180, 0, 0.3),
    inset 0 0 8px rgba(255, 200, 50, 0.2);
}

/* Vertical frame bars on the glass */
.lantern-body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(138, 107, 16, 0.6), rgba(138, 107, 16, 0.3));
}

/* Centre cross-bar */
.lantern-body::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #8a6b10, rgba(138, 107, 16, 0.4), #8a6b10);
}

/* ── Flame ── */
.lantern-flame {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 3;
}

/* Outer flame (orange) */
.lantern-flame::before {
  content: "";
  display: block;
  width: 24px;
  height: 44px;
  background: radial-gradient(
    ellipse at 50% 70%,
    #fff7cc 0%,
    #ffcc00 20%,
    #ff9500 50%,
    rgba(255, 100, 0, 0.6) 75%,
    transparent 100%
  );
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: flicker 1.8s ease-in-out infinite alternate;
  filter: blur(0.5px);
}

/* Inner flame (bright core) */
.lantern-flame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 11px;
  height: 24px;
  background: radial-gradient(
    ellipse at 50% 80%,
    #ffffff 0%,
    #fff5b0 40%,
    #ffcc00 80%,
    transparent 100%
  );
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: flicker-inner 1.4s ease-in-out infinite alternate;
}

/* Flame glow on the glass */
.lantern-glow {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 200, 50, 0.4) 0%,
    rgba(255, 150, 0, 0.15) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Bottom frame rail ── */
.lantern-bottom-rail {
  width: 84px;
  height: 5px;
  background: linear-gradient(180deg, #7a5a00, #b8890a);
  border-radius: 1px;
  box-shadow: inset 0 -1px 0 rgba(255, 220, 100, 0.3);
}

/* ── Bottom base ── */
.lantern-base {
  width: 70px;
  height: 12px;
  background: linear-gradient(180deg, #6b520a 0%, #4a3806 50%, #3a2a04 100%);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ── Chain links above hook ── */
.lantern-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
}

.chain-link {
  width: 10px;
  height: 12px;
  border: 2px solid #7a5a00;
  border-radius: 4px;
}

.chain-link:nth-child(even) {
  width: 8px;
  height: 10px;
  margin-top: -3px;
  border-color: #6b520a;
}

.chain-link:nth-child(odd) {
  margin-top: -3px;
}

/* ── Flame flicker animations ── */
@keyframes flicker {
  0%   { transform: scaleX(1) scaleY(1); opacity: 1; }
  20%  { transform: scaleX(0.88) scaleY(1.08); opacity: 0.92; }
  40%  { transform: scaleX(1.08) scaleY(0.92); opacity: 1; }
  60%  { transform: scaleX(0.9) scaleY(1.06); opacity: 0.88; }
  80%  { transform: scaleX(1.06) scaleY(0.94); opacity: 0.96; }
  100% { transform: scaleX(0.94) scaleY(1.04); opacity: 0.93; }
}

@keyframes flicker-inner {
  0%   { transform: translateX(-50%) scaleX(1) scaleY(1); opacity: 0.9; }
  25%  { transform: translateX(-50%) scaleX(0.8) scaleY(1.12); opacity: 1; }
  50%  { transform: translateX(-50%) scaleX(1.15) scaleY(0.88); opacity: 0.82; }
  75%  { transform: translateX(-50%) scaleX(0.85) scaleY(1.1); opacity: 0.95; }
  100% { transform: translateX(-50%) scaleX(1.05) scaleY(0.95); opacity: 0.9; }
}

@keyframes swing {
  0%   { transform: rotate(-3deg); }
  50%  { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}

/* ── Easter Egg: Lantern break sequence ── */
.lantern-wrap {
  cursor: pointer;
  position: relative;
}

/* Click 1: violent wobble */
.lantern-wrap.lantern-hit-1 .lantern {
  animation: swing-hard 0.4s ease-in-out 3;
}

/* Click 2: crack overlay + wobble */
.lantern-wrap.lantern-hit-2 .lantern {
  animation: swing-hard 0.4s ease-in-out 3;
}

.lantern-wrap.lantern-hit-2 .lantern-body::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 20%;
  width: 60%;
  height: 70%;
  background: none;
  z-index: 10;
  pointer-events: none;
  /* Crack lines via box-shadows */
  box-shadow:
    -4px 2px 0 0 rgba(255, 255, 200, 0.7),
    2px 8px 0 0 rgba(255, 255, 200, 0.5),
    -2px 16px 0 0 rgba(255, 255, 200, 0.6),
    6px 24px 0 0 rgba(255, 255, 200, 0.4),
    -6px 30px 0 0 rgba(255, 255, 200, 0.5);
  /* Diagonal crack line */
  border-left: 2px solid rgba(255, 255, 200, 0.5);
  border-right: 1px solid rgba(255, 255, 200, 0.3);
  transform: rotate(15deg);
}

/* Click 3: chain snaps, lantern falls and fades */
.lantern-wrap.lantern-falling .lantern {
  animation: lantern-fall 1.6s ease-in forwards;
}

.lantern-wrap.lantern-falling .lantern-chain {
  animation: chain-snap 0.3s ease-out forwards;
}

/* Flame dies as it falls */
.lantern-wrap.lantern-falling .lantern-flame,
.lantern-wrap.lantern-falling .lantern-glow {
  animation: flame-die 0.6s ease-out forwards;
}

@keyframes swing-hard {
  0%   { transform: rotate(-8deg); }
  25%  { transform: rotate(10deg); }
  50%  { transform: rotate(-6deg); }
  75%  { transform: rotate(7deg); }
  100% { transform: rotate(-3deg); }
}

@keyframes lantern-fall {
  0%   { transform: rotate(0deg) translateY(0); opacity: 1; }
  15%  { transform: rotate(12deg) translateY(10px); }
  30%  { transform: rotate(-5deg) translateY(40px); }
  60%  { transform: rotate(25deg) translateY(200px); opacity: 0.8; }
  80%  { transform: rotate(40deg) translateY(500px); opacity: 0.4; }
  100% { transform: rotate(55deg) translateY(800px); opacity: 0; }
}

@keyframes chain-snap {
  0%   { opacity: 1; transform: scaleY(1); }
  50%  { opacity: 0.5; transform: scaleY(1.3); }
  100% { opacity: 0; transform: scaleY(0); }
}

@keyframes flame-die {
  0%   { opacity: 1; transform: scaleX(1) scaleY(1); }
  50%  { opacity: 0.4; transform: scaleX(0.5) scaleY(1.5); }
  100% { opacity: 0; transform: scaleX(0) scaleY(0); }
}