/* ============================================================
   MyPariva — Animation & Motion System
   Drop into: wwwroot/css/pariva-animations.css
   Link in _Layout.cshtml: <link rel="stylesheet" href="~/css/pariva-animations.css" />
   ============================================================ */

/* ----- 1. MOTION TOKENS ----- */
:root {
  --ease-pariva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:    280ms;
  --dur-normal:  480ms;
  --dur-slow:    720ms;
  --dur-breath:  3200ms;
  --slide-sm:    12px;
  --slide-md:    28px;
  --slide-lg:    48px;

  --pariva-rose:       #E91E78;
  --pariva-rose-soft:  #F8D7E8;
  --pariva-rose-glow:  rgba(233, 30, 120, 0.2);
  --pariva-cream:      #FFF9F5;
  --pariva-dark:       #1A1A2E;
  --pariva-grey:       #6B7280;
}

/* ----- 2. ACCESSIBILITY ----- */
@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;
  }
}


/* ============================================================
   SCROLL REVEAL SYSTEM
   ============================================================ */

/* ----- Base reveal (fade up) ----- */
.reveal {
  opacity: 0;
  transform: translateY(var(--slide-md));
  transition: opacity var(--dur-normal) var(--ease-pariva),
              transform var(--dur-normal) var(--ease-pariva);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
}

/* ----- Direction variants ----- */
.reveal-left {
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-md)));
  transition: opacity var(--dur-normal) var(--ease-pariva),
              transform var(--dur-normal) var(--ease-pariva);
  will-change: opacity, transform;
}
.reveal-right {
  opacity: 0;
  transform: translateX(var(--slide-md));
  transition: opacity var(--dur-normal) var(--ease-pariva),
              transform var(--dur-normal) var(--ease-pariva);
  will-change: opacity, transform;
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--dur-normal) var(--ease-pariva),
              transform var(--dur-normal) var(--ease-pariva);
  will-change: opacity, transform;
}
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ----- Custom delay via inline var ----- */
.reveal[style*="--delay"],
.reveal-left[style*="--delay"],
.reveal-right[style*="--delay"],
.reveal-scale[style*="--delay"] {
  transition-delay: var(--delay);
}

/* ----- Stagger children ----- */
.stagger-children > .reveal:nth-child(1),
.stagger-children > .reveal-left:nth-child(1),
.stagger-children > .reveal-right:nth-child(1),
.stagger-children > .reveal-scale:nth-child(1) { transition-delay: 0ms; }

.stagger-children > .reveal:nth-child(2),
.stagger-children > .reveal-left:nth-child(2),
.stagger-children > .reveal-right:nth-child(2),
.stagger-children > .reveal-scale:nth-child(2) { transition-delay: 100ms; }

.stagger-children > .reveal:nth-child(3),
.stagger-children > .reveal-left:nth-child(3),
.stagger-children > .reveal-right:nth-child(3),
.stagger-children > .reveal-scale:nth-child(3) { transition-delay: 200ms; }

.stagger-children > .reveal:nth-child(4),
.stagger-children > .reveal-left:nth-child(4),
.stagger-children > .reveal-right:nth-child(4),
.stagger-children > .reveal-scale:nth-child(4) { transition-delay: 300ms; }

.stagger-children > .reveal:nth-child(5),
.stagger-children > .reveal-left:nth-child(5),
.stagger-children > .reveal-right:nth-child(5),
.stagger-children > .reveal-scale:nth-child(5) { transition-delay: 400ms; }

.stagger-children > .reveal:nth-child(6),
.stagger-children > .reveal-left:nth-child(6),
.stagger-children > .reveal-right:nth-child(6),
.stagger-children > .reveal-scale:nth-child(6) { transition-delay: 500ms; }

.stagger-children > .reveal:nth-child(7) { transition-delay: 600ms; }
.stagger-children > .reveal:nth-child(8) { transition-delay: 700ms; }


/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */

/* ----- Buttons ----- */
.btn-pariva {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-pariva),
              box-shadow var(--dur-fast) var(--ease-pariva),
              background-color var(--dur-fast) var(--ease-pariva);
}
.btn-pariva:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--pariva-rose-glow);
}
.btn-pariva:active {
  transform: translateY(0) scale(0.97);
}
/* Ripple */
.btn-pariva::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(233,30,120,0.25) 10%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s, transform 0.5s;
  pointer-events: none;
}
.btn-pariva:active::after {
  opacity: 1;
  transform: scale(2.5);
  transition: 0s;
}

/* ----- Cards ----- */
.card-pariva {
  transition: transform var(--dur-fast) var(--ease-pariva),
              box-shadow var(--dur-fast) var(--ease-pariva);
}
.card-pariva:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

/* ----- Inputs ----- */
.input-pariva {
  border: none;
  border-bottom: 2px solid var(--pariva-grey);
  background: transparent;
  transition: border-color var(--dur-fast) var(--ease-pariva);
  padding: 10px 12px 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  width: 100%;
}
.input-pariva:focus {
  border-color: var(--pariva-rose);
  outline: none;
}

/* Animated underline from centre */
.input-wrap {
  position: relative;
}
.input-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--pariva-rose);
  transition: width var(--dur-normal) var(--ease-pariva),
              left var(--dur-normal) var(--ease-pariva);
}
.input-wrap:focus-within::after {
  width: 100%;
  left: 0;
}

/* Floating label */
.float-label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--pariva-grey);
  font-size: 1rem;
  font-family: 'DM Sans', sans-serif;
  transition: all var(--dur-fast) var(--ease-pariva);
  pointer-events: none;
}
.input-pariva:focus ~ .float-label,
.input-pariva:not(:placeholder-shown) ~ .float-label {
  top: 2px;
  font-size: 0.72rem;
  color: var(--pariva-rose);
}


/* ============================================================
   NAVBAR
   ============================================================ */
.navbar-pariva {
  transition: background var(--dur-normal) var(--ease-pariva),
              backdrop-filter var(--dur-normal) var(--ease-pariva),
              -webkit-backdrop-filter var(--dur-normal) var(--ease-pariva),
              box-shadow var(--dur-normal) var(--ease-pariva);
}
.navbar-pariva.scrolled {
  background: rgba(255, 249, 245, 0.92) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}


/* ============================================================
   AMBIENT / SIGNATURE ANIMATIONS
   ============================================================ */

/* ----- Bloom pulse (cycle wheel glow) ----- */
@keyframes bloom-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.35; }
  50%      { transform: scale(1.08); opacity: 0.55; }
}
.bloom-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pariva-rose-soft) 0%, transparent 70%);
  animation: bloom-pulse var(--dur-breath) var(--ease-pariva) infinite;
  pointer-events: none;
  z-index: 0;
}

/* ----- Logo breathing (login/register) ----- */
@keyframes logo-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.login-logo {
  animation: logo-breathe 3.5s var(--ease-pariva) infinite;
}

/* ----- Skeleton shimmer (dashboard loading) ----- */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 8px;
}
.skeleton-text {
  height: 14px;
  margin-bottom: 10px;
  width: 80%;
}
.skeleton-text.short { width: 50%; }
.skeleton-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.skeleton-card {
  height: 120px;
  border-radius: 12px;
}

/* ----- CTA glow pulse (Care Network "Add supporter") ----- */
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 30, 120, 0.3); }
  50%      { box-shadow: 0 0 0 8px rgba(233, 30, 120, 0); }
}
.btn-glow {
  animation: cta-glow 2.4s var(--ease-pariva) infinite;
}

/* ----- Loading spinner ----- */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  opacity: 0;
  pointer-events: none;
}
.btn-loading {
  position: relative;
  pointer-events: none;
}
.btn-loading .btn-text { opacity: 0; }
.btn-loading .spinner  { opacity: 1; }


/* ============================================================
   PAGE-SPECIFIC: HOME
   ============================================================ */

/* Phase tab cross-fade */
.phase-panel {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms var(--ease-pariva),
              transform 300ms var(--ease-pariva);
  position: absolute;
  width: 100%;
}
.phase-panel.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

/* Phase tab sliding underline */
.phase-tabs {
  position: relative;
}
.phase-tab-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: var(--pariva-rose);
  border-radius: 2px;
  transition: left var(--dur-normal) var(--ease-pariva),
              width var(--dur-normal) var(--ease-pariva);
}

/* Privacy icons rotate-in */
.privacy-icon {
  transition: transform var(--dur-normal) var(--ease-pariva);
  transform: rotate(-12deg) scale(0.8);
}
.reveal.visible .privacy-icon,
.reveal-scale.visible .privacy-icon {
  transform: rotate(0deg) scale(1);
}

/* Stats badge pop-in */
@keyframes pop-in {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.stat-badge {
  animation: pop-in var(--dur-normal) var(--ease-pariva) both;
}


/* ============================================================
   PAGE-SPECIFIC: HOW IT WORKS
   ============================================================ */

/* Timeline line draw */
.timeline-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1.2s var(--ease-pariva);
}
.timeline-line.visible {
  stroke-dashoffset: 0;
}

/* Typewriter cursor */
.typewriter-cursor::after {
  content: '|';
  animation: blink 0.8s step-end infinite;
  color: var(--pariva-rose);
  margin-left: 2px;
}
@keyframes blink {
  50% { opacity: 0; }
}


/* ============================================================
   PAGE-SPECIFIC: LOGIN / REGISTER
   ============================================================ */

/* Auth page gradient background */
.auth-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--pariva-cream) 0%, #fce4f0 50%, var(--pariva-cream) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Auth card */
.auth-card {
  background: #fff;
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.06);
  max-width: 440px;
  width: 100%;
}

/* Input error shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
.input-error {
  animation: shake 0.3s var(--ease-pariva);
  border-color: #e53e3e !important;
}

/* Success checkmark draw */
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}
.check-icon path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.auth-success .check-icon path {
  animation: check-draw 0.5s var(--ease-pariva) forwards 0.2s;
}
.auth-success .auth-card {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(0,0,0,0.08);
  transition: transform var(--dur-normal) var(--ease-pariva),
              box-shadow var(--dur-normal) var(--ease-pariva);
}


/* ============================================================
   PAGE-SPECIFIC: DASHBOARD
   ============================================================ */

/* Mood button selection */
@keyframes mood-select {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.mood-btn {
  transition: box-shadow var(--dur-fast) var(--ease-pariva),
              background-color var(--dur-fast) var(--ease-pariva);
  cursor: pointer;
}
.mood-btn:hover {
  transform: scale(1.08);
}
.mood-btn.selected {
  animation: mood-select 0.4s var(--ease-pariva);
  box-shadow: 0 0 0 3px var(--pariva-rose);
}

/* Modal */
.modal-backdrop-pariva {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: opacity var(--dur-normal) var(--ease-pariva),
              backdrop-filter var(--dur-normal) var(--ease-pariva),
              -webkit-backdrop-filter var(--dur-normal) var(--ease-pariva);
  z-index: 1050;
  pointer-events: none;
}
.modal-backdrop-pariva.open {
  opacity: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}

.modal-card-pariva {
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-pariva);
}
.modal-backdrop-pariva.open .modal-card-pariva {
  transform: translateY(0);
}

/* Calendar row reveal */
.calendar-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-pariva),
              transform var(--dur-fast) var(--ease-pariva);
}
.calendar-row.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Today's date glow */
.calendar-today {
  position: relative;
}
.calendar-today::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pariva-rose-soft) 0%, transparent 70%);
  animation: bloom-pulse var(--dur-breath) var(--ease-pariva) infinite;
  z-index: -1;
}

/* Period day fade-in background */
.calendar-period {
  transition: background-color var(--dur-normal) var(--ease-pariva);
}


/* ============================================================
   PAGE-SPECIFIC: CARE NETWORK
   ============================================================ */

/* Supporter card fan-in */
.supporter-card.reveal {
  transform: translateY(var(--slide-md)) rotate(-8deg);
}
.supporter-card.reveal.visible {
  transform: translateY(0) rotate(0deg);
}


/* ============================================================
   PAGE-SPECIFIC: HEALTH LIBRARY
   ============================================================ */

/* Article card image zoom on hover */
.article-card {
  overflow: hidden;
}
.article-card .article-thumb {
  transition: transform var(--dur-normal) var(--ease-pariva);
}
.article-card:hover .article-thumb {
  transform: scale(1.05);
}

/* Reading progress bar */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--pariva-rose);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 1100;
  transition: transform 80ms linear;
  pointer-events: none;
}


/* ============================================================
   PAGE-SPECIFIC: ABOUT / FAQ / CONTACT
   ============================================================ */

/* Rule line draw from centre */
.rule-draw {
  width: 0;
  height: 2px;
  background: var(--pariva-rose);
  margin: 1rem auto;
  transition: width var(--dur-slow) var(--ease-pariva);
}
.rule-draw.visible {
  width: 80px;
}

/* FAQ accordion smooth open */
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-normal) var(--ease-pariva),
              opacity var(--dur-normal) var(--ease-pariva),
              padding var(--dur-normal) var(--ease-pariva);
  padding: 0 1rem;
}
.faq-item.open .faq-answer {
  max-height: 600px;
  opacity: 1;
  padding: 1rem;
}

/* FAQ chevron rotate */
.faq-chevron {
  transition: transform var(--dur-fast) var(--ease-pariva);
  display: inline-block;
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

/* Toast notification */
@keyframes toast-in {
  0%   { transform: translateY(-100%) scale(0.95); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toast-out {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}
.toast-pariva {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-left: 4px solid var(--pariva-rose);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  z-index: 2000;
  animation: toast-in var(--dur-normal) var(--ease-pariva) both;
  font-family: 'DM Sans', sans-serif;
}
.toast-pariva.closing {
  animation: toast-out var(--dur-fast) var(--ease-pariva) both;
}


/* ============================================================
   PAGE TRANSITION OVERLAY (optional premium effect)
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--pariva-rose);
  z-index: 9999;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-slow) var(--ease-pariva);
  pointer-events: none;
}
.page-transition.active {
  transform: scaleY(1);
  transform-origin: top;
}