/* ==========================================================================
   hero-polish.css
   - Fixes unwanted inner scrollbars caused by the CSS overflow coercion
     (overflow-x: hidden + overflow-y: visible  ->  overflow-y computes to auto).
   - Animates the pink hero "blob" decoration so it drifts gently.
   - Adds a soft in/out glow pulse to the hero title text.
   - Makes the Services hero fill the viewport height like a proper hero.
   Loaded LAST on services.html, gallery.html and about.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Stop containers from becoming scrollable.
   These were clipped only on the X axis (overflow-x: hidden) while Y stayed
   visible. Per spec that coerces overflow-y to `auto`, which produced a stray
   inner scrollbar whenever content was a hair taller than the box.
   `overflow-x: clip` keeps the horizontal clipping without creating a scroll
   container, so Y can stay truly visible and nothing scrolls internally.
   -------------------------------------------------------------------------- */
.services-reference .services-cta,
.about-poster-page .about-home-service-row,
.about-poster-page .container,
.about-poster-page > .section,
.about-poster-page > .section .container {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* --------------------------------------------------------------------------
   2. Animated pink hero blob.
   The blob is the ::before on each hero. It had no transform of its own, so
   we can drift it freely. Kept subtle so it reads as "alive", not busy.
   -------------------------------------------------------------------------- */
.services-gallery-hero::before,
.gallery-hero::before,
.about-home-hero::before {
  will-change: transform;
  animation: heroBlobDrift 16s ease-in-out infinite;
}

@keyframes heroBlobDrift {
  0%   { transform: translate(0, 0)        scale(1);    }
  20%  { transform: translate(28px, -22px) scale(1.09); }
  40%  { transform: translate(16px, 20px)  scale(1.02); }
  60%  { transform: translate(-22px, 10px) scale(1.07); }
  80%  { transform: translate(-14px, -16px) scale(1.04); }
  100% { transform: translate(0, 0)        scale(1);    }
}

/* --------------------------------------------------------------------------
   3. Hero title glow pulse.
   The titles already carry an !important text-shadow, and !important beats a
   CSS animation, so animating text-shadow would do nothing. We pulse `filter:
   drop-shadow()` instead (unset on these elements) for a clean in/out glow.
   Scoped to the hero title only ( .script-title.small elsewhere is untouched ).
   -------------------------------------------------------------------------- */
.services-gallery-hero .service-script-title,
.gallery-hero .script-title,
.about-home-hero .about-home-title {
  will-change: filter;
  animation: heroTitleGlow 3.4s ease-in-out infinite;
}

@keyframes heroTitleGlow {
  0%,
  100% { filter: drop-shadow(0 0 5px rgba(255, 150, 195, .22)); }
  50%  { filter: drop-shadow(0 0 24px rgba(255, 150, 195, .72)); }
}

/* --------------------------------------------------------------------------
   4. Services hero fills the viewport (desktop), with no vertical padding.
   The card already sits inside a max-width parent, so it stays inset
   horizontally; here we just give it full height and center its content.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .services-gallery-hero {
    min-height: calc(100vh - 96px) !important;
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
  }
}

/* --------------------------------------------------------------------------
   Respect reduced-motion preferences: hold everything still.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .services-gallery-hero::before,
  .gallery-hero::before,
  .about-home-hero::before,
  .services-gallery-hero .service-script-title,
  .gallery-hero .script-title,
  .about-home-hero .about-home-title {
    animation: none !important;
  }
}