/* =============================================================================
   FILE:    assets/css/animations.css
   PROJECT: Smart Bookmark
   PURPOSE: Shared animation library — micro-interactions, entrance sequences,
            particle/spotlight effects, and JS-controlled motion classes.

            Loaded AFTER all page-specific stylesheets so its declarations
            safely override earlier ones (e.g. replaces `slideUp` with the
            spring-based `card-enter` on .card).

   SECTIONS:
     1.  Motion tokens
     2.  @keyframes library
     3.  Page entrance
     4.  Left panel — aurora background blobs
     5.  Left panel — staggered content entrance
     6.  Brand icon float
     7.  Hero heading gradient pan
     8.  Feature item hover
     9.  Card enhanced entrance
     10. Input focus micro-animation
     11. Button ripple wave  (JS-created .ripple-wave element)
     12. Button hover glow pulse
     13. Typewriter cursor   (JS-created .tw-cursor element)
     14. Floating particles  (JS-created .panel-particle elements)
     15. Cursor spotlight    (JS-created .cursor-spotlight element)
     16. Scroll progress bar (JS-created .scroll-progress element)
     17. Legal hero animated glow
     18. Legal section scroll reveal (JS toggles .is-visible)
     19. Confetti            (JS-created .confetti-piece elements)
     20. Reduced-motion overrides (WCAG 2.1 Level AA)

   DEPENDS ON: assets/css/base.css  (design tokens)
   LOADED AFTER: all page-specific CSS
   USED BY:     login.html, signup.html, terms.html, privacy.html
============================================================================= */


/* =============================================================================
   1. MOTION TOKENS
   Extra easing curves beyond the global --transition from base.css.
============================================================================= */
:root {
  /* Spring: overshoots slightly then settles — best for element entrances */
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);

  /* Bounce: more pronounced overshoot — used for icon micro-pops */
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Expo-out: fast start, very gradual stop — used for long transitions */
  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
}


/* =============================================================================
   2. @KEYFRAMES LIBRARY
   All animation definitions in one section for easy reference and maintenance.
   Components reference these by name throughout the rest of the file.
============================================================================= */

/* ── Page ───────────────────────────────────────────────────────────────── */
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Left-panel aurora blobs ────────────────────────────────────────────── */
/* Different paths + durations mean the two blobs never sync — looks organic */
@keyframes aurora-tl {
  0%   { transform: translate(0px,  0px)  scale(1.00); opacity: 0.35; }
  33%  { transform: translate(50px,-40px) scale(1.12); opacity: 0.45; }
  66%  { transform: translate(-30px,50px) scale(0.92); opacity: 0.28; }
  100% { transform: translate(35px,-25px) scale(1.06); opacity: 0.40; }
}

@keyframes aurora-br {
  0%   { transform: translate(  0px,  0px) scale(1.00); opacity: 0.35; }
  33%  { transform: translate(-60px, 35px) scale(1.18); opacity: 0.24; }
  66%  { transform: translate( 40px,-50px) scale(0.88); opacity: 0.48; }
  100% { transform: translate(-25px, 25px) scale(1.10); opacity: 0.30; }
}

/* ── Generic stagger entrance (multi-use) ───────────────────────────────── */
/* Used by: left-panel brand, headings, features; legal hero elements        */
@keyframes stagger-in {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ── Brand icon gentle bob ──────────────────────────────────────────────── */
@keyframes float-bob {
  0%,  100% { transform: translateY(0px)  rotate(0.0deg); }
  50%        { transform: translateY(-7px) rotate(2.5deg); }
}

/* ── Gradient text pan ──────────────────────────────────────────────────── */
@keyframes gradient-pan {
  from { background-position:   0% center; }
  to   { background-position: 100% center; }
}

/* ── Card spring entrance ───────────────────────────────────────────────── */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(44px) scale(0.96);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ── Input icon micro-bounce on focus ───────────────────────────────────── */
@keyframes icon-bounce {
  0%   { transform: scale(1.00) rotate(  0deg); }
  35%  { transform: scale(1.30) rotate( -8deg); }
  65%  { transform: scale(0.90) rotate(  3deg); }
  100% { transform: scale(1.00) rotate(  0deg); }
}

/* ── Button click ripple ────────────────────────────────────────────────── */
@keyframes ripple-expand {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity:   0.55;
  }
  to {
    transform: translate(-50%, -50%) scale(3.8);
    opacity:   0;
  }
}

/* ── Button hover glow pulse ────────────────────────────────────────────── */
@keyframes btn-glow-pulse {
  0%,  100% {
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.50);
  }
  50% {
    box-shadow: 0 8px 44px rgba(79, 70, 229, 0.78),
                0 0   0  6px rgba(99, 102, 241, 0.14);
  }
}

/* ── Typewriter cursor blink ────────────────────────────────────────────── */
@keyframes cursor-blink {
  0%,  49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ── Background particle float ──────────────────────────────────────────── */
@keyframes particle-rise {
  0%  { transform: translateY(0)      translateX(0px)  rotate(  0deg); opacity: 0;    }
  8%  {                                                                 opacity: 0.07; }
  88% {                                                                 opacity: 0.07; }
  100%{ transform: translateY(-110vh) translateX(22px) rotate(180deg); opacity: 0;    }
}

/* ── Legal hero glow blob slow drift ────────────────────────────────────── */
@keyframes hero-glow-drift {
  0%   { transform: translate(   0px,   0px) scale(1.00); }
  50%  { transform: translate( -55px,  40px) scale(1.30); }
  100% { transform: translate(   0px,   0px) scale(1.00); }
}

/* ── Legal badge pop-in ──────────────────────────────────────────────────── */
@keyframes badge-pop {
  from { opacity: 0; transform: scale(0.78) translateY(12px); }
  to   { opacity: 1; transform: scale(1.00) translateY(  0);  }
}

/* ── Confetti fall ──────────────────────────────────────────────────────── */
/* CSS custom properties --rot-start, --rot-end, --drift set per-piece by JS */
@keyframes confetti-fall {
  0% {
    transform: translateY(-8px) rotate(var(--rot-start, 0deg)) scale(1.0);
    opacity: 1;
  }
  80% { opacity: 0.85; }
  100% {
    transform: translateY(110vh)
               translateX(var(--drift, 0px))
               rotate(var(--rot-end, 360deg))
               scale(0.5);
    opacity: 0;
  }
}

/* ── Scroll progress initial appear ────────────────────────────────────── */
@keyframes progress-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* =============================================================================
   3. PAGE ENTRANCE
   The entire page fades in from transparent on every load — removes the
   jarring instant-paint of content and creates a polished first impression.
============================================================================= */
body {
  animation: page-enter 0.45s ease both;
}


/* =============================================================================
   4. LEFT PANEL – AURORA BACKGROUND BLOBS
   The two radial glow pseudo-elements defined in login.css (::before = indigo,
   ::after = amber) drift independently, creating a living, breathing aurora.
   Different durations (13s vs 18s) prevent visual repetition.
============================================================================= */
.panel-left::before {
  animation: aurora-tl 13s ease-in-out infinite alternate;
}

.panel-left::after {
  animation: aurora-br 18s ease-in-out infinite alternate;
}


/* =============================================================================
   5. LEFT PANEL – STAGGERED CONTENT ENTRANCE
   Each block cascades in from below with a blur-fade: brand → heading →
   sub-copy → feature items (one by one). The blend of translateY + blur
   creates the "come into focus" effect used in premium landing pages.
   animation-fill-mode: both → elements hold the from-state during delay.
============================================================================= */

/* Brand row – first to appear */
.panel-left-content .brand {
  animation: stagger-in 0.75s var(--ease-spring) 0.10s both;
}

/* Hero headline */
.panel-left .hero-heading {
  animation: stagger-in 0.75s var(--ease-spring) 0.28s both;
}

/* Sub-copy */
.panel-left .hero-sub {
  animation: stagger-in 0.70s var(--ease-spring) 0.46s both;
}

/* Feature items trail in individually — each 140 ms after the previous */
.panel-left .feature-item:nth-child(1) {
  animation: stagger-in 0.65s var(--ease-spring) 0.68s both;
}
.panel-left .feature-item:nth-child(2) {
  animation: stagger-in 0.65s var(--ease-spring) 0.82s both;
}
.panel-left .feature-item:nth-child(3) {
  animation: stagger-in 0.65s var(--ease-spring) 0.96s both;
}

/* Builder credit at the very bottom — last to appear */
.panel-left .builder-credit {
  animation: stagger-in 0.60s var(--ease-spring) 1.10s both;
}


/* =============================================================================
   6. BRAND ICON FLOAT
   The amber bookmark icon gently bobs up and down with a tiny rotation —
   subtle enough that users notice it only subconsciously, never distracting.
   Scoped to .panel-left so the legal-nav brand icon is not affected.
============================================================================= */
.panel-left .brand-icon {
  animation: float-bob 4.8s ease-in-out infinite;
  /* transform-origin default (center center) is correct for the bob */
}


/* =============================================================================
   7. HERO HEADING GRADIENT PAN
   The amber <em> "Organized & Instant." text has its horizontal gradient
   slowly panned — the background-size: 220% stretches the gradient wide
   enough that the pan creates a visible warm-to-bright colour shift.
============================================================================= */
.panel-left .hero-heading em {
  background-size: 220% auto;
  animation: gradient-pan 4s ease-in-out infinite alternate;
}


/* =============================================================================
   8. FEATURE ITEM HOVER EFFECTS
   On hover the entire row slides right 5px, the icon square glows amber
   and spins slightly, and the text brightens — all driven by CSS alone.
============================================================================= */
.feature-item {
  transition: transform 0.25s var(--ease-spring);
}

.feature-item:hover {
  transform: translateX(5px);
}

/* Increase dot specificity for the hover state */
.panel-left .feature-dot {
  transition:
    background    var(--transition),
    border-color  var(--transition),
    box-shadow    0.30s ease,
    transform     0.30s var(--ease-spring);
}

.panel-left .feature-item:hover .feature-dot {
  background:   rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow:   0 0 18px rgba(251, 191, 36, 0.40);
  transform:    scale(1.18) rotate(6deg);
}

.feature-text {
  transition: color var(--transition);
}

.panel-left .feature-item:hover .feature-text {
  color: rgba(255, 255, 255, 0.96);
}


/* =============================================================================
   9. CARD ENHANCED ENTRANCE
   Replaces the simple `slideUp` in login.css with a spring-physics entrance
   that combines translateY + scale + blur-clear — identical to the Framer /
   Vercel "card pop" pattern.
   This file loads AFTER login.css, so the `animation` property here wins.
============================================================================= */
.card {
  animation: card-enter 0.70s var(--ease-spring) both;
  /* Needed so 3D tilt transforms render correctly when JS activates */
  transform-style: preserve-3d;
  will-change: transform;
}


/* =============================================================================
   10. INPUT FOCUS MICRO-ANIMATION
   When any wrapped input receives focus:
     • The leading icon plays a bounce (scale + rotate)
     • The .input-wrap scales up 0.8% — imperceptible but satisfying
============================================================================= */
.input-wrap:focus-within .input-icon {
  animation: icon-bounce 0.45s var(--ease-bounce);
}

.input-wrap {
  transition: transform 0.20s var(--ease-spring);
}

.input-wrap:focus-within {
  /* 0.8% scale: barely visible, but registers subconsciously */
  transform: scale(1.008);
}


/* =============================================================================
   11. BUTTON RIPPLE WAVE
   JS appends a <span class="ripple-wave"> at the exact click coordinates.
   This class positions and animates the expanding circle.
   The element removes itself via JS animationend listener.
============================================================================= */
.ripple-wave {
  position:      absolute;
  width:         280px;
  height:        280px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.30);
  pointer-events: none;
  animation: ripple-expand 0.65s ease-out forwards;
  z-index: 10;
}


/* =============================================================================
   12. BUTTON HOVER GLOW PULSE
   After the button lifts on hover (from login.css), the shadow breathes in
   and out with a pulsing glow — makes the CTA feel alive and energetic.
   Only runs while :hover is active; stops immediately on mouseleave.
============================================================================= */
.btn-primary:hover:not(:disabled) {
  animation: btn-glow-pulse 1.8s ease-in-out infinite;
}


/* =============================================================================
   13. TYPEWRITER CURSOR
   JS creates <span class="tw-cursor"> adjacent to .card-eyebrow during the
   type-in sequence, then removes it when typing is complete.
============================================================================= */
.tw-cursor {
  display:       inline-block;
  width:         2px;
  height:        0.85em;
  background:    var(--clr-indigo-500);
  vertical-align: text-bottom;
  margin-left:   1px;
  border-radius: 1px;
  animation:     cursor-blink 0.75s step-end infinite;
}


/* =============================================================================
   14. FLOATING PANEL PARTICLES
   JS creates small .panel-particle divs in .panel-left.
   They rise from the bottom and drift upward at varying speeds.
   The clip-path creates a simplified bookmark silhouette.
============================================================================= */
.panel-particle {
  position:  absolute;
  bottom:    -24px;
  /* Bookmark shape: rectangular top, V-notch cut from the bottom */
  clip-path: polygon(12% 0%, 88% 0%, 100% 0%, 100% 100%, 50% 80%, 0% 100%, 0% 0%);
  background: rgba(255, 255, 255, 0.50);
  animation:  particle-rise linear infinite;
  pointer-events: none;
  z-index:    0;  /* Behind panel text content */
}


/* =============================================================================
   15. CURSOR SPOTLIGHT
   JS creates <div class="cursor-spotlight"> inside .panel-left and keeps
   its --cx / --cy CSS custom properties updated on mousemove.
   The radial-gradient follows the cursor, creating a soft torch-light feel.
============================================================================= */
.cursor-spotlight {
  position:   absolute;
  inset:      0;
  pointer-events: none;
  opacity:    0;
  background: radial-gradient(
    520px circle at var(--cx, 50%) var(--cy, 50%),
    rgba(99, 102, 241, 0.08) 0%,
    transparent 56%
  );
  transition: opacity 0.40s ease;
  z-index:    0;
}

/* Reveal spotlight only when the panel is hovered */
.panel-left:hover .cursor-spotlight {
  opacity: 1;
}


/* =============================================================================
   16. SCROLL PROGRESS BAR
   JS creates <div class="scroll-progress"> for legal pages.
   Its width (%) is updated on scroll via rAF in animations.js.
============================================================================= */
.scroll-progress {
  position:      fixed;
  top:           0;
  left:          0;
  height:        3px;
  width:         0%;
  background:    linear-gradient(90deg, var(--clr-indigo-500), var(--clr-accent-400));
  z-index:       9999;
  border-radius: 0 2px 2px 0;
  /* Smooth but quick updates to avoid lag */
  transition:    width 0.08s linear;
  box-shadow:    0 0 8px rgba(99, 102, 241, 0.50);
  animation:     progress-appear 0.5s ease 0.4s both;
}


/* =============================================================================
   17. LEGAL HERO ANIMATED GLOW
   The right-hand glow blob on .legal-hero::after (defined in legal.css)
   gets a slow drift animation — mirrors the aurora feel of the auth pages.
   We only animate transform (not opacity) so legal.css's opacity: 0.18 holds.
============================================================================= */
.legal-hero::after {
  animation: hero-glow-drift 16s ease-in-out infinite;
}

/* Legal hero inner elements stagger in like the auth page left panel */
.legal-badge {
  animation: badge-pop 0.60s var(--ease-spring) 0.20s both;
}

.legal-hero h1 {
  animation: stagger-in 0.75s var(--ease-spring) 0.35s both;
}

.legal-hero-sub {
  animation: stagger-in 0.65s var(--ease-spring) 0.50s both;
}

.legal-meta {
  animation: stagger-in 0.65s var(--ease-spring) 0.65s both;
}

/* Nav "Back" arrow hover micro-interaction */
.nav-back {
  transition: color var(--transition), transform 0.20s var(--ease-spring);
}

.nav-back:hover {
  transform: translateX(-3px);
}

/* ToC link active state indent reveal */
.toc-list a {
  transition:
    color        var(--transition),
    padding-left 0.22s var(--ease-spring);
}

.toc-list a.active {
  padding-left: 4px;  /* Subtle rightward indent signals active section */
}


/* =============================================================================
   18. LEGAL SECTION SCROLL REVEAL
   JS adds .anim-ready to <body> before setting up the IntersectionObserver.
   Only then do sections go invisible — prevents flash-of-invisible-content
   when JS is absent (progressive enhancement).
   Above-fold sections are immediately marked .is-visible by JS before the
   observer fires, so they never flicker.
============================================================================= */
.anim-ready .legal-section {
  opacity:    0;
  transform:  translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s var(--ease-spring);
}

.anim-ready .legal-section.is-visible {
  opacity:   1;
  transform: translateY(0);
}


/* =============================================================================
   19. CONFETTI (SIGNUP SUCCESS)
   JS creates .confetti-piece divs and appends them to <body>.
   Per-piece CSS custom properties: --rot-start, --rot-end, --drift, --fall-dur
   are set as inline styles so each piece has a unique trajectory.
============================================================================= */
.confetti-piece {
  position:   fixed;
  top:        -14px;
  border-radius: 2px;
  pointer-events: none;
  z-index:    9000;
  /* Duration is controlled per-piece via --fall-dur CSS custom property */
  animation: confetti-fall var(--fall-dur, 1.5s) ease-in forwards;
}


/* =============================================================================
   20. REDUCED-MOTION OVERRIDES   (WCAG 2.1 Success Criterion 2.3.3 — Level AA)
   When the user has enabled "Reduce motion" in OS/browser accessibility
   settings, all durations are collapsed to near-zero and iteration counts
   forced to 1. This completely disables animated sequences and loops while
   preserving instant state changes (so UI still works correctly).
============================================================================= */
@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;
  }
}