/* ═══════════════════════════════════════════════════════════
   MOORSACHI · Threshold Ritual — Hologram Overlay + Watermark
   ───────────────────────────────────────────────────────────
   First-visit naming ceremony. Tokens inherit from home.html's
   :root (dark VELVET canonical). All values that don't inherit
   are fallbacks for the case where this stylesheet is loaded
   standalone (e.g. from /ledger.html).

   z-index 99999 sits above loader, nav, ambient orb, and hero.
   Pointer events captured only while overlay is mounted; the
   persistent watermark below uses pointer-events: auto only on
   its own surface so it never blocks page interaction.
   ═══════════════════════════════════════════════════════════ */

/* ─── Overlay root ─────────────────────────────────────────── */

.threshold-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--moor-surface-base, #09080E);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.threshold-overlay[data-phase="awake"]    { opacity: 1; }
.threshold-overlay[data-phase="reveal"]   { opacity: 1; }
.threshold-overlay[data-phase="settle"]   { opacity: 1; }
.threshold-overlay[data-phase="dissolve"] { opacity: 0; transition-duration: 1200ms; }

/* Lock background scroll while overlay is mounted */
html[data-threshold-active="true"],
html[data-threshold-active="true"] body {
  overflow: hidden !important;
}

/* ─── Hairline (the first thing visible after black) ──────── */

.threshold-overlay__hairline {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vw;
  max-width: 480px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--moor-gold-hairline, #C8AF78) 50%,
    transparent 100%
  );
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: center;
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 4;
}
[data-phase="awake"]   .threshold-overlay__hairline,
[data-phase="reveal"]  .threshold-overlay__hairline,
[data-phase="settle"]  .threshold-overlay__hairline {
  opacity: 0.55;
  transform: translate(-50%, -50%) scaleX(1);
}

/* ─── Lottie portal (mystical wrapper around the emblem) ──── */
/* Sits behind the emblem (z-index 1). When no asset is mounted */
/* this layer remains empty and the emblem plays alone. VELVET's */
/* canonical Lottie config (see lib/motion.ts) is translated to  */
/* vanilla JS in threshold.js. Mount slot styling only here.    */

.threshold-overlay__lottie {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92vmin;
  height: 92vmin;
  max-width: 720px;
  max-height: 720px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}
.threshold-overlay__lottie > svg,
.threshold-overlay__lottie > div {
  width: 100%;
  height: 100%;
}
[data-phase="awake"]    .threshold-overlay__lottie { opacity: 0.35; }
[data-phase="reveal"]   .threshold-overlay__lottie { opacity: 0.85; }
[data-phase="settle"]   .threshold-overlay__lottie { opacity: 0.85; }
[data-phase="dissolve"] .threshold-overlay__lottie { opacity: 0; transition-duration: 1200ms; }

/* ─── Emblem stage ─────────────────────────────────────────── */

.threshold-overlay__stage {
  position: relative;
  width: 64vw;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  perspective: 1200px;
  transform-style: preserve-3d;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}
[data-phase="awake"]   .threshold-overlay__stage { opacity: 0.06; }
[data-phase="reveal"]  .threshold-overlay__stage { opacity: 1; }
[data-phase="settle"]  .threshold-overlay__stage { opacity: 1; }

.threshold-overlay__emblem {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 200ms linear;
  will-change: transform, filter;
  filter:
    drop-shadow(0 0 12px rgba(155, 111, 212, 0.35))
    drop-shadow(0 0 32px rgba(155, 111, 212, calc(var(--glow, 0.4) * 0.7)));
}

/* Single emblem image — the brand mark renders cleanly. The
   mystical motion comes from the surrounding stage (breathing
   scale, glow drop-shadow that pulses with audio amplitude,
   gold hairline, scanlines + grain on the stage, and the
   Lottie portal mounted behind when an asset is provided).
   clip-path forces the visible silhouette to a perfect circle
   regardless of any non-transparent pixels in the PNG corners. */
.threshold-overlay__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-clip-path: circle(50% at 50% 50%);
          clip-path: circle(50% at 50% 50%);
}

/* ─── Scanlines + grain (the projection signature) ────────── */

.threshold-overlay__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(155, 111, 212, 0.06) 0px,
    rgba(155, 111, 212, 0.06) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;
  animation: threshold-scanline-drift 8s linear infinite;
  /* Constrain the projection texture to a circular footprint that
     matches the emblem — no rectangular box around the circle. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 49.5%, transparent 50%);
          mask-image: radial-gradient(circle at 50% 50%, #000 49.5%, transparent 50%);
}
[data-phase="reveal"] .threshold-overlay__stage::before,
[data-phase="settle"] .threshold-overlay__stage::before { opacity: 0.7; }

.threshold-overlay__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.61 0 0 0 0 0.44 0 0 0 0 0.83 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 3;
  /* Match scanline mask so the grain also lives only inside the
     emblem's circular footprint. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 49.5%, transparent 50%);
          mask-image: radial-gradient(circle at 50% 50%, #000 49.5%, transparent 50%);
}
[data-phase="reveal"] .threshold-overlay__stage::after,
[data-phase="settle"] .threshold-overlay__stage::after { opacity: 0.22; }

@keyframes threshold-scanline-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 -120px; }
}

/* The subtle breathing pulse during awake (before tap) */
@keyframes threshold-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
[data-phase="awake"] .threshold-overlay__emblem {
  animation: threshold-breathe 4s var(--ease-breathe, cubic-bezier(0.37, 0, 0.63, 1)) infinite;
}

/* ─── Subtitle text (the spoken line, rendered visually) ──── */

.threshold-overlay__subtitle {
  position: absolute;
  bottom: 22vh;
  left: 50%;
  transform: translateX(-50%);
  max-width: 96vw;
  text-align: center;
  font-family: var(--font-display, 'Newsreader', Georgia, serif);
  font-size: clamp(0.95rem, 3.6vw, 1.3rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.45;
  color: var(--moor-ink-primary, #F0ECF5);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.threshold-overlay__subtitle[data-show="true"] { opacity: 0.92; }

.threshold-overlay__subtitle-name {
  display: inline-block;
  color: var(--moor-purple-bright, #B591E0);
  font-style: italic;
  margin-left: 0.2em;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) 200ms,
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}
.threshold-overlay__subtitle[data-show-name="true"] .threshold-overlay__subtitle-name {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Tap prompt (only visible during awake) ───────────────── */

.threshold-overlay__prompt {
  position: absolute;
  bottom: 12vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-utility, 'Barlow Condensed', sans-serif);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moor-ink-tertiary, rgba(240, 236, 245, 0.55));
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: threshold-prompt-pulse 3s ease-in-out infinite;
  animation-play-state: paused;
  pointer-events: none;
  white-space: nowrap;
}
[data-phase="awake"] .threshold-overlay__prompt {
  opacity: 1;
  animation-play-state: running;
  transition-delay: 800ms;
}
[data-phase="reveal"]   .threshold-overlay__prompt,
[data-phase="settle"]   .threshold-overlay__prompt,
[data-phase="dissolve"] .threshold-overlay__prompt {
  opacity: 0;
  animation-play-state: paused;
}

@keyframes threshold-prompt-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1.0; }
}

/* ─── Watermark (the persistent mark, lower-right) ─────────── */

.illumisachi-mark {
  position: fixed;
  right: max(14px, env(safe-area-inset-right, 14px));
  bottom: max(14px, env(safe-area-inset-bottom, 14px));
  z-index: 8000;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 8px 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--moor-gold-hairline, #C8AF78);
  background: transparent;
  border: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    color 200ms ease;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.illumisachi-mark[data-visible="true"] {
  opacity: 0.45;
  transform: translateY(0);
}
.illumisachi-mark:hover,
.illumisachi-mark:focus-visible {
  opacity: 0.78;
  color: var(--moor-purple-bright, #B591E0);
  outline: none;
}
.illumisachi-mark:focus-visible {
  outline: 1px solid var(--moor-gold-faint, rgba(200, 175, 120, 0.22));
  outline-offset: 4px;
}
.illumisachi-mark__dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--moor-gold-hairline, #C8AF78);
  flex: 0 0 auto;
}

/* Light register watermark colors (when the user toggles to cream) */
[data-register="light"] .illumisachi-mark {
  color: #8A7338;
}
[data-register="light"] .illumisachi-mark__dot {
  background: #8A7338;
}
[data-register="light"] .illumisachi-mark:hover,
[data-register="light"] .illumisachi-mark:focus-visible {
  color: #5B3D8A;
}

/* ─── Reduced-motion path: no breathing scale, no scanlines ─ */

@media (prefers-reduced-motion: reduce) {
  .threshold-overlay,
  .threshold-overlay__stage,
  .threshold-overlay__emblem,
  .threshold-overlay__hairline,
  .threshold-overlay__subtitle,
  .threshold-overlay__subtitle-name,
  .threshold-overlay__prompt,
  .illumisachi-mark {
    transition-duration: 300ms !important;
    animation: none !important;
  }
  .threshold-overlay__stage::before,
  .threshold-overlay__stage::after {
    display: none;
  }
}

/* ─── Small-phone safety ───────────────────────────────────── */

@media (max-width: 380px) {
  .threshold-overlay__stage    { width: 70vw; }
  .threshold-overlay__subtitle { bottom: 18vh; font-size: 0.9rem; }
  .threshold-overlay__prompt   { bottom: 9vh; font-size: 0.65rem; }
}

/* ─── Landscape: compress vertical breathing room ──────────── */

@media (orientation: landscape) and (max-height: 500px) {
  .threshold-overlay__stage    { width: auto; height: 60vh; }
  .threshold-overlay__subtitle { bottom: 8vh; }
  .threshold-overlay__prompt   { bottom: 3vh; }
}