/* ════════════════════════════════════════════════════════════════
   ANIMATIONS — PrimeMilf
   All transforms & opacity only → GPU-accelerated, 60fps
   Follows prefers-reduced-motion at the bottom.
════════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ─────────────────────────────────────────────── */

@keyframes pm-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pm-scale-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pm-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(.93); }
  75%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes pm-ripple {
  from { transform: scale(0); opacity: .45; }
  to   { transform: scale(3.5); opacity: 0; }
}
@keyframes pm-glow-pulse {
  0%, 100% { text-shadow: 0 0 8px rgba(255,0,170,.4); }
  50%       { text-shadow: 0 0 22px rgba(255,0,170,.9), 0 0 40px rgba(192,38,211,.5); }
}
@keyframes pm-shimmer {
  from { transform: translateX(-100%) skewX(-15deg); }
  to   { transform: translateX(220%) skewX(-15deg); }
}
@keyframes pm-badge-in {
  from { opacity: 0; transform: scale(.6) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pm-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pm-hero-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pm-star-fill {
  from { transform: scale(1); }
  35%  { transform: scale(1.5); }
  to   { transform: scale(1); }
}
@keyframes pm-sort-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes pm-spinner {
  to { transform: rotate(360deg); }
}
@keyframes pm-page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pm-neon-border {
  0%, 100% { box-shadow: 0 0 4px rgba(255,0,170,.2); }
  50%       { box-shadow: 0 0 12px rgba(255,0,170,.5), 0 0 24px rgba(192,38,211,.2); }
}

/* ── P1: BUTTON INTERACTIONS ───────────────────────────────── */

/* All interactive buttons: pop on click */
.cat-btn,
.sort-btn,
.section-see-all,
.page-btn,
.age-gate-enter,
.nav-more-btn {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Ripple element injected by JS */
.pm-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  width: 40px; height: 40px;
  margin-top: -20px; margin-left: -20px;
  pointer-events: none;
  animation: pm-ripple .55s ease-out forwards;
  z-index: 10;
}

/* Category button active: glow ring */
.cat-btn.active {
  box-shadow: 0 0 0 2px rgba(255,0,170,.35), 0 0 14px rgba(255,0,170,.25);
  animation: pm-neon-border 2.4s ease-in-out infinite;
}

/* Category button click pop */
.cat-btn:active { transform: scale(.93); }

/* Sort button underline slide */
.sort-btn {
  transition: color .18s, background .18s, border-color .18s, transform .12s;
}
.sort-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
  border-radius: 1px;
}
.sort-btn.active::after,
.sort-btn:hover::after { transform: scaleX(1); }
.sort-btn:active { transform: scale(.94); }

/* "See all →" arrow nudge */
.section-see-all {
  transition: border-color .18s, color .18s, transform .18s, letter-spacing .18s;
}
.section-see-all:hover {
  letter-spacing: .04em;
}

/* Age gate enter button */
.age-gate-enter {
  transition: opacity .15s, transform .15s, box-shadow .18s;
}
.age-gate-enter:hover {
  box-shadow: 0 0 20px rgba(255,0,170,.5), 0 4px 16px rgba(0,0,0,.4);
}
.age-gate-enter:active { transform: scale(.96); }

/* ── P2: CARD ANIMATIONS ───────────────────────────────────── */

/* Card hover: lift + glow */
.vcard {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1),
              border-color .18s ease,
              box-shadow .2s ease;
  will-change: transform;
}
.vcard:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,0,170,.15);
  border-color: rgba(255,0,170,.3);
}
.vcard:active { transform: scale(.97); transition-duration: .08s; }

/* Thumbnail shine sweep on hover */
.vcard-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,255,255,.08) 50%,
    transparent 80%
  );
  transform: translateX(-100%) skewX(-15deg);
  pointer-events: none;
  z-index: 3;
}
.vcard:hover .vcard-thumb::after {
  animation: pm-shimmer .55s ease forwards;
}

/* Card staggered pop-in — JS adds .pm-card-anim to each card */
.pm-card-anim {
  opacity: 0;
  animation: pm-fade-up .38s ease forwards;
}

/* Badge entrance */
.badge-pick,
.badge-hot,
.badge-quality {
  animation: pm-badge-in .3s cubic-bezier(.34,1.56,.64,1) both;
}

/* Homepage sections fade+slide up — JS adds .pm-section-visible */
.section-row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s ease, transform .45s ease;
}
.section-row.pm-section-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Safety net: once main-content is sections-ready, never leave rows invisible */
#main-content.sections-ready .section-row {
  opacity: 1;
  transform: translateY(0);
}

/* ── P3: NAV ANIMATIONS ────────────────────────────────────── */

/* More dropdown slide+fade */
#nav-dropdown-portal {
  animation: none;
}
#nav-dropdown-portal.open {
  animation: pm-slide-down .22s cubic-bezier(.4,0,.2,1) both;
}

/* Search input focus glow */
.nav-search input {
  transition: border-color .2s, width .25s cubic-bezier(.4,0,.2,1),
              box-shadow .2s;
}
.nav-search input:focus {
  box-shadow: 0 0 0 2px rgba(255,0,170,.2), 0 0 14px rgba(255,0,170,.1);
}

/* Logo loading glow */
.loading-logo {
  animation: pm-glow-pulse 1.8s ease-in-out infinite;
}

/* ── P4: HERO GRADIENT SHIFT ───────────────────────────────── */

.home-hero {
  background-size: 200% 200%;
  animation: pm-hero-gradient 8s ease infinite;
}

/* ── P5: PAGE / MODE TRANSITIONS ───────────────────────────── */

/* Grid section appears */
#grid-section {
  animation: none;
}
#grid-section.pm-grid-entering {
  animation: pm-page-in .35s ease both;
}

/* Pagination buttons */
.page-btn {
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.page-btn:hover { transform: translateY(-1px); }
.page-btn:active { transform: scale(.92); }

/* ── P6: STARS HOVER FILL ──────────────────────────────────── */

.vcard-stars:hover .s {
  animation: pm-star-fill .25s ease;
  color: #FFD700;
}
.vcard-stars:hover .s.empty { color: rgba(255,215,0,.35); }

/* ── SCROLL-TRIGGERED (JS IntersectionObserver) ────────────── */
/* Sections start invisible; .pm-section-visible applied by observer */

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .section-row {
    opacity: 1 !important;
    transform: none !important;
  }
}