/*
 * styles.css
 *
 * All custom CSS for the portfolio. Tailwind utilities handle the bulk of
 * layout and spacing; this file covers:
 *   • Scroll behaviour & body texture (dot-grid background)
 *   • Browser chrome (text selection, scrollbar)
 *   • Named keyframe animations reused across components
 *   • Component-level hover states that can't be expressed as Tailwind classes
 *     (e.g. changing child element colors on parent hover)
 *
 * Design tokens (set in index.html Tailwind config):
 *   cream   #f4f4ed   —  light-mode background / dark-mode text
 *   ink     #0a0a0a   —  dark-mode background / light-mode text
 *   electric #0015ff  —  brand accent
 */

/* ─── Base ────────────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: 'ss01', 'cv11';
  /* Subtle dot-grid texture — light mode */
  background-image:
    radial-gradient(rgba(10, 10, 10, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}
/* Dark-mode variant of the dot grid */
.dark body {
  background-image:
    radial-gradient(rgba(244, 244, 237, 0.04) 1px, transparent 1px);
}

/* ─── Browser chrome ──────────────────────────────────────────────────────── */

::selection {
  background: #0015ff;
  color: #f4f4ed;
}

::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(0, 21, 255, 0.4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 21, 255, 0.7); }

/* ─── Keyframe animations ─────────────────────────────────────────────────── */

/* Horizontal marquee — content duplicated 4× in JSX for a seamless loop */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee {
  animation: marquee 32s linear infinite;
}

/* Scroll-triggered fade + rise — used by the Reveal component */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; }
.fade-up.in-view {
  animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Larger rise for section cards (projects, experience rows) */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-up { opacity: 0; }
.slide-up.in-view {
  animation: slide-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Horizontal scale reveal — used for decorative rule lines */
@keyframes scale-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.scale-x {
  transform: scaleX(0);
  transform-origin: left;
}
.scale-x.in-view {
  animation: scale-x 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
}

/* Scroll-down chevron in the hero section */
@keyframes chevron-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
.chevron-bounce {
  animation: chevron-bounce 2.2s ease-in-out infinite;
}

/* "Available" status dot pulse — replicates Tailwind's animate-ping */
@keyframes ping-soft {
  0%        { transform: scale(1);   opacity: 0.75; }
  75%, 100% { transform: scale(2.6); opacity: 0; }
}
.ping-soft {
  animation: ping-soft 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Blinking cursor in the Skills hover-hint text */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.blink {
  animation: blink 1.1s steps(2) infinite;
}

/* ─── Project cards ───────────────────────────────────────────────────────── */

/*
 * On hover the entire card flips to electric blue, and child elements
 * (.pill, .muted) adapt their colors to stay readable on the blue background.
 */
.project-card {
  transition: background-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
              color            400ms cubic-bezier(0.16, 1, 0.3, 1),
              transform        300ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color     300ms ease;
}
.project-card:hover                { background-color: #0015ff; color: #f4f4ed; border-color: #0015ff; }
.project-card:hover .pill          { background-color: rgba(244, 244, 237, 0.12); color: #f4f4ed; border-color: rgba(244, 244, 237, 0.3); }
.project-card:hover .muted         { color: rgba(244, 244, 237, 0.7); }

/* ─── Skill pills ─────────────────────────────────────────────────────────── */

.skill-pill {
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.skill-pill:hover {
  background-color: #0015ff;
  color: #f4f4ed;
  border-color: #0015ff;
  transform: translateY(-2px);
}

/* ─── Contact rows ────────────────────────────────────────────────────────── */

/* Row inverts to cream-on-blue → electric-on-cream on hover */
.contact-row { transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.contact-row:hover              { background-color: #f4f4ed; color: #0015ff; }
.contact-row:hover .arrow       { transform: translateX(6px); }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

/* Filled electric button — hover inverts fill */
.btn-electric {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  background: #0015ff;
  color: #f4f4ed;
  border: 1px solid #0015ff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-electric:hover            { background: transparent; color: #0015ff; }
.dark .btn-electric:hover      { color: #0015ff; }
.btn-electric .arrow           { transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.btn-electric:hover .arrow     { transform: translateX(6px); }

/* Outline button — hover fills with ink (or cream in dark mode) */
.btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  background: transparent;
  color: #0a0a0a;
  border: 1px solid #0a0a0a;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dark .btn-outline             { color: #f4f4ed; border-color: #f4f4ed; }
.btn-outline:hover             { background: #0a0a0a; color: #f4f4ed; }
.dark .btn-outline:hover       { background: #f4f4ed; color: #0a0a0a; }
.btn-outline .arrow            { transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.btn-outline:hover .arrow      { transform: translateX(6px); }

/* ─── Navigation ──────────────────────────────────────────────────────────── */

/* Underline draws from right on hover — reverses direction on leave */
.nav-link { position: relative; display: inline-block; padding: 4px 0; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Mobile full-screen menu links — staggered by animationDelay in JSX */
.mobile-link        { opacity: 0; transform: translateY(20px); }
.mobile-link.in     { animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ─── F1 animation classes (unused — car SVG is static) ──────────────────── */
/*
 * These keyframes were part of an earlier animated F1 version.
 * Kept in case animation is re-enabled; the current F1Car SVG is static.
 */
@keyframes wheel-spin       { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
.f1-wheel-fast              { transform-origin: 0 0; animation: wheel-spin 0.18s linear infinite; }
.f1-wheel-fast-rear         { animation-duration: 0.16s; }

@keyframes road-scroll      { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -120; } }
.f1-road-line               { animation: road-scroll 0.8s linear infinite; }

@keyframes photo-bob {
  0%, 100% { transform: translateY(0)    translateX(0); }
  25%      { transform: translateY(-1px) translateX(0.4px); }
  50%      { transform: translateY(0.6px) translateX(-0.3px); }
  75%      { transform: translateY(-0.5px) translateX(0.2px); }
}
.f1-img-bob { animation: photo-bob 0.4s ease-in-out infinite; }

@keyframes f1-drive         { 0% { transform: translateX(110%); } 100% { transform: translateX(-120%); } }
.f1-drive                   { animation: f1-drive 5.2s linear infinite; left: 0; }

@keyframes lane-scroll-fast { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -380; } }
.f1-lane-fast               { animation: lane-scroll-fast 1.1s linear infinite; }
@keyframes lane-scroll-slow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -200; } }
.f1-lane-slow               { animation: lane-scroll-slow 2.4s linear infinite; }

@keyframes streak-flash {
  0%   { opacity: 0; transform: translateX(40px); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-30px); }
}
.f1-streaks line { transform-origin: 0 0; animation: streak-flash 0.7s linear infinite; }

@keyframes dust-drift {
  0%   { opacity: 0; transform: translate(10px, 0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-60px, 2px); }
}
.f1-dust circle { animation: dust-drift 1.1s linear infinite; }

/* ─── Hero grid overlay ───────────────────────────────────────────────────── */

/* Fine 80px grid behind the hero text — adds depth without competing with text */
.hero-grid {
  background-image:
    linear-gradient(to right,  rgba(10,10,10,0.04)    1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,10,0.04)    1px, transparent 1px);
  background-size: 80px 80px;
}
.dark .hero-grid {
  background-image:
    linear-gradient(to right,  rgba(244,244,237,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,244,237,0.04) 1px, transparent 1px);
}