/* =============================================================================
   ANIMATIONS.CSS — Scroll Reveal, Transitions & Motion System
   Hello Elementor Child Theme

   This file owns all motion in the layout.

   Architecture:
     - Elements that should animate carry a data-reveal attribute.
     - animations.js uses IntersectionObserver to add .hec-revealed
       when the element enters the viewport.
     - All animation states live here. JS only adds/removes classes.
     - prefers-reduced-motion is respected globally at the bottom.

   Motion philosophy:
     Medium intensity as confirmed.
     - Scroll reveals: elegant fade + lift.
     - Parallax: subtle, CSS-transform only.
     - Hover micro-interactions: responsive, spring-eased.
     - Staggered group entrances for related post cards.
     No element should feel like it is performing.
     Motion should feel inevitable, not theatrical.
   ============================================================================= */


/* =============================================================================
   1. BASE REVEAL STATE
   All data-reveal elements start invisible and slightly displaced.
   .hec-revealed is added by animations.js via IntersectionObserver.
   ============================================================================= */

html.hec-js [data-reveal] {
  opacity:    0;
  will-change: opacity, transform;
}

html.hec-js [data-reveal].hec-revealed {
  opacity: 1;
}

/*
 * Transition timing is defined per reveal type below.
 * The base state only sets opacity: 0 so elements that have
 * JS disabled or slow JS still render — they just appear
 * without animation. No content is permanently hidden.
 */


/* =============================================================================
   2. REVEAL VARIANTS
   Each data-reveal value gets its own entrance style.
   ============================================================================= */

/* --- Fade Up (default — most elements) --- */
html.hec-js [data-reveal="fade-up"] {
  transform: translateY(24px);
  transition:
    opacity   var(--hec-duration-slow)  var(--hec-ease-out),
    transform var(--hec-duration-slow)  var(--hec-ease-out);
}

html.hec-js [data-reveal="fade-up"].hec-revealed {
  transform: translateY(0);
}

/* --- Fade In (no movement — for large sections) --- */
html.hec-js [data-reveal="fade-in"] {
  transition:
    opacity var(--hec-duration-slow) var(--hec-ease-out);
}

/* --- Fade Left (slides in from left) --- */
html.hec-js [data-reveal="fade-left"] {
  transform: translateX(-24px);
  transition:
    opacity   var(--hec-duration-slow) var(--hec-ease-out),
    transform var(--hec-duration-slow) var(--hec-ease-out);
}

html.hec-js [data-reveal="fade-left"].hec-revealed {
  transform: translateX(0);
}

/* --- Fade Right (slides in from right) --- */
html.hec-js [data-reveal="fade-right"] {
  transform: translateX(24px);
  transition:
    opacity   var(--hec-duration-slow) var(--hec-ease-out),
    transform var(--hec-duration-slow) var(--hec-ease-out);
}

html.hec-js [data-reveal="fade-right"].hec-revealed {
  transform: translateX(0);
}

/* --- Meta bar --- */
html.hec-js [data-reveal="meta-bar"] {
  transform: translateY(8px);
  transition:
    opacity   var(--hec-duration-slow) var(--hec-ease-out) 0.05s,
    transform var(--hec-duration-slow) var(--hec-ease-out) 0.05s;
}

html.hec-js [data-reveal="meta-bar"].hec-revealed {
  transform: translateY(0);
}

/* --- TOC --- */
html.hec-js [data-reveal="toc"] {
  transform: translateY(16px);
  transition:
    opacity   var(--hec-duration-slow) var(--hec-ease-out) 0.1s,
    transform var(--hec-duration-slow) var(--hec-ease-out) 0.1s;
}

html.hec-js [data-reveal="toc"].hec-revealed {
  transform: translateY(0);
}

/* --- Content body --- */
html.hec-js [data-reveal="content"] {
  transform: translateY(12px);
  transition:
    opacity   var(--hec-duration-slow) var(--hec-ease-out) 0.15s,
    transform var(--hec-duration-slow) var(--hec-ease-out) 0.15s;
}

html.hec-js [data-reveal="content"].hec-revealed {
  transform: translateY(0);
}

/* --- Author box --- */
html.hec-js [data-reveal="author-box"] {
  transform: translateY(20px);
  transition:
    opacity   var(--hec-duration-slow)  var(--hec-ease-spring),
    transform var(--hec-duration-slow)  var(--hec-ease-spring);
}

html.hec-js [data-reveal="author-box"].hec-revealed {
  transform: translateY(0);
}

/* --- Related section heading --- */
html.hec-js [data-reveal="related-section"] {
  transform: translateY(16px);
  transition:
    opacity   var(--hec-duration-slow) var(--hec-ease-out),
    transform var(--hec-duration-slow) var(--hec-ease-out);
}

html.hec-js [data-reveal="related-section"].hec-revealed {
  transform: translateY(0);
}

/* --- Related post cards (staggered) --- */
/*
 * Each card has data-reveal="related-card" and
 * data-reveal-delay="0|100|200" set in related-posts.php.
 * animations.js reads data-reveal-delay and sets a
 * transition-delay inline style before adding .hec-revealed.
 * The base transition is defined here — delay is applied by JS.
 */
html.hec-js [data-reveal="related-card"] {
  transform: translateY(28px);
  transition:
    opacity   var(--hec-duration-slow) var(--hec-ease-spring),
    transform var(--hec-duration-slow) var(--hec-ease-spring),
    box-shadow var(--hec-transition-normal),
    border-color var(--hec-transition-normal);
}

html.hec-js [data-reveal="related-card"].hec-revealed {
  transform: translateY(0);
}

/* --- Newsletter CTA --- */
html.hec-js [data-reveal="newsletter-cta"] {
  transform: translateY(20px);
  transition:
    opacity   var(--hec-duration-slow) var(--hec-ease-out),
    transform var(--hec-duration-slow) var(--hec-ease-out);
}

html.hec-js [data-reveal="newsletter-cta"].hec-revealed {
  transform: translateY(0);
}


/* =============================================================================
   3. KEYFRAME LIBRARY
   Named @keyframes used across multiple components.
   ============================================================================= */

/* Generic fade in */
@keyframes hec-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade in and rise */
@keyframes hec-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Fade in and descend */
@keyframes hec-fade-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* Scale in from center */
@keyframes hec-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Scale in with spring overshoot */
@keyframes hec-scale-spring {
  0%   { opacity: 0; transform: scale(0.90); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% {             transform: scale(1);    }
}

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

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

/* Slide up into position */
@keyframes hec-slide-up {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Pulse — repeating attention animation */
@keyframes hec-pulse {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1);    }
}

/* Shimmer — loading skeleton effect */
@keyframes hec-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Spin — loading indicator */
@keyframes hec-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Bounce — attention-seeking element */
@keyframes hec-bounce {
  0%, 100% { transform: translateY(0);   animation-timing-function: cubic-bezier(0.8,0,1,1);   }
  50%       { transform: translateY(-8px); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

/* Glow pulse — amber glow breathing */
@keyframes hec-glow-pulse {
  0%, 100% { box-shadow: 0 0  8px rgba(209, 106, 11, 0.30); }
  50%       { box-shadow: 0 0 20px rgba(209, 106, 11, 0.60); }
}

/* Width reveal — for accent lines */
@keyframes hec-width-reveal {
  from { width: 0;    opacity: 0; }
  to   { width: 40px; opacity: 1; }
}

/* Underline draw */
@keyframes hec-underline-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Float — gentle floating for decorative elements */
@keyframes hec-float {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-6px); }
}


/* =============================================================================
   4. HOVER MICRO-INTERACTIONS
   Applied to interactive cards, buttons, and links.
   These are CSS-only — no JS.
   ============================================================================= */

/* --- Card lift --- */
.hec-card-hover {
  transition:
    transform   var(--hec-transition-normal),
    box-shadow  var(--hec-transition-normal),
    border-color var(--hec-transition-normal);
}

.hec-card-hover:hover {
  transform:  translateY(-4px);
  box-shadow: var(--hec-shadow-xl);
}

/* --- Link underline draw --- */
.hec-link-hover {
  position:                relative;
  text-decoration:         none;
  background-image:        linear-gradient(
                             var(--hec-color-accent),
                             var(--hec-color-accent)
                           );
  background-size:         0% 1.5px;
  background-repeat:       no-repeat;
  background-position:     left bottom;
  transition:
    background-size var(--hec-transition-normal) var(--hec-ease-out),
    color           var(--hec-transition-fast);
}

.hec-link-hover:hover {
  background-size: 100% 1.5px;
  color:           var(--hec-color-accent);
}

/* --- Icon rotate on parent hover --- */
.hec-icon-rotate {
  transition: transform var(--hec-transition-spring);
}

.hec-icon-rotate-parent:hover .hec-icon-rotate {
  transform: rotate(15deg);
}

/* --- Button press effect --- */
.hec-btn-press {
  transition:
    transform  var(--hec-duration-fast) var(--hec-ease-out),
    box-shadow var(--hec-duration-fast) var(--hec-ease-out);
}

.hec-btn-press:hover {
  transform:  translateY(-2px);
  box-shadow: var(--hec-shadow-amber);
}

.hec-btn-press:active {
  transform:  translateY(0) scale(0.98);
  box-shadow: none;
}

/* --- Image zoom on hover container --- */
.hec-img-zoom {
  overflow: hidden;
  border-radius: inherit;
}

.hec-img-zoom img {
  transition: transform var(--hec-duration-slow) var(--hec-ease-smooth);
  will-change: transform;
}

.hec-img-zoom:hover img {
  transform: scale(1.05);
}


/* =============================================================================
   5. LOADING STATES
   Skeleton shimmer for async content.
   ============================================================================= */

.hec-skeleton {
  background: linear-gradient(
    90deg,
    var(--hec-color-bg-sunken)  25%,
    var(--hec-color-bg-overlay) 50%,
    var(--hec-color-bg-sunken)  75%
  );
  background-size: 200% 100%;
  animation:       hec-shimmer 1.5s var(--hec-ease-default) infinite;
  border-radius:   var(--hec-radius-sm);
}

[data-theme="dark"] .hec-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
}

/* Skeleton shapes */
.hec-skeleton-text {
  height:        1em;
  margin-bottom: var(--hec-space-2);
  border-radius: var(--hec-radius-sm);
}

.hec-skeleton-title {
  height:        1.5em;
  width:         70%;
  margin-bottom: var(--hec-space-3);
}

.hec-skeleton-avatar {
  width:         40px;
  height:        40px;
  border-radius: var(--hec-radius-full);
  flex-shrink:   0;
}

.hec-skeleton-thumb {
  width:         100%;
  aspect-ratio:  16 / 9;
  border-radius: var(--hec-radius-lg);
}


/* =============================================================================
   6. LOADING SPINNER
   Used by feedback-widget.js during AJAX submission.
   ============================================================================= */

.hec-spinner {
  display:       inline-block;
  width:         18px;
  height:        18px;
  border:        2px solid rgba(255, 255, 255, 0.30);
  border-top:    2px solid var(--hec-white);
  border-radius: var(--hec-radius-full);
  animation:     hec-spin 0.7s linear infinite;
  flex-shrink:   0;
}

.hec-spinner--amber {
  border-color:     rgba(209, 106, 11, 0.25);
  border-top-color: var(--hec-brand-amber);
}


/* =============================================================================
   7. PARALLAX CONTAINER
   Used by hero-media.js for the background layer.
   The actual transform is applied by JS. CSS defines
   the will-change and transition smoothing.
   ============================================================================= */

.hec-parallax {
  will-change: transform;
  transition:  transform 50ms linear;
}


/* =============================================================================
   8. STAGGER UTILITY
   For groups of elements that should animate in sequence.
   JS adds .hec-stagger-group to the parent and
   .hec-stagger-item to each child.
   ============================================================================= */

.hec-stagger-item {
  opacity:   0;
  transform: translateY(20px);
  transition:
    opacity   var(--hec-duration-slow) var(--hec-ease-spring),
    transform var(--hec-duration-slow) var(--hec-ease-spring);
}

/*
 * JS applies transition-delay inline based on item index.
 * e.g. element.style.transitionDelay = (index * 80) + 'ms'
 */

.hec-stagger-item.hec-revealed {
  opacity:   1;
  transform: translateY(0);
}


/* =============================================================================
   9. ACCENT LINE ANIMATION
   Used before section headings (related posts, author box).
   ============================================================================= */

.hec-accent-animated::before {
  content:          '';
  display:          block;
  height:           3px;
  background:       linear-gradient(
                      90deg,
                      var(--hec-brand-amber) 0%,
                      var(--hec-brand-gold)  100%
                    );
  border-radius:    var(--hec-radius-full);
  margin-bottom:    var(--hec-space-4);
  width:            0;
  opacity:          0;
  animation:        hec-width-reveal
                    var(--hec-duration-slow)
                    var(--hec-ease-spring)
                    0.3s
                    forwards;
}


/* =============================================================================
   10. REDUCED MOTION — GLOBAL OVERRIDE
   All animations and transitions are disabled or minimized.
   This single block overrides everything above.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

  /* Remove all transitions from reveal elements */
  html.hec-js [data-reveal] {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
  }

  /* Remove all keyframe animations */
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    animation-delay:           0ms    !important;
    transition-duration:       0.01ms !important;
    transition-delay:          0ms    !important;
  }

  /* Skeleton still needs some animation to be recognizable */
  .hec-skeleton {
    animation: none;
    background: var(--hec-color-bg-sunken);
  }

  /* Spinner still needs to spin to communicate loading */
  .hec-spinner {
    animation-duration: 1.5s !important;
  }

  /* Accent lines appear instantly */
  .hec-accent-animated::before {
    width:   40px;
    opacity: 1;
  }

  /* Stagger items appear immediately */
  .hec-stagger-item {
    opacity:   1;
    transform: none;
  }
}