/* ============================================================
   NEWVIB ANIMATIONS & MOTION SYSTEM
   Premium, intentional, smooth interactions
   ============================================================ */

/* ── 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;
  }
  .nv-ticker__items { animation: none !important; }
  .nv-hero__slide-img { transition: none !important; }
}

/* ============================================================
   PAGE LOAD — STAGGERED REVEAL
   ============================================================ */

/* Initial state: hidden */
.nv-hero,
.nv-topbar,
.nv-header { opacity: 0; }

/* Trigger class added by JS */
.nv-loaded .nv-topbar {
  animation: nv-fade-down 0.5s var(--nv-ease-out) 0.05s both;
}
.nv-loaded .nv-header {
  animation: nv-fade-down 0.6s var(--nv-ease-out) 0.1s both;
}
.nv-loaded .nv-hero {
  animation: nv-fade-up 0.8s var(--nv-ease-out) 0.2s both;
}

/* Staggered section reveals */
.nv-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--nv-ease-out), transform 0.7s var(--nv-ease-out);
}
.nv-reveal.nv-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.nv-reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--nv-ease-out), transform 0.6s var(--nv-ease-out);
}
.nv-reveal-stagger.nv-reveal--visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.nv-reveal-stagger.nv-reveal--visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
.nv-reveal-stagger.nv-reveal--visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.16s; }
.nv-reveal-stagger.nv-reveal--visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }
.nv-reveal-stagger.nv-reveal--visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }
.nv-reveal-stagger.nv-reveal--visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }

/* ============================================================
   KEYFRAMES LIBRARY
   ============================================================ */

@keyframes nv-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nv-fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nv-scale-in {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes nv-slide-in-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes nv-slide-in-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes nv-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes nv-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes nv-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes nv-shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

@keyframes nv-progress-fill {
  from { width: 0; }
}

/* ============================================================
   LOADING SKELETON
   ============================================================ */
.nv-skeleton {
  background: linear-gradient(90deg, var(--nv-cream) 25%, var(--nv-border) 50%, var(--nv-cream) 75%);
  background-size: 400px 100%;
  animation: nv-shimmer 1.5s infinite;
  border-radius: var(--nv-radius);
}

/* ============================================================
   HEADER SCROLL STATE
   ============================================================ */
.nv-header {
  transition:
    box-shadow 0.3s var(--nv-ease),
    background 0.3s var(--nv-ease),
    backdrop-filter 0.3s var(--nv-ease);
}

/* ============================================================
   HERO SLIDE TRANSITION
   ============================================================ */
.nv-hero__slide {
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ken Burns effect on active slide image */
.nv-hero__slide--active .nv-hero__slide-img {
  animation: nv-ken-burns 8s var(--nv-ease-out) both;
}

@keyframes nv-ken-burns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* ============================================================
   POST CARD INTERACTIONS
   ============================================================ */
.nv-post-card {
  will-change: transform;
}
.nv-post-card:hover {
  transition: transform 0.35s var(--nv-ease-out), box-shadow 0.35s var(--nv-ease-out);
}
.nv-post-card__img {
  will-change: transform;
}

/* Category card */
.nv-category-card {
  will-change: transform;
}

/* Overlay card image */
.nv-post-overlay__img, .nv-editor-pick__thumb img {
  will-change: transform;
}

/* ============================================================
   NAV LINK — UNDERLINE WIPE
   ============================================================ */
.nv-nav-link { position: relative; }
.nv-nav-link::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--nv-accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s var(--nv-ease-out);
}
.nv-nav-link:hover::before,
.current-menu-item > .nv-nav-link::before { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   DROPDOWN — SMOOTH APPEAR
   ============================================================ */
.sub-menu {
  transition: opacity 0.25s var(--nv-ease), transform 0.25s var(--nv-ease-out), visibility 0.25s;
}

/* ============================================================
   CATEGORY BADGE — POP EFFECT
   ============================================================ */
.nv-cat-badge {
  transition: background 0.2s var(--nv-ease), color 0.2s var(--nv-ease), transform 0.15s var(--nv-ease-out);
}
.nv-cat-badge:hover { transform: translateY(-1px); }
.nv-cat-badge:active { transform: translateY(0); }

/* ============================================================
   BUTTON — RIPPLE & LIFT
   ============================================================ */
.nv-btn {
  position: relative; overflow: hidden;
  transition: background 0.25s var(--nv-ease), color 0.25s var(--nv-ease), transform 0.15s var(--nv-ease-out), box-shadow 0.25s var(--nv-ease);
}
.nv-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(200,57,43,0.25); }
.nv-btn:active { transform: translateY(0); box-shadow: none; }

/* ============================================================
   SOCIAL ICON — BOUNCE
   ============================================================ */
.nv-footer__social-link {
  transition: background 0.25s var(--nv-ease), border-color 0.25s var(--nv-ease), color 0.25s var(--nv-ease), transform 0.2s var(--nv-ease-out);
}

/* ============================================================
   SCROLL TO TOP — SMOOTH
   ============================================================ */
.nv-scroll-top {
  transition:
    opacity 0.3s var(--nv-ease),
    transform 0.3s var(--nv-ease-out),
    background 0.2s var(--nv-ease),
    box-shadow 0.2s var(--nv-ease);
}

/* ============================================================
   READING PROGRESS BAR GLOW
   ============================================================ */
.nv-reading-progress__bar {
  box-shadow: 0 0 8px rgba(200,57,43,0.5);
}

/* ============================================================
   SEARCH MODAL ENTRANCE
   ============================================================ */
.nv-search-modal__inner {
  transition:
    transform 0.35s var(--nv-ease-out),
    opacity 0.35s var(--nv-ease),
    box-shadow 0.35s var(--nv-ease);
}

/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */
.nv-mobile-nav__drawer {
  transition: transform 0.4s var(--nv-ease-out);
}

/* ============================================================
   TRENDING RANK — COLOR TRANSITION
   ============================================================ */
.nv-trending-item__rank {
  transition: color 0.2s var(--nv-ease), transform 0.2s var(--nv-ease-out);
}
.nv-trending-item:hover .nv-trending-item__rank { transform: scale(1.05); }

/* ============================================================
   TAG LINK — PILL EXPAND
   ============================================================ */
.nv-tag-link {
  transition: background 0.2s var(--nv-ease), color 0.2s var(--nv-ease), border-color 0.2s var(--nv-ease), padding 0.2s var(--nv-ease);
}
.nv-tag-link:hover { padding-left: 14px; padding-right: 14px; }

/* ============================================================
   WIDGET POST HOVER
   ============================================================ */
.nv-widget-post { transition: background 0.2s var(--nv-ease); border-radius: var(--nv-radius); }
.nv-widget-post:hover { background: var(--nv-cream); }
.nv-widget-post__thumb img { transition: transform 0.4s var(--nv-ease-out); }
.nv-widget-post:hover .nv-widget-post__thumb img { transform: scale(1.06); }

/* ============================================================
   COPY BUTTON SUCCESS FLASH
   ============================================================ */
.nv-share-btn--copy.nv-copied {
  background: #22c55e !important;
  color: #fff !important;
  animation: nv-copied-flash 0.3s var(--nv-ease-out);
}
@keyframes nv-copied-flash {
  0%   { transform: scale(0.95); }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ============================================================
   HERO PROGRESS BAR ANIMATION
   ============================================================ */
.nv-hero__progress-bar {
  transition: none;
}
.nv-hero__progress-bar--animated {
  transition: width linear;
}

/* ============================================================
   EDITOR PICK — HOVER LIFT
   ============================================================ */
.nv-editor-pick { transition: transform 0.35s var(--nv-ease-out), box-shadow 0.35s var(--nv-ease-out); }
.nv-editor-pick:hover { transform: translateY(-3px); box-shadow: var(--nv-shadow-lg); }

/* ============================================================
   POST OVERLAY HOVER
   ============================================================ */
.nv-post-overlay { transition: transform 0.35s var(--nv-ease-out); }
.nv-post-overlay:hover { transform: translateY(-3px); }

/* ============================================================
   FOOTER SOCIAL — SEQUENTIAL ENTRANCE (aesthetic)
   ============================================================ */
.nv-loaded .nv-footer__social-link:nth-child(1) { animation: nv-fade-up 0.5s var(--nv-ease-out) 0.1s both; }
.nv-loaded .nv-footer__social-link:nth-child(2) { animation: nv-fade-up 0.5s var(--nv-ease-out) 0.15s both; }
.nv-loaded .nv-footer__social-link:nth-child(3) { animation: nv-fade-up 0.5s var(--nv-ease-out) 0.2s both; }
.nv-loaded .nv-footer__social-link:nth-child(4) { animation: nv-fade-up 0.5s var(--nv-ease-out) 0.25s both; }
.nv-loaded .nv-footer__social-link:nth-child(5) { animation: nv-fade-up 0.5s var(--nv-ease-out) 0.3s both; }