/* Homepage-only boot loader: a monitor rising into frame with a fake
   render progress bar. Shown once per browser session (see js/pages/
   loader.js + the inline skip-check script in index.html), then fades
   out and is removed from the DOM entirely — never just hidden — so nothing
   lingers to block keyboard/screen-reader access to the real page. Self-
   contained: its own fonts, its own color tokens, its own z-index, so it
   can be deleted wholesale later without touching the rest of the site. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Archivo:wght@700;800;900&display=swap");

#site-loader {
  --sh-loader-bg: #1c1512;
  --sh-loader-bezel: #0f0c0a;
  --sh-loader-screen: #221a15;
  --sh-loader-orange: #ff5a1f;
  --sh-loader-orange-hot: #ff8a3c;
  --sh-loader-cream: #efe6da;
  --sh-loader-gray: #8d8177;
  --sh-loader-gray-dim: #57493f;
  --sh-loader-track: #2e2823;

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--sh-loader-bg);
  font-family: "JetBrains Mono", monospace;
  color: var(--sh-loader-cream);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* "monitor turning off": the whole overlay shrinks and fades once the
   render hits 100%, then js/pages/loader.js deletes the element outright. */
#site-loader.sh-loader-off {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

/* The real page starts invisible only while the loader is active (the
   class is added by an inline script that runs before first paint, so
   there is no flash of visible content first) and crossfades in once the
   loader is dismissed. */
html.sh-loading .sh-page {
  opacity: 0;
}

.sh-page {
  transition: opacity 0.6s ease;
}

.sh-loader-room-glow {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 60% 45% at 50% 55%, rgba(255, 90, 31, 0.06), transparent 70%);
  pointer-events: none;
}

/* ---------- monitor ---------- */
.sh-loader-monitor-wrap {
  width: min(1100px, 94vw);
  transform: translateY(120vh);
  animation: sh-loader-rise 0.65s cubic-bezier(0.16, 1.1, 0.3, 1) 0.1s forwards;
}

@keyframes sh-loader-rise {
  0% { transform: translateY(120vh); }
  75% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.sh-loader-monitor {
  background: var(--sh-loader-bezel);
  border-radius: 26px;
  padding: clamp(14px, 2.2vw, 26px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sh-loader-screen {
  position: relative;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #2a2019 0%, var(--sh-loader-screen) 60%, #1b1410 100%);
  border-radius: 14px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.sh-loader-stand-neck {
  width: clamp(60px, 8vw, 90px);
  height: clamp(40px, 6vw, 70px);
  margin: 0 auto;
  background: linear-gradient(90deg, #6b6f7c, #9aa0ae 45%, #7d818e);
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}

.sh-loader-stand-base {
  width: clamp(200px, 28vw, 320px);
  height: 12px;
  margin: 0 auto;
  background: linear-gradient(#8d92a0, #5b5f6a);
  border-radius: 6px 6px 10px 10px;
}

/* ---------- HUD decor ---------- */
.sh-loader-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  animation: sh-loader-fade-in 0.4s ease 0.5s forwards;
}

.sh-loader-hud-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(239, 230, 218, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 230, 218, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, black 30%, transparent 78%);
}

.sh-loader-searchbox {
  position: absolute;
  top: 6%;
  left: 4.5%;
  width: 16%;
  height: 5.5%;
  border: 1px solid var(--sh-loader-gray-dim);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 3%;
}

.sh-loader-searchbox::after {
  content: "";
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--sh-loader-gray-dim);
  border-radius: 50%;
}

.sh-loader-win-dots {
  position: absolute;
  top: 6.5%;
  right: 4.5%;
  display: flex;
  gap: 8px;
}

.sh-loader-win-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sh-loader-gray-dim);
}

.sh-loader-corner {
  position: absolute;
  width: 6%;
  height: 10%;
  border: 1px solid rgba(141, 129, 119, 0.28);
}

.sh-loader-corner.tl { top: 24%; left: 26%; border-right: none; border-bottom: none; }
.sh-loader-corner.br { bottom: 20%; right: 22%; border-left: none; border-top: none; }

.sh-loader-tick-col {
  position: absolute;
  right: 6%;
  top: 34%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sh-loader-tick-col span {
  width: 5px;
  height: 5px;
  background: rgba(141, 129, 119, 0.3);
}

.sh-loader-dot-row {
  position: absolute;
  left: 16%;
  bottom: 12%;
  letter-spacing: 5px;
  color: rgba(141, 129, 119, 0.35);
  font-size: 9px;
}

/* ---------- loader content ---------- */
.sh-loader-content {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 30%;
  opacity: 0;
  animation: sh-loader-fade-in 0.4s ease 0.55s forwards;
}

@keyframes sh-loader-fade-in {
  to { opacity: 1; }
}

.sh-loader-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

#site-loader h1 {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 4vw, 46px);
  letter-spacing: 0.02em;
  color: var(--sh-loader-cream);
  text-shadow: 0 0 30px rgba(255, 138, 60, 0.15);
  animation: sh-loader-breathe 2.2s ease-in-out 0.6s infinite;
}

@keyframes sh-loader-breathe {
  0%, 100% { opacity: 1; transform: scale(1); text-shadow: 0 0 25px rgba(255, 138, 60, 0.12); }
  50% { opacity: 0.82; transform: scale(1.012); text-shadow: 0 0 45px rgba(255, 138, 60, 0.3); }
}

.sh-loader-dots span {
  display: inline-block;
  animation: sh-loader-dot-blink 1.1s steps(1) infinite;
}

.sh-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.sh-loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes sh-loader-dot-blink {
  0%, 20% { opacity: 0; }
  30%, 100% { opacity: 1; }
}

.sh-loader-stats-line {
  margin-top: 10px;
  font-size: clamp(10px, 1.5vw, 17px);
  color: var(--sh-loader-gray);
  animation: sh-loader-breathe-soft 2.2s ease-in-out 0.6s infinite;
}

@keyframes sh-loader-breathe-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.sh-loader-pct-big {
  color: var(--sh-loader-cream);
  font-weight: 700;
  font-size: 1.25em;
  margin-left: 0.6em;
}

.sh-loader-film-icon {
  flex-shrink: 0;
  width: clamp(44px, 6.5vw, 76px);
  height: clamp(44px, 6.5vw, 76px);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--sh-loader-orange-hot), var(--sh-loader-orange) 65%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(255, 90, 31, 0.5), 0 0 90px rgba(255, 90, 31, 0.25);
  animation: sh-loader-icon-pulse 2.2s ease-in-out 0.6s infinite;
}

@keyframes sh-loader-icon-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 90, 31, 0.4), 0 0 70px rgba(255, 90, 31, 0.18); transform: scale(1); }
  50% { box-shadow: 0 0 55px rgba(255, 90, 31, 0.7), 0 0 120px rgba(255, 90, 31, 0.35); transform: scale(1.04); }
}

.sh-loader-film-icon svg { width: 62%; height: 62%; }

/* ---------- progress bar ---------- */
.sh-loader-bar-track {
  margin-top: clamp(14px, 2.6vh, 26px);
  height: clamp(22px, 4.8vh, 44px);
  background: var(--sh-loader-track);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}

.sh-loader-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 7px;
  background: linear-gradient(90deg, #ff4d12, var(--sh-loader-orange) 40%, var(--sh-loader-orange-hot) 85%, #ffb27a);
  box-shadow: 0 0 24px rgba(255, 90, 31, 0.55), 0 0 60px rgba(255, 90, 31, 0.22);
  position: relative;
  overflow: hidden;
  transition: width 0.12s linear;
}

.sh-loader-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sh-loader-sheen 1.1s ease-in-out 0.7s infinite;
}

@keyframes sh-loader-sheen {
  to { transform: translateX(100%); }
}

/* ---------- frames / est time ---------- */
.sh-loader-meta-row {
  margin-top: clamp(7px, 1.4vh, 12px);
  display: flex;
  justify-content: space-between;
  font-size: clamp(9px, 1.2vw, 14px);
  letter-spacing: 0.06em;
  color: var(--sh-loader-gray);
}

.sh-loader-meta-row b { color: var(--sh-loader-cream); font-weight: 500; }

/* ---------- timeline ruler ---------- */
.sh-loader-timeline {
  margin-top: clamp(6px, 1vh, 10px);
  position: relative;
  height: clamp(26px, 5vh, 46px);
  background: linear-gradient(#332c26, #2b2520);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.sh-loader-ruler {
  position: absolute;
  top: 0;
  left: 2%;
  right: 2%;
  height: 38%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sh-loader-ruler i { width: 1px; height: 45%; background: rgba(239, 230, 218, 0.35); }
.sh-loader-ruler i:nth-child(5n + 1) { height: 90%; background: rgba(239, 230, 218, 0.55); }

.sh-loader-playhead {
  position: absolute;
  top: -30%;
  width: 2px;
  height: 130%;
  background: var(--sh-loader-cream);
}

.sh-loader-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: 8px solid var(--sh-loader-cream);
}

.sh-loader-playhead.start { left: 1%; }
.sh-loader-playhead.end { left: 1%; transition: left 0.12s linear; }

@media (prefers-reduced-motion: reduce) {
  /* Defensive fallback only: js/pages/loader.js already removes #site-loader
     outright before this could matter, in case JS ever runs later than
     expected this keeps it from being a stuck, endlessly-animating overlay. */
  #site-loader,
  #site-loader * {
    animation: none !important;
    transition: none !important;
  }
}