/* ===================================================================
   Dual A — React Bits component ports (vanilla CSS/JS)
   Components: GradientText, SpotlightCard, ScrollReveal, LogoLoop,
               ProfileCard, Prism container
   Paired with assets/components.js
   =================================================================== */

/* ============ GRADIENT TEXT ============
   Applied to ALL non-white accent text across the site — italic accent
   spans, eyebrow/label classes, gold numeric values, mono badges, and
   any currently-colored highlight text. Body text in --t2 blue-gray
   stays solid so long paragraphs remain legible.                     */
.gradient-text,
/* Italic accent spans (already .acc = italic gold) */
.acc,
/* Mono eyebrow/label family */
.eyebrow, .doc-eyebrow, .nc-eyebrow, .f-label, .pillar-num, .t-label,
.cl-date, .v-num, .wd-week, .pc-tag, .sc-title, .fh-badge,
.hc-title, .hc-badge, .ac-number, .ac-eyebrow, .feat-num,
.hp-title, .hp-status, .hero-trust, .hm-delta .pos, .hm-label, .fpt-lbl,
.ht-row .ht-ts, .ht-row .ht-type,
.ll-glyph,
/* Gold/purple numeric values */
.bc-acronym, .sla-val, .s-num, .ac-stat-val, .ps-val, .spec-suffix,
.hm-value.gold, .hm-value.purple,
/* Gold heading accents in specific pages */
.pillar h3, .tier .t-price strong, .badge-card .bc-name,
/* Small meta stripes */
.address, .fb-meta,
/* Logo loop item text */
.logo-loop-item {
  background-image: linear-gradient(
    90deg,
    var(--purple) 0%,
    var(--gold) 35%,
    var(--gold-bright) 50%,
    var(--gold) 65%,
    var(--purple) 100%
  );
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 9s ease-in-out infinite;
}
/* Preserve italic Instrument Serif on accent spans */
.acc, .gradient-text {
  font-family: var(--f-acc);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  padding-right: 0.08em;
}
/* Gradient-text utility speeds + hover pause */
.gradient-text.-fast { animation-duration: 4s; }
.gradient-text.-slow { animation-duration: 14s; }
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Keep the logo-loop-item hover color override in mind — it was .t2.
   Now overridden by gradient. Re-tune the glyph to remain distinct:   */
.logo-loop-item .ll-glyph {
  animation: gradientShift 9s ease-in-out infinite;
  background-clip: initial; -webkit-background-clip: initial;
  color: var(--gold) !important; -webkit-text-fill-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.12);
}
/* Gradient also applied to nav eyebrow labels and FAQ open indicator */
.nav-links a:not(.nav-cta):hover { background: none; color: var(--t1) !important; -webkit-text-fill-color: var(--t1); }

/* Force gradient on common non-white text spots that the selector list
   above may have missed — keep body paragraphs solid for readability. */
.card h3 .acc, .feat-card.feat-large .feat-title .acc,
.section-head h2 .acc, .page-hero h1 .acc,
.founder h3 .acc, .pos-card h4 .acc, .workflow-row h2 .acc,
.profile-card h3 .acc, .scroll-anim-intro h2 .acc {
  background-image: linear-gradient(
    90deg,
    var(--purple) 0%,
    var(--gold) 35%,
    var(--gold-bright) 50%,
    var(--gold) 65%,
    var(--purple) 100%
  );
  background-size: 220% 100%;
  background-clip: text; -webkit-background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
  animation: gradientShift 9s ease-in-out infinite;
}

/* When scroll-reveal wraps words in .sr-word spans inside a gradient-text
   parent, background-clip: text on the parent can't reach through the
   child span. Apply the gradient directly to the sr-word so each word
   paints its own gradient and the text stays visible. */
.acc .sr-word,
.gradient-text .sr-word,
.eyebrow .sr-word, .doc-eyebrow .sr-word, .nc-eyebrow .sr-word,
.f-label .sr-word, .pillar-num .sr-word, .t-label .sr-word,
.v-num .sr-word, .wd-week .sr-word, .pc-tag .sr-word, .sc-title .sr-word,
.ac-number .sr-word, .ac-eyebrow .sr-word, .feat-num .sr-word,
.bc-acronym .sr-word, .sla-val .sr-word, .s-num .sr-word,
.ac-stat-val .sr-word, .ps-val .sr-word, .spec-suffix .sr-word,
.hc-badge .sr-word {
  background-image: linear-gradient(
    90deg,
    var(--purple) 0%,
    var(--gold) 35%,
    var(--gold-bright) 50%,
    var(--gold) 65%,
    var(--purple) 100%
  );
  background-size: 220% 100%;
  background-clip: text; -webkit-background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
  animation: gradientShift 9s ease-in-out infinite;
}

/* ============ SPOTLIGHT CARD ============ */
.spotlight-card {
  position: relative;
  overflow: hidden;
  --sp-x: 50%;
  --sp-y: 50%;
  --sp-color: rgba(210, 171, 85, 0.18);
  --sp-color-2: rgba(138, 92, 246, 0.14);
  isolation: isolate;
}
.spotlight-card::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(320px circle at var(--sp-x) var(--sp-y), var(--sp-color), transparent 55%),
    radial-gradient(480px circle at var(--sp-x) var(--sp-y), var(--sp-color-2), transparent 70%);
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.spotlight-card:hover::after,
.spotlight-card:focus-within::after { opacity: 1; }
.spotlight-card > * { position: relative; z-index: 1; }

/* Auto-apply spotlight to all matching card classes across pages.
   .tier.featured is excluded because it already has its own ::before glow. */
.badge-card, .pillar, .value-card, .pos-card, .ps-item,
.tier:not(.featured), .faq-item, .status-cell, .sla-item, .s-item,
.agenda-item, .map-card, .disclosure-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --sp-x: 50%;
  --sp-y: 50%;
  --sp-color: rgba(210, 171, 85, 0.16);
  --sp-color-2: rgba(138, 92, 246, 0.10);
}
.badge-card::after, .pillar::after, .value-card::after, .pos-card::after,
.ps-item::after, .tier:not(.featured)::after, .faq-item::after,
.status-cell::after, .sla-item::after, .s-item::after,
.agenda-item::after, .map-card::after, .disclosure-card::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(320px circle at var(--sp-x) var(--sp-y), var(--sp-color), transparent 55%),
    radial-gradient(480px circle at var(--sp-x) var(--sp-y), var(--sp-color-2), transparent 70%);
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.badge-card:hover::after, .pillar:hover::after, .value-card:hover::after,
.pos-card:hover::after, .ps-item:hover::after,
.tier:not(.featured):hover::after, .faq-item:hover::after,
.status-cell:hover::after, .sla-item:hover::after, .s-item:hover::after,
.agenda-item:hover::after, .map-card:hover::after,
.disclosure-card:hover::after { opacity: 1; }
.badge-card > *, .pillar > *, .value-card > *, .pos-card > *,
.ps-item > *, .tier:not(.featured) > *, .faq-item > *,
.status-cell > *, .sla-item > *, .s-item > *,
.agenda-item > *, .map-card > *, .disclosure-card > * {
  position: relative; z-index: 1;
}

/* ============ SCROLL REVEAL ============ */
.sr-block { opacity: 1; }
.sr-word {
  display: inline-block;
  opacity: 0.12;
  filter: blur(3px);
  transform: translateY(6px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.85, 0.25, 1),
    filter 0.6s cubic-bezier(0.2, 0.85, 0.25, 1),
    transform 0.65s cubic-bezier(0.2, 0.85, 0.25, 1);
  will-change: opacity, filter, transform;
}
.sr-word.sr-on {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sr-word { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ============ LOGO LOOP ============ */
.logo-loop {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  --ll-gap: 56px;
  --ll-height: 28px;
  --ll-speed: 38s;
}
.logo-loop::before, .logo-loop::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 120px; z-index: 2; pointer-events: none;
}
.logo-loop::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-base) 0%, rgba(8,9,10,0) 100%);
}
.logo-loop::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-base) 0%, rgba(8,9,10,0) 100%);
}
.logo-loop-track {
  display: flex; width: max-content;
  animation: logoLoopScroll var(--ll-speed) linear infinite;
  will-change: transform;
}
.logo-loop:hover .logo-loop-track { animation-play-state: paused; }
.logo-loop-list {
  display: flex; align-items: center;
  gap: var(--ll-gap);
  padding-right: var(--ll-gap);
}
.logo-loop-item {
  display: inline-flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
  height: var(--ll-height);
  color: var(--t2);
  font-family: var(--f-head); font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
  transition: color 0.22s ease, transform 0.32s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.logo-loop-item:hover { color: var(--t1); transform: scale(1.06); }
.logo-loop-item svg, .logo-loop-item .ll-glyph {
  width: 22px; height: 22px;
  color: var(--gold);
  flex-shrink: 0;
}
.logo-loop-item img {
  height: 24px; width: auto;
  flex-shrink: 0;
  opacity: 0.78;
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.2, 0.85, 0.25, 1);
  pointer-events: none; user-select: none;
}
.logo-loop-item:hover img { opacity: 1; }
.logo-loop-item .ll-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-weight: 700; font-size: 13px;
  padding: 3px 6px; border-radius: 6px;
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold); letter-spacing: 0.04em;
  width: auto; height: auto; min-width: 22px;
}
@keyframes logoLoopScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-loop-track { animation: none; }
}

/* ============ PROFILE CARD (lightweight port) ============ */
.profile-card {
  position: relative;
  border-radius: 26px;
  perspective: 1000px;
  --pc-x: 50%;
  --pc-y: 50%;
  --pc-rx: 0deg;
  --pc-ry: 0deg;
}
.profile-card-shell {
  position: relative;
  border-radius: inherit;
  overflow: hidden;
  transform:
    perspective(1000px)
    rotateX(var(--pc-rx))
    rotateY(var(--pc-ry));
  transform-style: preserve-3d;
  transition: transform 0.38s cubic-bezier(0.2, 0.85, 0.25, 1);
  background:
    linear-gradient(145deg, rgba(138,92,246,0.18) 0%, rgba(14,13,18,0.8) 60%, rgba(210,171,85,0.14) 100%);
  box-shadow:
    0 0 0 1px var(--b-subtle),
    0 24px 60px rgba(0,0,0,0.35),
    0 0 80px rgba(var(--purple-rgb), 0.12);
}
.profile-card.active .profile-card-shell {
  transition: transform 0.08s linear;
  box-shadow:
    0 0 0 1px var(--b-accent),
    0 32px 70px rgba(0,0,0,0.5),
    0 0 120px rgba(var(--purple-rgb), 0.22),
    0 0 100px rgba(var(--gold-rgb), 0.14);
}
.profile-card-inside {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
@media (max-width: 767px) { .profile-card-inside { grid-template-columns: 1fr; min-height: 0; } }
.pc-photo {
  position: relative;
  background: linear-gradient(165deg, var(--purple-dark) 0%, var(--bg-overlay) 100%);
  overflow: hidden;
}
.pc-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.1) contrast(1.03);
  mix-blend-mode: normal;
}
.pc-photo::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(var(--purple-rgb), 0.32), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(var(--gold-rgb), 0.20), transparent 60%);
}
.pc-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(8,9,10,0.7) 100%);
}

/* Holographic shine that follows the cursor */
.pc-shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.28s ease;
  background:
    radial-gradient(
      circle at var(--pc-x) var(--pc-y),
      rgba(210,171,85,0.55) 0%,
      rgba(138,92,246,0.45) 18%,
      rgba(232,200,104,0.25) 32%,
      transparent 48%
    );
}
.profile-card.active .pc-shine { opacity: 0.85; }
/* Iridescent diagonal overlay */
.pc-holo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(
    115deg,
    rgba(138,92,246,0.10) 0px,
    rgba(210,171,85,0.08) 6px,
    rgba(255,255,255,0.06) 14px,
    rgba(138,92,246,0.10) 24px
  );
  opacity: 0.2;
  mix-blend-mode: soft-light;
  transform: translateX(calc((var(--pc-x) - 50%) / 4));
  transition: transform 0.22s ease;
}
.profile-card.active .pc-holo { opacity: 0.55; }

.pc-meta {
  position: relative; z-index: 4;
  padding: 36px 34px;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateZ(30px);
}
.profile-card .f-label {
  font-family: var(--f-mono); font-size: 10px; color: var(--gold);
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 14px;
}
.profile-card h3 {
  font-size: 2rem; letter-spacing: -0.035em; line-height: 1.05;
  margin-bottom: 6px; font-family: var(--f-head); font-weight: 800;
}
.profile-card h3 .acc { color: var(--gold); font-size: 1.06em; }
.profile-card .f-role {
  font-family: var(--f-mono); font-size: 11px; color: var(--t2);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 20px;
}
.profile-card p { color: var(--t2); font-size: 0.97rem; line-height: 1.65; margin-bottom: 20px; }
.profile-card ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.profile-card li {
  color: var(--t2); font-size: 0.88rem; line-height: 1.4;
  padding-left: 18px; position: relative;
}
.profile-card li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 8px; height: 1.5px; background: var(--gold); border-radius: 2px;
}
.profile-card li strong { color: var(--t1); font-weight: 600; }
.profile-card .f-links { display: flex; gap: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.profile-card .f-links a { color: var(--t3); transition: color 0.22s ease; }
.profile-card .f-links a:hover { color: var(--gold); }

/* ============ PRISM MOUNT (full-viewport bleed) ============ */
.prism-mount {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none; overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  opacity: 0.65;
}
.prism-mount canvas { display: block; width: 100% !important; height: 100% !important; }