/* Global Farcas/Clavis theme tokens and shared UI behaviour. */
:root {
  --bg: #222831;
  --highlight: #30475E;
  --text: #DDDDDD;
  --accent: #F05454;

  --bg-card: #30475E;
  --bg-card-hover: #30475E;
  --card: #30475E;
  --card-hover: #30475E;
  --panel: #30475E;
  --panel-2: #30475E;
  --surface: #30475E;
  --border: rgba(221, 221, 221, 0.18);
  --border-hover: rgba(240, 84, 84, 0.58);
  --border-strong: rgba(240, 84, 84, 0.45);
  --text-muted: rgba(221, 221, 221, 0.74);
  --muted: rgba(221, 221, 221, 0.74);
  --dim: rgba(221, 221, 221, 0.55);
  --accent-dim: #F05454;
  --accent-glow: rgba(240, 84, 84, 0.10);
  --accent-glow-strong: rgba(240, 84, 84, 0.16);
  --glow: rgba(240, 84, 84, 0.10);
  --gradient: #F05454;
  --green: #DDDDDD;
  --cyan: #DDDDDD;

  --reveal-start-opacity: 0.46;
  --reveal-duration: 360ms;
  --reveal-line-delay: 34ms;
  --reveal-section-duration: 360ms;
  --page-scroll: 0;
  --pointer-x: 0.5;
  --pointer-y: 0.5;
}

html {
  background: var(--bg) !important;
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

body::before,
body::after {
  display: none !important;
}

.bg-grid,
.bg-noise,
.bg-glow,
.site-atmosphere {
  contain: layout paint style;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(221, 221, 221, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(221, 221, 221, 0.055) 1px, transparent 1px),
    linear-gradient(120deg, transparent 0 48%, rgba(240,84,84,0.07) 49%, transparent 51%) !important;
  background-size: 64px 64px, 64px 64px, 260px 260px !important;
  background-position:
    calc(var(--page-scroll, 0) * -90px) calc(var(--page-scroll, 0) * 64px),
    calc(var(--page-scroll, 0) * -90px) calc(var(--page-scroll, 0) * 64px),
    calc(var(--page-scroll, 0) * 140px) calc(var(--page-scroll, 0) * -90px) !important;
  opacity: 0.36;
  mask-image: none;
}

.bg-noise {
  display: block !important;
  opacity: 0.055 !important;
  background-image: repeating-radial-gradient(circle at 17% 23%, rgba(221,221,221,0.34) 0 1px, transparent 1px 4px) !important;
  mix-blend-mode: soft-light;
}

.bg-glow {
  display: block !important;
  background: rgba(240, 84, 84, 0.18) !important;
  opacity: 0.07 !important;
  filter: none !important;
  transform: translate3d(0, 0, 0);
  transition: none;
}

nav,
nav.scrolled {
  background: rgba(34, 40, 49, 0.98) !important;
  border-bottom-color: rgba(221, 221, 221, 0.16) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-links.open {
  background: rgba(34, 40, 49, 0.98) !important;
}

.nav-logo {
  color: var(--text) !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-logo::after {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.82;
  transform: translateY(1px);
}

.scroll-progress,
.download-section .dl-card::before,
.pcard::before {
  background: var(--accent) !important;
  box-shadow: none !important;
}

.hero-name .gradient-text,
footer .gradient-text,
footer .grad,
.page-title .grad,
h1 span {
  color: var(--accent) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

section,
header,
.pcard,
.card,
.edu-card,
.contact-card,
.clavis-card,
.lang-chip,
.stack-group,
.source-rail,
.archive-main,
.archive-row,
.source-btn,
.pane-head,
.mini-pager button,
.page-size,
.search-input,
.filter-select,
.volico .letter,
.archive-empty,
.stat-card,
.status-card,
.latest-run,
.source-card,
.item-card,
[class*="card"],
[class*="panel"],
[class*="pane"] {
  border-color: var(--border) !important;
}

.pcard,
.card,
.edu-card,
.contact-card,
.clavis-card,
.lang-chip,
.stack-group,
.floating-badge,
.source-rail,
.archive-main,
.archive-row,
.pane-head,
.mini-pager button,
.page-size,
.search-input,
.filter-select,
.volico .letter,
.archive-empty,
.stat-card,
.status-card,
.latest-run,
.source-card,
.item-card,
[class*="card"],
[class*="panel"],
[class*="pane"] {
  background: var(--highlight) !important;
  color: var(--text) !important;
  box-shadow: none;
}

.pcard:hover,
.card:hover,
.edu-card:hover,
.contact-card:hover,
.clavis-card:hover,
.lang-chip:hover,
.stack-group.open,
.stack-group-header:hover,
.source-btn:hover,
.source-btn.active,
.archive-row:hover,
.mini-pager button:hover:not(:disabled),
.btn-outline:hover,
.btn-download:hover,
.btn.ghost:hover,
.p-btn.ghost:hover,
.p-tag:hover,
.chip:hover {
  background: #30475E !important;
  border-color: var(--border-hover) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

.btn-primary,
.btn.primary,
.p-btn.primary,
.download-section .btn-dl {
  background: var(--accent) !important;
  color: var(--bg) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn.primary:hover,
.p-btn.primary:hover,
.download-section .btn-dl:hover {
  box-shadow: 0 10px 26px rgba(240, 84, 84, 0.22) !important;
}

.btn-outline,
.btn-download,
.btn.ghost,
.p-btn.ghost {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

a,
.nav-link:hover,
.nav-back:hover,
.stack-expand-all:hover,
footer a:hover,
.volico .letter a:hover {
  color: var(--accent) !important;
}

.nav-links a::after,
.section-label::before,
.page-label::before,
.kicker::before,
.p-sub-label::before,
.avatar-ring,
.avatar-ring-2::before,
.floating-badge .dot,
.stack-chip.primary .chip-dot,
.p-dot.active {
  background: var(--accent) !important;
}

.avatar-ring {
  opacity: 0.55 !important;
  background: transparent !important;
  border: 2px solid var(--accent) !important;
  border-left-color: transparent !important;
}

.avatar-img {
  border-color: var(--highlight) !important;
  background: var(--highlight) !important;
}

.p-icon,
.contact-icon,
.download-section .dl-icon,
.stack-group-count,
.edu-card .edu-badge,
.p-tag,
.chip,
.stack-chip,
.p-tier {
  background: rgba(34, 40, 49, 0.38) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

.p-icon svg,
.contact-icon svg,
.download-section .dl-icon svg {
  color: var(--accent) !important;
  stroke: var(--accent) !important;
}

input,
select,
button,
textarea {
  color: var(--text) !important;
}

::selection {
  background: rgba(240, 84, 84, 0.35);
  color: var(--text);
}

/* Unified reveal system: fail-open IntersectionObserver + opacity/transform only. */
.scroll-progress,
.scroll-progress-transform {
  width: 100% !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 80ms linear;
  will-change: transform;
}

section,
header,
.pcard,
.card,
.stagger-item,
.hero-greeting,
.hero-name,
.hero-title,
.hero-desc,
.hero-actions,
.hero-visual,
[data-reveal] {
  opacity: 1 !important;
  transform: none;
  animation: none !important;
}

.reveal-item {
  --reveal-index: 0;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-system-ready .reveal-item.reveal-pending {
  opacity: 0.001 !important;
  transform: translate3d(0, 18px, 0) scale(0.992) !important;
}

.reveal-system-ready .reveal-item.reveal-in {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition:
    opacity var(--reveal-duration) ease,
    transform var(--reveal-duration) cubic-bezier(.2,.8,.2,1),
    border-color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease;
  transition-delay: calc(var(--reveal-index, 0) * 28ms);
}

/* Keep hover motion local and lightweight; no scroll-frame layout reads. */
.pcard:hover,
.card:hover,
.edu-card:hover,
.contact-card:hover,
.clavis-card:hover,
.lang-chip:hover,
.btn:hover,
.btn-primary:hover,
.btn-outline:hover,
.btn-download:hover,
.btn.ghost:hover,
.p-btn.ghost:hover,
.download-section .btn-dl:hover,
.cat-chip:hover {
  transform: translate3d(0, -2px, 0) !important;
}


/* The standalone Clavis page has compact markup; keep it integrated without per-scroll effects. */
.clavis-page .hero,
.clavis-page .section,
.clavis-page .public-strip {
  position: relative;
  isolation: isolate;
}

.clavis-page .hero-grid,
.clavis-page .section-head,
.clavis-page .public-shell {
  transform: translate3d(0, 0, 0);
}

.clavis-page .pi-frame {
  transform-origin: 50% 38%;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28) !important;
}

.clavis-page .pi-frame::before,
.scroll-card::after {
  display: none !important;
}

.clavis-page .tech-card {
  min-height: 100%;
}

.clavis-page .rail-item {
  position: relative;
  overflow: hidden;
}

.clavis-page .rail-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 2px;
  background: var(--accent);
  opacity: 0.2;
  transform: scaleY(1);
  transform-origin: top;
}

.clavis-page .public-strip {
  padding-bottom: 4rem;
}

.clavis-page .public-clavis-embed {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25) !important;
}

.site-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.site-atmosphere span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.atmo-mesh {
  width: 46vw;
  height: 46vw;
  min-width: 360px;
  min-height: 360px;
  border-radius: 36% 64% 54% 46%;
  border: 1px solid rgba(221, 221, 221, 0.045);
  opacity: 0.34;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

.mesh-a { top: -18vw; right: -18vw; }
.mesh-b { bottom: -24vw; left: -18vw; width: 38vw; height: 38vw; opacity: 0.22; }

.atmo-orb {
  width: 360px;
  height: 360px;
  border: 1px solid rgba(240, 84, 84, 0.11);
  border-radius: 50%;
  opacity: 0.22;
  animation: atmo-drift 16s ease-in-out infinite both;
  transform: translate3d(0, 0, 0);
}

.orb-a { top: 6%; left: -260px; }
.orb-b { top: 10%; right: -330px; width: 460px; height: 460px; animation-duration: 20s; animation-delay: -5s; opacity: 0.18; }
.orb-c { bottom: -300px; left: -230px; width: 420px; height: 420px; animation-duration: 22s; animation-delay: -10s; opacity: 0.16; }

.atmo-line {
  width: 26vw;
  height: 1px;
  background: rgba(221, 221, 221, 0.075);
  transform-origin: center;
  animation: atmo-line 11s ease-in-out infinite both;
}

.line-a { top: 15%; left: 3%; --line-rotate: -14deg; }
.line-b { bottom: 12%; right: 2%; width: 24vw; --line-rotate: 18deg; animation-duration: 13s; animation-delay: -4s; }
.line-c { top: 52%; right: 8%; width: 18vw; --line-rotate: -28deg; animation-duration: 15s; animation-delay: -7s; opacity: 0.6; }

.atmo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.26;
  box-shadow: 0 0 14px rgba(240, 84, 84, 0.24);
  animation: atmo-dot 8s ease-in-out infinite both;
}

.dot-a { top: 13%; right: 8%; }
.dot-b { top: 72%; left: 6%; animation-duration: 9s; animation-delay: -3s; }
.dot-c { bottom: 8%; right: 12%; animation-duration: 11s; animation-delay: -5s; }
.dot-d { top: 42%; left: 9%; width: 4px; height: 4px; animation-duration: 13s; animation-delay: -8s; opacity: 0.2; }

@keyframes atmo-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(14px, -10px, 0) scale(1.03); }
}

@keyframes atmo-line {
  0%, 100% { opacity: 0.06; transform: translate3d(0, 0, 0) rotate(var(--line-rotate, -14deg)); }
  50% { opacity: 0.16; transform: translate3d(12px, -8px, 0) rotate(var(--line-rotate, -14deg)); }
}

@keyframes atmo-dot {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.22; }
  45% { transform: translate3d(10px, -14px, 0) scale(1.18); opacity: 0.38; }
}

@media (max-width: 768px) {
  .reveal-system-ready .reveal-item.reveal-pending {
    transform: translate3d(0, 12px, 0) scale(0.996) !important;
  }

  .site-atmosphere {
    opacity: 0.72;
  }

  .atmo-mesh,
  .atmo-orb {
    animation-duration: 22s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .bg-grid {
    background-position: 0 0 !important;
    opacity: 0.18;
  }

  .bg-glow,
  .bg-noise,
  .site-atmosphere {
    display: none !important;
  }

  .reveal-lines .text-line,
  .focus-element,
  .scroll-section {
    opacity: 1 !important;
    transform: none !important;
  }

  .scroll-section::after {
    display: none !important;
  }
}