/* =============================================================================
   HERO.CSS — Cinematic Hero Section
   Hello Elementor Child Theme

   Renders the full-width, 30–40vh cinematic hero section.
   
   Structure:
     .hec-hero
       .hec-hero__bg (background layer — image / video / gif / fallback)
         <video> or <img> (injected by hero-media.js)
       .hec-hero__overlay (gradient veil for legibility)
       .hec-hero__content
         #hec-dark-mode-toggle
         .hec-hero__category-wrap
           .hec-hero__category-badge
         h1.hec-hero__title

   Design intent:
     - Title is the dominant visual. Not the image. Not the gradient.
       The image serves the title — cinematic backdrop, not focal point.
     - The gradient overlay transitions from fully transparent at the
       top to a deep brand dark at the bottom so the white title always
       reads clearly regardless of image content or color.
     - The hero is intentionally restrained in height (30–40vh) because
       we want readers reading, not admiring a full-screen image.
     - Subtle scale transform on the background creates a refined
       parallax feel without JavaScript (CSS-only).
   ============================================================================= */


/* =============================================================================
   1. HERO ROOT
   ============================================================================= */

.hec-hero {
  position:         relative;
  width:            100%;
  height:           var(--hec-hero-height);
  min-height:       var(--hec-hero-min-height);
  overflow:         hidden;
  display:          flex;
  align-items:      flex-end;

  /*
   * Isolation creates a new stacking context.
   * This prevents z-index from leaking to/from Elementor's header.
   */
  isolation:        isolate;

  /*
   * Will-change tells the browser to promote this element to its
   * own compositor layer, improving scroll performance.
   */
  will-change:      transform;
}


/* =============================================================================
   2. BACKGROUND LAYER
   ============================================================================= */

.hec-hero__bg {
  position:   absolute;
  inset:      0;
  z-index:    var(--hec-z-below);
  overflow:   hidden;

  /*
   * Subtle scale gives a slight "breathing room" so the CSS
   * clip from overflow:hidden on .hec-hero does not cut the edges
   * when the parallax transform in hero-media.js nudges the element.
   */
  transform:  scale(1.04);
  transform-origin: center center;
  transition: transform var(--hec-duration-crawl) var(--hec-ease-smooth);
}

/* Image type — background-image set via inline style in hero.php */
.hec-hero__bg--image {
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
}

/* Video type — <video> injected by hero-media.js */
.hec-hero__bg--video video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center center;
}

/* GIF type — <img> injected by hero-media.js */
.hec-hero__bg--gif img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center center;
}

/* Fallback — no media set, pure brand gradient */
.hec-hero__bg--fallback {
  background: linear-gradient(
    135deg,
    var(--hec-brand-brown-deep)   0%,
    var(--hec-brand-crimson)      35%,
    var(--hec-brand-amber-dark)   65%,
    var(--hec-brand-amber)        100%
  );
  background-size: 200% 200%;
  animation: hec-hero-gradient-shift 12s ease infinite;
}

@keyframes hec-hero-gradient-shift {
  0%   { background-position:   0%  50%; }
  50%  { background-position: 100%  50%; }
  100% { background-position:   0%  50%; }
}

/* Noscript fallback — shown when JS is disabled for video/gif types */
.hec-hero__bg-noscript {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
}


/* =============================================================================
   3. GRADIENT OVERLAY
   ============================================================================= */

.hec-hero__overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(
    to bottom,
    var(--hec-color-hero-overlay-start)  0%,
    rgba(21, 3, 3, 0.20)                30%,
    rgba(21, 3, 3, 0.55)                60%,
    var(--hec-color-hero-overlay-end)    100%
  );

  /*
   * Additional radial vignette darkens the outer edges slightly,
   * drawing the eye toward the centered title text.
   */
  mask-image: radial-gradient(
    ellipse 120% 100% at 50% 50%,
    black 40%,
    transparent 100%
  );

  /*
   * We layer a second gradient using pseudo-element for the vignette
   * without needing mask-image (better browser support).
   */
  pointer-events: none;
}

.hec-hero__overlay::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    transparent 30%,
    rgba(21, 3, 3, 0.20) 100%
  );
}


/* =============================================================================
   4. HERO CONTENT
   ============================================================================= */

.hec-hero__content {
  position:      relative;
  z-index:       2;
  width:         100%;
  max-width:     var(--hec-site-max-width);
  margin:        0 auto;
  padding:       var(--hec-space-10)
                 var(--hec-article-side-padding)
                 var(--hec-space-12);
  display:       flex;
  flex-direction: column;
  align-items:   flex-start;
  gap:           var(--hec-space-4);
}


/* =============================================================================
   5. DARK MODE TOGGLE — positioned in hero
   ============================================================================= */

.hec-dark-mode-toggle {
  position:         fixed;
  top:              var(--hec-space-5);
  right:            var(--hec-space-6);
  z-index:          var(--hec-z-dark-toggle);

  display:          flex;
  align-items:      center;
  gap:              var(--hec-space-2);

  padding:          var(--hec-space-2) var(--hec-space-4);
  border-radius:    var(--hec-radius-full);

  background:       var(--hec-color-toggle-bg);
  color:            var(--hec-color-toggle-text);
  backdrop-filter:  blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border:           1px solid rgba(255, 255, 255, 0.15);

  font-family:      var(--hec-font-ui);
  font-size:        var(--hec-text-xs);
  font-weight:      var(--hec-weight-medium);
  letter-spacing:   var(--hec-tracking-wide);
  text-transform:   uppercase;

  cursor:           pointer;
  transition:
    background    var(--hec-transition-fast),
    transform     var(--hec-transition-fast),
    box-shadow    var(--hec-transition-fast),
    border-color  var(--hec-transition-fast);
}

.hec-dark-mode-toggle:hover {
  background:  var(--hec-color-toggle-bg-hover);
  transform:   translateY(-1px);
  box-shadow:  var(--hec-shadow-md);
  border-color: rgba(255, 255, 255, 0.25);
}

.hec-dark-mode-toggle:active {
  transform:  translateY(0);
  box-shadow: none;
}

.hec-dark-mode-toggle__icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  color:       var(--hec-brand-gold);
  transition:  transform var(--hec-transition-spring);
}

.hec-dark-mode-toggle:hover .hec-dark-mode-toggle__icon {
  transform: rotate(20deg) scale(1.1);
}

.hec-dark-mode-toggle__label {
  font-size:      var(--hec-text-xs);
  letter-spacing: var(--hec-tracking-wider);
  text-transform: uppercase;
  white-space:    nowrap;
}

/* Hide label on small screens — icon only */
@media (max-width: 480px) {
  .hec-dark-mode-toggle__label {
    display: none;
  }

  .hec-dark-mode-toggle {
    padding: var(--hec-space-2) var(--hec-space-3);
  }
}


/* =============================================================================
   6. CATEGORY BADGE
   ============================================================================= */

.hec-hero__category-wrap {
  display:    flex;
  align-items: center;
}

.hec-hero__category-badge {
  display:          inline-flex;
  align-items:      center;
  padding:          var(--hec-space-1) var(--hec-space-4);
  border-radius:    var(--hec-radius-full);

  background-color: var(--hec-color-hero-badge-bg);
  color:            var(--hec-color-hero-badge-text);

  font-family:      var(--hec-font-meta);
  font-size:        var(--hec-text-xs);
  font-weight:      var(--hec-weight-semibold);
  letter-spacing:   var(--hec-tracking-widest);
  text-transform:   uppercase;
  white-space:      nowrap;

  border:           1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter:  blur(4px);

  transition:
    background-color var(--hec-transition-fast),
    transform        var(--hec-transition-fast),
    box-shadow       var(--hec-transition-fast);

  /*
   * Entrance animation — badge slides up and fades in
   * after the page loads. Class toggled by animations.js.
   */
  opacity:    0;
  transform:  translateY(8px);
  animation:  hec-hero-badge-enter
              var(--hec-duration-slow)
              var(--hec-ease-spring)
              0.1s
              forwards;
}

@keyframes hec-hero-badge-enter {
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.hec-hero__category-badge:hover {
  background-color: var(--hec-brand-amber-light);
  transform:        translateY(-1px);
  box-shadow:       var(--hec-shadow-amber);
}


/* =============================================================================
   7. POST TITLE
   ============================================================================= */

.hec-hero__title {
  font-family:    var(--hec-font-heading);
  font-size:      var(--hec-text-hero);
  font-weight:    var(--hec-weight-bold);
  line-height:    var(--hec-leading-tight);
  letter-spacing: var(--hec-tracking-tight);
  color:          var(--hec-color-hero-text);

  /*
   * Max width prevents the title from stretching too wide on
   * ultra-wide screens, which would compromise readability.
   */
  max-width:      16ch;

  /*
   * Text shadow gives the title a subtle lift above the image
   * even when the gradient alone is not sufficient (e.g., a very
   * light image behind a light-colored portion of the gradient).
   */
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.35),
    0 1px 3px  rgba(0, 0, 0, 0.25);

  /*
   * Entrance animation — title slides up from below.
   * Delayed slightly after the badge so they stagger.
   */
  opacity:   0;
  transform: translateY(16px);
  animation: hec-hero-title-enter
             var(--hec-duration-slow)
             var(--hec-ease-spring)
             0.2s
             forwards;
}

@keyframes hec-hero-title-enter {
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/*
 * Accent underline on the last word of the title.
 * Creates a subtle brand moment without overwhelming the heading.
 * Applied via JS in main.js wrapping the last word in a <span>.
 */
.hec-hero__title .hec-title-accent {
  position:         relative;
  display:          inline-block;
  color:            var(--hec-brand-gold);
}

.hec-hero__title .hec-title-accent::after {
  content:          '';
  position:         absolute;
  bottom:           -4px;
  left:             0;
  right:            0;
  height:           3px;
  background:       linear-gradient(
                      90deg,
                      var(--hec-brand-amber) 0%,
                      var(--hec-brand-gold)  100%
                    );
  border-radius:    var(--hec-radius-full);
  transform:        scaleX(0);
  transform-origin: left;
  animation:        hec-title-underline
                    var(--hec-duration-slow)
                    var(--hec-ease-out)
                    0.5s
                    forwards;
}

@keyframes hec-title-underline {
  to { transform: scaleX(1); }
}


/* =============================================================================
   8. SCROLL INDICATOR
   A subtle animated chevron at the bottom of the hero inviting
   the reader to scroll down into the content.
   ============================================================================= */

.hec-hero::after {
  content:    '';
  position:   absolute;
  bottom:     var(--hec-space-6);
  left:       50%;
  transform:  translateX(-50%);
  z-index:    3;

  width:      24px;
  height:     24px;
  border-right: 2px solid rgba(255, 255, 255, 0.50);
  border-bottom: 2px solid rgba(255, 255, 255, 0.50);
  transform:  translateX(-50%) rotate(45deg);

  animation:  hec-scroll-bounce
              1.8s
              var(--hec-ease-smooth)
              1s
              infinite;

  opacity:    0;
  animation-fill-mode: forwards;
}

@keyframes hec-scroll-bounce {
  0%   { opacity: 0; transform: translateX(-50%) rotate(45deg) translateY(-8px); }
  30%  { opacity: 0.6; }
  60%  { opacity: 0.6; transform: translateX(-50%) rotate(45deg) translateY(0);  }
  100% { opacity: 0;   transform: translateX(-50%) rotate(45deg) translateY(8px); }
}

/*
 * Hide scroll indicator once the page has been scrolled.
 * Class 'hec-hero--scrolled' added by main.js on first scroll.
 */
.hec-hero--scrolled::after {
  display: none;
}


/* =============================================================================
   9. RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
  .hec-hero__content {
    padding-bottom: var(--hec-space-10);
  }
}

@media (max-width: 768px) {
  .hec-hero {
    height:     clamp(220px, 40vh, 320px);
    min-height: 220px;
    align-items: flex-end;
  }

  .hec-hero__content {
    padding:    var(--hec-space-8) var(--hec-space-6) var(--hec-space-10);
    gap:        var(--hec-space-3);
  }

  .hec-hero__title {
    max-width: 22ch;
  }
}

@media (max-width: 480px) {
  .hec-hero {
    height: clamp(200px, 45vh, 300px);
  }

  .hec-hero__content {
    padding: var(--hec-space-6) var(--hec-space-5) var(--hec-space-8);
  }

  /*
   * Hide the scroll indicator on mobile — not needed as
   * mobile users intuitively know to scroll.
   */
  .hec-hero::after {
    display: none;
  }
}


/* =============================================================================
   10. REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hec-hero__category-badge,
  .hec-hero__title {
    animation:  none;
    opacity:    1;
    transform:  none;
  }

  .hec-hero__title .hec-title-accent::after {
    animation:  none;
    transform:  scaleX(1);
  }

  .hec-hero__bg--fallback {
    animation:  none;
    background-position: 50% 50%;
  }

  .hec-hero::after {
    display: none;
  }
}