/*
 * custom.css — Minimal custom styles that can't be achieved with Tailwind utilities alone.
 *
 * WHY custom CSS is needed:
 * 1. Pseudo-element backgrounds (::before/::after) for map texture, grain, topo lines
 * 2. Complex keyframe animations replicating Framer Motion
 * 3. Selection styling
 * 4. Focus-visible ring
 * 5. Animated underline utility
 */

/* ── Base ── */
html {
  scroll-behavior: smooth;
}

body {
  background: #FAF9F6;
  color: #1C1917;
  overflow-x: hidden;
}

/* Backgrounds animate, content stays put */
body {
  transition: background-color 0.4s ease;
}
#navbar {
  transition: border-color 0.4s ease;
}

/* ── Font display utility (Space Grotesk) ── */
.font-display {
  font-family: "Space Grotesk", system-ui, sans-serif;
}

/* ── Reactive canvas background ── */
#reactive-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Subtle grain noise ── */
.bg-map-texture::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── Topo contour rings ── */
.topo-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.018;
  background-image:
    radial-gradient(ellipse 600px 600px at 20% 30%, transparent 59%, #C5A04E 60%, transparent 61%),
    radial-gradient(ellipse 400px 400px at 75% 70%, transparent 59%, #C5A04E 60%, transparent 61%),
    radial-gradient(ellipse 300px 300px at 50% 50%, transparent 59%, #C5A04E 60%, transparent 61%);
}

/* ── Vignette overlay for readability ── */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(250,249,246,0.6) 100%);
}

/* ── Selection ── */
::selection {
  background: #C5A04E30;
  color: #1C1917;
}

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid #C5A04E;
  outline-offset: 2px;
}

/* ── Animated underline utility ── */
.link-underline {
  position: relative;
  text-decoration: none;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: #C5A04E;
  transition: width 0.3s ease;
}
.link-underline:hover::after {
  width: 100%;
}

/* ── Hover lift card utility ── */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════
   ANIMATIONS (replacing Framer Motion)
   ══════════════════════════════════════ */

/* ── Fade up (scroll-triggered) ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUpSmall {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeftSmall {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleInSmall {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@keyframes glitchSliceLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes glitchSliceRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes preloaderMark {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes preloaderLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes preloaderExit {
  to { opacity: 0; }
}

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

@keyframes modalCardIn {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Scroll-triggered animation classes ── */
.anim-hidden {
  opacity: 0;
}

.anim-fade-up {
  animation: fadeUp 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.anim-fade-up-small {
  animation: fadeUpSmall 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.anim-fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.anim-slide-left {
  animation: slideInLeft 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.anim-slide-right {
  animation: slideInRight 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.anim-slide-left-small {
  animation: slideInLeftSmall 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.anim-scale-in {
  animation: scaleIn 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.anim-scale-in-small {
  animation: scaleInSmall 0.3s ease forwards;
}

/* ── Overlay menu animations ── */
.overlay-menu {
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.overlay-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.overlay-menu .menu-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.overlay-menu.is-open .menu-item {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered menu items */
.overlay-menu.is-open .menu-item:nth-child(1) { transition-delay: 0.1s; }
.overlay-menu.is-open .menu-item:nth-child(2) { transition-delay: 0.14s; }
.overlay-menu.is-open .menu-item:nth-child(3) { transition-delay: 0.18s; }
.overlay-menu.is-open .menu-item:nth-child(4) { transition-delay: 0.22s; }
.overlay-menu.is-open .menu-item:nth-child(5) { transition-delay: 0.26s; }
.overlay-menu.is-open .menu-item:nth-child(6) { transition-delay: 0.30s; }
.overlay-menu.is-open .menu-item:nth-child(7) { transition-delay: 0.34s; }
.overlay-menu.is-open .menu-item:nth-child(8) { transition-delay: 0.38s; }
.overlay-menu.is-open .menu-item:nth-child(9) { transition-delay: 0.42s; }
.overlay-menu.is-open .menu-item:nth-child(10) { transition-delay: 0.46s; }

/* ── Accordion collapse/expand ── */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.accordion-body.is-open {
  opacity: 1;
}

/* ── Accordion chevron rotate ── */
.accordion-chevron {
  transition: transform 0.3s ease;
}

.accordion-chevron.is-rotated {
  transform: rotate(180deg);
}

/* ── Modal ── */
.modal-backdrop {
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: scale(0.95) translateY(20px);
}

.modal-backdrop.is-open .modal-card {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Hero art hover shimmer ── */
.hero-art-frame:hover .shimmer-overlay {
  animation: shimmer 1s ease forwards;
}

/* ── Glitch slices ── */
.glitch-slice {
  opacity: 0;
}

.glitch-slice.anim-active:nth-child(odd) {
  animation: glitchSliceLeft 0.4s ease forwards;
}

.glitch-slice.anim-active:nth-child(even) {
  animation: glitchSliceRight 0.4s ease forwards;
}

/* ── Preloader ── */
#preloader {
  transition: opacity 0.4s ease;
}

#preloader.exit {
  opacity: 0;
  pointer-events: none;
}

/* ── Hall of Fame gallery item hover ── */
.hof-item .hof-accent {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.hof-item:hover .hof-accent {
  transform: scaleX(1);
}

.hof-item .hof-subtitle {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hof-item:hover .hof-subtitle {
  opacity: 1;
  transform: translateY(0);
}

/* ── Floating widget ── */
.floating-widget {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.floating-widget.is-hidden {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

/* ── Scroll indicator bounce ── */
.scroll-indicator {
  animation: bounce 1.5s ease-in-out infinite;
}

/* ══════════════════════════════════════
   DARK MODE (PM mode)
   Triggered by html.dark class via AM/PM chip toggle
   ══════════════════════════════════════ */

html.dark body {
  background: #0F0E0C;
  color: #E8E4DA;
}

/* Navbar */
html.dark #navbar {
  background-color: rgba(15, 14, 12, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

/* Preloader */
html.dark #preloader {
  background-color: #0F0E0C !important;
}

/* Vignette — swap paper-warm rgba to dark */
html.dark .vignette {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(15, 14, 12, 0.6) 100%);
}

/* AM chip in PM/dark state */
html.dark .am-chip {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(197, 160, 78, 0.2);
  color: #C5A04E;
}

/* Text overrides */
html.dark .text-charcoal          { color: #E8E4DA; }
html.dark h1.text-charcoal,
html.dark h2.text-charcoal,
html.dark h3.text-charcoal        { color: #E8E4DA; }
html.dark .text-stone-900         { color: #E8E4DA; }
html.dark .text-stone-600         { color: #A8A29E; }
html.dark .text-stone-500         { color: #8A847D; }
html.dark .text-stone-400         { color: #6B6560; }
html.dark .text-stone-300         { color: #524D47; }
html.dark .text-white\/90         { color: rgba(232, 228, 218, 0.9); }

/* Background overrides */
html.dark .bg-white\/70           { background-color: rgba(255, 255, 255, 0.07); }
html.dark .bg-white\/60           { background-color: rgba(255, 255, 255, 0.06); }
html.dark .bg-white\/50           { background-color: rgba(255, 255, 255, 0.04); }
html.dark .bg-stone-50            { background-color: #1A1815; }
/* Timeline dot backgrounds use bg-[#FAF9F6] Tailwind class */
html.dark .bg-\[\#FAF9F6\]       { background-color: #0F0E0C; }

/* Hero art frame gradient */
html.dark .from-stone-50          { --tw-gradient-from: #1A1815; }
html.dark .via-\[#F5F3EE\]       { --tw-gradient-via: #1A1815; }
html.dark .to-stone-100           { --tw-gradient-to: #1C1A17; }

/* Section hover overlay */
html.dark .hover\:bg-charcoal\/\[0\.02\]:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Border overrides */
html.dark .border-stone-200,
html.dark .border-stone-200\/60,
html.dark .border-stone-200\/40   { border-color: rgba(255, 255, 255, 0.07); }
html.dark .border-stone-300       { border-color: rgba(255, 255, 255, 0.11); }
html.dark .border-stone-200\/30   { border-color: rgba(255, 255, 255, 0.04); }

/* Section divider line (experience timeline) */
html.dark .border-l               { border-color: rgba(255, 255, 255, 0.07); }

/* Card shadow in dark mode */
html.dark .hover-lift:hover {
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.5);
}

/* Glass highlight on hero art */
html.dark .from-white\/50         { --tw-gradient-from: rgba(255, 255, 255, 0.08); }

/* Skills chips — ensure visible border + text in dark mode */
html.dark #skills span {
  border-color: rgba(255, 255, 255, 0.16);
  color: #A8A29E;
}
html.dark #skills span:hover {
  border-color: #C5A04E;
  color: #C5A04E;
}

/* Project tag chips (no bg, border-only style) */
html.dark #work .flex.flex-wrap.gap-2 span {
  border-color: rgba(255, 255, 255, 0.14);
  color: #8A847D;
}

/* Hero + Contact outline buttons */
html.dark a.border-stone-300 {
  border-color: rgba(255, 255, 255, 0.18);
}

/* ── Reduced motion support ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .scroll-indicator {
    animation: none;
  }
}