/* ============================================================
   ABYSS RE-THEME — "Signal From The Deep" v3
   Depth-banded water world. Loaded AFTER style.css; every rule
   is additive and overrides the incumbent theme.
   v2: hero surface light rebuilt — god-rays + waterline,
   caustics noise removed (smeared badly).
   ============================================================ */

:root {
  /* depth ramp */
  --abyss-0: #07141f;        /* surface water */
  --abyss-1: #06101c;        /* shallow */
  --abyss-2: #040b16;        /* mid */
  --abyss-3: #020810;        /* deep */
  --abyss-4: #01060c;        /* floor */

  /* bio-luminescence accents (depth-mapped) */
  --bio-surface: #4fd1c5;    /* teal — surface */
  --bio-cyan: #22d3ee;       /* cyan — primary accent (kept from the intro) */
  --bio-blue: #3b82f6;       /* blue — secondary */
  --bio-mid: #2563eb;        /* mid — depth markers */

  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* kill the rainbow gradient at token level */
  --grad-brand: linear-gradient(120deg, #67e8f9, #22d3ee 45%, #3b82f6);
  --accent-a: #22d3ee;
  --accent-b: #3b82f6;

  /* water-tinted text */
  --text: rgba(224, 244, 255, 0.94);
  --muted: rgba(160, 205, 225, 0.60);
  --faint: rgba(140, 190, 215, 0.38);
}

html { --depth: 0; }

/* ---------- BODY & ATMOSPHERE ---------- */

body {
  background: var(--abyss-0);
}

/* replace rainbow aurora with the depth field */
#aurora { display: none; }

.depth-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(120% 50% at 50% -6%,
      rgba(60, 225, 250, 0.15) 0%,
      rgba(34, 211, 238, 0.045) 32%,
      rgba(34, 211, 238, 0) 58%),
    linear-gradient(180deg,
      var(--abyss-0) 0%,
      var(--abyss-1) 26%,
      var(--abyss-2) 54%,
      var(--abyss-3) 82%,
      var(--abyss-4) 100%);
}

/* ---------- VIGNETTE: depth absorbs light ---------- */
.vignette {
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 38%, rgba(1, 6, 12, 0.82) 100%),
    linear-gradient(180deg, rgba(1, 6, 12, 0.30), transparent 30%, rgba(1, 6, 12, 0.72) 92%);
}

/* ---------- GLASS: water-tinted ---------- */
.glass,
.glass-pill,
.glass-card,
.glass-strong {
  background: rgba(10, 30, 44, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(200, 240, 255, 0.14),
    inset 0 -1px 0 rgba(34, 211, 238, 0.06),
    0 24px 60px rgba(0, 8, 18, 0.55);
}

::selection {
  background: rgba(34, 211, 238, 0.30);
  color: #eaffff;
}

/* ---------- HERO: surface light — god-rays + waterline ---------- */
/* Static CSS only: no turbulence, no animation loop, no repaint cost. */

.hero-rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.75;
}

.hero-rays span {
  position: absolute;
  top: -18%;
  width: 34vw;
  height: 80%;
  background: linear-gradient(180deg,
    rgba(150, 238, 255, 0.15) 0%,
    rgba(34, 211, 238, 0.065) 38%,
    rgba(34, 211, 238, 0) 76%);
  transform: rotate(var(--tilt, 14deg));
  transform-origin: top center;
  border-radius: 50% 50% 42% 42%;
  filter: blur(6px);
}

.hero-rays span:nth-child(1) { left: 6%;  --tilt: 10deg; }
.hero-rays span:nth-child(2) { left: 37%; --tilt: 17deg; width: 26vw; }
.hero-rays span:nth-child(3) { left: 67%; --tilt: 8deg;  width: 30vw; }

/* the waterline: one crisp horizon just below the surface glow */
.hero-waterline {
  position: absolute;
  top: max(44px, 7vh);
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(125, 225, 250, 0.06) 16%,
    rgba(200, 248, 255, 0.5) 50%,
    rgba(125, 225, 250, 0.06) 84%,
    transparent 100%);
}

/* soft light cushion directly under the waterline */
.hero-waterline::after {
  content: "";
  position: absolute;
  inset: -12px 14% -64px;
  background: radial-gradient(50% 100% at 50% 0%,
    rgba(34, 211, 238, 0.10) 0%,
    rgba(34, 211, 238, 0) 72%);
}

/* ---------- INSTRUMENT TYPOGRAPHY ---------- */

.eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.30em;
  color: rgba(34, 211, 238, 0.62);
}

[dir="rtl"] .eyebrow {
  font-family: var(--font-body);
  letter-spacing: 0.05em;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: rgba(34, 211, 238, 0.55);
  vertical-align: middle;
  margin-inline-end: 12px;
}

/* hero title: cyan→blue (was violet→cyan→amber), softer shimmer */
.hero-title-accent .char {
  animation:
    char-in 0.9s var(--ease-out) forwards,
    char-shimmer 5.5s ease-in-out infinite;
}

@keyframes char-shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* ---------- MARQUEE: depth-sounding separators ---------- */
.marquee-item {
  -webkit-text-stroke: 1px rgba(140, 205, 230, 0.30);
}

.marquee-item::after {
  content: "◆";
  background: linear-gradient(180deg, #67e8f9, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.85;
}

.marquee-item:hover {
  color: rgba(224, 248, 255, 0.88);
}

/* ---------- PROJECT CARDS: sonar ring + sweep ---------- */

@property --dangle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes depthSpin {
  to { --dangle: 360deg; }
}

/* overrides the incumbent orange conic ring (same specificity, later load) */
.project-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: 22px !important;
  padding: 2px;
  background: conic-gradient(
    from var(--dangle),
    #0e7490,
    #22d3ee,
    #164e63,
    #0e7490
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: 5 !important;
  animation: depthSpin 3.5s linear infinite !important;
  pointer-events: none !important;
  opacity: 0.55;
  transition: opacity 0.35s;
}

.project-card::after {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 26px !important;
  background: conic-gradient(
    from var(--dangle),
    rgba(34, 211, 238, 0.4),
    rgba(30, 58, 138, 0.12),
    rgba(34, 211, 238, 0.4)
  ) !important;
  filter: blur(18px) !important;
  opacity: 0;
  z-index: 0 !important;
  animation: depthSpin 3.5s linear infinite reverse !important;
  pointer-events: none !important;
  transition: opacity 0.45s;
}

.project-card:hover::before { opacity: 1; }
.project-card:hover::after { opacity: 0.55; }

/* card art shell + sonar sweep layer */
.project-card .card-art {
  position: relative !important;
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}

.project-card .sonar-sweep {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(34, 211, 238, 0.05) 42%,
    rgba(34, 211, 238, 0.16) 50%,
    rgba(34, 211, 238, 0.05) 58%,
    transparent 70%);
  transform: translateX(-70%) skewX(-8deg);
}

[dir="rtl"] .project-card .sonar-sweep {
  transform: translateX(70%) skewX(8deg);
}

.project-card:hover .sonar-sweep {
  opacity: 1;
  animation: sonarSweep 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

[dir="rtl"] .project-card:hover .sonar-sweep {
  animation: sonarSweepRTL 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes sonarSweep {
  to { transform: translateX(70%) skewX(-8deg); }
}

@keyframes sonarSweepRTL {
  to { transform: translateX(-70%) skewX(8deg); }
}

/* card info: deep-blue water column */
.project-card .card-info {
  border-bottom-left-radius: 18px !important;
  border-bottom-right-radius: 18px !important;
  background: linear-gradient(180deg, #0a1522, #060d18) !important;
}

.project-card:hover .card-info {
  background: linear-gradient(180deg, #0b1a2c, #071021) !important;
}

/* ---------- BUTTONS: instrument style ---------- */
.btn-primary {
  background: linear-gradient(120deg, #0e7490, #22d3ee 55%, #3b82f6);
  border: none;
  box-shadow: 0 8px 28px rgba(34, 211, 238, 0.22);
}

.btn-primary:hover {
  box-shadow: 0 10px 34px rgba(34, 211, 238, 0.34);
}

.btn-outline,
.btn-ghost {
  border-color: rgba(34, 211, 238, 0.28);
  color: rgba(210, 240, 252, 0.92);
}

.btn-outline:hover,
.btn-ghost:hover {
  border-color: rgba(34, 211, 238, 0.55);
  background: rgba(34, 211, 238, 0.08);
}

/* ---------- DOCK: instrument bar ---------- */
.dock {
  background: rgba(6, 18, 30, 0.58);
  border-color: rgba(34, 211, 238, 0.14);
}

.dock-item.active .dock-dot {
  background: var(--bio-cyan);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.8);
}

/* ---------- CONTACT ORBS ---------- */
.contact-orb {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(37, 99, 235, 0.12));
}

/* ---------- TIMELINE: the descent log ---------- */
.timeline::before {
  background: linear-gradient(180deg,
    rgba(79, 209, 197, 0.7) 0%,
    rgba(34, 211, 238, 0.6) 30%,
    rgba(59, 130, 246, 0.45) 62%,
    rgba(37, 99, 235, 0.25) 100%);
}

.timeline li::before {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.9), rgba(37, 99, 235, 0.4));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
}

.tl-depth {
  position: absolute;
  inset-inline-start: -26px;
  top: 26px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(34, 211, 238, 0.5);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
}

[dir="rtl"] .timeline .tl-depth {
  inset-inline-start: auto;
  inset-inline-end: -26px;
}

/* ---------- SKILL TAGS ---------- */
.tag {
  border-color: rgba(34, 211, 238, 0.16);
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .project-card::before,
  .project-card::after { animation: none !important; }
  .sonar-sweep { display: none; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
  .hero-rays { opacity: 0.6; }
  .hero-rays span { width: 42vw; }
  .project-card::after { display: none; }
  .project-card::before { opacity: 0.7; }
}


/* ============================================================
   PERF PASS — 60FPS WORK GRID (v3)
   ============================================================ */

/* 1. sonar ring: frozen when idle, spins only under the cursor.
   Paused animations tick zero frames; kills ~21 constant repaints. */
.project-card::before {
  animation-play-state: paused !important;
}

.project-card:hover::before {
  animation-play-state: running !important;
}

/* blurred glow layer never animates — opacity crossfade only */
.project-card::after {
  animation: none !important;
  opacity: 0 !important;
}

.project-card:hover::after {
  animation: none !important;
  opacity: 0.55 !important;
}

/* 2. the two 46px-blur blobs behind every opaque card screenshot:
   fully invisible in every state — deleting 42 always-painted layers. */
.project-card .card-art::before,
.project-card .card-art::after {
  display: none !important;
}

/* 3. box-shadow swaps in one paint; only transform transitions. */
.project-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.project-card:hover {
  box-shadow:
    0 30px 80px rgba(0, 4, 12, 0.55),
    0 0 0 1px rgba(34, 211, 238, 0.10),
    inset 0 1px 0 rgba(200, 240, 255, 0.12) !important;
}

/* 4. paint/layout containment: cards render in isolation, offscreen
   work skips painting descendants. */
#work-grid,
#featured-grid {
  contain: layout style;
}

.project-card {
  contain: content;
}

/* 5. no backface flicker during hover transforms */
.project-card .card-shot {
  backface-visibility: hidden;
}