/* Ormus brand: fusion.css
   The portable fusion component layer: material, cards, buttons, labels, reveals.
   Framework-agnostic (no Tailwind). Requires tokens.css to load first.
   Asset URLs are relative, so vendor this file NEXT TO an assets/ copy.

   Transcribed from ormus-solutions app/assets/css/main.css (fusion block).
   Home: github.com/Ormus-Solutions/ormus-brand. Change it here first, then
   mirror into the site and re-vendor into @ormus/design. See STYLE.md. */

/* ── Surface material ──────────────────────────────────────────
   Apply .surface-firm to the app shell. Midnight-pinned: there is one
   theme and it is night. */
.surface-firm {
  color: var(--ormus-fg);
  position: relative;
  isolation: isolate;
  background: var(--ormus-deep);
}

/* Fixed lacquer canvas: the texture doesn't scroll, so tiling never shows
 * as patches; the gold bloom stays anchored to the viewport's top right. */
.surface-firm::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 60% at 85% -5%, rgba(210, 158, 61, 0.10), transparent 55%),
    url('./assets/midnight-lacquer.jpg') repeat top left / 1024px auto,
    var(--ormus-deep);
}

/* Living gold dust: tiny specks drifting, very slow, transform-only. */
.surface-firm::after {
  content: '';
  position: fixed;
  inset: -6vh -3vw;
  z-index: -1;
  pointer-events: none;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  box-shadow: 78.0vw 1.7vh 0 0px rgba(210, 158, 61, 0.28), 63.7vw 69.0vh 0 0px rgba(210, 158, 61, 0.28), 92.1vw 82.1vh 0 0px rgba(210, 158, 61, 0.28), 36.5vw 17.3vh 0 0px rgba(210, 158, 61, 0.28), 8.4vw 85.3vh 0 0px rgba(210, 158, 61, 0.28), 85.0vw 92.7vh 0 0px rgba(210, 158, 61, 0.28), 15.7vw 72.3vh 0 0px rgba(210, 158, 61, 0.28), 24.3vw 45.8vh 0 0px rgba(210, 158, 61, 0.28), 30.9vw 76.3vh 0 0px rgba(210, 158, 61, 0.28), 95.3vw 10.6vh 0 0px rgba(210, 158, 61, 0.28), 35.4vw 1.0vh 0 0px rgba(210, 158, 61, 0.28), 97.1vw 77.4vh 0 0px rgba(210, 158, 61, 0.28), 11.2vw 15.7vh 0 0px rgba(210, 158, 61, 0.28), 78.6vw 67.7vh 0 0px rgba(210, 158, 61, 0.28), 32.4vw 37.8vh 0 0px rgba(210, 158, 61, 0.28), 85.7vw 88.0vh 0 0px rgba(210, 158, 61, 0.28), 19.3vw 5.3vh 0 0px rgba(210, 158, 61, 0.28), 8.6vw 37.8vh 0 0px rgba(210, 158, 61, 0.28), 14.0vw 3.5vh 0 0px rgba(210, 158, 61, 0.28), 64.0vw 24.4vh 0 0px rgba(210, 158, 61, 0.28), 92.8vw 12.5vh 0 0px rgba(210, 158, 61, 0.28), 84.5vw 1.2vh 0 0px rgba(210, 158, 61, 0.28), 88.7vw 1.9vh 0 0px rgba(210, 158, 61, 0.28), 54.1vw 80.6vh 0 0px rgba(210, 158, 61, 0.28), 20.0vw 20.2vh 0 0px rgba(210, 158, 61, 0.28), 39.3vw 17.1vh 0 0px rgba(210, 158, 61, 0.28), 19.0vw 5.3vh 0 0px rgba(210, 158, 61, 0.28), 58.1vw 39.0vh 0 0px rgba(210, 158, 61, 0.28), 15.2vw 38.9vh 0 0px rgba(210, 158, 61, 0.28), 72.0vw 14.0vh 0 0px rgba(210, 158, 61, 0.28), 80.0vw 58.3vh 0 0px rgba(210, 158, 61, 0.28), 45.8vw 91.8vh 0 0px rgba(210, 158, 61, 0.28), 45.1vw 70.1vh 0 0px rgba(210, 158, 61, 0.28), 62.0vw 67.1vh 0 0px rgba(210, 158, 61, 0.28), 23.9vw 57.3vh 0 0px rgba(210, 158, 61, 0.28), 91.4vw 22.8vh 0 0px rgba(210, 158, 61, 0.28), 89.0vw 84.5vh 0 0px rgba(210, 158, 61, 0.28), 92.1vw 62.9vh 0 0px rgba(210, 158, 61, 0.28), 85.8vw 94.1vh 0 0px rgba(210, 158, 61, 0.28), 33.6vw 46.1vh 0 0px rgba(210, 158, 61, 0.28), 72.0vw 20.8vh 0 0px rgba(210, 158, 61, 0.28), 50.8vw 34.8vh 0 0px rgba(210, 158, 61, 0.28), 74.8vw 36.6vh 0 0.5px rgba(210, 158, 61, 0.45), 5.4vw 49.8vh 0 0.5px rgba(210, 158, 61, 0.45), 54.3vw 33.5vh 0 0.5px rgba(210, 158, 61, 0.45), 28.7vw 70.5vh 0 0.5px rgba(210, 158, 61, 0.45), 55.2vw 52.6vh 0 0.5px rgba(210, 158, 61, 0.45), 44.9vw 39.0vh 0 0.5px rgba(210, 158, 61, 0.45), 81.9vw 41.6vh 0 0.5px rgba(210, 158, 61, 0.45), 82.6vw 2.7vh 0 0.5px rgba(210, 158, 61, 0.45), 94.3vw 0.9vh 0 0.5px rgba(210, 158, 61, 0.45), 42.4vw 59.5vh 0 0.5px rgba(210, 158, 61, 0.45), 88.3vw 66.2vh 0 0.5px rgba(210, 158, 61, 0.45), 97.0vw 58.3vh 0 0.5px rgba(210, 158, 61, 0.45), 53.7vw 11.3vh 0 0.5px rgba(210, 158, 61, 0.45), 31.1vw 97.6vh 0 0.5px rgba(210, 158, 61, 0.45);
  animation: ormus-gold-dust-drift 60s ease-in-out infinite;
}

@keyframes ormus-gold-dust-drift {
  0% { transform: translate3d(0, 0, 0); opacity: 0.7; }
  25% { opacity: 1; }
  50% { transform: translate3d(2.4vw, -7vh, 0); opacity: 0.75; }
  75% { opacity: 1; }
  100% { transform: translate3d(0, 0, 0); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .surface-firm::after { animation: none; }
}

/* ── Type ── */
.surface-firm h1,
.surface-firm h2,
.surface-firm h3 {
  font-family: var(--ormus-font-display);
  font-weight: 400;
  color: var(--ormus-fg);
}
.surface-firm h1 { font-weight: 300; letter-spacing: -0.01em; }

/* "/ section" micro-label, the lab-log register. */
.mono-label {
  font-family: var(--ormus-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ormus-ink-muted);
}
.mono-label::before { content: '/ '; content: '/ ' / ''; } /* visual only: not read aloud */
.mono-label--gold { color: var(--ormus-gold); }

/* ── Lacquer panels ── */
.lacquer {
  background-image: url('./assets/midnight-lacquer.jpg');
  background-size: cover;
  background-position: center;
}
.lacquer-glass {
  position: relative;
  isolation: isolate;
}
.lacquer-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('./assets/midnight-lacquer.jpg') center / cover;
  opacity: 0.86;
}

/* ── Cards: gold top hairline on a whisper of surface ── */
.fusion-card {
  background: var(--ormus-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top-color: rgba(210, 158, 61, 0.7);
  border-radius: var(--ormus-radius);
  padding: 1.5rem;
  transition: transform 0.2s var(--ormus-ease-reveal), border-color 0.2s ease;
}
.fusion-card:hover {
  transform: translateY(-2px);
  border-color: rgba(210, 158, 61, 0.6);
  border-top-color: rgba(210, 158, 61, 0.7);
}

/* ── Buttons: one loud, one quiet ── */
.fusion-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-weight: 500;
  border-radius: var(--ormus-radius);
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  cursor: pointer;
}
.fusion-btn--primary {
  background: var(--ormus-gold);
  color: var(--ormus-on-gold);
  border: 1px solid var(--ormus-gold);
}
.fusion-btn--primary:hover { opacity: 0.9; }
.fusion-btn--ghost {
  border: 1px solid rgba(236, 234, 227, 0.25);
  color: var(--ormus-ink);
  background: transparent;
}
.fusion-btn--ghost:hover {
  border-color: var(--ormus-gold);
  color: var(--ormus-gold);
}

/* ── Reveal: film-frame cut-in, expo-out ──
   Add .fusion-reveal, then .is-revealed from an IntersectionObserver.
   Without script the content must stay visible: gate the hidden initial
   state behind (scripting: enabled). */
@media (scripting: enabled) {
  .fusion-reveal {
    clip-path: inset(0 0 100% 0);
    transform: translateY(56px);
    opacity: 0;
  }
}
.fusion-reveal {
  transition:
    clip-path 1.1s var(--ormus-ease-reveal),
    transform 1.1s var(--ormus-ease-reveal),
    opacity 0.9s ease;
}
.fusion-reveal.is-revealed {
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .fusion-reveal {
    clip-path: none;
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ── Print: white paper, print gold, near-black ink (tokens.json print) ── */
@media print {
  :root {
    --ormus-gold: #8a6519;
    --ormus-gold-bright: #8a6519;
    --ormus-ink: #1a1407;
    --ormus-ink-muted: #14213d;
    --ormus-dim: #14213d;
    --ormus-on-gold: #ffffff;
    --ormus-hairline: rgba(26, 20, 7, 0.2);
  }
  .surface-firm {
    background: white !important;
    color: var(--ormus-ink);
  }
  .surface-firm::before,
  .surface-firm::after {
    display: none !important;
  }
  /* White label on a print-gold fill: keep the fill even with background graphics off. */
  .fusion-btn--primary {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}