/* Modern Portfolio Styles & Animations */

/* Shared Resets */
::selection { background-color: #3b82f6; color: #fff; }
a:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 2px; }
a { text-underline-offset: 3px; }
h1, h2 { text-wrap: balance; }

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Scroll-Driven Animation Utility */
.reveal-on-scroll {
  /* Native SDA */
  animation-name: reveal-up;
  animation-fill-mode: both;
  animation-timeline: view();
  /* Reveal earlier: starts when element enters, finishes quickly */
  animation-range: entry 5% entry 80%;
}

.reveal-on-load {
  animation: reveal-up 0.6s cubic-bezier(0, 0, 0.2, 1) both;
}

.reveal-delay-100 { animation-delay: 100ms; }
.reveal-delay-200 { animation-delay: 200ms; }
.reveal-delay-300 { animation-delay: 300ms; }

/* Fallback for browsers without SDA (Firefox/Old Safari) */
@supports not (animation-timeline: view()) {
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1), transform 0.6s cubic-bezier(0, 0, 0.2, 1);
  }

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

/* Form Success/Status Messages with @starting-style */
.status-msg {
  display: inline-block;
  opacity: 1;
  transform: scale(1);
  transition: 
    display 0.4s allow-discrete,
    opacity 0.4s ease-out,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@starting-style {
  .status-msg {
    opacity: 0;
    transform: scale(0.9);
  }
}

.status-msg.hidden {
  display: none;
  opacity: 0;
  transform: scale(0.9);
}

/* Glassmorphism utility - Vanilla CSS (No @apply) */
.glass-card {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dark .glass-card {
  background-color: rgba(39, 39, 42, 0.7);
}

/* Sticky Header Scrolled Border styling */
header.scrolled { border-color: rgba(228, 228, 231, 0.7); }
.dark header.scrolled { border-color: rgba(63, 63, 70, 0.7); }