/* ═══════════════════════════════════════════════════════
   SPCIR — Eleição dos Órgãos Sociais 2026–2028
   style.css — Custom utilities + noise overlay
   Tailwind directives are handled via Play CDN
═══════════════════════════════════════════════════════ */

/* ─── Base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-size: 16px;
}

body {
  background-color: #dbdbdb;
  color: #1A1A1A;
}

/* ─── Noise Overlay ────────────────────────────────── */
.noise-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* ─── Navbar States ────────────────────────────────── */
.navbar-fixed {
  background: #00263a9e;
  border: 1px solid transparent;
}

.navbar-fixed .nav-link {
  color: rgba(255, 255, 255, 0.884);
}

/* Logo: invert to white over dark hero */
.navbar-fixed .nav-logo {
  max-height: 60px;
}

.navbar-transparent {
  background: transparent;
  border: 1px solid transparent;
}

.navbar-transparent .nav-link {
  color: rgba(255, 255, 255, 0.6);
}

/* Logo: invert to white over dark hero */
.navbar-transparent .nav-logo {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.navbar-scrolled {
  background: rgba(219, 219, 219, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 38, 58, 0.12);
  box-shadow: 0 4px 24px rgba(0, 38, 58, 0.08);
}

.navbar-scrolled .nav-logo {
  filter: none;
  opacity: 1;
}

.navbar-scrolled .nav-link {
  color: rgba(0, 38, 58, 0.55);
}

.navbar-scrolled .nav-link:hover {
  color: #00263a;
}

/* Logo transition */
.nav-logo {
  transition: filter 0.5s ease, opacity 0.5s ease;
  max-height: 60px;
}

/* ─── Magnetic Button ──────────────────────────────── */
.magnetic-btn {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.magnetic-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 38, 58, 0.2);
}

.magnetic-btn:active {
  transform: scale(0.98);
}

.magnetic-btn:hover .btn-bg {
  transform: translateX(0);
}

/* ─── Hero scroll line ─────────────────────────────── */
.scroll-line {
  animation: scroll-travel 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes scroll-travel {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}

/* ─── Feature Cards ────────────────────────────────── */
.feature-card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 38, 58, 0.12);
}

/* ─── Shuffler Cards ───────────────────────────────── */
.shuffler-card {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease;
  will-change: transform, opacity, z-index;
}

/* ─── Typewriter Cursor ────────────────────────────── */
#typewriter-cursor {
  animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── Protocol Cards ───────────────────────────────── */
.protocol-card {
  will-change: transform, opacity, filter;
}

/* ─── Calendar cells ───────────────────────────────── */
.cal-cell.active {
  background-color: #a5c4d4;
  color: #00263a;
  font-weight: 700;
}

.cal-cell.clicked {
  transform: scale(0.92);
}

/* ─── Manifesto lines ──────────────────────────────── */
.manifesto-line {
  overflow: hidden;
}

/* ─── EKG Path animation ───────────────────────────── */
#ekg-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: ekg-draw 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ekg-draw {
  0%   { stroke-dashoffset: 600; opacity: 0.4; }
  20%  { opacity: 1; }
  60%  { stroke-dashoffset: 0; opacity: 1; }
  80%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -600; opacity: 0.4; }
}

/* ─── Orbit dot (concentric circles) ──────────────── */
@keyframes orbit {
  from { transform-origin: 100px 100px; transform: rotate(0deg) translateX(90px) rotate(0deg); }
  to   { transform-origin: 100px 100px; transform: rotate(360deg) translateX(90px) rotate(-360deg); }
}

#orbit-dot {
  transform-origin: 100px 100px;
  animation: orbit-anim 6s linear infinite;
}

@keyframes orbit-anim {
  from { transform: rotate(0deg) translateX(90px); transform-origin: 100px 100px; }
  to   { transform: rotate(360deg) translateX(90px); transform-origin: 100px 100px; }
}

/* ─── Laser scan ───────────────────────────────────── */
#laser-line, #laser-glow {
  animation: laser-scan 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes laser-scan {
  0%   { transform: translateY(0px); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateY(164px); opacity: 0; }
}

/* ─── Feature reveal (GSAP target) ────────────────── */
.feature-reveal {
  opacity: 0;
  transform: translateY(30px);
}

/* ─── Responsive utilities ─────────────────────────── */
@media (max-width: 768px) {
  .noise-overlay {
    display: none; /* perf on mobile */
  }
  .tracking-\[0\.3em\] {
    letter-spacing: 0.2em !important;
  }  
  .navbar-fixed .nav-logo, .navbar-scrolled .nav-logo {
    max-height: 40px !important;
  }  
}

/* ─── Selection color ──────────────────────────────── */
::selection {
  background: #a5c4d4;
  color: #00263a;
}

/* ─── Scrollbar (webkit) ───────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #dbdbdb;
}

::-webkit-scrollbar-thumb {
  background: #a5c4d4;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7aafc4;
}

/* ─── Focus rings ──────────────────────────────────── */
:focus-visible {
  outline: 2px solid #a5c4d4;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Font weight utilities (Tailwind override safe) ── */
.font-800 { font-weight: 800; }
.font-700 { font-weight: 700; }
.font-600 { font-weight: 600; }
.font-500 { font-weight: 500; }
.font-400 { font-weight: 400; }
.font-300 { font-weight: 300; }