/* ============================================================
   GREENLIGHT — Film Loaders  (emerald theme only)
   ============================================================ */

:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
}

.loader-stage {
  --bg:      #0b1220;
  --bg-2:    #0f172a;
  --panel:   #111c30;
  --line:    #1e293b;
  --ink:     #e2e8f0;
  --ink-dim: #64748b;
  --hole:    #0b1220;
  --accent:  #10b981;
  --accent-2:#34d399;
  --glow:    rgba(16, 185, 129, 0.45);
  --p: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 260px;
  height: 260px;
  border-radius: 24px;
  background: radial-gradient(120% 120% at 50% 0%, var(--bg-2) 0%, var(--bg) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 30px 60px -20px rgba(0,0,0,0.7);
  overflow: hidden;
}

.loader-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* Only the active motif is shown */
.loader-motif { display: none; }
[data-motif="reel"]        .loader-motif.reel,
[data-motif="r2r"]         .loader-motif.r2r,
[data-motif="leader"]      .loader-motif.leader,
[data-motif="projector"]   .loader-motif.projector,
[data-motif="sprocket"]    .loader-motif.sprocket,
[data-motif="strip"]       .loader-motif.strip,
[data-motif="clapper"]     .loader-motif.clapper,
[data-motif="marquee"]     .loader-motif.marquee,
[data-motif="searchlight"] .loader-motif.searchlight,
[data-motif="curtain"]     .loader-motif.curtain,
[data-motif="ticker"]      .loader-motif.ticker,
[data-motif="cans"]        .loader-motif.cans { display: grid; }

.loader-motif {
  position: relative;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* ============================================================
   1) FILM REEL
   ============================================================ */
.reel-wrap {
  position: relative;
  width: 148px; height: 148px;
}
.reel-spin {
  position: absolute; inset: 0;
  animation: reel-rot 2.6s var(--spring) infinite;
  transform-origin: 50% 50%;
}
@keyframes reel-rot {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(190deg); }
  55%  { transform: rotate(178deg); }
  100% { transform: rotate(360deg); }
}
@keyframes reel-rot-steady { to { transform: rotate(360deg); } }
.reel-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 9px solid var(--ink);
  opacity: 0.92;
  box-shadow: inset 0 0 0 2px var(--bg), 0 0 0 2px var(--line);
}
.reel-hub {
  position: absolute; top: 50%; left: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 6px var(--bg), 0 0 0 2px var(--line);
}
.reel-hole {
  position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--hole);
  box-shadow: inset 0 0 0 4px var(--ink);
  transform: rotate(var(--a)) translateY(-46px);
}
.reel-plate {
  position: absolute; top: 50%; left: 50%;
  width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg 34deg,
    color-mix(in srgb, var(--ink) 14%, transparent) 35deg 36deg
  );
  -webkit-mask: radial-gradient(circle, transparent 18px, #000 19px, #000 56px, transparent 58px);
          mask: radial-gradient(circle, transparent 18px, #000 19px, #000 56px, transparent 58px);
}
.reel-arc {
  position: absolute; inset: -14px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 82px, #000 83px);
          mask: radial-gradient(circle, transparent 82px, #000 83px);
  filter: drop-shadow(0 0 6px var(--glow));
}

/* ============================================================
   2) COUNTDOWN LEADER
   ============================================================ */
.leader-dial {
  position: relative;
  width: 168px; height: 168px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--line);
  box-shadow: inset 0 0 50px rgba(0,0,0,0.6), 0 0 0 6px color-mix(in srgb, var(--ink) 6%, transparent);
  overflow: hidden;
}
.leader-dial::before,
.leader-dial::after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.leader-dial::before { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.leader-dial::after  { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.leader-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(
    color-mix(in srgb, var(--accent) 85%, transparent) 0deg 18deg,
    color-mix(in srgb, var(--accent) 22%, transparent) 18deg 60deg,
    transparent 60deg 360deg
  );
  animation: leader-spin 1s linear infinite;
  filter: drop-shadow(0 0 4px var(--glow));
}
@keyframes leader-spin { to { transform: rotate(360deg); } }
.leader-ring {
  position: absolute; inset: 22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.leader-num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 82px; line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 24px rgba(0,0,0,0.6);
}
.leader-num span {
  display: inline-block;
  animation: num-pop 1s var(--spring) infinite;
}
@keyframes num-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  18%  { transform: scale(1.12); opacity: 1; }
  30%  { transform: scale(1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   3) CLAPPERBOARD
   ============================================================ */
.clap {
  position: relative; width: 180px; height: 134px;
}
.clap-body {
  position: absolute; left: 0; bottom: 0;
  width: 180px; height: 104px;
  border-radius: 8px; background: var(--bg-2); border: 2px solid var(--line);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.7);
  overflow: hidden; padding: 14px;
}
.clap-line {
  height: 9px; border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  margin-bottom: 10px;
}
.clap-line.short { width: 55%; }
.clap-line.accent {
  background: linear-gradient(90deg,
    var(--accent) calc(var(--p) * 100%),
    color-mix(in srgb, var(--ink) 14%, transparent) 0);
  box-shadow: 0 0 12px var(--glow);
}
.clap-stick {
  position: absolute; left: 0; top: 4px;
  width: 180px; height: 28px; border-radius: 6px;
  background: var(--ink); transform-origin: 6px 90%;
  animation: clap-snap 1.1s var(--spring) infinite;
  display: flex; overflow: hidden; z-index: 2;
}
.clap-stick i {
  flex: 1; height: 100%; transform: skewX(-22deg);
  background: var(--ink); border-right: 5px solid var(--bg);
}
.clap-stick i:nth-child(even) { background: var(--accent); }
@keyframes clap-snap {
  0%   { transform: rotate(-32deg); }
  16%  { transform: rotate(2deg); }
  24%  { transform: rotate(-3deg); }
  30%  { transform: rotate(0deg); }
  70%  { transform: rotate(0deg); }
  100% { transform: rotate(-32deg); }
}
.clap-teeth {
  position: absolute; left: 0; top: 34px;
  width: 180px; height: 14px; display: flex; overflow: hidden; border-radius: 4px 4px 0 0;
}
.clap-teeth i {
  flex: 1; height: 100%; transform: skewX(-22deg);
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  border-right: 5px solid var(--bg-2);
}
.clap-teeth i:nth-child(even) { background: color-mix(in srgb, var(--accent) 50%, transparent); }

/* ============================================================
   4) FILM STRIP
   ============================================================ */
.strip {
  position: relative; width: 216px; height: 108px;
  border-radius: 10px; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.strip-track {
  position: absolute; top: 0; left: 0; height: 100%;
  display: flex; gap: 10px; padding: 0 6px;
  animation: strip-scroll 1.6s linear infinite;
}
@keyframes strip-scroll { to { transform: translateX(-50%); } }
.strip-frame {
  flex: 0 0 auto; width: 70px; height: 100%;
  display: flex; flex-direction: column; gap: 6px; padding: 8px 0;
}
.strip-frame::before, .strip-frame::after {
  content: ""; height: 9px;
  background: radial-gradient(circle 3px, var(--ink) 60%, transparent 62%) 0 0 / 16px 9px repeat-x;
  opacity: 0.5;
}
.strip-frame-img {
  flex: 1; border-radius: 4px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 70%, var(--bg)),
    color-mix(in srgb, var(--accent-2) 30%, var(--bg)));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.strip-frame:nth-child(3n) .strip-frame-img { background: linear-gradient(135deg, var(--panel), var(--bg-2)); }
.strip-frame:nth-child(3n+1) .strip-frame-img { filter: saturate(1.2); }

/* ============================================================
   SHARED — compact reel (r2r, projector)
   ============================================================ */
.creel {
  position: relative; border-radius: 50%;
  animation: reel-rot-steady 2s linear infinite;
}
.creel .cr-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 6px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--bg), 0 0 0 2px var(--line);
}
.creel .cr-hub {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--ink);
  box-shadow: inset 0 0 0 4px var(--bg);
}
.creel .cr-hole {
  position: absolute; top: 50%; left: 50%;
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: var(--hole);
  box-shadow: inset 0 0 0 3px var(--ink);
  transform: rotate(var(--a)) translateY(var(--r, -26px));
}

/* ============================================================
   5) REEL-TO-REEL
   ============================================================ */
.r2r-wrap { position: relative; width: 212px; height: 118px; }
.r2r-wrap .creel { position: absolute; bottom: 0; width: 80px; height: 80px; }
.r2r-wrap .creel.left  { left: 0; }
.r2r-wrap .creel.right { right: 0; }
.r2r-film {
  position: absolute; top: 10px; left: 40px; right: 40px; height: 12px;
  border-radius: 3px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 40%, var(--bg)));
  box-shadow: 0 0 12px var(--glow);
  -webkit-mask:
    radial-gradient(circle 2px at 8px 4px,  transparent 99%, #000) 0 0 / 16px 6px,
    radial-gradient(circle 2px at 8px 10px, transparent 99%, #000) 0 0 / 16px 6px;
          mask:
    radial-gradient(circle 2px at 8px 4px,  transparent 99%, #000) 0 0 / 16px 6px,
    radial-gradient(circle 2px at 8px 10px, transparent 99%, #000) 0 0 / 16px 6px;
  animation: r2r-feed 0.55s linear infinite;
}
@keyframes r2r-feed {
  to { -webkit-mask-position: 16px 0, 16px 0; mask-position: 16px 0, 16px 0; }
}

/* ============================================================
   6) PROJECTOR
   ============================================================ */
.proj { position: relative; width: 224px; height: 136px; }
.proj-body {
  position: absolute; left: 6px; bottom: 14px;
  width: 106px; height: 54px; border-radius: 10px;
  background: var(--bg-2); border: 2px solid var(--line);
  box-shadow: 0 12px 24px -12px rgba(0,0,0,0.7);
}
.proj-body .creel { position: absolute; top: -18px; }
.proj-body .creel.big   { left: 10px; width: 42px; height: 42px; }
.proj-body .creel.small { left: 50px; width: 30px; height: 30px; }
.proj-body .creel.big   .cr-ring,
.proj-body .creel.small .cr-ring { border-width: 4px; }
.proj-lens {
  position: absolute; right: -9px; top: 50%;
  width: 16px; height: 24px; margin-top: -12px;
  border-radius: 4px; background: var(--ink);
  box-shadow: 0 0 8px var(--glow);
}
.proj-beam {
  position: absolute; left: 110px; bottom: 22px;
  width: 96px; height: 44px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 92%);
  clip-path: polygon(0 36%, 0 64%, 100% 0, 100% 100%);
  filter: drop-shadow(0 0 8px var(--glow));
  animation: proj-flicker 0.16s steps(2, end) infinite;
}
@keyframes proj-flicker {
  0% { opacity: 0.9; } 50% { opacity: 0.58; } 100% { opacity: 0.85; }
}
.proj-screen {
  position: absolute; right: 0; bottom: 10px;
  width: 10px; height: 72px; border-radius: 3px;
  background: var(--line); overflow: hidden;
}
.proj-screen i {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100%; opacity: 0.5;
  background: var(--accent); box-shadow: 0 0 10px var(--glow);
  animation: proj-flicker 0.2s steps(2) infinite;
}
.proj .mote {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, #fff);
  opacity: 0.55; animation: mote-drift 3.2s linear infinite;
}
@keyframes mote-drift {
  0%   { transform: translate(0,0); opacity: 0; }
  20%  { opacity: 0.6; }
  100% { transform: translate(54px, -12px); opacity: 0; }
}

/* ============================================================
   7) SPROCKET GATE
   ============================================================ */
.sprocket .gate {
  position: relative; width: 104px; height: 152px;
  border-radius: 8px; overflow: hidden;
  background: var(--bg-2); border: 2px solid var(--line);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.6);
}
.gate-strip {
  position: absolute; left: 0; top: 0; width: 100%;
  display: flex; flex-direction: column;
  animation: gate-advance 2s steps(4, end) infinite;
}
@keyframes gate-advance { to { transform: translateY(-50%); } }
.gate-frame {
  position: relative; width: 100%; height: 50px; flex: 0 0 auto; padding: 5px 16px;
}
.gate-frame .gimg {
  width: 100%; height: 100%; border-radius: 3px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, var(--bg)), var(--bg-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.gate-frame:nth-child(even) .gimg {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, var(--bg-2)), var(--bg));
}
.gate-frame::before, .gate-frame::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 8px;
  background: radial-gradient(circle 2px, var(--ink) 55%, transparent 57%) center / 8px 14px;
  opacity: 0.4;
}
.gate-frame::before { left: 4px; }
.gate-frame::after  { right: 4px; }
.gate-window {
  position: absolute; left: 12px; right: 12px; top: 50px; height: 50px;
  border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 4px; z-index: 3; pointer-events: none;
  box-shadow: 0 0 12px var(--glow);
}

/* ============================================================
   8) MARQUEE BULBS
   ============================================================ */
.marquee .mq {
  position: relative; width: 194px; height: 116px;
  border-radius: 10px; background: var(--bg-2); border: 2px solid var(--line);
  box-shadow: inset 0 0 26px rgba(0,0,0,0.5);
}
.mq-inner {
  position: absolute; inset: 20px;
  border: 1px solid var(--line); border-radius: 6px;
}
.mbulb {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
  transform: translate(-50%, -50%);
  animation: mbulb-chase 1.5s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes mbulb-chase {
  0%, 100% { background: color-mix(in srgb, var(--ink) 20%, transparent); box-shadow: none; }
  10%      { background: var(--accent); box-shadow: 0 0 8px var(--glow), 0 0 2px var(--accent-2); }
}

/* ============================================================
   9) KLIEG SEARCHLIGHTS
   ============================================================ */
.searchlight .klieg {
  position: relative; width: 218px; height: 136px;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(var(--bg-2), var(--bg));
}
.kbeam {
  position: absolute; bottom: -4px; width: 24px; height: 180px;
  transform-origin: 50% 100%;
  background: linear-gradient(to top, color-mix(in srgb, var(--accent) 80%, transparent), transparent 80%);
  filter: blur(3px); opacity: 0.72;
  border-radius: 50% 50% 0 0 / 92% 92% 0 0;
}
.kbeam.l { left: 64px;  animation: kbeam-l 3.2s ease-in-out infinite; }
.kbeam.r { right: 64px; animation: kbeam-r 3.2s ease-in-out infinite; }
@keyframes kbeam-l { 0%, 100% { transform: rotate(8deg); }  50% { transform: rotate(34deg); } }
@keyframes kbeam-r { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-34deg); } }
.kbase {
  position: absolute; bottom: 0; width: 14px; height: 8px;
  border-radius: 3px; background: var(--ink); box-shadow: 0 0 8px var(--glow);
}
.kbase.l { left: 70px; } .kbase.r { right: 70px; }

/* ============================================================
   10) CURTAIN
   ============================================================ */
.curtain .drape {
  position: relative; width: 200px; height: 136px;
  border-radius: 10px; overflow: hidden; border: 2px solid var(--line);
  background: radial-gradient(120% 80% at 50% 130%, color-mix(in srgb, var(--accent) 26%, var(--bg)), var(--bg));
}
.cloth {
  position: absolute; top: 0; bottom: 0; width: 54%;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 78%, #000) 0 9px,
    color-mix(in srgb, var(--accent) 52%, #000) 9px 19px);
  box-shadow: inset 0 -14px 24px rgba(0,0,0,0.45);
}
.cloth.l { left: 0;  transform-origin: left center;  animation: curtain-l 3.4s var(--ease) infinite; }
.cloth.r { right: 0; transform-origin: right center; animation: curtain-r 3.4s var(--ease) infinite; }
@keyframes curtain-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-92%); } }
@keyframes curtain-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(92%); } }

/* ============================================================
   11) BOX-OFFICE TICKER
   ============================================================ */
.ticker .tk {
  display: flex; align-items: center; gap: 6px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--bg-2); border: 2px solid var(--line);
  box-shadow: inset 0 0 26px rgba(0,0,0,0.5);
}
.tick-cur, .tick-suf {
  font-family: var(--font-mono); font-weight: 700; color: var(--accent);
  text-shadow: 0 0 12px var(--glow);
}
.tick-cur { font-size: 26px; }
.tick-suf { font-size: 20px; margin-left: 2px; color: var(--ink-dim); text-shadow: none; }
.tick-cell {
  position: relative; width: 28px; height: 42px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--line); overflow: hidden;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 24px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tick-cell::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(0,0,0,0.5);
}

/* ============================================================
   12) FILM-CAN STACK
   ============================================================ */
.cans .can-stack { position: relative; width: 136px; height: 136px; }
.can {
  position: absolute; left: 8px; right: 8px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 32%,
    color-mix(in srgb, var(--ink) 12%, var(--bg-2)), var(--bg-2) 72%);
  border: 1px solid var(--line);
  box-shadow: 0 5px 0 -1px color-mix(in srgb, #000 35%, var(--line)),
              0 8px 9px -3px rgba(0,0,0,0.5);
  animation: can-glow 2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.can::before {
  content: ""; position: absolute; left: 50%; top: 42%;
  width: 26px; height: 10px; margin: -5px 0 0 -13px;
  border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 26%, transparent);
}
.can::after {
  content: ""; position: absolute; left: 50%; top: 42%;
  width: 6px; height: 4px; margin: -2px 0 0 -3px;
  border-radius: 50%; background: color-mix(in srgb, var(--ink) 26%, transparent);
}
@keyframes can-glow {
  0%, 100% {
    background: radial-gradient(ellipse at 50% 32%, color-mix(in srgb, var(--ink) 12%, var(--bg-2)), var(--bg-2) 72%);
    border-color: var(--line);
  }
  18% {
    background: radial-gradient(ellipse at 50% 30%, var(--accent-2), color-mix(in srgb, var(--accent) 55%, var(--bg)) 72%);
    border-color: color-mix(in srgb, var(--accent) 60%, #000);
    box-shadow: 0 5px 0 -1px color-mix(in srgb, #000 30%, var(--accent)),
                0 0 16px var(--glow), 0 8px 9px -3px rgba(0,0,0,0.5);
  }
}