/* ==========================================================
   Chest discovery scene + the real scroll (dowels, unroll, seal)
   ========================================================== */

/* ---------- Phase 1: the chest ---------- */

.chest-alcove {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vmin;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.chest-alcove.fade-out {
  opacity: 0;
  transform: scale(1.15);
}

.chest {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: perspective(500px) rotateX(12deg);
}

.chest-glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(240, 184, 96, 0.35) 0%, transparent 60%);
  animation: chest-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes chest-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

.chest-lid {
  position: relative;
  z-index: 3;
  transform-origin: 8% 100%;
  transition: transform 0.55s cubic-bezier(0.3, 1.3, 0.4, 1);
  line-height: 0;
}

.chest.open .chest-lid {
  transform: rotate(-108deg) translateY(-4px);
}

.chest-base {
  position: relative;
  z-index: 2;
  line-height: 0;
}

/* Light rays bursting from the open chest */
.chest-rays {
  position: absolute;
  top: -70%;
  left: 50%;
  width: 220%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: conic-gradient(
    from 0deg,
    rgba(255, 217, 138, 0.35) 0deg 9deg, transparent 9deg 30deg,
    rgba(255, 217, 138, 0.35) 30deg 39deg, transparent 39deg 60deg,
    rgba(255, 217, 138, 0.35) 60deg 69deg, transparent 69deg 90deg,
    rgba(255, 217, 138, 0.35) 90deg 99deg, transparent 99deg 120deg,
    rgba(255, 217, 138, 0.35) 120deg 129deg, transparent 129deg 150deg,
    rgba(255, 217, 138, 0.35) 150deg 159deg, transparent 159deg 180deg,
    transparent 180deg 360deg
  );
  animation: rays-in 0.5s ease forwards, rays-spin 9s linear infinite;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 65%);
  mask-image: radial-gradient(circle, #000 0%, transparent 65%);
}

@keyframes rays-in { to { opacity: 1; } }
@keyframes rays-spin { to { transform: translateX(-50%) rotate(60deg); } }

/* The rolled scroll that rises out */
.chest-scroll-rolled {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translateX(-50%) scale(0.4);
  width: clamp(44px, 10cqh, 70px);
  height: clamp(12px, 2.8cqh, 20px);
  background: linear-gradient(180deg, #f5ecd0 0%, var(--parchment) 35%, var(--parchment-dark) 80%, #a8865a 100%);
  border: 2px solid var(--parchment-edge);
  border-radius: 999px;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.chest-scroll-rolled.rising {
  animation: scroll-rise 1.1s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

@keyframes scroll-rise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.4); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) translateY(-140%) scale(1.15); }
}

/* ---------- Phase 2: the unrolled scroll ---------- */

.scrollx {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(78ch, 88cqw);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));
}

/* Wooden dowel: a rounded rod with end caps, wider than the paper */
.scroll-dowel {
  width: calc(100% + clamp(24px, 5cqw, 44px));
  height: clamp(10px, 2.6cqh, 16px);
  background: linear-gradient(180deg, #a8865a 0%, #6e4a26 45%, #4a3018 100%);
  border-radius: 999px;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

.scroll-dowel::before,
.scroll-dowel::after {
  content: "";
  position: absolute;
  top: 15%;
  width: clamp(8px, 1.8cqw, 14px);
  height: 70%;
  background: linear-gradient(180deg, #f0b860 0%, #a87c3a 100%);
  border-radius: 999px;
}

.scroll-dowel::before { left: 0; }
.scroll-dowel::after { right: 0; }

/* The paper unrolls from under the top dowel */
.scroll-paper {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  animation: paper-unroll 1s cubic-bezier(0.25, 0.9, 0.35, 1) 0.15s forwards;
  background:
    /* aged blotches */
    radial-gradient(ellipse at 18% 20%, rgba(168, 134, 90, 0.22) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 70%, rgba(168, 134, 90, 0.25) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 95%, rgba(138, 106, 56, 0.2) 0%, transparent 50%),
    /* faint fiber lines */
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(138, 106, 56, 0.06) 7px 8px),
    linear-gradient(180deg, #f2e6c4 0%, var(--parchment) 45%, var(--parchment-dark) 100%);
  /* curled side edges */
  box-shadow:
    inset 10px 0 14px -10px rgba(74, 48, 24, 0.65),
    inset -10px 0 14px -10px rgba(74, 48, 24, 0.65);
  padding: 0 clamp(18px, 4cqw, 40px);
  color: var(--ink);
  font-size: clamp(9px, 2.1vmin, 15px);
  line-height: 2.2;
  text-align: left;
  position: relative;
  z-index: 1;
}

@keyframes paper-unroll {
  from { max-height: 0; }
  to   { max-height: 70cqh; }
}

.scroll-paper .scroll-heading {
  margin-top: 3vmin;
}

.scroll-body {
  overflow-y: auto;
  max-height: 52cqh;
}

/* Words breathing in — used by UI.magicText */
.magic-word {
  opacity: 0;
  display: inline-block;
  white-space: pre-wrap;
  filter: blur(5px);
  transform: translateY(5px);
  transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
}

.magic-word.in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Wax seal */
.wax-seal {
  width: clamp(30px, 6.5cqh, 46px);
  height: clamp(30px, 6.5cqh, 46px);
  margin: 1.5vmin auto 2.5vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 3cqh, 20px);
  background: radial-gradient(circle at 35% 30%, #e86a8a 0%, #c23b5e 55%, #8a2440 100%);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.3),
    inset 0 2px 3px rgba(255, 255, 255, 0.35),
    inset 0 -3px 5px rgba(0, 0, 0, 0.3);
  animation: seal-stamp 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes seal-stamp {
  from { transform: scale(2.2); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.wax-seal svg {
  width: 58%;
  height: auto;
}