:root {
  --ip-primary: #1d4ed8;
  --ip-primary-dark: #1e40af;
  --ip-primary-ring: rgba(29, 78, 216, 0.32);
  --ip-accent-soft: rgba(29, 78, 216, 0.12);
  --ip-ink: #0f172a;
  --ip-surface: #f8fafc;
  --ip-muted: #475569;
  --ip-footer-fg: #cbd5e1;
  --ip-font-body: "DM Sans", system-ui, sans-serif;
  --ip-font-display: "Fraunces", Georgia, serif;
  --ip-radius: 12px;
  --ip-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  --ip-transition: 0.3s ease;
}

body.interactive-portfolio {
  font-family: var(--ip-font-body);
  color: var(--ip-ink);
  background-color: var(--ip-surface);
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 1080;
  padding: 0.5rem 1rem;
  background: var(--ip-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
}

.skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

@keyframes icon-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.85;
  }
}

.ip-nav-brand .fa-layer-group {
  animation: icon-pulse 2.5s ease-in-out infinite;
  color: var(--ip-primary);
}

@media (prefers-reduced-motion: reduce) {
  .ip-nav-brand .fa-layer-group {
    animation: none;
  }
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate {
  animation: hero-fade-up 0.9s ease forwards;
}

.hero-animate-delay {
  animation: hero-fade-up 0.9s ease 0.15s forwards;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-animate,
  .hero-animate-delay {
    animation: none;
    opacity: 1;
  }
}

.about-grid-named {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "photo"
    "copy"
    "accordion";
}

@media (min-width: 992px) {
  .about-grid-named {
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas:
      "photo copy"
      "accordion accordion";
  }
}

.about-grid-named .about-photo {
  grid-area: photo;
}

.about-grid-named .about-copy {
  grid-area: copy;
}

.about-grid-named .about-accordion {
  grid-area: accordion;
}

.ip-project-card:has(a:hover) {
  border-color: var(--ip-primary);
  box-shadow: var(--ip-shadow);
}

.ip-project-card {
  transition:
    border-color var(--ip-transition),
    box-shadow var(--ip-transition),
    transform var(--ip-transition);
}

.ip-project-card:hover {
  transform: translateY(-4px) scale(1.01);
}

.ip-project-grid .ip-project-card:nth-child(3n + 1) .ip-card-img {
  border-bottom: 3px solid var(--ip-primary);
}

.ip-skills-grid > div:nth-child(odd) .ip-progress-bar {
  background: linear-gradient(90deg, var(--ip-primary-dark), var(--ip-primary)) !important;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-timeline {
      animation: hero-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
}

.contact-social a {
  transition: color var(--ip-transition), transform var(--ip-transition);
}

.contact-social a:hover {
  transform: scale(1.15) rotate(-3deg);
  color: var(--ip-primary) !important;
}

.site-footer-ip {
  border-top-width: 3px;
}

.ip-details[open] > summary {
  background-color: var(--ip-accent-soft);
  color: var(--ip-ink);
}

.ip-input:focus {
  border-color: var(--ip-primary);
  box-shadow: 0 0 0 3px var(--ip-primary-ring);
}