/* iNtegra Counselling - HERO V4 "Paper and Sage".
   ------------------------------------------------------------------
   A portable hero layer. It loads AFTER css/redesign.css and
   css/index-v3.css and restyles ONLY the hero, scoped under .hero-v4.
   Nothing here touches the rest of the site, so the current 31 pages
   are unaffected until you deliberately add the class and the link.

   Why a light hero: this is a counselling practice, not a product
   launch. Warm neutrals and muted greens read as calm and safe, dark
   high-contrast type is easier to read on a long page, and a light hero
   sits properly under the site's already-light glass header. It also
   survives the text-heavy topic pages far better than the dark stage did.

   Palette: bone paper, deep spruce ink, muted sage, honey accent.
   Type: the site's existing serif stack. No new fonts, no CDN, no
   third-party requests.

   Every animation here is CSS only and is switched on by the `.fx`
   class that redesign-fx.js adds. With JS off or prefers-reduced-motion
   on, all text is visible and static. Nothing is hidden behind JS.

   TO ROLL THIS OUT TO OTHER PAGES LATER:
     1. add class "hero-v4" to that page's <section class="hero">
     2. link css/hero-v4.css AFTER css/index-v3.css
     3. add a static <div class="hero-badge"> inside .hero-copy so the
        label is real HTML instead of a JS injection
   Full checklist in HERO-V4-NOTES.md. */

/* ==================== tokens (scoped, no collisions) ==================== */

.hero-v4 {
  --hv-paper: #fbf8f2;
  --hv-paper-2: #f3ecdf;
  --hv-paper-3: #ffffff;
  --hv-spruce: #14322c;
  --hv-spruce-soft: #24463e;
  --hv-ink-soft: #4a5f59;
  --hv-ink-faint: #7d8f89;
  --hv-sage: #7a9c90;
  --hv-sage-soft: #dbe7e1;
  --hv-honey: #b8763a;
  --hv-honey-light: #d9a05b;
  --hv-clay: #a8532a;
  --hv-ring: rgba(20, 50, 44, .10);
}

/* ==================== hero surface: warm paper ==================== */

.hero-v4 {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 4.5rem 0 4rem;
  color: var(--hv-spruce);
  background:
    radial-gradient(58rem 34rem at 12% 6%, rgba(122, 156, 144, .26), transparent 62%),
    radial-gradient(46rem 30rem at 88% 88%, rgba(184, 118, 58, .16), transparent 60%),
    linear-gradient(160deg, #fdfbf7 0%, var(--hv-paper) 46%, var(--hv-paper-2) 100%);
  border-bottom: 1px solid var(--hv-ring);
}

/* very slow drift of the two colour blooms (replaces the dark mesh shift) */
.fx .hero-v4 {
  background-size: 160% 160%, 160% 160%, 100% 100%;
  animation: hv-drift 30s ease-in-out infinite;
}
@keyframes hv-drift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; }
  50%      { background-position: 22% 12%, 78% 86%, 0 0; }
}

/* faint ruled paper instead of the light blueprint grid */
.hero-v4::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 50, 44, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 50, 44, .045) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(72% 88% at 50% 38%, #000 26%, transparent 100%);
  mask-image: radial-gradient(72% 88% at 50% 38%, #000 26%, transparent 100%);
}
.fx .hero-v4::before { animation: hv-grid 34s ease-in-out infinite; }
@keyframes hv-grid {
  0%, 100% { background-position: 0 0, 0 0; }
  50%      { background-position: -26px 26px, -26px 26px; }
}

/* pointer glow, now a warm honey light on paper */
.hero-v4::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(26rem 19rem at var(--gx, 70%) var(--gy, 20%), rgba(217, 160, 91, .13), transparent 66%);
  transition: background .15s linear;
}

.hero-v4 .hero-bg { perspective: 1000px; }

/* orbs become soft paper blooms: no glass shine, no heavy shadow */
.hero-v4 .orb {
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .85), rgba(122, 156, 144, .30) 46%, rgba(122, 156, 144, .06) 74%);
  box-shadow: none;
  opacity: .85;
}
.hero-v4 .orb-3 {
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .8), rgba(20, 50, 44, .18) 48%, rgba(20, 50, 44, .04) 74%);
}
.hero-v4 .orb-5 {
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .8), rgba(184, 118, 58, .20) 50%, transparent 74%);
}

/* rings: hairline, sage and clay */
.hero-v4 .hero-rings span { border-color: rgba(184, 118, 58, .30); }
.hero-v4 .hero-rings span:nth-child(2) { border-color: rgba(20, 50, 44, .10); }
.hero-v4 .hero-rings span:nth-child(3) { border-color: rgba(122, 156, 144, .40); }

/* ==================== type ==================== */

/* static badge, so the label is real HTML with JS off */
.hero-v4 .hero-badge {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(184, 118, 58, .32);
  color: var(--hv-honey);
  box-shadow: 0 2px 10px rgba(20, 50, 44, .05);
}
.hero-v4 .badge-dot { background: var(--hv-honey); }

.hero-v4 .breadcrumbs { color: var(--hv-ink-faint); }
.hero-v4 .breadcrumbs li::after { color: rgba(20, 50, 44, .28); }
.hero-v4 .breadcrumbs a { color: var(--hv-ink-soft); }
.hero-v4 .breadcrumbs a:hover { color: var(--hv-honey); }

.hero-v4 .hero h1,
.hero-v4 h1 {
  color: var(--hv-spruce);
  text-shadow: none;
  font-size: clamp(2.35rem, 6.2vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  margin: 0 0 .5rem;
}

/* THE TYPE ANIMATION.
   Each word rises out of a soft mask, staggered. redesign-fx.js has
   already split the h1 into .hw spans carrying --i. With JS off the h1
   is never split, so no word is ever masked. */
.fx .hero-v4 .hero h1 .hw {
  opacity: 0;
  -webkit-clip-path: inset(0 0 105% 0);
  clip-path: inset(0 0 105% 0);
  transform: translateY(16px);
  animation: hv-rise .74s var(--ease-out) forwards;
  animation-delay: calc(.075s * var(--i, 0) + .1s);
}
@keyframes hv-rise {
  to {
    opacity: 1;
    -webkit-clip-path: inset(0 0 -18% 0);
    clip-path: inset(0 0 -18% 0);
    transform: translateY(0);
  }
}

/* the accent word keeps a slow gradient flow, tuned to read on paper */
.hero-v4 .hero h1 .accent-text {
  background: linear-gradient(120deg, var(--hv-honey), var(--hv-clay) 44%, var(--hv-honey-light) 78%, var(--hv-honey));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 220%;
}
.fx .hero-v4 .hero h1 .accent-text { animation: hv-gradient 8s ease-in-out infinite; }
@keyframes hv-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* the rule draws itself, then a small spruce dot lands on its end */
.hero-v4 .hero-rule {
  position: relative;
  width: 6rem;
  height: 3px;
  background: linear-gradient(90deg, var(--hv-honey), var(--hv-sage));
}
.hero-v4 .hero-rule::after {
  content: "";
  position: absolute;
  right: -.42rem;
  top: 50%;
  width: .44rem;
  height: .44rem;
  margin-top: -.22rem;
  border-radius: 50%;
  background: var(--hv-spruce);
  opacity: 1;
}
.fx .hero-v4 .hero-rule::after {
  opacity: 0;
  animation: hv-dot-in .5s var(--ease-out) 1.75s forwards, hv-dot-live 2.8s ease-in-out 2.3s infinite;
}
@keyframes hv-dot-in { to { opacity: 1; } }
@keyframes hv-dot-live {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.45); opacity: .55; }
}

.hero-v4 .hero-lede {
  color: var(--hv-ink-soft);
  max-width: 34rem;
  font-size: 1.12rem;
  line-height: 1.66;
}

/* staggered entrance: lede, then the relate box, then the buttons.
   Only under .fx, so the text is visible with JS off. */
.fx .hero-v4 .hero-lede,
.fx .hero-v4 .relate-box,
.fx .hero-v4 .hero-cta-row { opacity: 0; transform: translateY(14px); }
.fx .hero-v4 .hero-lede { animation: hv-in .7s var(--ease-out) 1s forwards; }
.fx .hero-v4 .relate-box { animation: hv-in .7s var(--ease-out) 1.15s forwards; }
.fx .hero-v4 .hero-cta-row { animation: hv-in .7s var(--ease-out) 1.3s forwards; }
@keyframes hv-in { to { opacity: 1; transform: translateY(0); } }

/* ==================== rotating relate line, now typed ==================== */

.hero-v4 .relate-box {
  margin: 0 0 1.7rem;
  padding: .9rem 1.2rem;
  border-left: 3px solid var(--hv-honey);
  background: rgba(255, 255, 255, .74);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: 0 6px 20px rgba(20, 50, 44, .06);
  max-width: 33rem;
}
.hero-v4 .relate-label { color: var(--hv-honey); }
.hero-v4 .relate-line {
  color: var(--hv-spruce-soft);
  font-size: 1.06rem;
  min-height: 0;
  position: static;
}

/* WITH JS OFF: the six sentences read as a plain stacked list, fully
   visible. index-v3.css stacks them absolutely and hides all but the
   first, which would bury five sentences for no-JS visitors and crawlers. */
.hero-v4 .relate-line span {
  position: static;
  display: block;
  opacity: 1;
  margin: 0 0 .35rem;
  -webkit-clip-path: none;
  clip-path: none;
}
.hero-v4 .relate-line span:last-child { margin-bottom: 0; }

/* WITH JS: one sentence at a time, typing itself out.
   24s cycle, 4s per sentence. steps() gives the keystroke feel and
   clip-path means the reveal works at any wrap or font size. */
.fx .hero-v4 .relate-line { min-height: 3.4em; position: relative; }
.fx .hero-v4 .relate-line span {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  opacity: 0;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  animation: hv-type 24s steps(22, end) infinite;
}
.fx .hero-v4 .relate-line span:nth-child(1) { animation-delay: 0s; }
.fx .hero-v4 .relate-line span:nth-child(2) { animation-delay: -20s; }
.fx .hero-v4 .relate-line span:nth-child(3) { animation-delay: -16s; }
.fx .hero-v4 .relate-line span:nth-child(4) { animation-delay: -12s; }
.fx .hero-v4 .relate-line span:nth-child(5) { animation-delay: -8s; }
.fx .hero-v4 .relate-line span:nth-child(6) { animation-delay: -4s; }
@keyframes hv-type {
  0%       { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); opacity: 1; }
  5.833%   { -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); }
  14.167%  { -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); opacity: 1; }
  /* Fading the outgoing line over the last 0.6s left the box reading as empty:
     the next sentence is still clipped shut when the fade starts. Cut instead, on
     a gap too small for steps() to interpolate, one instant before the next line
     begins typing. */
  16.666%  { -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); opacity: 1; }
  16.667%  { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); opacity: 0; }
  100%     { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); opacity: 0; }
}

/* a small pulsing dot on the label marks the line as "still being said".
   A caret at the end of the typed text is not used: the spans are
   absolutely positioned, so CSS cannot know the text width and the caret
   would sit at the wrong place. */
.fx .hero-v4 .relate-label::before {
  content: "";
  display: inline-block;
  width: .38rem;
  height: .38rem;
  margin-right: .4rem;
  border-radius: 50%;
  background: var(--hv-honey);
  vertical-align: .02em;
  animation: hv-live 1.6s ease-in-out infinite;
}
@keyframes hv-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}

@media (max-width: 30rem) {
  .fx .hero-v4 .relate-line { min-height: 5em; }
}

/* ==================== buttons: calm spruce, not a clay gradient ==================== */

.hero-v4 .btn-primary {
  background: var(--hv-spruce);
  color: var(--hv-paper);
  box-shadow: 0 8px 22px rgba(20, 50, 44, .22);
}
.hero-v4 .btn-primary:hover {
  color: var(--hv-paper);
  box-shadow: 0 14px 32px rgba(20, 50, 44, .3);
  filter: brightness(1.14);
}
.hero-v4 .btn-primary::after {
  background: linear-gradient(90deg, transparent, rgba(217, 160, 91, .38), transparent);
}

.hero-v4 .btn-secondary {
  background: rgba(255, 255, 255, .7);
  color: var(--hv-spruce);
  border-color: rgba(20, 50, 44, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-v4 .btn-secondary:hover {
  border-color: var(--hv-honey);
  color: var(--hv-honey);
}

/* ==================== art panel ==================== */

.hero-v4 .scene-frame {
  background: linear-gradient(160deg, var(--hv-paper-3) 0%, #f6f1e6 100%);
  box-shadow: 0 20px 50px rgba(20, 50, 44, .11), 0 0 0 1px rgba(20, 50, 44, .06);
}
.hero-v4 .scene-art,
.hero-v4 .scene-art:hover { box-shadow: none; }

.hero-v4 .hero-dots i {
  background: var(--hv-honey);
  box-shadow: 0 3px 8px rgba(20, 50, 44, .22);
}
.hero-v4 .hero-dots i:nth-child(2) { background: var(--hv-spruce); }
.hero-v4 .hero-dots i:nth-child(3) { background: var(--hv-sage); }

/* ==================== scroll hint ==================== */

.hero-v4 .scroll-hint { color: rgba(20, 50, 44, .42); }
.hero-v4 .scroll-hint .mouse { border-color: rgba(20, 50, 44, .22); }
.hero-v4 .scroll-hint .mouse::after { background: var(--hv-honey); }

/* ==================== print ==================== */

@media print {
  .hero-v4 {
    background: none;
    min-height: auto;
    padding: 0 0 1rem;
    color: var(--ink);
  }
  .hero-v4 h1,
  .hero-v4 .hero h1 .accent-text {
    color: var(--hv-spruce);
    -webkit-text-fill-color: var(--hv-spruce);
  }
  .hero-v4 .hero-lede { color: #444; }
  .hero-v4 .relate-line span {
    position: static;
    opacity: 1;
    -webkit-clip-path: none;
    clip-path: none;
  }
}

/* ==================== calm breathing cue (v5) ==================== */
/* A thin gold circle behind the scene card that expands and contracts on a
   slow in-out rhythm, so the page visibly breathes before a word is read.
   Added by fx.js as .hero-breath; decorative and aria-hidden. Reduced motion
   and no-JS leave it out entirely. */
.hero-v4 .hero-breath {
  position: absolute;
  width: 26rem;
  height: 26rem;
  right: 4%;
  top: 50%;
  margin-top: -13rem;
  border-radius: 50%;
  border: 1.5px solid rgba(184, 118, 58, .28);
  pointer-events: none;
  opacity: 0;
}
.fx .hero-v4 .hero-breath {
  opacity: 1;
  animation: hv-breath 9s ease-in-out infinite;
}
@keyframes hv-breath {
  /* in 4s, hold, out 4s, hold */
  0%, 100% { transform: scale(.94); border-color: rgba(184, 118, 58, .18); }
  50%      { transform: scale(1.04); border-color: rgba(184, 118, 58, .42); }
}

/* the closing CTA breathes on the same rhythm, so the page opens and closes
   together. Opacity-only: no scale, so it never reads as a celebration. */
.fx .cta-section .btn-primary,
.fx .hero-v4 .btn-primary {
  animation: hv-cta-breathe 9s ease-in-out infinite;
}
@keyframes hv-cta-breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.08); }
}

/* ==================== reduced motion: freeze, show everything ==================== */

@media (prefers-reduced-motion: reduce) {
  .hero-v4 .hero h1 .hw {
    opacity: 1 !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-v4 .hero h1 .accent-text {
    background: none !important;
    -webkit-text-fill-color: var(--hv-clay) !important;
    color: var(--hv-clay);
    animation: none !important;
  }
  .hero-v4 .hero-lede,
  .hero-v4 .relate-box,
  .hero-v4 .hero-cta-row {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-v4 .hero-rule { transform: scaleX(1) !important; animation: none !important; }
  .hero-v4 .hero-rule::after { opacity: 1 !important; transform: none !important; animation: none !important; }

  /* the six sentences stack and stay readable instead of cycling */
  .hero-v4 .relate-line { min-height: 0 !important; position: static !important; }
  .hero-v4 .relate-line span {
    position: static !important;
    opacity: 1 !important;
    margin: 0 0 .35rem !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    animation: none !important;
  }
  .hero-v4 .relate-label::before { animation: none !important; }

  .hero-v4 .orb,
  .hero-v4 .hero-rings span,
  .hero-v4 .hero-dots i { animation: none !important; }
  .hero-v4 { animation: none !important; background-size: 100% 100%, 100% 100%, 100% 100% !important; }
}