/* ============================================================
   HERO — Background stack (media wrapper → LCP image → canvas)
   Goal:
   - LCP <img> renders instantly for performance
   - Canvas fades in after JS draws first frame
   - Optional Ken Burns runs only after JS adds `.kenburns`
============================================================ */

/* Hero container establishes positioning context */
#hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* Background layer behind content */
#hero .hero-media-wrapper{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0b0c0f;     /* fallback behind images */
  pointer-events: none;     /* hero remains clickable */
}

/* Keep hero content above background */
#hero > .container{
  position: relative;
  z-index: 2;
}

/* LCP base image: shows instantly, then fades out when canvas takes over */
#hero .hero-bg-lcp{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;

  opacity: 1;
  transition: opacity 400ms ease; /* JS can override duration */
}

/* Canvas sits above LCP image; starts hidden until first frame is drawn */
#hero .hero-bg-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  opacity: 0;              /* JS fades to 1 after first frame */
  pointer-events: none;

  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* ============================================================
   HERO — Ken Burns (canvas)
   - JS sets CSS variables on the canvas element
   - Animation only runs when JS adds `.kenburns`
============================================================ */
#hero .hero-bg-canvas.kenburns{
  animation: heroKenBurnsPan var(--kb-duration, 56s) ease-in-out infinite alternate;
}

@keyframes heroKenBurnsPan{
  0%{
    transform:
      scale(var(--kb-s0, 1))
      translate3d(var(--kb-x0, 0%), var(--kb-y0, 0%), 0);
  }
  35%{
    transform:
      scale(var(--kb-s1, 1.02))
      translate3d(var(--kb-x1, -1.2%), var(--kb-y1, -0.8%), 0);
  }
  70%{
    transform:
      scale(var(--kb-s2, 1.035))
      translate3d(var(--kb-x2, 1.1%), var(--kb-y2, -1.0%), 0);
  }
  100%{
    transform:
      scale(var(--kb-s3, 1.045))
      translate3d(var(--kb-x3, 1.6%), var(--kb-y3, 1.1%), 0);
  }
}

/* Respect reduced motion:
   - Hide canvas entirely
   - Remove transitions/animations that imply movement */
@media (prefers-reduced-motion: reduce){
  #hero .hero-bg-canvas{
    display: none !important;
    animation: none !important;
    transform: none !important;
  }
  #hero .hero-bg-lcp{
    transition: none !important;
  }
}


/* ============================================================
   HERO — Quote Rotator (DEDUPED “single source of truth”)
   Fixes:
   - Lock the panel height (no resize between quotes)
   - Stop vertical “jump” caused by centering
   - Put padding on wrapper so it’s consistent
   - Pin footer to bottom so attribution never bounces
============================================================ */

/* Quick knobs for easy tuning */
#hero{
  --quote-panel-h: 420px;        /* tweak: 380–460 */
  --quote-pad-y: 1.75rem;        /* top/bottom padding */
  --quote-pad-x: 2rem;           /* left/right padding */
  --quote-measure: 46ch;         /* comfortable line length */
  --quote-fade-ms: 1000ms;       /* wrapper fade */
}

/* The visible “window” (never changes size) */
#hero .hero-quote-box .quote-rotator{
  position: relative;
  height: var(--quote-panel-h);
  min-height: 0 !important;      /* overrides old min-height behavior */
  max-height: var(--quote-panel-h);
  overflow: hidden;

  padding: 0 !important;         /* padding lives on .quote-wrapper */
  box-sizing: border-box;

  display: block !important;     /* prevents any inherited flex centering drift */
}

/* Each quote fills the panel and starts from the same top position */
#hero .hero-quote-box .quote-wrapper{
  position: absolute;
  inset: 0;

  opacity: 0;
  transition: opacity var(--quote-fade-ms) ease-in-out;
  z-index: 1;

  padding: var(--quote-pad-y) var(--quote-pad-x);
  box-sizing: border-box;

  display: flex;
  align-items: flex-start;       /* KEY: no vertical centering drift */
  justify-content: flex-start;
}

/* Visible quote state */
#hero .hero-quote-box .quote-wrapper.visible{
  opacity: 1;
  z-index: 2;
}

/* Keep blockquote layout stable (no “jump” during fades)
   Switch from flex + margin-top:auto to a 2-row grid (text + footer),
   and explicitly control the gap. */
#hero .hero-quote-box .quote-wrapper blockquote{
  width: 100%;
  max-width: var(--quote-measure);

  /* reset defaults that can change spacing mid-fade */
  margin: 0;
  padding: 0;

  /* stable layout: text area + footer area */
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: start;

  /* consistent quote-to-footer spacing */
  row-gap: 1.15rem;
}

/* Quote text (bigger, better fill for locked panel) */
#hero .hero-quote-box .quote-rotator blockquote p{
  font-size: clamp(1.15rem, 0.55vw + 1.05rem, 1.55rem) !important;
  line-height: clamp(1.6, 0.25vw + 1.55, 1.85) !important;
  letter-spacing: 0.01em;
  margin: 0; /* keep predictable */
}

/* Attribution: remove default margins so it can't “snap” on fade */
#hero .hero-quote-box .quote-rotator blockquote footer{
  margin: 0; /* IMPORTANT: removes the jump */
  font-size: clamp(1.0rem, 0.25vw + 0.95rem, 1.15rem) !important;
  opacity: 0.92;
}


/* ============================================================
   HERO — Desktop-only alignment tweak
   Goal: Align the right quote box with the left panel (no vertical centering)
============================================================ */
@media (min-width: 992px){
  #hero .col-lg-5.d-flex.align-items-center.desktop-only{
    align-items: flex-start !important;
    padding-top: 1px; /* tiny nudge down; adjust 0–40px if needed */
  }

  #hero .hero-quote-box{
    margin-top: 0 !important;
  }
}


/* ============================================================
   HERO — Glass panel inner padding (clean + safe)
   Note: Removed invalid `padding-right: 1;` (missing units)
============================================================ */
#hero .glass-panel{
  /* keep your existing panel padding as-is */
}

#hero .glass-panel > *{
  padding-left: 1rem;  /* try 0.75rem–1.25rem */
  box-sizing: border-box;
  /* intentionally NOT setting padding-right so we don't change layout unexpectedly */
}


/* Attribution: hard-reset margins so it cannot “snap” at fade start */
#hero .hero-quote-box .quote-rotator blockquote footer{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important; /* prevents line-box wiggle */
  font-size: clamp(1.0rem, 0.25vw + 0.95rem, 1.15rem) !important;
  opacity: 0.92;
}

/* Guard: wrapper geometry must be identical whether visible or not */
#hero .hero-quote-box .quote-wrapper,
#hero .hero-quote-box .quote-wrapper.visible{
  position: absolute !important;
  inset: 0 !important;
  padding: var(--quote-pad-y) var(--quote-pad-x) !important;
  box-sizing: border-box !important;
  transform: none !important;     /* in case any animation/transform exists elsewhere */
}


/* =========================================================
   HERO — Quote panel animated gradient (Amicus accent vibe)
   Base color: #E27D60
   (Desktop-only by default; remove media query if you want it everywhere)
========================================================= */

@media (min-width: 768px){
  /* Target the visible gray panel */
  #hero .hero-quote-box .quote-rotator{
    position: relative;
    overflow: hidden;                 /* keeps animation clean inside rounded corners */

    /* Animated gradient */
   #hero .hero-quote-box .quote-rotator{
  background: linear-gradient(135deg,
    #3F2F2A 0%,
    #4B3A34 40%,
    #6A4B40 75%,
    #3F2F2A 100%
  ) !important;
  background-size: 240% 240% !important;
  animation: heroQuoteGradient 18s ease-in-out infinite !important;
}
    /* Helps text stay readable on warm gradients */
    box-shadow: 0 18px 42px rgba(0,0,0,.10) !important;
  }

  /* Optional: a soft darkening veil for readability (very subtle) */
  #hero .hero-quote-box .quote-rotator::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.14) 0%,
      rgba(0,0,0,.18) 55%,
      rgba(0,0,0,.22) 100%
    );
    opacity: .55; /* adjust 0.35–0.70 */
    z-index: 0;
  }

  /* Ensure quote content stays above the overlay */
  #hero .hero-quote-box .quote-wrapper{
    position: absolute; /* you already use this */
    z-index: 1;
  }

  @keyframes heroQuoteGradient{
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
}