/* ============================================================
   AARTUX — CROSS-BROWSER COMPATIBILITY (compat.css)
   ============================================================
   This file loads LAST and provides:
   - Safari fallbacks (aspect-ratio, backdrop-filter, gap in flex)
   - Firefox fixes (scrollbar, backdrop-filter)
   - Edge/IE legacy fixes
   - Safe area insets (iPhone notch)
   - Print styles
   - Reduced motion support
   - Performance hints (will-change, contain)
   ============================================================ */

/* ── Safari: aspect-ratio fallback (< 15) ── */
@supports not (aspect-ratio: 4 / 3) {
  .work-card {
    height: 0;
    padding-bottom: 75%; /* 4:3 ratio fallback */
  }
  .hero-orb {
    height: 0;
    padding-bottom: 100%; /* 1:1 ratio fallback */
  }
}

/* ── Safari: gap in flex fallback (< 14.1) ── */
@supports not (gap: 1rem) {
  .hero-cta > * + *,
  .hero-badges > * + *,
  .filter-tabs > * + *,
  .contact-socials > * + *,
  .certifications-badges > * + *,
  .testimonials-dots > * + *,
  .modal-tags > * + *,
  .modal-cta > * + * {
    margin-left: 0.75rem;
  }
  .nav-links > * + * {
    margin-left: 2.5rem;
  }
  .form-row > * + * {
    margin-left: 1rem;
  }
}

/* ── Firefox: backdrop-filter fallback ── */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav {
    background: rgba(10, 10, 10, 0.95);
  }
  .modal-overlay {
    background: rgba(0, 0, 0, 0.95);
  }
  .work-badge {
    background: rgba(0, 0, 0, 0.85);
  }
}

/* ── Firefox: scrollbar styling ── */
@-moz-document url-prefix() {
  .testimonial-quote {
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
  }
  .testimonials-track {
    scrollbar-width: none;
  }
}

/* ── Safari: smooth scroll polyfill hint ── */
@supports not (scroll-behavior: smooth) {
  html {
    /* JS handles smooth scrolling as fallback */
  }
}

/* ── Performance: will-change for animated elements ── */
.hero-orb,
.hero-profile {
  will-change: transform;
}

.hero-visual::before,
.hero-visual::after {
  will-change: transform;
}

.reveal {
  will-change: opacity, transform;
}

.reveal.visible {
  will-change: auto; /* Release after animation completes */
}

.nav {
  will-change: border-color;
}

.marquee-inner {
  will-change: transform;
}

/* ── Performance: contain for isolated components ── */
.work-card {
  contain: layout style;
}

.testimonial-slide {
  contain: layout;
}

/* ── Safe Area Insets (iPhone notch, Dynamic Island) ── */
@supports (padding: env(safe-area-inset-top)) {
  .nav {
    padding-top: max(1.25rem, env(safe-area-inset-top));
    padding-left: max(var(--s-page), env(safe-area-inset-left));
    padding-right: max(var(--s-page), env(safe-area-inset-right));
  }
  footer {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    padding-left: max(var(--s-page), env(safe-area-inset-left));
    padding-right: max(var(--s-page), env(safe-area-inset-right));
  }
  .back-to-top {
    bottom: max(2rem, env(safe-area-inset-bottom));
    right: max(2rem, env(safe-area-inset-right));
  }
  .form-toast {
    bottom: max(2rem, env(safe-area-inset-bottom));
  }
}

/* ── Reduced Motion: respect user preference ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-orb { animation: none; filter: none; }
  .hero-profile { animation: none; }
  .hero-visual::before,
  .hero-visual::after { animation: none; }
  .marquee-inner { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ── High Contrast Mode (Windows) ── */
@media (forced-colors: active) {
  .btn-primary {
    border: 2px solid ButtonText;
  }
  .nav-links a.active::after {
    background: LinkText;
  }
  .work-card {
    border: 2px solid CanvasText;
  }
}

/* ── Print Styles ── */
@media print {
  .nav,
  .cursor-glow,
  .back-to-top,
  .form-toast,
  .hero-visual,
  .marquee,
  .certifications,
  .modal-overlay {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  body::after {
    display: none !important;
  }
  section {
    padding: 2rem 0 !important;
    page-break-inside: avoid;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  .work-card {
    break-inside: avoid;
  }
}

/* ── Edge: scrollbar gutter stability ── */
@supports (scrollbar-gutter: stable) {
  html {
    scrollbar-gutter: stable;
  }
}

/* ── Safari: fix 100vh on mobile (address bar issue) ── */
@supports (-webkit-touch-callout: none) {
  .hero {
    min-height: -webkit-fill-available;
  }
}

/* ── Focus visible: keyboard navigation only ── */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── Selection color ── */
::selection {
  background: var(--c-accent);
  color: var(--c-bg);
}

::-moz-selection {
  background: var(--c-accent);
  color: var(--c-bg);
}