/* ══════════════════════════════════════════════════════════════════════
   CINEMATIC LAYER — LS Stage Universe
   Visual & interactive enhancement · no HTML structure changes
   Load after main stylesheet
══════════════════════════════════════════════════════════════════════ */

/* ── Scanlines (very subtle — CRT / live broadcast feel) ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 8900;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.012) 3px, rgba(0,0,0,0.012) 4px
  );
}

/* ── Stage spotlight (cursor follower) ── */
#cin-spotlight {
  position: fixed;
  width: 520px; height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(232,185,79,0.055) 0%,
    rgba(123,47,190,0.022) 35%,
    transparent 68%
  );
  mix-blend-mode: screen;
  will-change: left, top;
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
}
#cin-spotlight.dim { opacity: 0.3; }
#cin-spotlight.bright { width: 700px; height: 700px; }

/* ── Click ripple ── */
.cin-ripple {
  position: fixed;
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 1.5px solid rgba(232,185,79,0.55);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%) scale(0);
  animation: cinRipple 0.65s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes cinRipple {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.7; }
  100% { transform: translate(-50%,-50%) scale(4); opacity: 0; }
}

/* ══════════════════════════════════════════
   VARIED SCROLL REVEALS
══════════════════════════════════════════ */

/* Zoom-in from depth */
.cin-zoom {
  opacity: 0;
  transform: scale(0.94) translateY(22px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
              transform 0.85s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.cin-zoom.cin-on { opacity: 1; transform: none; }

/* Slide from left */
.cin-left {
  opacity: 0;
  transform: translateX(-55px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.cin-left.cin-on { opacity: 1; transform: none; }

/* Slide from right */
.cin-right {
  opacity: 0;
  transform: translateX(55px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.cin-right.cin-on { opacity: 1; transform: none; }

/* Drop from above */
.cin-drop {
  opacity: 0;
  transform: translateY(-38px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.cin-drop.cin-on { opacity: 1; transform: none; }

/* Iris / cinematic wipe (clip-path expand) */
.cin-iris {
  opacity: 0;
  clip-path: inset(8% 8% round 20px);
  transition: opacity 0.8s ease,
              clip-path 0.9s cubic-bezier(0.16,1,0.3,1);
  will-change: clip-path, opacity;
}
.cin-iris.cin-on { opacity: 1; clip-path: inset(0% 0% round 0px); }

/* Flip up (3D) */
.cin-flip {
  opacity: 0;
  transform: perspective(600px) rotateX(25deg) translateY(30px);
  transition: opacity 0.8s ease,
              transform 0.85s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
.cin-flip.cin-on { opacity: 1; transform: perspective(600px) rotateX(0deg) translateY(0); }

/* ══════════════════════════════════════════
   GLITCH
══════════════════════════════════════════ */
.cin-glitch {
  position: relative;
}
.cin-glitch::before,
.cin-glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  clip-path: inset(0);
  opacity: 0;
  pointer-events: none;
}
@keyframes glitchTop {
  0%, 100% { clip-path: inset(0 0 90% 0); transform: translateX(-2px); opacity: 0; }
  20%       { clip-path: inset(0 0 70% 0); transform: translateX(-3px); color: #00D4FF; opacity: 0.8; }
  40%       { clip-path: inset(20% 0 60% 0); transform: translateX(3px); color: #E63F8C; opacity: 0.6; }
  60%       { clip-path: inset(0 0 90% 0); opacity: 0; }
}
@keyframes glitchBot {
  0%, 100% { clip-path: inset(80% 0 0 0); transform: translateX(2px); opacity: 0; }
  30%       { clip-path: inset(60% 0 0 0); transform: translateX(3px); color: #E63F8C; opacity: 0.7; }
  50%       { clip-path: inset(80% 0 0 0); transform: translateX(-2px); color: #00D4FF; opacity: 0.5; }
  70%       { clip-path: inset(90% 0 0 0); opacity: 0; }
}
.cin-glitch.glitching::before {
  animation: glitchTop 0.25s steps(2) forwards;
  opacity: 0.8;
}
.cin-glitch.glitching::after {
  animation: glitchBot 0.25s steps(2) forwards;
  opacity: 0.7;
}

/* ══════════════════════════════════════════
   SHIMMER (gold text)
══════════════════════════════════════════ */
@keyframes cinShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.cin-shimmer {
  background: linear-gradient(
    90deg,
    #E8B94F 0%, #F5D68A 30%, #ffffff 48%, #F5D68A 60%, #E8B94F 100%
  ) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: cinShimmer 3.5s linear infinite;
}

/* ══════════════════════════════════════════
   BEAT / PULSE
══════════════════════════════════════════ */
@keyframes cinBeat {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.055); }
}
.cin-beat { animation: cinBeat 2.2s ease-in-out infinite; }

/* ══════════════════════════════════════════
   HAZE / FOG on hero sections
══════════════════════════════════════════ */
.cin-haze {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 260px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    to top,
    rgba(123,47,190,0.09) 0%,
    rgba(232,185,79,0.04) 50%,
    transparent 100%
  );
  animation: cinHazeDrift 10s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes cinHazeDrift {
  0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.7; }
  33%       { transform: translateX(1.5%) scaleX(1.04); opacity: 1; }
  66%       { transform: translateX(-1%) scaleX(0.98); opacity: 0.8; }
}

/* ══════════════════════════════════════════
   LASER BEAMS (events page hero)
══════════════════════════════════════════ */
.cin-laser {
  position: absolute;
  top: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(230,63,140,0.65), transparent 80%);
  pointer-events: none;
  z-index: 2;
  transform-origin: top center;
  will-change: transform, opacity;
}
@keyframes cinLaserSweep {
  0%, 100% { transform: rotate(-22deg); opacity: 0.5; }
  50%       { transform: rotate(22deg);  opacity: 1;   }
}

/* ══════════════════════════════════════════
   AMBIENT COLOR ORBS (per section)
══════════════════════════════════════════ */
.cin-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0;
  transition: opacity 1.8s ease;
  will-change: opacity, transform;
  animation: cinOrbFloat 8s ease-in-out infinite;
}
.cin-orb.vis { opacity: 1; }
@keyframes cinOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(15px, -20px) scale(1.08); }
}

/* ══════════════════════════════════════════
   COLOR TEMPERATURE OVERLAY (scroll-driven)
══════════════════════════════════════════ */
#cin-temp {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  mix-blend-mode: color;
  transition: background 2s ease, opacity 0.6s ease;
}

/* ══════════════════════════════════════════
   SECTION BORDER GLOW (active section)
══════════════════════════════════════════ */
.cin-section-active {
  transition: box-shadow 1.5s ease;
}

/* ══════════════════════════════════════════
   GALLERY — photo flash reveal
══════════════════════════════════════════ */
.cin-flash-reveal {
  opacity: 0;
  filter: brightness(0);
  transform: scale(0.97);
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s ease;
  will-change: opacity, filter, transform;
}
.cin-flash-bright { filter: brightness(2.5) !important; opacity: 1 !important; transform: none !important; }
.cin-flash-settle { filter: brightness(1) !important; opacity: 1 !important; transform: none !important; }

/* ══════════════════════════════════════════
   TICKET TEAR (events — entry divider)
══════════════════════════════════════════ */
.cin-ticket-tear {
  width: 100%;
  height: 32px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 18px,
    rgba(232,185,79,0.12) 18px, rgba(232,185,79,0.12) 20px
  );
  margin: 0 auto;
  position: relative;
}
.cin-ticket-tear::before {
  content: '';
  position: absolute; top: 50%; left: 0; right: 0;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(232,185,79,0.25) 0px, rgba(232,185,79,0.25) 8px,
    transparent 8px, transparent 14px
  );
}

/* ══════════════════════════════════════════
   VIGNETTE
══════════════════════════════════════════ */
.cin-vignette {
  position: relative;
}
.cin-vignette::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(7,7,15,0.65) 100%);
}

/* ══════════════════════════════════════════
   PARALLAX helpers
══════════════════════════════════════════ */
.cin-parallax-deep  { will-change: transform; }
.cin-parallax-mid   { will-change: transform; }
.cin-parallax-front { will-change: transform; }

/* ══════════════════════════════════════════
   COUNTDOWN tick flash (events)
══════════════════════════════════════════ */
@keyframes cinTick {
  0%, 100% { color: var(--text); }
  10%       { color: var(--gold); text-shadow: 0 0 18px rgba(232,185,79,0.7); }
}
.cin-tick { animation: cinTick 1s ease; }

/* ══════════════════════════════════════════
   PROCESS STEP cascade (services)
══════════════════════════════════════════ */
.cin-step-init {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cin-step-init.cin-on { opacity: 1; transform: none; }

/* ══════════════════════════════════════════
   FEATURED EVENT pulse border
══════════════════════════════════════════ */
@keyframes cinFeatPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(232,185,79,0.1), 0 0 0 1px rgba(232,185,79,0.2); }
  50%       { box-shadow: 0 0 50px rgba(232,185,79,0.3), 0 0 0 1px rgba(232,185,79,0.4), 0 0 90px rgba(123,47,190,0.15); }
}
.cin-feat-pulse { animation: cinFeatPulse 2.8s ease-in-out infinite; }

/* ══════════════════════════════════════════
   STAT NUMBERS counter flash
══════════════════════════════════════════ */
@keyframes cinStatFlash {
  0%   { text-shadow: 0 0 0 transparent; }
  30%  { text-shadow: 0 0 30px rgba(232,185,79,0.6); }
  100% { text-shadow: 0 0 0 transparent; }
}
.cin-stat-flash { animation: cinStatFlash 0.7s ease forwards; }

/* ══════════════════════════════════════════
   RESPONSIVE — reduce motion
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cin-zoom, .cin-left, .cin-right, .cin-drop, .cin-iris, .cin-flip,
  .cin-haze, .cin-orb, .cin-beat, .cin-shimmer {
    transition: none !important;
    animation: none !important;
  }
  .cin-zoom, .cin-left, .cin-right, .cin-drop, .cin-iris, .cin-flip {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}