/* ============================================================
   Dr. Alexandru-Rareș Stoian – Scroll Animations
   css/animations.css · © 2026
   Ton medical: sobru, precis, elegant — fără flash-uri
   ============================================================ */

/* ── BASE: elementele pornesc invizibile ── */
.anim-fade-up,
.anim-fade-left,
.anim-fade-right,
.anim-fade-in,
.anim-line,
.anim-counter {
  opacity: 0;
  will-change: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-property: opacity, transform;
  transition-duration: 0.75s;
}

/* Fade + urcare subtilă — pentru titluri, paragrafe */
.anim-fade-up   { transform: translateY(22px); }

/* Intrare din stânga — pentru coloana de text */
.anim-fade-left { transform: translateX(-24px); }

/* Intrare din dreapta — pentru coloana de imagini */
.anim-fade-right{ transform: translateX(24px); }

/* Simplu fade — pentru elemente grid */
.anim-fade-in   { transform: none; }

/* Linie care se extinde — pentru dividers, quote banner */
.anim-line      { transform: scaleX(0); transform-origin: left center; }

/* ── STARE VIZIBILĂ (adăugată de JS) ── */
.anim-fade-up.in-view,
.anim-fade-left.in-view,
.anim-fade-right.in-view,
.anim-fade-in.in-view,
.anim-line.in-view,
.anim-counter.in-view {
  opacity: 1;
  transform: none;
}

/* ── STAGGER: întârzieri pentru grid-uri ── */
.stagger > *:nth-child(1)  { transition-delay: 0s; }
.stagger > *:nth-child(2)  { transition-delay: 0.08s; }
.stagger > *:nth-child(3)  { transition-delay: 0.16s; }
.stagger > *:nth-child(4)  { transition-delay: 0.24s; }
.stagger > *:nth-child(5)  { transition-delay: 0.32s; }
.stagger > *:nth-child(6)  { transition-delay: 0.40s; }
.stagger > *:nth-child(7)  { transition-delay: 0.48s; }
.stagger > *:nth-child(8)  { transition-delay: 0.56s; }

/* ── DURATĂ mai lungă pentru titluri principale ── */
.anim-fade-up.slow  { transition-duration: 1s; }
.anim-fade-in.slow  { transition-duration: 1s; }

/* ── ANIMAȚIE SPECIALĂ: linie de accent (aurie) ── */
.accent-line {
  display: block;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  margin: 1.5rem 0;
}
.accent-line.in-view { width: 60px; }

/* ── QUOTE BANNER: intrare elegantă ── */
.quote-banner .quote-text {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease 0.2s, transform 0.9s cubic-bezier(0.22,0.61,0.36,1) 0.2s;
}
.quote-banner.in-view .quote-text {
  opacity: 1;
  transform: none;
}
.quote-banner .quote-attr {
  opacity: 0;
  transition: opacity 0.7s ease 0.6s;
}
.quote-banner.in-view .quote-attr {
  opacity: 1;
}

/* ── TIMELINE: punct auriu pulsează la intrare ── */
.tl-item::before {
  transition: box-shadow 0.4s ease, background 0.3s;
}
.tl-item.in-view::before {
  box-shadow: 0 0 0 6px rgba(184,154,90,0.15), 0 0 0 3px rgba(184,154,90,0.25);
}

/* ── STATS HERO: număr care apare (counter JS) ── */
.stat-num {
  transition: opacity 0.6s ease;
}

/* ── NAV: linie subtilă sub link-ul activ ── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

/* ── CARD HOVER: ridicare fină ── */
.about-card,
.cert-item,
.assoc-item,
.comp-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s, background 0.35s;
}
.about-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(184,154,90,0.10);
}
.cert-item:hover {
  transform: translateY(-1px);
}

/* ── MEDIA THUMB: overlay auriu discret la hover ── */
.media-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color 0.4s;
  pointer-events: none;
  z-index: 2;
}
.media-thumb:hover::after {
  border-color: rgba(184,154,90,0.35);
}

/* ── FOTO: margine aurie la hover ── */
.about-photo-main,
.exp-photo,
.contact-photo {
  transition: box-shadow 0.4s ease;
}
.about-photo-main:hover,
.exp-photo:hover {
  box-shadow: 0 0 0 2px rgba(184,154,90,0.3);
}

/* ── FOOTER: fade in ── */
footer {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
footer.in-view {
  opacity: 1;
  transform: none;
}

/* ── REDUCED MOTION: respect preferinte sistem ── */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-fade-left,
  .anim-fade-right,
  .anim-fade-in,
  .anim-line,
  .quote-banner .quote-text,
  .quote-banner .quote-attr,
  footer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .accent-line { width: 60px; }
}