/* ============================================================
   KR Dev X — Base Styles (Reset + Body + Background System)
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  background: #050505;
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  animation: fadeInPage 0.4s ease-out forwards;
}

@keyframes fadeInPage {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Global Scrollbar ── */
::-webkit-scrollbar               { width: 5px; height: 5px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: rgba(255,255,255,0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover   { background: rgba(255,255,255,0.25); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) transparent; }

/* ── Typography ── */
a        { color: inherit; text-decoration: none; }
button   { font-family: var(--font-family); }
input, textarea, select { font-family: var(--font-family); }

/* ── Utility Classes ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ==================== STELLAR COMETS BACKGROUND ==================== */
.stellar-comets {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* Comet = glowing streak */
.comet {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(to top,
    rgba(255,255,255,0)   0%,
    rgba(220,230,255,0.4) 40%,
    rgba(255,255,255,1)   100%
  );
  transform: rotate(55deg);
  animation: cometRiseRight linear infinite;
  animation-fill-mode: both;
  transform-origin: center center;
  box-shadow: 2px -2px 10px rgba(255,255,255,0.3);
  /* GPU hints: promote to its own compositor layer so the animation never
     triggers layout/paint of the page content behind it */
  will-change: transform, opacity;
}

/* PERF (2026-09-02): on devices that struggle (low-end phones, 4+ years old
   laptops) the 12 comets + rotating star field + glow pulse stack up and
   cause scroll jank. `update: reduce` (iOS 13+/Android 13+ automatically
   signals it on weak hardware) pauses ALL decorative background animations.
   The site content is unaffected — only the ambient eye-candy stops. */
@media (prefers-reduced-transparency: reduce), (update: slow) {
  .comet, .stellar-comets::before, .stellar-comets::after {
    animation: none !important;
  }
}

.comet:nth-child(1)  { width:2px; height:120px; top:110%; left:0%;   animation-duration:4s;   animation-delay:0s;   opacity:0.85; filter:blur(0.5px); }
.comet:nth-child(2)  { width:1px; height:80px;  top:90%;  left:-10%; animation-duration:6s;   animation-delay:1.4s; opacity:0.6;  filter:blur(1px);   }
.comet:nth-child(3)  { width:2px; height:150px; top:120%; left:15%;  animation-duration:5s;   animation-delay:3.2s; opacity:0.75; filter:blur(0px);   }
.comet:nth-child(4)  { width:1px; height:70px;  top:100%; left:-5%;  animation-duration:7s;   animation-delay:0.6s; opacity:0.55; filter:blur(1.5px); }
.comet:nth-child(5)  { width:2px; height:100px; top:80%;  left:-15%; animation-duration:5.5s; animation-delay:2.1s; opacity:0.8;  filter:blur(0.5px); }
.comet:nth-child(6)  { width:1px; height:60px;  top:115%; left:25%;  animation-duration:8s;   animation-delay:4.5s; opacity:0.5;  filter:blur(1px);   }
.comet:nth-child(7)  { width:2px; height:130px; top:105%; left:10%;  animation-duration:6.5s; animation-delay:1.0s; opacity:0.9;  filter:blur(0px);   }
.comet:nth-child(8)  { width:1px; height:90px;  top:70%;  left:-20%; animation-duration:7.5s; animation-delay:3.8s; opacity:0.6;  filter:blur(1px);   }
.comet:nth-child(9)  { width:2px; height:110px; top:130%; left:5%;   animation-duration:10s;  animation-delay:5.5s; opacity:0.5;  filter:blur(1.5px); }
.comet:nth-child(10) { width:2px; height:160px; top:95%;  left:20%;  animation-duration:4.5s; animation-delay:2.7s; opacity:0.9;  filter:blur(0px);   }
.comet:nth-child(11) { width:1px; height:75px;  top:125%; left:35%;  animation-duration:9s;   animation-delay:6.2s; opacity:0.55; filter:blur(1px);   }
.comet:nth-child(12) { width:2px; height:95px;  top:85%;  left:-5%;  animation-duration:8.5s; animation-delay:0.9s; opacity:0.7;  filter:blur(0.5px); }

@keyframes cometRiseRight {
  0%   { transform: rotate(55deg) translateY(0);       opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: rotate(55deg) translateY(-250vh);  opacity: 0; }
}

/* Stars Background */
.stellar-comets::before {
  content: '';
  position: absolute;
  inset: -50%;
  background-image:
    radial-gradient(1px 1px     at 10% 20%, #8B5CF6 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 60%, #A78BFA 100%, transparent 100%),
    radial-gradient(2px 2px     at 55% 15%, #ffffff 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 80%, #8B5CF6 100%, transparent 100%),
    radial-gradient(1px 1px     at 90% 35%, #EDE9FE 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 90%, #A78BFA 100%, transparent 100%),
    radial-gradient(2px 2px     at 48% 50%, #ffffff 100%, transparent 100%),
    radial-gradient(1px 1px     at 65% 45%, #ffffff 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 10%, #6D28D9 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 5%  70%, #8B5CF6 100%, transparent 100%),
    radial-gradient(2px 2px     at 40% 30%, #EDE9FE 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 60%, #A78BFA 100%, transparent 100%),
    radial-gradient(1px 1px     at 15% 40%, #ffffff 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 50%, #8B5CF6 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 85%, #A78BFA 100%, transparent 100%),
    radial-gradient(2px 2px     at 25% 15%, #ffffff 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 95% 75%, #EDE9FE 100%, transparent 100%),
    radial-gradient(1px 1px     at 35% 95%, #8B5CF6 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 25%, #6D28D9 100%, transparent 100%),
    radial-gradient(1px 1px     at 10% 80%, #A78BFA 100%, transparent 100%),
    radial-gradient(1px 1px     at 5%  5%,  #EDE9FE 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 8%,  #ffffff 100%, transparent 100%),
    radial-gradient(2px 2px     at 45% 20%, #EDE9FE 100%, transparent 100%),
    radial-gradient(1px 1px     at 50% 65%, #ffffff 100%, transparent 100%),
    radial-gradient(2px 2px     at 65% 15%, #8B5CF6 100%, transparent 100%),
    radial-gradient(2px 2px     at 80% 90%, #ffffff 100%, transparent 100%),
    radial-gradient(1px 1px     at 85% 55%, #8B5CF6 100%, transparent 100%),
    radial-gradient(2px 2px     at 42% 8%,  #ffffff 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 4%,  #8B5CF6 100%, transparent 100%),
    radial-gradient(2px 2px     at 82% 72%, #EDE9FE 100%, transparent 100%);
  pointer-events: none;
  animation: starRotation 240s linear infinite;
  transform-origin: center center;
  /* GPU layer promotion: keeps the huge rotating field off the main
     paint path — scroll stays smooth even while it rotates. */
  will-change: transform;
}

@keyframes starRotation {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

/* Ambient Pulsing Glow */
.stellar-comets::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(139,92,246,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 80% 30%, rgba(217,119,6,0.03)  0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 60% 80%, rgba(139,92,246,0.02) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 8s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ==================== GRID OVERLAY ==================== */
.grid-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 35px 35px;
  opacity: 0.10;
}

/* ==================== TOAST CONTAINER ==================== */
#toastContainer {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  background: rgba(20, 20, 22, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.25rem;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--glass-blur);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  pointer-events: auto;
  animation: toastIn 0.3s ease;
  max-width: 340px;
}

.toast.success { border-left: 3px solid #22c55e; }
.toast.error   { border-left: 3px solid #ef4444; }
.toast.info    { border-left: 3px solid #8B5CF6; }
.toast.warning { border-left: 3px solid #f59e0b; }

.toast-out { animation: toastOut 0.3s ease forwards; }

@keyframes toastIn  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0);    } to { opacity: 0; transform: translateX(40px); } }

/* ==================== PAGE TRANSITION FADE ==================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ==================== SPIN ANIMATION ==================== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==================== CLICK RIPPLE ==================== */
.click-ripple {
  position: fixed;
  border-radius: 50%;
  border: 2px solid #8B5CF6;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: rippleAnim 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  z-index: 9998;
}

@keyframes rippleAnim {
  0%   { width:10px;  height:10px;  opacity:1; border-width:3px; }
  100% { width:120px; height:120px; opacity:0; border-width:0px; }
}

/* ==================== REVEAL ON SCROLL ==================== */
.reveal-on-scroll {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-on-scroll.revealed,
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}