/* ============================================================
   OreQuant — Deco Motif Kit
   Reusable classes for corner flourishes, dividers, headings,
   monogram watermarks, and seal-style badges.
   Depends on tokens.css.
   ============================================================ */

/* ---------- Global base (typography + body) ---------- */
body {
  font-family: var(--oq-font-body);
  background: var(--oq-bg);
  color: var(--oq-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .oq-display {
  font-family: var(--oq-font-serif);
  color: var(--oq-ivory);
  letter-spacing: 0.01em;
}

.oq-display {
  font-family: var(--oq-font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.oq-label {
  font-family: var(--oq-font-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oq-text-muted);
}

.oq-mono { font-family: var(--oq-font-mono); font-variant-numeric: tabular-nums; }
.oq-tabular { font-variant-numeric: tabular-nums; }

/* ---------- Page header with brass double-rule ---------- */
.oq-page-header {
  padding: var(--oq-space-6) 0 var(--oq-space-5);
  border-bottom: 1px solid var(--oq-border);
  position: relative;
  margin-bottom: var(--oq-space-6);
}
.oq-page-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--oq-hairline);
  opacity: 0.5;
}
.oq-page-header h1 {
  font-family: var(--oq-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oq-ivory);
  margin: 0;
}
.oq-page-header .oq-breadcrumb {
  color: var(--oq-text-muted);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--oq-space-2);
}
.oq-page-header .oq-breadcrumb a { color: var(--oq-brass); }
.oq-page-header .oq-breadcrumb .chev::before {
  content: "›";
  margin: 0 8px;
  color: var(--oq-brass-dark);
}

/* ---------- Section dividers ---------- */
.oq-divider {
  display: block;
  height: 24px;
  background: url('../img/deco-divider.svg') center/contain no-repeat;
  margin: var(--oq-space-6) 0;
  opacity: 0.85;
}
.oq-rule {
  border: 0;
  border-top: 1px solid var(--oq-border);
  position: relative;
  margin: var(--oq-space-5) 0;
}
.oq-rule::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--oq-hairline);
  opacity: 0.35;
  margin-top: 3px;
}

/* ---------- Card with deco corners ---------- */
.oq-card {
  background: var(--oq-surface);
  border: 1px solid var(--oq-border);
  border-radius: var(--oq-radius-md);
  padding: var(--oq-space-5);
  position: relative;
  overflow: hidden;
}
.oq-card::before,
.oq-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--oq-brass);
  opacity: 0.6;
  pointer-events: none;
}
.oq-card::before {
  top: 6px; left: 6px;
  border-right: 0; border-bottom: 0;
}
.oq-card::after {
  bottom: 6px; right: 6px;
  border-left: 0; border-top: 0;
}

/* .oq-card--plain skips corner flourishes */
.oq-card--plain::before,
.oq-card--plain::after { display: none; }

/* ---------- Monogram watermark (hero backgrounds) ---------- */
.oq-monogram-watermark {
  position: absolute;
  inset: 0;
  background: url('../img/oq-monogram.svg') center/contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Seal-style badge / alert tier pills ---------- */
.oq-seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-family: var(--oq-font-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--oq-brass);
  border-radius: var(--oq-radius-pill);
  color: var(--oq-brass-light);
  background: transparent;
}
.oq-seal--solid {
  background: var(--oq-brass);
  color: #0d1512;
  border-color: var(--oq-brass);
}
.oq-seal--t1 { background: var(--oq-brass); color: #0d1512; border-color: var(--oq-brass); }
.oq-seal--t2 { color: var(--oq-brass-light); border-color: var(--oq-brass); }
.oq-seal--t3 { color: var(--oq-text-muted); border-color: var(--oq-brass-dark); }

/* ---------- Buttons ---------- */
.oq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--oq-radius-md);
  font-family: var(--oq-font-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1.5px solid var(--oq-brass);
  background: transparent;
  color: var(--oq-brass-light);
  cursor: pointer;
  transition: background var(--oq-dur) var(--oq-ease),
              color var(--oq-dur) var(--oq-ease),
              border-color var(--oq-dur) var(--oq-ease);
  text-decoration: none;
}
.oq-btn:hover {
  background: var(--oq-brass);
  color: #0d1512;
  border-color: var(--oq-brass-light);
}
.oq-btn--secondary {
  border-color: var(--oq-ivory);
  color: var(--oq-ivory);
}
.oq-btn--secondary:hover {
  background: var(--oq-ivory);
  color: var(--oq-bg);
  border-color: var(--oq-ivory);
}
.oq-btn--ghost {
  border-color: transparent;
  color: var(--oq-ivory);
}
.oq-btn--ghost:hover {
  background: var(--oq-surface-hover);
  color: var(--oq-brass-light);
}

/* ---------- Form inputs ---------- */
.oq-input, .oq-select, .oq-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--oq-surface-deep);
  border: 1px solid var(--oq-border);
  border-radius: var(--oq-radius-md);
  color: var(--oq-ivory);
  font-family: var(--oq-font-body);
  font-size: 14px;
  transition: border-color var(--oq-dur) var(--oq-ease),
              box-shadow var(--oq-dur) var(--oq-ease);
}
.oq-input:focus, .oq-select:focus, .oq-textarea:focus {
  outline: none;
  border-color: var(--oq-brass);
  box-shadow: 0 0 0 2px rgba(176, 141, 87, 0.25);
}

/* ---------- Tables ---------- */
.oq-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--oq-ivory);
  font-size: 14px;
}
.oq-table thead th {
  font-family: var(--oq-font-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--oq-brass-light);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--oq-border);
}
.oq-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--oq-border);
}
.oq-table tbody tr:hover { background: var(--oq-surface-hover); }
.oq-table .sortable::after {
  content: " ›";
  color: var(--oq-brass-dark);
  transform: rotate(90deg);
  display: inline-block;
  margin-left: 4px;
}

/* ---------- Gain/loss text ---------- */
.oq-gain { color: var(--oq-gain); }
.oq-loss { color: var(--oq-loss); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--oq-bg); }
::-webkit-scrollbar-thumb { background: var(--oq-brass-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--oq-brass); }


/* ========================================================
   PIZZAZZ PASS — 2026-04-15
   Site-wide additions (film grain + scroll reveal).
   These live in deco.css so admin/dashboard pages can
   opt in later by adding .oq-reveal to their elements.
   ======================================================== */

/* ---------- Item 8a: Film grain overlay (site-wide, body::after) ----------
   SVG feTurbulence fractal noise baked to data-URI.
   pointer-events:none so it never intercepts clicks.
   mix-blend-mode:overlay keeps it subtle over dark surfaces.
   Adjust opacity (currently 0.04) to taste — do not exceed 0.06.
   ---------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ---------- Item 8b: Scroll fade-in (.oq-reveal) ----------
   JS (home-pizzazz.js) uses IntersectionObserver to add
   .is-visible when the element enters the viewport.
   Stagger is handled via JS by setting --oq-reveal-delay on
   sibling elements.
   -------------------------------------------------------- */
.oq-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.6s var(--oq-ease),
    transform 0.6s var(--oq-ease);
  transition-delay: var(--oq-reveal-delay, 0ms);
}
.oq-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .oq-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ========================================================
   VHS BROADCAST OVERLAY — 2026-04-15
   Rendered only on public pages (div only exists when
   $is_public_page is true in layout_public.php).
   Sits above the film-grain (body::after z-index:9999)
   but BELOW all content — use z-index:9.
   Palette tuned for OreQuant "old money / worn tape" feel:
   lower intensity than Insider Empire; no neon.
   ======================================================== */

/* Container — fixed, non-interactive, screen blend */
.oq-vhs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  mix-blend-mode: screen;
  opacity: 0.42;                    /* softer off-hero texture */
  animation: oq-flicker 6s infinite;
}

/* Scanline grid — visible but not distracting */
.oq-vhs::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    rgba(255,255,255,0.04) 0,
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* Static noise tile — DISABLED site-wide; fuzz is provided by .oq-hero::after
   only (see public.css) so noise is localized to the hero image. Scanlines
   (::before), rolling band (.oq-vhs__roll), and flicker animation remain
   active site-wide. */
.oq-vhs::after { content: none; }

/* Rolling bright band (tape head pass) — brighter + more frequent */
.oq-vhs__roll {
  position: absolute;
  left: 0; right: 0;
  height: 140px;
  top: -140px;
  background: linear-gradient(
    transparent 0%,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.18) 50%,    /* clear tape-head pass */
    rgba(255,255,255,0.05) 75%,
    transparent 100%
  );
  animation: oq-roll 8s linear infinite;   /* faster sweep */
  mix-blend-mode: screen;
}

/* Static jitter — slowed vs IE version */
@keyframes oq-static {
  0%   { transform: translate(0,    0   ); }
  20%  { transform: translate(-6px,  3px); }
  40%  { transform: translate( 4px, -5px); }
  60%  { transform: translate(-3px, -2px); }
  80%  { transform: translate( 5px,  4px); }
  100% { transform: translate(0,    0   ); }
}

/* Rolling band travels full screen height */
@keyframes oq-roll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(110vh); }
}

/* Flicker — noticeable dips for a worn-tape feel */
@keyframes oq-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 0.42; }
  20%, 24%, 55%                           { opacity: 0.30; }
}

/* Accessibility: pause all animation and clamp opacity for reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .oq-vhs,
  .oq-vhs::after,
  .oq-vhs__roll {
    animation: none;
  }
  .oq-vhs {
    opacity: 0.12;
  }
}

/* ========================================================
   SPLASH OVERLAY — 2026-04-15
   Ported from insiderempire.com's .ie-splash pattern.
   Renders once per session on the homepage.
   Uses cyrus.jpg + OreQuant brass palette + Playfair Display italic.
   Total duration ~10.5s, auto-dismiss; click-to-skip available.
   ======================================================== */

.oq-splash {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100dvh !important;
  min-width: 100svw !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99999;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  animation: oq-splash-exit 10.5s ease-in forwards;
  cursor: pointer;
}
/* Paint the root black behind the splash too so any viewport-rounding gap
   never reveals the page bg. Removed when splash exits (lock class drops). */
html.oq-splash-lock, body.oq-splash-lock { background: #000 !important; }
.oq-splash.is-exiting {
  pointer-events: none;
  animation: oq-splash-quick-exit 0.6s ease-in forwards !important;
}
@keyframes oq-splash-exit {
  0%, 92% { opacity: 1; visibility: visible; }
  100%    { opacity: 0; visibility: hidden; }
}
@keyframes oq-splash-quick-exit {
  100% { opacity: 0; visibility: hidden; }
}

html.oq-splash-lock, body.oq-splash-lock { overflow: hidden !important; }

/* ---- Real <video> VHS overlay (same source as insiderempire.com) ---- */
.oq-splash__vhs {
  position: absolute;
  top: 50%; left: 50%;
  width: 120vw; height: 120vh;
  min-width: 120%;  min-height: 120%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
  z-index: 50;
  animation: oq-splash-fade-out 2.3s ease-in 7.5s forwards;
}

/* ---- Centered 720px stage holding the portrait ---- */
.oq-splash__stage {
  position: relative;
  width: min(80vw, 720px);
  aspect-ratio: 3 / 2;
  max-height: 78vh;
  overflow: hidden;
  z-index: 20;
}

.oq-splash__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  will-change: opacity, transform, filter;
}
.oq-splash__img--cyrus {
  background-image: url("/img/splash/cyrus.jpg");
  animation: oq-splash-cyrus 10s cubic-bezier(0.4, 0, 0.4, 1) 0.3s forwards;
}

/* Brass/green-tinted vignette — dark edges, readable center */
.oq-splash__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(75% 70%, transparent 30%, rgba(5, 8, 7, 0.4) 60%, rgba(5, 8, 7, 0.92) 92%, #050807 100%),
    linear-gradient(#050807 0%, rgba(5, 8, 7, 0) 18%, rgba(5, 8, 7, 0) 70%, #050807 100%),
    linear-gradient(90deg, #050807 0%, rgba(5, 8, 7, 0) 12%, rgba(5, 8, 7, 0) 88%, #050807 100%);
  pointer-events: none;
}

/* Brass corner-bracket frame */
.oq-splash__frame {
  position: absolute; inset: 10px;
  pointer-events: none;
  opacity: 0;
  animation:
    oq-splash-frame-in 1s ease-out 1.4s forwards,
    oq-splash-fade-out 2.3s ease-in 7.5s forwards;
}
@keyframes oq-splash-frame-in { 100% { opacity: 1; } }
@keyframes oq-splash-fade-out { 100% { opacity: 0; } }

.oq-splash__corner {
  position: absolute;
  width: 44px; height: 44px;
  background: url("/img/splash/oq-splash-corner.svg") center/contain no-repeat;
}
.oq-splash__corner--tl { top: 0; left: 0; }
.oq-splash__corner--tr { top: 0; right: 0; transform: rotate(90deg); }
.oq-splash__corner--br { bottom: 0; right: 0; transform: rotate(180deg); }
.oq-splash__corner--bl { bottom: 0; left: 0; transform: rotate(270deg); }

/* Typewriter tagline */
.oq-splash__tagline {
  position: absolute;
  left: 50%; top: 76%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3.3vw, 38px);
  color: #d4b483;  /* brass-light for strong contrast over dark vignette */
  letter-spacing: 0.015em;
  text-align: center;
  text-shadow:
    rgba(0, 0, 0, 0.95) 0 2px 12px,
    rgba(0, 0, 0, 0.85) 0 0 40px,
    rgba(0, 0, 0, 0.6) 0 0 80px;
  white-space: nowrap;
  margin: 0;
  opacity: 0;
  animation:
    oq-splash-frame-in 0.8s ease-out 0.5s forwards,
    oq-splash-fade-out 2.3s ease-in 7.5s forwards;
}
.oq-splash__text {
  display: inline-block;
  vertical-align: baseline;
  padding-right: 4px;
  border-right: 3px solid #d4b483;
  animation: oq-splash-caret 0.75s step-end infinite;
}
@keyframes oq-splash-caret {
  0%, 49%   { border-right-color: #d4b483; }
  50%, 100% { border-right-color: transparent; }
}

@keyframes oq-splash-cyrus {
  0%   { opacity: 0; transform: scale(1.04); filter: blur(6px); }
  25%  { opacity: 1; transform: scale(1.02); filter: blur(0); }
  75%  { opacity: 1; transform: scale(1);    filter: blur(0); }
  100% { opacity: 0; transform: scale(0.99); filter: blur(6px); }
}

/* Skip splash entirely for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .oq-splash { display: none !important; }
}