/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: var(--radius-full);
  opacity: 0.6;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) transparent;
}

/* ============================================
   SCROLL PROGRESS BAR
   ============================================ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--accent-primary),
    var(--accent-subtle)
  );
  z-index: 200;
  transition: width 0.1s linear;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* ============================================
   PAGE TRANSITION (fade)
   ============================================ */

.page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg-base);
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--transition-ease);
}

.page-transition.fade-out {
  opacity: 1;
}

/* ============================================
   HERO NAME – ANIMATED GRADIENT
   (applies to both the h1 and GSAP-generated spans)
   ============================================ */

/* Vor GSAP-Split: Gradient direkt auf h1 */
.hero__name {
  background: linear-gradient(
    135deg,
    var(--text-primary) 0%,
    var(--accent-subtle) 40%,
    var(--accent-primary) 60%,
    var(--text-primary) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}

/* Nach GSAP-Split: Gradient auf jeden Span */
.hero__name span {
  background: linear-gradient(
    135deg,
    var(--text-primary) 0%,
    var(--accent-subtle) 40%,
    var(--accent-primary) 60%,
    var(--text-primary) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ============================================
   CARD TILT (3D hover – handled via JS)
   ============================================ */

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  will-change: transform;
}

.tilt-card:hover {
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

/* Subtle inner glow that follows the tilt */
.tilt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--accent-glow-md),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.tilt-card:hover::before {
  opacity: 1;
}

/* ============================================
   MAGNETIC BUTTON
   ============================================ */

.btn {
  /* JS adds inline transform; ensure smooth return */
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.3s var(--transition-ease),
              background-color 0.3s var(--transition-ease),
              border-color 0.3s var(--transition-ease),
              filter 0.3s var(--transition-ease);
}

/* ============================================
   STAGGERED REVEAL for grid children
   ============================================ */

.projects__grid .reveal:nth-child(1) { transition-delay: 0.05s; }
.projects__grid .reveal:nth-child(2) { transition-delay: 0.15s; }
.projects__grid .reveal:nth-child(3) { transition-delay: 0.25s; }

/* ============================================
   SECTION DIVIDER – animated gradient line
   ============================================ */

.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-primary),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
  opacity: 0.4;
  border: none;
  margin: 0;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================
   FLOATING LABEL in contact form
   ============================================ */

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
  color: var(--accent-primary);
}

/* ============================================
   BLOB – extra smoothness
   ============================================ */

.blob {
  transition: opacity 0.5s ease;
}

/* ============================================
   LINK UNDERLINE SLIDE (contact links etc.)
   ============================================ */

.contact-link span:last-child {
  position: relative;
}

.contact-link span:last-child::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent-primary);
  transition: width 0.3s var(--transition-ease);
}

.contact-link:hover span:last-child::after {
  width: 100%;
}