/**
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  AWWWARDS UI — Vibe OS 4.0 COAST Layer                      ║
 * ║  Golden Ratio precision · Fibonacci spacing · OS State       ║
 * ║  Site-of-the-Year calibre visual architecture                ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ── 1. SECTION TYPOGRAPHY PRECISION ──────────────────────────────────────── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-xs, clamp(0.625rem, 0.3vi + 0.56rem, 0.75rem));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary, #a3cf2b);
  margin-bottom: var(--sp-2, 0.8125rem);
}

.section-title {
  font-size: var(--text-3xl, clamp(1.875rem, 2.5vi + 1.3rem, 3rem));
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.section-desc {
  font-size: var(--text-base, clamp(1rem, 0.5vi + 0.85rem, 1.125rem));
  line-height: 1.72;
  max-width: 58ch;
  opacity: 0.75;
  margin-top: var(--sp-2, 0.8125rem);
}

.section-header {
  margin-bottom: var(--sp-5, 3.4375rem);
}

/* ── 2. PREMIUM CARD TRANSITION SYSTEM ────────────────────────────────────── */
.service-card,
.glass-card,
.bento-card,
.course-card,
.vibe-what-card {
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.38s ease !important;
  will-change: transform;
}

.service-card:hover,
.glass-card:hover,
.bento-card:hover,
.course-card:hover,
.vibe-what-card:hover {
  transform: translateY(-6px) scale(1.012);
}

/* ── 3. FEATURED CARD HOLOGRAPHIC SHIMMER ─────────────────────────────────── */
.service-card.srv-featured,
.course-card.course-featured {
  position: relative;
  overflow: hidden;
}

.service-card.srv-featured::after,
.course-card.course-featured::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(163, 207, 43, 0.06) 47%,
    rgba(0, 224, 198, 0.09) 55%,
    transparent 70%
  );
  animation: awwHoloShimmer 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

@keyframes awwHoloShimmer {
  0%   { transform: translate3d(-30%,  0, 0); }
  100% { transform: translate3d(380%,  0, 0); }
}

/* ── 4. HERO STATISTICS GOLDEN RATIO ─────────────────────────────────────── */
.hero-stats,
.hero-stats-row {
  display: flex;
  gap: var(--sp-5, 3.4375rem);
  flex-wrap: wrap;
  margin-top: var(--sp-4, 2.125rem);
  align-items: flex-end;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-value,
[data-count-v2],
.hero-stat-val {
  font-size: var(--text-2xl, clamp(1.5rem, 2vi + 1rem, 2.25rem));
  font-weight: 900;
  color: var(--primary, #a3cf2b);
  line-height: 1;
  letter-spacing: -0.04em;
}

.stat-label {
  font-size: var(--text-2xs, clamp(0.5625rem, 0.25vi + 0.5rem, 0.625rem));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ── 5. SRV-LINK AS BUTTON (payment trigger) ──────────────────────────────── */
button.srv-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

/* ── 6. SERVICES GRID — FIBONACCI SPACING ─────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-3, 1.3125rem);
}

.service-card {
  padding: var(--sp-4, 2.125rem);
  border-radius: 20px;
}

/* ── 6. BENTO GRID — GOLDEN RATIO COLUMNS ─────────────────────────────────── */
@media (min-width: 900px) {
  .bento-grid {
    grid-template-columns: 1.618fr 1fr !important;
    gap: var(--sp-3, 1.3125rem) !important;
  }
}

/* ── 7. COURSES GRID ──────────────────────────────────────────────────────── */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-3, 1.3125rem);
}

/* ── 8. BUTTON TYPOGRAPHY PRECISION ──────────────────────────────────────── */
.btn-primary,
.btn-outline,
.magnetic-btn {
  font-size: var(--text-sm, clamp(0.875rem, 0.3vi + 0.78rem, 1rem));
  font-weight: 700;
  letter-spacing: 0.025em;
}

/* ── 9. PORTFOLIO GRID ────────────────────────────────────────────────────── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-3, 1.3125rem);
}

.port-featured {
  grid-column: span 2;
}

@media (max-width: 600px) {
  .port-featured { grid-column: span 1; }
}

/* ── 10. SECTION HEADER WORLD-CLASS VARIANT ───────────────────────────────── */
.section-header-worldclass {
  margin-bottom: var(--sp-5, 3.4375rem);
  text-align: start;
}

.section-header-worldclass h2 {
  font-size: var(--text-4xl, clamp(2.25rem, 3vi + 1.5rem, 3.75rem));
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-block: var(--sp-2, 0.8125rem);
}

.section-header-worldclass p {
  font-size: var(--text-base, clamp(1rem, 0.5vi + 0.85rem, 1.125rem));
  line-height: 1.72;
  opacity: 0.72;
  max-width: 60ch;
  margin-top: var(--sp-2, 0.8125rem);
}

/* ── 11. NAV LINK PRECISION ───────────────────────────────────────────────── */
.nav-link {
  font-size: var(--text-sm, clamp(0.875rem, 0.3vi + 0.78rem, 1rem));
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── 12. CONTACT SECTION POLISH ───────────────────────────────────────────── */
.contact-title {
  font-size: var(--text-4xl, clamp(2.25rem, 3vi + 1.5rem, 3.75rem));
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

/* ── 13. OS THINKING STATE — AMBIENT VIEWPORT AURA ───────────────────────── */
/* The .os-thinking-aura element is injected by sovereign-agent.js */
/* Aura element — fixed box-shadow baked in, only opacity animates (GPU) */
.os-thinking-aura {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99997;
  opacity: 0;
  transition: opacity 0.45s ease;
  box-shadow:
    inset 0 0 140px rgba(163, 207, 43, 0.13),
    inset 0 0 80px rgba(0, 224, 198, 0.07);
  will-change: opacity;
}

:root[data-os-state="thinking"] .os-thinking-aura {
  animation: osAuraPulse 1.9s ease-in-out infinite alternate;
}

/* Viewport edge — fixed border, only opacity animates (GPU) */
:root[data-os-state="thinking"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99996;
  border: 1px solid rgba(163, 207, 43, 0.18);
  animation: osEdgeGlow 1.9s ease-in-out infinite alternate;
  will-change: opacity;
}

@keyframes osAuraPulse {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

@keyframes osEdgeGlow {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 14. KINETIC CHARACTER REVEAL (AI text animation) ─────────────────────── */
.sa-kinetic {
  display: inline;
}

.sa-kinetic .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(5px);
  animation: saCharIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes saCharIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 15. ICON VISIBILITY GUARANTEE ───────────────────────────────────────── */
/* Ensure Font Awesome icons never collapse to 0 size */
.fas, .fab, .far, .fal, .fad, [class^="fa-"], [class*=" fa-"] {
  display: inline-block !important;
  min-width: 1em;
  min-height: 1em;
}

/* Service card icons */
.srv-icon i,
.srv-icon .fas,
.srv-icon .fab {
  font-size: 1.5rem;
  color: var(--primary, #a3cf2b);
  display: block !important;
}

/* Nav icons */
.nav-icon,
.nav-action-btn i,
#themeToggle i,
#soundToggle i,
#langToggle i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  min-height: 1em;
}

/* Footer social icons */
.footer-social-btn i,
.social-link i {
  font-size: 1.1rem;
  display: block !important;
}

/* Course icons */
.course-icon {
  font-size: 2rem !important;
  display: block !important;
}

/* ── 16. LANGUAGE TOGGLE FIX ─────────────────────────────────────────────── */
/* Ensure lang toggle is always visible and clickable */
#langToggle {
  display: flex !important;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}

#langToggle svg,
#langToggle img,
#langToggle .lang-text {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── 17. THEME TOGGLE FIX ────────────────────────────────────────────────── */
#themeToggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
}

#themeToggle svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  opacity: 1 !important;
}

/* Icon color in light mode */
body.light-mode #themeToggle #themeIcon {
  color: var(--bg-dark, #021a1e) !important;
}

/* ── 18. SOUND TOGGLE FIX ────────────────────────────────────────────────── */
#soundToggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
}

.sound-waves {
  display: flex !important;
  align-items: center;
  gap: 2px;
}

.sound-waves span {
  display: block !important;
  width: 3px;
  height: 12px;
  background: currentColor;
  border-radius: 2px;
  animation: soundWave 0.8s ease-in-out infinite alternate;
}

.sound-waves span:nth-child(2) { animation-delay: 0.15s; height: 18px; }
.sound-waves span:nth-child(3) { animation-delay: 0.3s; height: 24px; }
.sound-waves span:nth-child(4) { animation-delay: 0.15s; height: 18px; }
.sound-waves span:nth-child(5) { animation-delay: 0s; height: 12px; }

#soundToggle.muted .sound-waves span { animation: none !important; opacity: 0.35; }

@keyframes soundWave {
  from { transform: scaleY(0.5); }
  to   { transform: scaleY(1); }
}

/* ── 19. SKILL CHIP ICONS ────────────────────────────────────────────────── */
.skill-chip i {
  font-size: 1.25rem !important;
  display: inline-block !important;
  color: var(--primary, #a3cf2b);
}

/* ── 20. REDUCED MOTION GUARD ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .glass-card,
  .bento-card,
  .course-card,
  .vibe-what-card {
    transition: none !important;
  }

  .service-card:hover,
  .glass-card:hover,
  .bento-card:hover,
  .course-card:hover {
    transform: none !important;
  }

  .service-card.srv-featured::after,
  .course-card.course-featured::after {
    animation: none !important;
  }

  .os-thinking-aura,
  :root[data-os-state="thinking"]::before {
    animation: none !important;
    opacity: 0 !important;
  }

  .sound-waves span {
    animation: none !important;
  }

  /* Kill ALL remaining animations site-wide */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Keep opacity transitions for accessibility (focus/hover feedback) */
  .sa-kinetic .char { animation: none !important; opacity: 1 !important; }
  .journey-item, .skill-node, .bento-card, .glass-card { transition: none !important; }
}

/* ── 21. LIGHT MODE POLISH ────────────────────────────────────────────────── */
body.light-mode .section-desc,
body.light-mode .section-header-worldclass p {
  opacity: 0.62;
}

body.light-mode .stat-label {
  opacity: 0.55;
}