/* Max Yinger — page loaders
 * home: orbiting mosaic (preserved, dark-native)
 * inner pages: cinematic mask reveals on midnight carbon
 */

html, body { overflow-x: clip; }

/* ============================================================
   HOME — orbiting mosaic loader (preserved)
   ============================================================ */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-midnight-carbon);
  color: var(--color-bone-glow);
  clip-path: circle(150% at 50% 50%);
  will-change: clip-path;
}

.page-loader::before,
.page-loader::after { position: absolute; content: ""; pointer-events: none; }

.page-loader::before {
  width: min(118vmax, 1100px);
  aspect-ratio: 1;
  border: 1px solid var(--color-charcoal-vein);
  border-radius: 50%;
  opacity: 0.5;
}

.page-loader::after { inset: var(--space-md); border: 1px solid var(--color-rule-2); }

.loader-orbit {
  position: absolute;
  width: min(74vmin, 650px);
  aspect-ratio: 1;
  transform: rotate(-18deg);
  will-change: transform, opacity;
}

.loader-orbit__tile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(46px, 10vmin, 104px);
  aspect-ratio: 1;
  border: 1px solid var(--color-charcoal-vein);
  background-image: url("assets/loader-mosaic.png");
  background-size: 300% 300%;
  background-position: calc(var(--tile-x) * 50%) calc(var(--tile-y) * 50%);
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(var(--tile-angle)) translateY(clamp(-245px, -30vmin, -110px)) rotate(calc(var(--tile-angle) * -1));
  will-change: transform, opacity;
}

.loader-orbit__tile:nth-child(2n) { filter: saturate(0.6) brightness(0.7); }
.loader-orbit__tile:nth-child(3n) { filter: saturate(1.1) brightness(1.15); }
.loader-orbit__tile:nth-child(4n) { width: clamp(40px, 8.4vmin, 88px); }

.loader-copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  min-width: 0;
  text-align: center;
  pointer-events: none;
}

.loader-copy__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 13rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.70;
  overflow-wrap: anywhere;
  color: var(--color-bone-glow);
}

.loader-copy__wordmark span { color: var(--color-rose-quartz); }

.loader-copy__status {
  margin: var(--space-xl) 0 0;
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

.loader-copy__percent {
  display: flex;
  align-items: flex-start;
  margin: var(--space-xs) 0 0;
  color: var(--color-rose-quartz);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

.loader-copy__percent sup {
  margin: 0.1em 0 0 0.1em;
  color: var(--color-muted);
  font-size: 0.38em;
  letter-spacing: 0;
}

.page-loader.is-collapsing .loader-orbit {
  transform: rotate(310deg) scale(0.018);
  opacity: 0;
  transition: transform 900ms var(--ease-in), opacity 540ms var(--ease-in);
}

.page-loader.is-collapsing .loader-copy {
  transform: scale(0.18);
  opacity: 0;
  transition: transform 720ms var(--ease-in), opacity 380ms var(--ease-in);
}

.page-loader.is-revealing {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1050ms var(--ease-out);
}

@media (max-width: 480px) {
  .page-loader::after { inset: var(--space-sm); }
  .loader-orbit { width: min(90vmin, 390px); }
  .loader-copy__status { margin-top: var(--space-lg); }
}

/* ============================================================
   INNER PAGES — cinematic mask reveals on midnight carbon
   ============================================================ */

.page-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-midnight-carbon);
  color: var(--color-bone-glow);
  will-change: clip-path, transform;
}

.page-mask__word {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 16vw, 12rem);
  letter-spacing: 0;
  line-height: 0.70;
  color: var(--color-bone-glow);
  overflow: hidden;
}
.page-mask__word > * { display: inline-block; }

/* ---- Services: horizontal sweep ---- */
.page-mask--sweep .page-mask__word { transform: translateY(110%); transition: transform 700ms var(--ease-out); }
.page-mask--sweep.is-in .page-mask__word { transform: translateY(0); }
.page-mask--sweep .page-mask__bar {
  position: absolute; left: 0; top: 50%; width: 0; height: 1px;
  background: var(--color-rose-quartz); transition: width 600ms var(--ease-out);
}
.page-mask--sweep.is-in .page-mask__bar { width: 100%; }
.page-mask--sweep.is-revealing { transform: translateX(-100%); transition: transform 900ms var(--ease-in-out); }

/* ---- Contact: vertical curtain split ---- */
.page-mask--curtain { padding: 0; }
.page-mask--curtain .page-mask__half {
  position: absolute; top: 0; width: 50.5%; height: 100%;
  background: var(--color-midnight-carbon); z-index: 1;
  transition: transform 900ms var(--ease-in-out);
}
.page-mask--curtain .page-mask__half--left { left: 0; }
.page-mask--curtain .page-mask__half--right { right: 0; }
.page-mask--curtain .page-mask__word { z-index: 3; transform: translateY(110%); transition: transform 700ms var(--ease-out) 100ms; }
.page-mask--curtain.is-in .page-mask__word { transform: translateY(0); }
.page-mask--curtain.is-revealing .page-mask__half--left { transform: translateX(-101%); }
.page-mask--curtain.is-revealing .page-mask__half--right { transform: translateX(101%); }
.page-mask--curtain.is-revealing .page-mask__word { opacity: 0; transition: opacity 300ms var(--ease-in); }

/* ---- Work: stacked bands wipe up ---- */
.page-mask--bands .page-mask__band {
  position: absolute; left: 0; width: 100%;
  height: calc(100% / 6 + 1px);
  top: calc(var(--band-i) * (100% / 6));
  background: var(--color-midnight-carbon); z-index: 1;
  transform: scaleY(1); transform-origin: top;
  transition: transform 600ms var(--ease-in-out);
}
.page-mask--bands .page-mask__band:nth-child(odd) { background: #1a1b16; }
.page-mask--bands .page-mask__word { z-index: 3; transform: translateY(110%); transition: transform 700ms var(--ease-out); }
.page-mask--bands.is-in .page-mask__word { transform: translateY(0); }
.page-mask--bands.is-revealing .page-mask__band { transform: scaleY(0); }
.page-mask--bands.is-revealing .page-mask__word { opacity: 0; transition: opacity 300ms var(--ease-in); }

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .page-loader, .page-loader.is-revealing,
  .page-loader.is-collapsing .loader-orbit,
  .page-loader.is-collapsing .loader-copy,
  .page-mask, .page-mask.is-revealing,
  .page-mask--curtain.is-revealing .page-mask__half,
  .page-mask--bands.is-revealing .page-mask__band { transition-duration: 150ms; }
  .page-loader.is-collapsing .loader-orbit { transform: scale(0.9); }
  .page-loader.is-collapsing .loader-copy { transform: none; }
  .page-mask--sweep .page-mask__word,
  .page-mask--curtain .page-mask__word,
  .page-mask--bands .page-mask__word { transform: none; }
}