/* ============================================================================
   Key for Change — 100vh animated Hero component (task 12635)

   Full-bleed, one-viewport-tall hero. Every colour / type / spacing / metric /
   easing value comes from tokens.css (--k4c-*); this file only lays out and
   animates the hero. Loaded between nav.css (82) and custom.css (80) at
   priority 81 so component tweaks in custom.css can still win.

   Motion policy: all animation is decorative. A dedicated prefers-reduced-motion
   block at the foot of this file forces every animated element to its final,
   fully-legible state (no delay-flash), independent of the global token reset.
   ========================================================================== */

.k4c-hero {
  position: relative;
  isolation: isolate;                 /* own stacking context for the -z layers */
  overflow: hidden;
  /* Exactly one viewport tall. The fixed transparent nav overlays the top, so
     the section itself is a full 100vh; content is padded clear of the bar.
     dvh last so mobile browser chrome is accounted for (svh/vh fallbacks). */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--k4c-purple);      /* base under the animated gradient layer */
  color: var(--k4c-white);
  text-align: center;
  /* Clear the fixed nav at the top; breathing room at the bottom for the cue. */
  padding: calc(var(--k4c-nav-height) + var(--k4c-space-7)) var(--k4c-container-pad) var(--k4c-space-9);
}

/* ---- Background: drifting brand-purple gradient -------------------------- */
.k4c-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    135deg,
    var(--k4c-purple-900) 0%,
    var(--k4c-purple) 42%,
    var(--k4c-purple-light) 100%
  );
  background-size: 220% 220%;
  animation: k4c-hero-gradient 20s var(--k4c-ease) infinite alternate;
}
@keyframes k4c-hero-gradient {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ---- Floating yellow "spark" glow (echoes potential / CTA colour) -------- */
.k4c-hero__glow {
  position: absolute;
  top: 14%;
  right: 12%;
  z-index: -1;
  width: clamp(18rem, 42vw, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    color-mix(in oklab, var(--k4c-yellow) 34%, transparent) 0%,
    transparent 68%
  );
  filter: blur(8px);
  pointer-events: none;
  animation: k4c-hero-float 12s ease-in-out infinite alternate;
}
@keyframes k4c-hero-float {
  0%   { transform: translate3d(0, 0, 0)        scale(1);    opacity: 0.85; }
  100% { transform: translate3d(-3%, 4%, 0)     scale(1.08); opacity: 1;    }
}

/* Cool light-purple counter-glow, bottom-left — balances the yellow spark. */
.k4c-hero__glow--alt {
  top: auto;
  right: auto;
  bottom: -8%;
  left: -6%;
  width: clamp(20rem, 46vw, 40rem);
  background: radial-gradient(
    circle at center,
    color-mix(in oklab, var(--k4c-purple-light) 55%, transparent) 0%,
    transparent 66%
  );
  animation: k4c-hero-float-alt 15s ease-in-out infinite alternate;
}
@keyframes k4c-hero-float-alt {
  0%   { transform: translate3d(0, 0, 0)     scale(1.05); opacity: 0.7; }
  100% { transform: translate3d(4%, -3%, 0)  scale(1);    opacity: 0.9; }
}

/* ---- Content ------------------------------------------------------------- */
/* Split layout: message column + a real portrait of Keeley (E-E-A-T warmth).
   Two columns on desktop, stacks (text → image) on tablet/mobile. */
.k4c-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--k4c-container);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  text-align: left;
}

.k4c-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--k4c-space-5);
  max-width: 40rem;
}

/* ---- Portrait ------------------------------------------------------------ */
.k4c-hero__media {
  position: relative;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 27rem;
}
/* Soft yellow "spark" halo behind the frame — ties the portrait to the brand
   glow language without another photographic layer. Decorative only. */
.k4c-hero__media::before {
  content: "";
  position: absolute;
  inset: -9% -7% -12% -9%;
  z-index: -1;
  border-radius: var(--k4c-radius-lg);
  background: radial-gradient(
    circle at 60% 40%,
    color-mix(in oklab, var(--k4c-yellow) 30%, transparent) 0%,
    transparent 70%
  );
  filter: blur(10px);
}
.k4c-hero__portrait {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--k4c-radius-lg);
  border: 4px solid color-mix(in oklab, var(--k4c-white) 88%, transparent);
  box-shadow: var(--k4c-shadow-lg);
}

.k4c-hero__eyebrow {
  color: var(--k4c-yellow);           /* eyebrow reads warm on the dark hero */
  margin: 0;
}

.k4c-hero__title {
  margin: 0;
  color: var(--k4c-white);            /* override tokens.css purple h1 on dark */
  font-size: var(--k4c-fs-hero);
  font-weight: var(--k4c-fw-extrabold);
  line-height: var(--k4c-lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.k4c-hero__accent { color: var(--k4c-yellow); }

.k4c-hero__lede {
  margin: 0;
  max-width: 40rem;
  font-size: var(--k4c-fs-md);
  line-height: var(--k4c-lh-body);
  color: color-mix(in oklab, var(--k4c-white) 88%, transparent);
}

.k4c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--k4c-space-4);
  margin-top: var(--k4c-space-3);
}

/* White-outline ghost CTA — the token .k4c-btn--ghost is purple (for light
   backgrounds); on the dark hero the secondary action needs a white outline. */
.k4c-hero__btn-outline {
  background: transparent;
  color: var(--k4c-white);
  border-color: color-mix(in oklab, var(--k4c-white) 70%, transparent);
}
.k4c-hero__btn-outline:hover {
  background: var(--k4c-white);
  color: var(--k4c-purple);
  border-color: var(--k4c-white);
}

/* ---- Keyboard focus rings (match nav treatment) -------------------------- */
.k4c-hero__btn-outline:focus-visible,
.k4c-hero .k4c-btn--primary:focus-visible,
.k4c-hero__scroll:focus-visible {
  outline: 3px solid var(--k4c-yellow);
  outline-offset: 3px;
}

/* ---- Scroll cue ---------------------------------------------------------- */
.k4c-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--k4c-space-5);
  transform: translateX(-50%);
  z-index: 1;
  width: 26px;
  height: 42px;
  border: 2px solid color-mix(in oklab, var(--k4c-white) 55%, transparent);
  border-radius: var(--k4c-radius-pill);
  display: inline-flex;
  justify-content: center;
  padding-top: 7px;
  transition: border-color var(--k4c-transition);
}
.k4c-hero__scroll:hover { border-color: var(--k4c-yellow); }
.k4c-hero__scroll-dot {
  width: 4px;
  height: 8px;
  border-radius: var(--k4c-radius-pill);
  background: var(--k4c-white);
  animation: k4c-hero-scroll 1.8s var(--k4c-ease) infinite;
}
.k4c-hero__scroll:hover .k4c-hero__scroll-dot { background: var(--k4c-yellow); }
@keyframes k4c-hero-scroll {
  0%   { transform: translateY(0);    opacity: 0; }
  30%  { opacity: 1; }
  60%  { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(10px); opacity: 0; }
}

/* ---- Staggered entrance (eyebrow → H1 → lede → CTAs) ---------------------- */
.k4c-hero__eyebrow,
.k4c-hero__title,
.k4c-hero__lede,
.k4c-hero__actions,
.k4c-hero__media {
  animation: k4c-hero-rise 820ms var(--k4c-ease) both;
}
.k4c-hero__eyebrow { animation-delay: 120ms; }
.k4c-hero__title   { animation-delay: 260ms; }
.k4c-hero__lede    { animation-delay: 420ms; }
.k4c-hero__actions { animation-delay: 560ms; }
.k4c-hero__media   { animation-delay: 340ms; }
.k4c-hero__scroll  { animation: k4c-hero-rise 820ms var(--k4c-ease) 900ms both; }
@keyframes k4c-hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* keep the scroll cue horizontally centred while it rises */
.k4c-hero__scroll { --_rise: 1; }

/* ---- Stack the split below ~900px (text → portrait), re-centre ----------- */
@media (max-width: 900px) {
  .k4c-hero__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--k4c-space-7);
    text-align: center;
  }
  .k4c-hero__content {
    align-items: center;
    max-width: 44rem;
  }
  .k4c-hero__media { max-width: 20rem; order: 2; }
}

/* ---- Small screens ------------------------------------------------------- */
@media (max-width: 767.98px) {
  .k4c-hero { padding-bottom: var(--k4c-space-8); }
  .k4c-hero__actions { width: 100%; }
  .k4c-hero__actions .k4c-btn { flex: 1 1 auto; }
  .k4c-hero__glow { top: 8%; right: -6%; }
  .k4c-hero__media { max-width: 16rem; }
}

/* ---- Reduced motion: pin everything to its final, legible state ---------- */
@media (prefers-reduced-motion: reduce) {
  .k4c-hero__eyebrow,
  .k4c-hero__title,
  .k4c-hero__lede,
  .k4c-hero__actions,
  .k4c-hero__media,
  .k4c-hero__scroll {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .k4c-hero__scroll { transform: translateX(-50%); }   /* preserve centring */
  .k4c-hero__bg,
  .k4c-hero__glow,
  .k4c-hero__scroll-dot { animation: none; }
  .k4c-hero__glow { opacity: 0.9; }
}