/* ================================================================
   MENNATI RESEARCHER — MODERN 2026 ENHANCEMENTS
   Scroll-driven animations · View Transitions API · Container Queries
   Progressive enhancement — every feature has a graceful fallback.
   ================================================================ */

/* ----------------------------------------------------------------
   1. VIEW TRANSITIONS API — smooth cross-page navigation (2026 baseline)
   Falls back silently to normal navigation in unsupported browsers.
   ---------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .35s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* Named transitions for hero + nav so they morph smoothly between pages */
.nav-logo       { view-transition-name: site-logo; }
.hero-eyebrow   { view-transition-name: hero-eyebrow; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ----------------------------------------------------------------
   2. SCROLL-DRIVEN ANIMATIONS (native, GPU-cheap, no JS/IntersectionObserver)
   Supported in Chromium 2024+; degrades to the existing .reveal-on-scroll
   JS-based class toggling everywhere else (already in main.js).
   ---------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .reveal-on-scroll,
  .research-card,
  .pub-item,
  .workflow-step-item,
  .career-item {
    animation: msnFadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  @keyframes msnFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Progress-linked accent bar on the workflow timeline */
  .workflow-timeline::before {
    animation: msnGrowBar linear both;
    animation-timeline: scroll(root);
    animation-range: contain;
  }
  @keyframes msnGrowBar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* ----------------------------------------------------------------
   3. CONTAINER QUERIES — cards resize based on their own container,
   not the viewport. Makes widgets reusable in sidebars, grids, etc.
   ---------------------------------------------------------------- */
.research-grid,
.pub-list,
.invite-grid {
  container-type: inline-size;
  container-name: msn-grid;
}

@container msn-grid (max-width: 420px) {
  .research-card,
  .pub-item {
    padding: 1.1rem;
    font-size: .92em;
  }
}

/* ----------------------------------------------------------------
   4. MODERN COLOR — accent color-mix() for dynamic hover tints
   (no need for hardcoded rgba() shadows everywhere)
   ---------------------------------------------------------------- */
@supports (color: color-mix(in oklab, red, blue)) {
  .research-card:hover {
    box-shadow: 0 10px 36px color-mix(in oklab, var(--clr-teal, #0F7B6C) 18%, transparent);
  }
  .btn--primary:hover {
    box-shadow: 0 6px 20px color-mix(in oklab, var(--clr-teal, #0F7B6C) 30%, transparent);
  }
  .workflow-disclaimer {
    background: color-mix(in oklab, var(--clr-gold, #C9922A) 10%, white);
  }
}

/* ----------------------------------------------------------------
   5. :has() — smarter parent-aware states without JS
   ---------------------------------------------------------------- */
.form-group:has(.form-input:focus) .form-label,
.form-group:has(.form-textarea:focus) .form-label {
  color: var(--clr-teal, #0F7B6C);
}

.nav-menu:has(a:hover) a:not(:hover) {
  opacity: .55;
  transition: opacity .2s;
}

/* ----------------------------------------------------------------
   6. TEXT WRAP BALANCE — better heading line-breaks (2024+ baseline)
   ---------------------------------------------------------------- */
h1, h2, h3, .section-desc {
  text-wrap: balance;
}
p, .career-item__body p {
  text-wrap: pretty;
}

/* ----------------------------------------------------------------
   7. MODERN FOCUS — :focus-visible with animated outline offset
   ---------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--clr-teal, #0F7B6C);
  outline-offset: 3px;
  transition: outline-offset .15s ease;
}

/* ----------------------------------------------------------------
   8. LIGHT-DARK() — optional dark mode without duplicating variables
   Opt-in only: activated if the theme adds class="supports-dark" to <html>
   ---------------------------------------------------------------- */
@supports (color: light-dark(white, black)) {
  html.supports-dark {
    color-scheme: light dark;
  }
  html.supports-dark body {
    background: light-dark(var(--clr-paper, #F8F7F4), #0D1117);
    color: light-dark(var(--clr-ink, #0D1117), #E8EAED);
  }
}

/* ----------------------------------------------------------------
   9. CONTENT-VISIBILITY — huge paint/layout cost savings on long pages
   Browser skips rendering work for off-screen sections until scrolled near.
   ---------------------------------------------------------------- */
.career-section,
.media-section,
.footprint-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

/* ----------------------------------------------------------------
   10. ASPECT-RATIO for media — eliminates Cumulative Layout Shift (CLS)
   ---------------------------------------------------------------- */
.profile-avatar img,
.hero-portrait img,
.research-icon svg {
  aspect-ratio: 1 / 1;
}

/* ----------------------------------------------------------------
   11. PRINT STYLES — CV-style clean print of biography
   ---------------------------------------------------------------- */
@media print {
  #site-header, #site-footer, .workflow-disclaimer,
  .hero-actions, .nav-toggle, .lang-switcher, canvas { display: none !important; }
  body { background: #fff; color: #000; }
  a { text-decoration: underline; color: #000; }
}

/* ----------------------------------------------------------------
   12. ANIMATED HEADER — shimmering accent bar, orbiting nano brand-mark,
   gradient-sweep wordmark, animated nav underline. Pure CSS, GPU-cheap
   (transform/opacity only), fully progressive — degrades to a plain
   static header wherever animation/backdrop-filter aren't supported.
   ---------------------------------------------------------------- */

/* Shimmering top accent line — echoes the footer's gradient signature
   so header and footer read as one designed system. */
.header-accent-bar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2.5px;
  background: linear-gradient(90deg,
    var(--clr-teal-mid, #1A9E8C), var(--clr-gold, #C9922A),
    var(--clr-teal, #0F7B6C), var(--clr-gold, #C9922A), var(--clr-teal-mid, #1A9E8C));
  background-size: 200% 100%;
  animation: msnHeaderShimmer 7s linear infinite;
  z-index: 1;
}

@keyframes msnHeaderShimmer {
  to { background-position: -200% 0; }
}

#site-header {
  /* NOTE: position is intentionally left untouched here — it's already
     set to fixed/sticky elsewhere in the stylesheet cascade. Both
     establish a positioning context for .header-accent-bar (absolute)
     without needing to be redeclared. */
  isolation: isolate;
}

/* Soft ambient glow that drifts slowly behind the header content —
   barely perceptible, adds depth to the glass-blur bar without noise. */
#site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(340px 60px at 15% 0%, rgba(26,158,140,.14), transparent 70%),
    radial-gradient(280px 60px at 85% 100%, rgba(201,146,42,.10), transparent 70%);
  background-size: 180% 180%;
  animation: msnHeaderDrift 16s ease-in-out infinite alternate;
}

@keyframes msnHeaderDrift {
  from { background-position: 0% 0%, 100% 100%; }
  to   { background-position: 40% 20%, 60% 80%; }
}

.site-branding {
  display: flex;
  align-items: center;
}

/* Orbiting nano-particle brand mark — visually echoes the siRNA
   nanocarrier motif used in the Biological Simulation section below,
   so the header itself hints at the site's scientific subject. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-inline-end: 10px;
  flex-shrink: 0;
  line-height: 0;
}
.brand-mark__svg { width: 100%; height: 100%; overflow: visible; }
.brand-mark__orbit {
  stroke: var(--clr-teal-mid, #1A9E8C);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .55;
  transform-origin: 20px 20px;
  animation: msnOrbitSpin 9s linear infinite;
}
.brand-mark__orbit--alt {
  stroke: var(--clr-gold, #C9922A);
  stroke-dasharray: 2 4;
  opacity: .5;
  animation-duration: 6s;
  animation-direction: reverse;
}
.brand-mark__core {
  fill: var(--clr-teal, #0F7B6C);
  animation: msnCorePulse 2.6s ease-in-out infinite;
  transform-origin: 20px 20px;
}
.brand-mark__electron {
  fill: var(--clr-gold, #C9922A);
  transform-origin: 20px 20px;
  animation: msnOrbitSpin 9s linear infinite;
}
.brand-mark__electron--alt {
  animation-duration: 6s;
  animation-direction: reverse;
}

@keyframes msnOrbitSpin {
  to { transform: rotate(360deg); }
}
@keyframes msnCorePulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(15,123,108,0)); }
  50%      { transform: scale(1.18); filter: drop-shadow(0 0 4px rgba(15,123,108,.55)); }
}

/* Gradient-sweep wordmark — subtle, slow, professional (not neon) */
.site-title a,
.nav-logo {
  background-image: linear-gradient(100deg,
    var(--clr-ink, #0D1117) 40%, var(--clr-teal, #0F7B6C) 50%, var(--clr-ink, #0D1117) 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: msnWordmarkSweep 8s ease-in-out infinite;
}

@keyframes msnWordmarkSweep {
  0%, 15%  { background-position: 100% 0; }
  50%      { background-position: 0% 0; }
  85%,100% { background-position: 100% 0; }
}

/* Animated underline sweep on nav links — replaces the abrupt
   border-bottom toggle with a smooth left-to-right (or RTL-aware) grow */
.nav-menu a,
#nav-menu-list a {
  position: relative;
  border-bottom-color: transparent !important;
}
.nav-menu a::after,
#nav-menu-list a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--clr-teal-mid, #1A9E8C), var(--clr-gold, #C9922A));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
body.lang-fa .nav-menu a::after,
body.lang-fa #nav-menu-list a::after,
html[dir="rtl"] .nav-menu a::after,
html[dir="rtl"] #nav-menu-list a::after {
  transform-origin: left;
}
.nav-menu a:hover::after,
.nav-menu .current-menu-item a::after,
#nav-menu-list a:hover::after,
#nav-menu-list .current-menu-item a::after {
  transform: scaleX(1);
}

/* Header gains a slightly stronger presence once the page is scrolled —
   pairs with the existing .scrolled class toggled by main.js */
#site-header.scrolled .header-accent-bar { height: 3px; }
#site-header.scrolled .brand-mark { transform: scale(.94); transition: transform .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .header-accent-bar,
  #site-header::after,
  .brand-mark__orbit,
  .brand-mark__core,
  .brand-mark__electron,
  .site-title a,
  .nav-logo {
    animation: none !important;
  }
  .site-title a, .nav-logo {
    background: none; -webkit-text-fill-color: currentColor; color: var(--clr-ink, #0D1117);
  }
}