/* Premium Interaction Layer — experimental, reversible and intentionally light. */
:root {
  --premium-acid: #c9ff30;
  --premium-ink: #f4f1e8;
  --premium-jade: #07130f;
  --premium-ease: cubic-bezier(.16, 1, .3, 1);
  --premium-progress: 0;
  --premium-hero-x: 0px;
  --premium-hero-y: 0px;
}

@property --premium-orbit {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

body.premium-ui {
  background: #030806;
}

/* A short cinematic curtain makes the first view feel authored, not merely loaded. */
.premium-gate {
  align-items: center;
  background: #020604;
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 30000;
}

.premium-gate::before,
.premium-gate::after {
  background:
    linear-gradient(90deg, rgba(201,255,48,.045) 1px, transparent 1px),
    linear-gradient(rgba(201,255,48,.035) 1px, transparent 1px),
    #030806;
  background-size: 84px 84px;
  content: "";
  inset: 0 50% 0 0;
  position: absolute;
  transition: transform 1.05s var(--premium-ease);
}

.premium-gate::after {
  inset: 0 0 0 50%;
}

.premium-gate-mark {
  color: var(--premium-ink);
  font: 400 clamp(42px, 6vw, 94px)/.8 Georgia, "Times New Roman", serif;
  letter-spacing: -.06em;
  position: relative;
  text-align: center;
  transition: opacity .42s ease, transform .7s var(--premium-ease);
  z-index: 2;
}

.premium-gate-mark em {
  color: var(--premium-acid);
  display: block;
  font-style: italic;
}

.premium-gate-mark small {
  color: rgba(244,241,232,.58);
  display: block;
  font: 600 9px/1.3 Arial, sans-serif;
  letter-spacing: .42em;
  margin-top: 30px;
}

.premium-gate-line {
  background: rgba(255,255,255,.15);
  bottom: -26px;
  height: 1px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  transform: translateX(-50%);
  width: 160px;
}

.premium-gate-line::after {
  animation: premium-load 1s var(--premium-ease) both;
  background: var(--premium-acid);
  content: "";
  inset: 0;
  position: absolute;
  transform-origin: left;
}

body.premium-ready .premium-gate::before { transform: translateX(-101%); }
body.premium-ready .premium-gate::after { transform: translateX(101%); }
body.premium-ready .premium-gate-mark { opacity: 0; transform: translateY(-16px) scale(.94); }

@keyframes premium-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Persistent editorial navigation cues. */
.premium-progress {
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 180;
}

.premium-progress-track {
  background: rgba(238,245,233,.16);
  height: 154px;
  overflow: hidden;
  position: relative;
  width: 1px;
}

.premium-progress-track i {
  background: var(--premium-acid);
  box-shadow: 0 0 12px rgba(201,255,48,.72);
  inset: 0;
  position: absolute;
  transform: scaleY(var(--premium-progress));
  transform-origin: top;
}

.premium-progress span {
  color: rgba(244,241,232,.65);
  font: 600 7px/1 Arial, sans-serif;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
}

.premium-section-readout {
  align-items: center;
  bottom: 24px;
  display: flex;
  gap: 12px;
  left: clamp(20px, 3vw, 52px);
  mix-blend-mode: difference;
  pointer-events: none;
  position: fixed;
  z-index: 175;
}

.premium-section-readout b {
  color: var(--premium-acid);
  font: 400 22px/1 Georgia, serif;
}

.premium-section-readout span {
  color: #fff;
  font: 600 7px/1 Arial, sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.premium-spotlight {
  background: radial-gradient(circle, rgba(192,255,62,.09), rgba(192,255,62,.025) 28%, transparent 68%);
  border-radius: 50%;
  filter: blur(8px);
  height: 420px;
  left: var(--premium-pointer-x, -500px);
  opacity: .6;
  pointer-events: none;
  position: fixed;
  top: var(--premium-pointer-y, -500px);
  transform: translate(-50%, -50%);
  width: 420px;
  z-index: 2;
}

/* Hero depth: content and scenery move at different rates. */
.premium-ui .hero .media {
  transform: translate3d(calc(var(--premium-hero-x) * -.44), calc(var(--premium-hero-y) * -.44), 0) scale(1.075);
  transition: transform .8s var(--premium-ease);
  will-change: transform;
}

.premium-ui .hero-copy {
  transform: translate3d(calc(var(--premium-hero-x) * .12), calc(-42% + var(--premium-hero-y) * .10), 0);
  transition: transform .8s var(--premium-ease);
}

.premium-ui .category-rail {
  transform: translate3d(calc(var(--premium-hero-x) * -.08), calc(-41% + var(--premium-hero-y) * -.08), 0);
  transition: transform .8s var(--premium-ease);
}

.premium-ui .hero::before {
  background: linear-gradient(90deg, transparent 0 9%, rgba(201,255,48,.88) 9.04% 9.12%, transparent 9.16% 100%);
  content: "";
  inset: 0;
  opacity: .58;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.premium-ui .hero h1 {
  text-shadow: 0 26px 90px rgba(0,0,0,.58), 0 0 52px rgba(102,151,82,.07);
}

.premium-ui .hero h1 em {
  filter: drop-shadow(0 0 28px rgba(201,255,48,.12));
}

/* Active discipline becomes a chapter marker rather than a standard active link. */
.premium-ui .category-rail button.premium-current {
  background: linear-gradient(90deg, rgba(201,255,48,.095), transparent 78%);
  color: #fff;
  padding-left: 15px;
}

.premium-ui .category-rail button.premium-current > i {
  text-shadow: 0 0 16px var(--premium-acid);
}

.premium-ui .category-rail button.premium-current > b {
  opacity: 1;
  transform: rotate(45deg);
}

/* Large structural reveals use masked motion; thumbnails stay immediately readable. */
.premium-reveal {
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition: opacity .85s ease, transform 1.05s var(--premium-ease);
}

.premium-reveal.premium-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.premium-reveal-line {
  clip-path: inset(0 0 100% 0);
  transform: translateY(30px);
  transition: clip-path 1.05s var(--premium-ease), transform 1.05s var(--premium-ease);
}

.premium-visible .premium-reveal-line,
.premium-reveal-line.premium-visible {
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

.premium-ui .archive-unified-head::after {
  background: linear-gradient(90deg, var(--premium-acid), rgba(201,255,48,.04) 18%, transparent 74%);
  bottom: 0;
  content: "";
  height: 1px;
  left: var(--wc-pad, 4vw);
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--premium-ease) .12s;
  width: calc(100% - var(--wc-pad, 4vw) * 2);
}

.premium-ui section.premium-section-active .archive-unified-head::after {
  transform: scaleX(1);
}

/* Magnetic CTA: an offset halo and a fine traveling highlight, never a generic rectangle. */
.premium-magnetic {
  --premium-mx: 0px;
  --premium-my: 0px;
  isolation: isolate;
  overflow: visible !important;
  transform: translate3d(var(--premium-mx), var(--premium-my), 0);
  transition: transform .55s var(--premium-ease), box-shadow .35s ease, background .35s ease !important;
}

.premium-magnetic:hover {
  box-shadow: 0 16px 58px rgba(157,222,31,.26), 0 0 34px rgba(201,255,48,.18) !important;
}

/* The hero CTA already owns a masked color-wipe; keep that layer clipped. */
.enter.premium-magnetic { overflow: hidden !important; }
.enter.premium-magnetic .premium-aura { display: none !important; }

.premium-aura {
  animation: premium-orbit 4.8s linear infinite;
  border: 1px solid rgba(201,255,48,.42);
  border-radius: 999px;
  inset: -13px -20px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: rotate(-5deg) scale(.95);
  transition: opacity .35s ease, transform .7s var(--premium-ease);
  z-index: -1;
  display: block !important;
}

.premium-aura::before,
.premium-aura::after {
  background: var(--premium-acid);
  border-radius: 50%;
  box-shadow: 0 0 14px 4px rgba(201,255,48,.48);
  content: "";
  height: 4px;
  left: 14%;
  position: absolute;
  top: -2px;
  width: 4px;
}

.premium-aura::after { bottom: -2px; left: auto; right: 15%; top: auto; }
.premium-magnetic:hover .premium-aura { opacity: 1; transform: rotate(-5deg) scale(1); }

@keyframes premium-orbit {
  to { transform: rotate(355deg) scale(1); }
}

/* Film frames: sharp source imagery, physical lift and an elegant moving edge. */
.premium-ui .image-frame,
.premium-ui .motion-frame {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.premium-ui .image-frame.is-film-focus {
  box-shadow: 0 26px 74px rgba(0,0,0,.48), 0 0 0 1px rgba(201,255,48,.72), 0 0 38px rgba(201,255,48,.24) !important;
}

.premium-ui .image-frame.is-film-focus::after {
  background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.34) 48%, transparent 65%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-120%);
  animation: premium-sheen 1.15s var(--premium-ease) both;
  z-index: 6;
}

@keyframes premium-sheen { to { transform: translateX(120%); } }

.premium-ui .lightbox[open],
.premium-ui .video-dialog[open] {
  background:
    radial-gradient(circle at var(--premium-dialog-x, 50%) var(--premium-dialog-y, 45%), rgba(123,173,92,.15), transparent 34%),
    rgba(1,5,3,.92) !important;
  backdrop-filter: blur(18px) saturate(.82);
}

.premium-ui .lightbox-close,
.premium-ui .video-dialog-close {
  background: rgba(6,13,9,.82) !important;
  border: 1px solid rgba(201,255,48,.75) !important;
  box-shadow: 0 0 28px rgba(201,255,48,.14);
  color: var(--premium-ink) !important;
  min-height: 48px;
  min-width: 48px;
  z-index: 50 !important;
}

.premium-ui .lightbox-close:hover,
.premium-ui .video-dialog-close:hover {
  background: var(--premium-acid) !important;
  color: #071007 !important;
  transform: rotate(90deg) scale(1.08);
}

/* Work boards receive restrained perspective, making them feel like exhibits. */
.premium-ui .game-approved-body,
.premium-ui .project-approved-board,
.premium-ui .modeling-stage,
.premium-ui .workflow-canvas {
  transition: transform 1s var(--premium-ease), box-shadow .6s ease, filter .6s ease;
}

.premium-ui .game-approved-body:hover,
.premium-ui .project-approved-board:hover {
  box-shadow: 0 32px 110px rgba(0,0,0,.42), 0 0 0 1px rgba(201,255,48,.18);
  transform: translateY(-8px) scale(.995);
}

@media (max-width: 900px) {
  .premium-spotlight,
  .premium-section-readout { display: none; }
  .premium-progress { right: 7px; }
  .premium-progress-track { height: 90px; }
  .premium-ui .hero .media { transform: scale(1.045); }
  .premium-ui .hero-copy { transform: translateY(-42%); }
  .premium-ui .premium-reveal { transform: translateY(24px); }
  .premium-ui .premium-reveal.premium-visible { transform: none; }
}

@media (hover: none), (pointer: coarse) {
  .premium-aura { display: none; }
  .premium-magnetic { transform: none !important; }
  .premium-ui .game-approved-body:hover,
  .premium-ui .project-approved-board:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-gate { display: none; }
  .premium-reveal,
  .premium-reveal-line { clip-path: none; opacity: 1; transform: none; transition: none; }
  .premium-aura,
  .premium-ui .image-frame.is-film-focus::after { animation: none; }
  .premium-ui .hero .media,
  .premium-ui .hero-copy,
  .premium-ui .category-rail { transition: none; }
}