/* ============================================================
   American Dream Real Estate LLC — Animations
   Signature: a slowly waving American flag hero.

   Inspired by the slow-waving flag wallpaper aesthetic — the
   flag dominates the hero, sky shows through subtly at the
   edges, fabric ripples drift across the surface.

   Markup:
     <section class="ad-flag-hero">
       <div class="ad-flag-hero__sky"></div>
       <div class="ad-flag-hero__flag">
         <div class="ad-flag-hero__canton">
           <svg viewBox="0 0 60 32" preserveAspectRatio="xMidYMid meet">
             ... 50 stars ...
           </svg>
         </div>
       </div>
       <div class="ad-flag-hero__ripple"></div>
       <div class="ad-flag-hero__vignette"></div>
       <div class="ad-flag-hero__content">
         your hero content here
       </div>
     </section>

   What it does:
     - Sky gradient base (lighter atmospheric blue, like wallpaper)
     - Waving flag covers the hero — 13 stripes + canton with 50 stars
     - Fabric ripple: drifting shadow + highlight bands suggest wind
     - The whole flag billows via subtle skew + scale animation
     - Vignette ensures content readability
     - Pure CSS — no images, no JavaScript
     - Respects prefers-reduced-motion
   ============================================================ */

.ad-flag-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 70vh;
  color: var(--color-pure-white, #FFFFFF);

  /* Sky background — lighter blue gradient like the wallpaper */
  background: linear-gradient(
    180deg,
    #6B89A8 0%,
    #5478A0 45%,
    #44688E 100%
  );
}

/* ---------- Layer 1: the flag stripes (full coverage) ---------- */
.ad-flag-hero__flag {
  position: absolute;
  inset: -2% -2% -2% -2%;     /* slight overflow so wave doesn't reveal edges */
  z-index: 1;

  /* The 13 stripes (7 red, 6 white, alternating, starting red) */
  background: linear-gradient(
    to bottom,
    #B22234   0%,    #B22234   7.692%,
    #FFFFFF   7.692%, #FFFFFF 15.384%,
    #B22234  15.384%, #B22234 23.076%,
    #FFFFFF  23.076%, #FFFFFF 30.769%,
    #B22234  30.769%, #B22234 38.461%,
    #FFFFFF  38.461%, #FFFFFF 46.153%,
    #B22234  46.153%, #B22234 53.846%,
    #FFFFFF  53.846%, #FFFFFF 61.538%,
    #B22234  61.538%, #B22234 69.230%,
    #FFFFFF  69.230%, #FFFFFF 76.923%,
    #B22234  76.923%, #B22234 84.615%,
    #FFFFFF  84.615%, #FFFFFF 92.307%,
    #B22234  92.307%, #B22234 100%
  );

  opacity: 0.93;   /* tiny transparency so sky bleeds through for atmosphere */

  animation: ad-flag-wave 14s ease-in-out infinite;
  transform-origin: 0% 50%;   /* hinges from the left, like a flagpole */
  will-change: transform;
}

/* ---------- Layer 2: canton (blue square upper-left) ---------- */
.ad-flag-hero__canton {
  position: absolute;
  top: -2%;
  left: -2%;
  width: 40%;
  height: 53.846%;     /* 7/13 of flag height — accurate flag proportion */
  z-index: 2;

  background: var(--color-flag-navy, #3C3B6E);

  /* Match the wave so canton moves with the flag */
  animation: ad-flag-wave 14s ease-in-out infinite;
  transform-origin: 0% 50%;
  will-change: transform;
}

.ad-flag-hero__canton svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Wave keyframes ---------- */
@keyframes ad-flag-wave {
  0%, 100% { transform: skewY(-1.5deg) scaleY(1); }
  25%      { transform: skewY( 0.5deg) scaleY(1.015); }
  50%      { transform: skewY( 1.5deg) scaleY(0.985); }
  75%      { transform: skewY(-0.5deg) scaleY(1.005); }
}

/* ---------- Layer 3: drifting fabric ripple (the wind effect) ---------- */
/* Diagonal shadow + highlight bands that drift sideways. With multiply blend
   mode, the dark bands actually shadow the flag underneath, creating the
   illusion of fabric folds catching the wind. */
.ad-flag-hero__ripple {
  position: absolute;
  inset: -10%;
  z-index: 3;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      100deg,
      transparent 0,
      transparent 90px,
      rgba(0, 0, 0, 0.18) 130px,
      transparent 170px,
      transparent 260px,
      rgba(255, 255, 255, 0.14) 300px,
      transparent 340px,
      transparent 440px
    );
  background-size: 440px 100%;

  mix-blend-mode: multiply;
  animation: ad-flag-ripple 9s linear infinite;
  will-change: background-position;
}

@keyframes ad-flag-ripple {
  from { background-position: 0 0; }
  to   { background-position: 440px 0; }
}

/* ---------- Layer 4: vignette for content contrast ---------- */
/* Darker on the left where content sits (matches wallpaper's left-shadow),
   plus a soft radial darkening at the edges. */
.ad-flag-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;

  background:
    /* horizontal gradient: darker on left for text readability */
    linear-gradient(
      90deg,
      rgba(20, 25, 40, 0.55) 0%,
      rgba(20, 25, 40, 0.25) 35%,
      transparent 65%
    ),
    /* radial vignette at the edges */
    radial-gradient(
      ellipse 100% 100% at 50% 50%,
      transparent 40%,
      rgba(20, 25, 40, 0.25) 80%,
      rgba(20, 25, 40, 0.45) 100%
    );
}

/* ---------- Layer 5: content (the words) ---------- */
.ad-flag-hero__content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: var(--space-8, 6rem) var(--space-4, 1.5rem);
}

.ad-flag-hero__content h1,
.ad-flag-hero__content .display {
  color: var(--color-pure-white, #FFFFFF);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.ad-flag-hero__content .lede,
.ad-flag-hero__content p {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.ad-flag-hero__content .eyebrow {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ad-flag-hero__flag,
  .ad-flag-hero__canton,
  .ad-flag-hero__ripple {
    animation: none !important;
  }
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 768px) {
  .ad-flag-hero { min-height: 65vh; }
  .ad-flag-hero__content { padding: var(--space-7, 4rem) var(--space-3, 1rem); }
  /* Canton stars are smaller on mobile but still readable */
  .ad-flag-hero__canton { width: 45%; }
}

/* ============================================================
   Optional micro-animations for use elsewhere on the site
   ============================================================ */

/* Fade-in-up for staggered hero text reveals */
.ad-fade-up {
  opacity: 0;
  transform: translateY(16px);
  animation: ad-fade-up var(--duration-slow, 400ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
.ad-fade-up--1 { animation-delay: 100ms; }
.ad-fade-up--2 { animation-delay: 250ms; }
.ad-fade-up--3 { animation-delay: 400ms; }
.ad-fade-up--4 { animation-delay: 550ms; }

@keyframes ad-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ad-fade-up { animation: none; opacity: 1; transform: none; }
}