/* =============================================================================
   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;

  /*
   * Cascading bottom-up mask + soft top fade.
   * Guarantees the title (anchored to the bottom of the hero) has a
   * near-opaque dark band behind it no matter what the image shows.
   * Stop positions are tuned so:
   *   0%–25%   image breathes (very subtle top fade for category badge)
   *   25%–60%  smooth diagonal cascade (no banding)
   *   60%–100% strong dark band — title sits here
   */
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.82) 15%,
      rgba(10, 5, 2, 0.62) 35%,
      rgba(10, 5, 2, 0.35) 55%,
      rgba(0, 0, 0, 0.12) 75%,
      rgba(0, 0, 0, 0.00) 100%
    );

  pointer-events: none;
}

/*
 * Second layer — a soft, slightly off-center radial darken biased
 * toward the bottom-left where the title sits. Subtle so it does
 * not feel like a vignette, just adds a touch more contrast under
 * the title block on busy images.
 */
.hec-hero__overlay::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(
    ellipse 80% 60% at 30% 90%,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.00) 70%
  );
  pointer-events: none;
}


/* =============================================================================
   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
   ============================================================================= */

/*
 * Toggle uses two themable CSS variables so the same rules render
 * a light pill in light mode and a dark pill in dark mode without
 * duplicating the whole declaration block. Defaults below match
 * light mode; the [data-theme="dark"] block overrides them.
 */
.hec-dark-mode-toggle {
  /* Themable surface */
  --hec-toggle-fill-1:    rgba(255, 250, 243, 0.78);
  --hec-toggle-fill-2:    rgba(255, 250, 243, 0.62);
  --hec-toggle-sheen:     rgba(255, 255, 255, 0.45);
  --hec-toggle-text:      #2a1a0a;
  --hec-toggle-border:    rgba(209, 106, 11, 0.40);
  --hec-toggle-border-hv: rgba(209, 106, 11, 0.75);
  --hec-toggle-shadow-1:  rgba(0, 0, 0, 0.18);
  --hec-toggle-shadow-2:  rgba(209, 106, 11, 0.18);
  --hec-toggle-shadow-hv: rgba(209, 106, 11, 0.35);
  --hec-toggle-icon:      var(--hec-brand-amber);
  --hec-toggle-icon-hv:   var(--hec-brand-amber-dark);
  --hec-toggle-halo:      rgba(255, 191, 0, 0.22);

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

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

  padding:          10px 18px;
  border-radius:    16px!important;

  /* Two-layer fill: soft sheen + main surface. */
  background:
    linear-gradient(
      180deg,
      var(--hec-toggle-sheen) 0%,
      rgba(255, 255, 255, 0.00) 55%
    ),
    linear-gradient(
      135deg,
      var(--hec-toggle-fill-1) 0%,
      var(--hec-toggle-fill-2) 100%
    );
  color:            var(--hec-toggle-text);

  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);

  border:           1px solid var(--hec-toggle-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 10px 24px var(--hec-toggle-shadow-1),
    0 0 22px var(--hec-toggle-shadow-2);

  font-family:      var(--hec-font-ui);
  font-size:        11px;
  font-weight:      var(--hec-weight-semibold);
  letter-spacing:   0.10em;
  text-transform:   uppercase;
  line-height:      1;

  cursor:           pointer;
  appearance:       none;
  -webkit-appearance: none;
  outline:          none;

  transition:
    transform    220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow   220ms ease,
    border-color 220ms ease,
    background   220ms ease,
    color        220ms ease;
}

.hec-dark-mode-toggle:hover {
  transform:    translateY(-1px);
  border-color: var(--hec-toggle-border-hv);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.40) inset,
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 14px 28px var(--hec-toggle-shadow-1),
    0 0 28px var(--hec-toggle-shadow-hv);
}

.hec-dark-mode-toggle:focus-visible {
  border-color: var(--hec-brand-amber);
  box-shadow:
    0 0 0 3px rgba(209, 106, 11, 0.30),
    0 14px 28px var(--hec-toggle-shadow-1);
}

.hec-dark-mode-toggle:active {
  transform: translateY(0) scale(0.98);
}

/* Icon disc — small halo around the sun/moon. */
.hec-dark-mode-toggle__icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  flex-shrink:     0;
  border-radius:   50%;
  background:      radial-gradient(
                     circle at 30% 30%,
                     var(--hec-toggle-halo) 0%,
                     rgba(255, 255, 255, 0.00) 70%
                   );
  color:           var(--hec-toggle-icon);
  transition:      transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1),
                   color    220ms ease,
                   filter   220ms ease;
}

.hec-dark-mode-toggle__icon svg {
  width:  16px;
  height: 16px;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

.hec-dark-mode-toggle:hover .hec-dark-mode-toggle__icon {
  transform: rotate(-18deg) scale(1.08);
  color:     var(--hec-toggle-icon-hv);
  filter:    drop-shadow(0 0 8px var(--hec-toggle-halo));
}

.hec-dark-mode-toggle__label {
  font-size:      11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space:    nowrap;
  color:          inherit;
}

/* DARK MODE — override the themable variables only. */
[data-theme="dark"] .hec-dark-mode-toggle {
  --hec-toggle-fill-1:    rgba(22, 17, 11, 0.92);
  --hec-toggle-fill-2:    rgba(10, 6, 2, 0.92);
  --hec-toggle-sheen:     rgba(255, 255, 255, 0.06);
  --hec-toggle-text:      #f5ede0;
  --hec-toggle-border:    rgba(255, 191, 0, 0.30);
  --hec-toggle-border-hv: rgba(255, 191, 0, 0.65);
  --hec-toggle-shadow-1:  rgba(0, 0, 0, 0.45);
  --hec-toggle-shadow-2:  rgba(255, 191, 0, 0.12);
  --hec-toggle-shadow-hv: rgba(255, 191, 0, 0.30);
  --hec-toggle-icon:      var(--hec-brand-gold);
  --hec-toggle-icon-hv:   #ffd564;
  --hec-toggle-halo:      rgba(255, 191, 0, 0.30);
}

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

  .hec-dark-mode-toggle {
    padding: 10px 12px;
  }
}


/* =============================================================================
   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;
  }
}