/* ==========================================================
   PE_ORIGINALS — animations.css
   Keyframes, reveal utilities, and animation classes
   (anime.js drives scroll & stagger in js/animations.js;
    these CSS utilities cover micro-interactions)
   ========================================================== */

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-44px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(44px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes floatYSoft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(1.2deg); }
}
@keyframes scrollWheel {
  0%   { opacity: 1; transform: translate(-50%, 0); }
  70%  { opacity: 0; transform: translate(-50%, 10px); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.25); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.25); }
  70%      { transform: scale(1); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -24px) scale(1.1); }
  66%      { transform: translate(-22px, 18px) scale(0.94); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 111, 125, 0.4); }
  100% { box-shadow: 0 0 0 18px rgba(217, 111, 125, 0); }
}
@keyframes bounceArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ── Utility animation classes ─────────────────────────── */
.anim-fade-in     { animation: fadeIn .7s ease both; }
.anim-fade-in-up  { animation: fadeInUp .8s cubic-bezier(0.16,1,0.3,1) both; }
.anim-fade-in-down{ animation: fadeInDown .7s cubic-bezier(0.16,1,0.3,1) both; }
.anim-scale-in    { animation: scaleIn .65s cubic-bezier(0.16,1,0.3,1) both; }
.anim-slide-left  { animation: slideInLeft .75s cubic-bezier(0.16,1,0.3,1) both; }
.anim-slide-right { animation: slideInRight .75s cubic-bezier(0.16,1,0.3,1) both; }
.anim-float       { animation: floatY 5s ease-in-out infinite; }
.anim-float-soft  { animation: floatYSoft 7s ease-in-out infinite; }
.anim-pulse       { animation: pulseSoft 2.4s ease-in-out infinite; }
.anim-heartbeat   { animation: heartbeat 1.6s ease-in-out infinite; }
.anim-spin-slow   { animation: spinSlow 22s linear infinite; }
.anim-ring-pulse  { animation: ringPulse 2s ease-out infinite; }
.anim-bounce-arrow{ animation: bounceArrow 1.6s ease-in-out infinite; }

/* Delay helpers (used with anime.js fallbacks & CSS anims) */
.delay-1 { animation-delay: .12s; }
.delay-2 { animation-delay: .24s; }
.delay-3 { animation-delay: .36s; }
.delay-4 { animation-delay: .48s; }
.delay-5 { animation-delay: .6s; }
.delay-6 { animation-delay: .72s; }

/* ── Scroll reveal base (JS adds .in-view) ─────────────── */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .85s cubic-bezier(0.16,1,0.3,1),
              transform .85s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-left  { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal-scale { transform: scale(0.92); }
.reveal-left.in-view, .reveal-right.in-view, .reveal-scale.in-view { transform: translateX(0) scale(1); }

/* Stagger helpers — children animate after parent reveals */
.stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1); }
.stagger.in-view > * { opacity: 1; transform: translateY(0); }
.stagger.in-view > *:nth-child(1) { transition-delay: .05s; }
.stagger.in-view > *:nth-child(2) { transition-delay: .12s; }
.stagger.in-view > *:nth-child(3) { transition-delay: .19s; }
.stagger.in-view > *:nth-child(4) { transition-delay: .26s; }
.stagger.in-view > *:nth-child(5) { transition-delay: .33s; }
.stagger.in-view > *:nth-child(6) { transition-delay: .4s; }
.stagger.in-view > *:nth-child(7) { transition-delay: .47s; }
.stagger.in-view > *:nth-child(8) { transition-delay: .54s; }

/* ── Marquee ───────────────────────────────────────────── */
.marquee-wrap { overflow: hidden; background: var(--blush-50); border-block: 1px solid var(--blush-100); }
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
  padding: 18px 0;
}
.marquee:hover { animation-play-state: paused; }
.marquee-item {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blush-500);
}
.marquee-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blush-300); flex: none; }

/* ── Shimmer skeleton ──────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, #f7f4f5 25%, #fdeef0 50%, #f7f4f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

/* ── Hero decorative blobs ─────────────────────────────── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: .5;
  animation: blobMove 14s ease-in-out infinite;
}
.blob-pink { background: var(--blush-200); }
.blob-rose { background: var(--blush-300); }

/* ── Image hover zoom wrapper ──────────────────────────── */
.zoom-img { overflow: hidden; }
.zoom-img img { transition: transform .8s cubic-bezier(0.16,1,0.3,1); }
.zoom-img:hover img { transform: scale(1.07); }

/* ── Gradient text (pink) ──────────────────────────────── */
.text-gradient-pink {
  background: linear-gradient(120deg, var(--blush-600), var(--blush-400), var(--blush-600));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}

/* ── Underline draw on hover ───────────────────────────── */
.u-line { position: relative; }
.u-line::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--blush-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.u-line:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── Toast / notification pop ──────────────────────────── */
.pop-in { animation: scaleIn .45s var(--ease-out) both; }

/* ── Page load stagger for hero (CSS fallback) ─────────── */
.hero-stagger > * { opacity: 0; animation: fadeInUp .9s cubic-bezier(0.16,1,0.3,1) forwards; }
.hero-stagger > *:nth-child(1) { animation-delay: .15s; }
.hero-stagger > *:nth-child(2) { animation-delay: .3s; }
.hero-stagger > *:nth-child(3) { animation-delay: .45s; }
.hero-stagger > *:nth-child(4) { animation-delay: .6s; }
.hero-stagger > *:nth-child(5) { animation-delay: .75s; }