/* =========================================================================
   NOVAFLOW — Global Styles
   Rebrand by editing the :root variables below. Nothing else needs to change.
   ========================================================================= */

:root {
  /* --- Brand palette (edit these to rebrand) --- */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;   /* primary */
  --brand-700: #4338ca;
  --brand-900: #312e81;

  --accent-500: #10b981;  /* emerald accent */
  --accent-600: #059669;

  /* --- Neutrals --- */
  --bg-light:   #f8fafc;
  --bg-dark:    #020617;
  --surface-light:#ffffff;
  --surface-dark: #0f172a;
  --text-light: #1e293b;
  --text-dark:  #e2e8f0;

  /* --- Radii & shadows --- */
  --radius: 1rem;            /* 16px rounded cards */
  --radius-sm: 0.75rem;      /* 12px buttons */
  --shadow-soft: 0 10px 30px -12px rgb(79 70 229 / 0.25);

  /* --- Motion --- */
  --reveal-duration: 600ms;
  --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================================
   Base
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; }
body { font-feature-settings: "cv11", "ss01"; }

/* Focus ring — WCAG visible focus indicator */
:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   Hero animated background
   Two soft gradient blobs that drift slowly. GPU-composited only.
   ========================================================================= */
.hero-bg {
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(99,102,241,0.18), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(16,185,129,0.14), transparent 60%),
    radial-gradient(ellipse 60% 60% at 50% 100%, rgba(79,70,229,0.10), transparent 60%);
  animation: heroDrift 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1.05); }
}

/* Dark mode — dimmer, cooler version */
.dark .hero-bg {
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(99,102,241,0.28), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(16,185,129,0.20), transparent 60%),
    radial-gradient(ellipse 60% 60% at 50% 100%, rgba(79,70,229,0.18), transparent 60%);
}

/* =========================================================================
   Scroll reveal (driven by IntersectionObserver in main.js)
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* =========================================================================
   FAQ accordion (native <details>) — smooth open animation
   ========================================================================= */
details[open] > summary + * {
  animation: fadeInDown 260ms ease-out;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Remove default marker in Safari */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* =========================================================================
   Project cards — smooth hover lift
   ========================================================================= */
.project-card {
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.project-card:hover { transform: translateY(-4px); }
.project-card.is-hidden { display: none; }

/* Filter chips active state */
.filter-btn { transition: all 200ms ease; }
.filter-btn[aria-selected="true"] {
  background: var(--brand-600) !important;
  color: #fff !important;
}

/* =========================================================================
   Modal — smooth fade + scale
   ========================================================================= */
#projectModal:not(.hidden) {
  animation: modalIn 200ms ease-out;
}
#projectModal:not(.hidden) > div {
  animation: modalPanelIn 260ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes modalIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPanelIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Print styles — clean invoices/marketing PDF export
   ========================================================================= */
@media print {
  header, footer, .hero-bg, button, #themeToggle { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}