/* ============================================================================
   theme-tech-amp.css — 2026-06-18
   Amped tech aesthetic per Yousef's "بدي الطابع التقني يظهر اكتر".
   Loads AFTER theme-{page}.css, so it can layer additive tech texture on every
   page without rewriting the page-level signature themes.
   ========================================================================== */

/* ---------------------------------------------------------------- *
 * 1. Site-wide subtle grid backdrop — keeps the "data canvas" feel
 * ---------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center top, rgba(0,0,0,0.9), rgba(0,0,0,0) 70%);
}
body > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- *
 * 2. Wordmark — animated gold-electric gradient on the AI letters
 * ---------------------------------------------------------------- */
@keyframes ai-pulse {
  0%, 100% { color: var(--gold-400); text-shadow: 0 0 0 transparent; }
  50%      { color: var(--cyan-electric); text-shadow: 0 0 14px rgba(0, 229, 255, 0.6), 0 0 28px rgba(0, 229, 255, 0.3); }
}
.wordmark__text .c-ai {
  animation: ai-pulse 5s ease-in-out infinite;
  font-weight: 700;
}

/* ---------------------------------------------------------------- *
 * 3. Wordmark cross — gentle gold pulse + scan line
 * ---------------------------------------------------------------- */
@keyframes cross-scan {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 8px var(--gold-300)) drop-shadow(0 0 16px rgba(255, 122, 41, 0.45)); }
}
.wordmark__cross { animation: cross-scan 4s ease-in-out infinite; }

/* ---------------------------------------------------------------- *
 * 4. Headings — bold tech kicker stripe before H1/H2
 * ---------------------------------------------------------------- */
.cinematic-hero__h1::before,
.page-hero h1::before,
main h1::before {
  content: "[ ⌬ ]";
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  letter-spacing: var(--ls-caps);
  color: var(--cyan-electric);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.55);
  margin-bottom: var(--s-3);
  opacity: 0.95;
}

/* ---------------------------------------------------------------- *
 * 5. CTA buttons — neon-edge variant the page can opt into via .btn--tech
 * ---------------------------------------------------------------- */
.btn--tech,
a.btn--gold,
button.btn--gold {
  position: relative;
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--neon-orange) 100%);
  color: var(--cream-100);
  border: 1px solid var(--gold-300);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.18) inset,
    0 8px 24px rgba(212, 148, 18, 0.25),
    0 0 24px rgba(255, 122, 41, 0.18);
  transition: transform var(--dur-fast) var(--ease-calm),
              box-shadow var(--dur-med) var(--ease-calm);
}
.btn--tech:hover,
a.btn--gold:hover,
button.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px var(--cyan-electric) inset,
    0 12px 36px rgba(212, 148, 18, 0.35),
    0 0 36px rgba(0, 229, 255, 0.35);
}

/* ---------------------------------------------------------------- *
 * 6. Cards — neon halo on hover for cards across the site
 * ---------------------------------------------------------------- */
.media-card,
.foundations__card,
.share-card,
.card,
[data-card] {
  position: relative;
  border: 1px solid var(--cream-400);
  transition: transform var(--dur-med) var(--ease-calm),
              box-shadow var(--dur-med) var(--ease-calm),
              border-color var(--dur-med) var(--ease-calm);
}
.media-card:hover,
.foundations__card:hover,
.share-card:hover,
.card:hover,
[data-card]:hover {
  transform: translateY(-6px);
  border-color: var(--gold-300);
  box-shadow:
    0 12px 32px rgba(42, 45, 56, 0.10),
    0 0 24px rgba(0, 229, 255, 0.18);
}

/* ---------------------------------------------------------------- *
 * 7. Nav — sharper accent underline + electric kicker on hover
 * ---------------------------------------------------------------- */
.site-nav a,
.site-nav .nav-trigger {
  position: relative;
  transition: color var(--dur-fast) var(--ease-calm);
}
.site-nav a::after,
.site-nav .nav-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold-400), var(--cyan-electric));
  transition: width var(--dur-med) var(--ease-cinema);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.55);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after,
.site-nav .nav-trigger:hover::after { width: 100%; }

/* ---------------------------------------------------------------- *
 * 8. Rainbow stripe (existing footer divider) — saturate + glow
 * ---------------------------------------------------------------- */
.rainbow-stripe {
  background: linear-gradient(
    90deg,
    var(--rose-400),
    var(--coral),
    var(--gold-400),
    var(--butter),
    var(--sage-400),
    var(--sky-400),
    var(--lav-300)
  ) !important;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.35);
}

/* ---------------------------------------------------------------- *
 * 9. Verses — keep dignified, add hairline neon corner brackets
 * ---------------------------------------------------------------- */
.verse-band,
.scripture,
blockquote.verse {
  position: relative;
  padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--gold-400);
  background: linear-gradient(180deg, var(--cream-100), var(--cream-200));
  box-shadow: inset 4px 0 18px rgba(212, 148, 18, 0.08);
}
.verse-band::before,
.scripture::before,
blockquote.verse::before {
  content: "";
  position: absolute;
  top: 8px; left: 8px;
  width: 14px; height: 14px;
  border: 1px solid var(--cyan-electric);
  border-right: none; border-bottom: none;
  opacity: 0.6;
}
.verse-band::after,
.scripture::after,
blockquote.verse::after {
  content: "";
  position: absolute;
  bottom: 8px; right: 8px;
  width: 14px; height: 14px;
  border: 1px solid var(--gold-400);
  border-left: none; border-top: none;
  opacity: 0.6;
}

/* ---------------------------------------------------------------- *
 * 10. Disclaimer strip — denser, mono accent
 * ---------------------------------------------------------------- */
.disclaimer-strip {
  background: linear-gradient(135deg, var(--cream-300), var(--gold-100));
  border-top: 1px solid var(--gold-300);
  border-bottom: 1px solid var(--gold-300);
}
.disclaimer-strip p {
  font-family: var(--ff-mono);
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
}

/* ---------------------------------------------------------------- *
 * 11. Reduce motion — respect user pref
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wordmark__text .c-ai,
  .wordmark__cross { animation: none !important; }
  .btn--tech, .btn--gold { transition: none !important; }
}