/* =====================================================================
   SYMBOL SHOWCASE — a 3-of-a-kind lifts the winning symbol out of the
   reels and presents it centre-viewport. Intensity is driven entirely
   by [data-tier] (1-5) so one element covers every win size: higher
   tiers get faster rays, a stronger glow pulse and a bigger entrance.
   ===================================================================== */
.symbol-showcase {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.symbol-showcase.active { display: flex; }

/* Radial light rays behind the symbol. Rotation speed steps up with
   tier; the mask fades them out at the edges so they never read as a
   hard-edged disc over the machine. */
.symbol-showcase-rays {
  position: absolute;
  width: min(150vw, 150vh);
  height: min(150vw, 150vh);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 217, 77, 0.30) 0deg 7deg,
    rgba(255, 217, 77, 0) 7deg 14deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  opacity: 0;
  animation: showcaseRaysIn 260ms ease-out forwards, showcaseSpin 14s linear infinite;
}
.symbol-showcase[data-tier="3"] .symbol-showcase-rays { animation-duration: 260ms, 9s; }
.symbol-showcase[data-tier="4"] .symbol-showcase-rays,
.symbol-showcase[data-tier="5"] .symbol-showcase-rays { animation-duration: 260ms, 5s; }

@keyframes showcaseRaysIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes showcaseSpin { to { transform: rotate(360deg); } }

.symbol-showcase-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: showcasePop 520ms cubic-bezier(0.16, 1.06, 0.3, 1.4) both;
}

/* Overshoot-and-settle entrance — the symbol punches past its final
   size then eases back, which reads as impact rather than a plain
   scale-up. */
@keyframes showcasePop {
  0%   { transform: scale(0.2) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(1.18) rotate(3deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}

.symbol-showcase-img {
  width: clamp(150px, 26vh, 260px);
  height: clamp(150px, 26vh, 260px);
  object-fit: contain;
  filter: drop-shadow(0 0 18px var(--gold-bright)) drop-shadow(0 0 42px var(--gold));
  animation: showcaseGlow 1.1s ease-in-out infinite alternate;
}
.symbol-showcase[data-tier="4"] .symbol-showcase-img,
.symbol-showcase[data-tier="5"] .symbol-showcase-img {
  width: clamp(180px, 34vh, 340px);
  height: clamp(180px, 34vh, 340px);
  animation-duration: 0.6s;
}

@keyframes showcaseGlow {
  from {
    filter: drop-shadow(0 0 14px var(--gold-bright)) drop-shadow(0 0 34px var(--gold));
    transform: scale(1);
  }
  to {
    filter: drop-shadow(0 0 30px #fff) drop-shadow(0 0 70px var(--gold-bright));
    transform: scale(1.055);
  }
}

.symbol-showcase-label {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 4.2vw, 2.6rem);
  letter-spacing: 2px;
  color: var(--gold-bright);
  text-shadow: 0 0 12px var(--gold), 0 0 30px rgba(255, 217, 77, 0.6), 0 3px 0 #000;
}

.symbol-showcase-phrase {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.8rem, 2.3vw, 1.15rem);
  color: #fff;
  text-shadow: 0 0 10px var(--cyan), 0 2px 6px #000;
  max-width: 88vw;
  text-align: center;
}

/* The showcase covers the reels, so it fades itself out rather than
   snapping away — .closing is applied for the length of the fade. */
.symbol-showcase.closing .symbol-showcase-inner,
.symbol-showcase.closing .symbol-showcase-rays {
  animation: showcaseOut 320ms ease-in forwards;
}
@keyframes showcaseOut {
  to { opacity: 0; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .symbol-showcase-rays { animation: showcaseRaysIn 260ms ease-out forwards; }
  .symbol-showcase-inner { animation: showcaseRaysIn 260ms ease-out both; }
  .symbol-showcase-img { animation: none; }
}

/* =====================================================================
   THEATRE CURTAINS — the shop entrance/exit transition. Two velvet
   halves meet in the middle, the scene behind is swapped while covered,
   then they part again. The vertical repeating-linear-gradient is what
   sells the velvet fold; the inset shadows give each fold depth so it
   doesn't read as flat stripes.
   ===================================================================== */
.curtains {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  visibility: hidden;

  /* The sweep duration lives HERE and nowhere else. curtain.js reads it
     off this element at runtime, so the two can never drift — which they
     had: the script waited 900ms for a 720ms transition, holding a dead
     screen for 180ms at each end of every transition. */
  /* 1.5s. Long enough that the gather and the wave both have room to
     read; the folds run at 74% of it with a 22% stagger, so everything
     lands inside the panel's own sweep. */
  --curtain-sweep: 1500ms;
  /* Weight. The old curve left instantly and coasted, which is how a
     projected image moves, not how a heavy cloth on a track does. This
     one takes a moment to overcome its own mass, runs, and settles long
     — the deceleration is most of what makes it feel Royal rather than
     quick. */
  --curtain-ease: cubic-bezier(0.55, 0.02, 0.2, 1);

  /* The whole reason this reads as fabric rather than two sliding
     rectangles. Everything inside is laid out in a real 3D space, so the
     panels can swing on their outer edge and the folds inside them sit
     at different depths and slide past each other as they turn.
     perspective-origin is above centre because the pelmet is the thing
     you are notionally looking up at. */
  perspective: 1600px;
  perspective-origin: 50% 42%;
}
/* Stays interactive-blocking for the whole transition so a stray click
   can't hit the machine underneath mid-sweep. */
.curtains.busy {
  visibility: visible;
  pointer-events: all;
}

/* NOTE ON WHERE THE CURTAIN IS ACTUALLY STYLED
   ---------------------------------------------------------------------
   Three sheets dress these panels, and this is the FIRST of them. What
   is set here is only what nothing later contradicts:

     this file                base box, edge shading, and the two custom
                              properties above
     marquee-shop-curtains    travel curve, fold shading, valance and
                              label timing
     chests-mascot-curtain    velvet background, the gold rope, and THE
                              3D BLOCK AT THE END OF THAT FILE, which is
                              the last word on transform and transition

   So do not put a transform or a transition on .curtain here expecting
   it to apply — it will not. Both are overridden downstream. This was
   learned the direct way: a full 3D treatment written here had no effect
   whatsoever on the rendered page.
   --------------------------------------------------------------------- */
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%; /* >50% each so there is genuine overlap when shut */
  background:
    repeating-linear-gradient(
      90deg,
      #6b0d14 0px,
      #a4141f 26px,
      #c81b28 44px,
      #a4141f 62px,
      #6b0d14 88px
    );
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.75);

  /* These two DO survive — nothing later sets either — and they are what
     lets the 3D block downstream work at all. Children live in the
     panel's own 3D space, so the rope and the edge shading sit at real
     depths and slide against the fabric as the panel turns. */
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.curtain-left  { left: 0; }
.curtain-right { right: 0; }

/* Soft gold light bleeding from where the two halves meet. */
.curtain-left::after,
.curtain-right::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  opacity: 0.55;
  /* Furthest forward of the three layers, so as the panel swings the
     leading edge visibly leads. */
  transform: translateZ(26px);
  pointer-events: none;
}
.curtain-left::after {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.65));
}
.curtain-right::after {
  left: 0;
  background: linear-gradient(270deg, transparent, rgba(0, 0, 0, 0.65));
}

/* Pelmet across the top — always drawn, so the curtains look hung
   rather than like two sliding panels. */
.curtain-valance {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: linear-gradient(180deg, #8a0f18, #5c0a11 70%, #3d060b);
  border-bottom: 3px solid var(--gold);
  /* Casts onto the fabric behind it, which is what sells the pelmet as a
     solid box hung in front rather than a stripe painted on. */
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.8), 0 18px 40px rgba(0, 0, 0, 0.55);
  /* Well forward of both panels, so it stays in front of them even at
     the extremes of the swing. */
  transform: translate3d(0, -100%, 90px);
  transition: transform calc(var(--curtain-sweep) * 0.62) var(--curtain-ease);
}
.curtains.closed .curtain-valance { transform: translate3d(0, 0, 90px); }

.curtain-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 2.8rem);
  letter-spacing: 4px;
  color: var(--gold-bright);
  text-shadow: 0 0 16px var(--gold), 0 0 40px rgba(255, 217, 77, 0.5), 0 4px 0 #000;
  opacity: 0;
  /* Floats in front of the closed curtains and rises the last few pixels
     as it fades in, so it arrives rather than simply appearing.
     translate3d, not translateY: the z keeps it clear of the panels, and
     the 3D form guarantees its own compositor layer. */
  transform: translate3d(0, 14px, 120px);
  transition: opacity calc(var(--curtain-sweep) * 0.34) ease,
              transform calc(var(--curtain-sweep) * 0.34) var(--curtain-ease);
}
.curtains.closed .curtain-label {
  opacity: 1;
  transform: translate3d(0, 0, 120px);
  /* Held back until the panels have almost met — the words belong to the
     closed curtain, not to the sweep. */
  transition-delay: calc(var(--curtain-sweep) * 0.55);
}

/* Reduced motion keeps the transition (an instant cut between scenes is
   more disorienting than a short one) but drops the depth: no swing, no
   gather, no rise. Just a quick, flat wipe. */
@media (prefers-reduced-motion: reduce) {
  .curtains { perspective: none; --curtain-sweep: 200ms; }
  .curtain-left  { transform: translateX(-101%); }
  .curtain-right { transform: translateX(101%); }
  .curtains.closed .curtain-left,
  .curtains.closed .curtain-right { transform: translateX(0); }
  .curtain::before { display: none; }
  .curtain-label,
  .curtains.closed .curtain-label { transform: none; transition-delay: 0s; }
}