/* =========================================================================
   Blue Owl Trading — theme styles (complements Tailwind utilities)
   ========================================================================= */

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Sora", "Inter", sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
}
html[lang="ar"] {
  --font-sans: "IBM Plex Sans Arabic", "Inter", sans-serif;
  --font-display: "IBM Plex Sans Arabic", "Sora", sans-serif;
  --font-serif: "Amiri", "Fraunces", serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; color-scheme: dark; }
body {
  background-color: #05060b;
  color: #c6cedb;
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  background-image:
    radial-gradient(1200px 760px at 88% -8%, rgba(58, 98, 200, 0.14), transparent 62%),
    radial-gradient(900px 640px at -12% 20%, rgba(214, 169, 65, 0.05), transparent 58%),
    radial-gradient(1200px 820px at 50% 118%, rgba(31, 64, 148, 0.14), transparent 62%);
  background-attachment: fixed;
}
html[lang="ar"] body { line-height: 1.95; }
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: normal !important; }

.font-display { font-family: var(--font-display); }
.font-serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
::selection { background: rgba(214, 169, 65, 0.28); color: #fff; }
:focus-visible { outline: 2px solid rgba(228, 191, 99, 0.85); outline-offset: 2px; }

/* Skip link */
.skip-link { position: absolute; left: -999px; top: 1rem; z-index: 100; padding: .5rem 1rem; border-radius: 999px; background: #2d3f82; color: #fff; font-size: .875rem; font-weight: 600; }
.skip-link:focus { left: 1rem; }

/* Gradients */
.text-gradient-gold {
  background-image: linear-gradient(115deg, #f8ecc9 0%, #e4bf63 45%, #c3922e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .625rem;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .26em; color: #e4bf63;
}
.eyebrow::before, .eyebrow::after { content: ""; height: 1px; width: 2rem; background: linear-gradient(90deg, transparent, rgba(214,169,65,.5), transparent); }

/* Glass */
.glass { border: 1px solid rgba(255,255,255,.08); background-color: rgba(255,255,255,.025); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.glass-strong { border: 1px solid rgba(255,255,255,.09); background-color: rgba(255,255,255,.045); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.bg-grid {
  background-image: linear-gradient(to right, rgba(148,170,230,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(148,170,230,.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.mask-fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.text-balance { text-wrap: balance; }

/* Navbar scrolled state (toggled by JS) */
[data-header].is-scrolled { padding-top: .5rem; }
[data-header].is-scrolled [data-navbar] {
  border-color: rgba(255,255,255,.15); background-color: rgba(255,255,255,.045);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 18px 50px -20px rgba(2,8,23,.9);
}
.progress-bar { position: absolute; inset-inline: 0; top: 0; height: 2px; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #c3922e, #e4bf63, #c3922e); }
[dir="rtl"] .progress-bar { transform-origin: right; }
[data-lang-switcher].is-open [data-lang-toggle] svg:last-child { transform: rotate(180deg); }

/* Buttons */
.btn-sheen { position: relative; overflow: hidden; }
.btn-sheen::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,.16), transparent 55%); pointer-events: none; }
.btn-sheen::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-160%) skewX(-20deg); animation: sheen 5s ease-in-out infinite; pointer-events: none;
}
@keyframes sheen { 0% { transform: translateX(-160%) skewX(-20deg); } 55%, 100% { transform: translateX(320%) skewX(-20deg); } }
.rtl-flip { transition: transform .3s; }
[dir="rtl"] .rtl-flip { transform: rotate(180deg); }
[dir="rtl"] .group:hover .rtl-flip { transform: rotate(180deg) translateX(.25rem); }

/* Cursor spotlight */
.spotlight { position: relative; }
.spotlight::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(320px circle at var(--mx, -400px) var(--my, -400px), rgba(214,169,65,.08), rgba(126,157,224,.07) 45%, transparent 72%);
}
.spotlight:hover::after { opacity: 1; }

/* Category tabs */
.cat-tab { border-color: rgba(255,255,255,.08); background-color: rgba(255,255,255,.025); }
.cat-tab:hover { border-color: rgba(255,255,255,.2); }
.cat-tab .cat-icon { background: rgba(255,255,255,.05); color: #94a3b8; }
.cat-tab .cat-label { color: #cbd5e1; }
.cat-tab[aria-selected="true"] {
  border-color: rgba(228,191,99,.3);
  background: linear-gradient(135deg, #1b254a, rgba(18,26,54,.7));
  box-shadow: 0 18px 40px -20px rgba(10,18,46,.9);
}
.cat-tab[aria-selected="true"] .cat-icon { background: rgba(214,169,65,.15); color: #e4bf63; }
.cat-tab[aria-selected="true"] .cat-label { color: #fff; }

/* Filter pills & Billing buttons */
.filter-pill, .billing-btn { color: #94a3b8; }
.filter-pill:hover, .billing-btn:hover { color: #e2e8f0; }
.filter-pill[aria-pressed="true"], .billing-btn.is-active { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
[data-resource].is-hidden { display: none; }

/* Plans */
.plan-premium {
  background: linear-gradient(to bottom, #1b254a, rgba(18,26,54,.7), rgba(10,15,34,.4));
  box-shadow: 0 40px 100px -40px rgba(10,18,46,.9), 0 0 0 2px rgba(214,169,65,.45);
}

/* FAQ */
.faq-panel { overflow: hidden; }
.faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(45deg); background: rgba(59,130,246,.15); color: #93c5fd; box-shadow: inset 0 0 0 1px rgba(96,165,250,.3); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.22,1,.36,1) var(--d, 0s), transform .75s cubic-bezier(.22,1,.36,1) var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Film grain */
.grain {
  pointer-events: none; position: fixed; inset: 0; z-index: 80; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* WordPress admin bar offset */
body.admin-bar [data-header] { top: 32px; }
@media (max-width: 782px) { body.admin-bar [data-header] { top: 46px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}