/* ============================================================================
   Reef Benefits — Public Pages Dynamic Refresh
   ----------------------------------------------------------------------------
   A single, brand-true motion system for every public page. One hue — the
   reef-pink brand colour and a scale derived from it — plus the theme's
   existing neutrals. No new colours are introduced.

   Design intent:
   • Hero backgrounds are *composed*, not random: an anchored pink glow,
     concentric "ripple" rings (a geometric nod to a reef without literal
     imagery), and a fine dot-grid texture.
   • Motion has a job: staggered reveals guide the eye down the page, stats
     count up, a progress bar tracks reading position, CTAs lean toward the
     cursor. Nothing loops aggressively in the user's face.
   • Content sections stay clean and high-contrast for readability; the loud
     moments are the hero and the brand-pink sections.

   Engineering:
   • Scoped to `html.reef-fx`, set by the JS engine only once it can run, so
     no-JS visitors keep the original, fully legible static design.
   • Continuous motion lives inside `@media (prefers-reduced-motion:
     no-preference)`; reduced-motion users get the composition without movement.
   • Animations use transform/opacity/translate/scale only — no layout thrash.
   ========================================================================== */

html.reef-fx {
  /* Reef-pink scale — every value is the brand hue (#ee2966) lightened or
     darkened. These are shades of one colour, not additional colours.
     (#b30f47, the deepest shade, appears in shadow rgba()s where a hex token
     can't be used directly.) */
  --reef-100: #ffe6ef;
  --reef-200: #ffc6da;
  --reef-300: #ff8fb4;
  --reef-400: #f7588c;
  --reef-500: #ee2966; /* brand */
  --reef-600: #d91456; /* brand dark (existing) */

  /* Motion tokens for a consistent feel. */
  --reef-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reef-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Live values published by the engine. */
  --reef-mx: 0.5;
  --reef-my: 0.5;
  --reef-scroll: 0;

  /* The header is sticky; offset in-page anchor jumps (e.g. "Get Started" ->
     #reef-benefits-section) so the target isn't hidden behind it. */
  scroll-padding-top: 88px;
}

/* Decorative injected layers never intercept input. */
.reef-fx-bg,
.reef-fx-hero,
.reef-fx-progress { pointer-events: none; }

/* ===========================================================================
   1. Page background — anchored brand glows
   =========================================================================== */
html.reef-fx body { background: transparent; }

.reef-fx-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #ffffff;
}

/* Two large brand glows anchored to opposite corners — asymmetric, editorial. */
.reef-fx-layer--2,
.reef-fx-layer--3,
.reef-fx-layer--4 {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.reef-fx-layer--2 {
  width: 46vw; height: 46vw; top: -16vw; right: -12vw;
  background: radial-gradient(circle at 50% 50%, var(--reef-200), transparent 70%);
  opacity: 0.5;
}
.reef-fx-layer--3 {
  width: 40vw; height: 40vw; bottom: -14vw; left: -12vw;
  background: radial-gradient(circle at 50% 50%, var(--reef-100), transparent 70%);
  opacity: 0.7;
}
.reef-fx-layer--4 {
  width: 26vw; height: 26vw; top: 42%; left: 60%;
  background: radial-gradient(circle at 50% 50%, var(--reef-100), transparent 72%);
  opacity: 0.5;
}

/* Sparse rising accent dots — restraint over a particle storm. */
.reef-fx-orb {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--reef-300);
  opacity: 0.35;
}
.reef-fx-orb--1 { left: 18%; bottom: -20px; }
.reef-fx-orb--2 { left: 64%; bottom: -30px; width: 5px; height: 5px; }
.reef-fx-orb--3 { left: 86%; bottom: -16px; width: 9px; height: 9px; opacity: 0.22; }
.reef-fx-orb--4 { left: 34%; bottom: -24px; width: 6px; height: 6px; opacity: 0.28; }
.reef-fx-orb--5 { left: 48%; bottom: -18px; width: 8px; height: 8px; opacity: 0.30; }
.reef-fx-orb--6 { left: 76%; bottom: -28px; width: 6px; height: 6px; opacity: 0.25; }
.reef-fx-orb--7 { left: 8%;  bottom: -26px; width: 7px; height: 7px; opacity: 0.30; }
.reef-fx-orb--8 { left: 26%; bottom: -16px; width: 5px; height: 5px; opacity: 0.26; }
.reef-fx-orb--9 { left: 56%; bottom: -30px; width: 7px; height: 7px; opacity: 0.28; }
.reef-fx-orb--10 { left: 92%; bottom: -22px; width: 6px; height: 6px; opacity: 0.24; }

@media (prefers-reduced-motion: no-preference) {
  /* The dot grid stays still (animating a full-viewport background-position
     repaints every frame); only the soft glows and accent dots move. */
  .reef-fx-layer--2 { animation: reef-glow-a 30s ease-in-out infinite; }
  .reef-fx-layer--3 { animation: reef-glow-b 38s ease-in-out infinite; }
  .reef-fx-layer--4 { animation: reef-glow-a 34s ease-in-out infinite reverse; }
  .reef-fx-orb--1 { animation: reef-rise 19s linear infinite; }
  .reef-fx-orb--2 { animation: reef-rise 26s linear infinite 5s; }
  .reef-fx-orb--3 { animation: reef-rise 16s linear infinite 2s; }
  .reef-fx-orb--4 { animation: reef-rise 22s linear infinite 8s; }
  .reef-fx-orb--5 { animation: reef-rise 17s linear infinite 3s; }
  .reef-fx-orb--6 { animation: reef-rise 24s linear infinite 11s; }
  .reef-fx-orb--7 { animation: reef-rise 20s linear infinite 6s; }
  .reef-fx-orb--8 { animation: reef-rise 23s linear infinite 13s; }
  .reef-fx-orb--9 { animation: reef-rise 18s linear infinite 4s; }
  .reef-fx-orb--10 { animation: reef-rise 21s linear infinite 9s; }
}
@keyframes reef-glow-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(4vw, 3vh) scale(1.1); }
}
@keyframes reef-glow-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-3vw, -3vh) scale(1.08); }
}
@keyframes reef-rise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 0.4; }
  88%  { opacity: 0.4; }
  100% { transform: translateY(-104vh); opacity: 0; }
}

/* ===========================================================================
   2. Scroll progress bar — quiet reading-position cue
   =========================================================================== */
.reef-fx-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--reef-scroll, 0));
  background: linear-gradient(90deg, var(--reef-500), var(--reef-600));
  z-index: 60;
  transition: transform 0.08s linear;
}
/* Sit below the WordPress admin bar for logged-in users (it's fixed at the top
   and doesn't shift other fixed elements). 32px desktop, 46px on small screens. */
body.admin-bar .reef-fx-progress { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .reef-fx-progress { top: 46px; }
}

/* ===========================================================================
   3. Header — sticky, brand-solid, compacts on scroll
   =========================================================================== */
html.reef-fx .reef-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: padding 0.35s var(--reef-ease), box-shadow 0.35s ease, background-color 0.35s ease;
}
html.reef-fx .reef-header--scrolled {
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0 10px 30px -12px rgba(179, 15, 71, 0.55);
}
/* Stick below the admin bar for logged-in users, matching the progress bar. */
html.reef-fx body.admin-bar .reef-header { top: 32px; }
@media screen and (max-width: 782px) {
  html.reef-fx body.admin-bar .reef-header { top: 46px; }
}
/* ===========================================================================
   4. Heroes — transparent canvas + composed background motif
   ===========================================================================
   The engine injects `.reef-fx-hero` as the first child of each hero; we make
   the hero background transparent and raise the real content above the canvas. */
html.reef-fx .reef-hero-new,
html.reef-fx .page-hero,
html.reef-fx .single-post-header { background-color: transparent; }

html.reef-fx .reef-hero-new > *:not(.reef-fx-hero),
html.reef-fx .page-hero > *:not(.reef-fx-hero),
html.reef-fx .brokers-hero > *:not(.reef-fx-hero),
html.reef-fx .single-post-header > *:not(.reef-fx-hero) {
  position: relative;
  z-index: 1;
}

.reef-fx-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Anchored glow behind the hero (offset to one side, never centred). It also
   drifts a few pixels toward the cursor for a subtle sense of depth — the
   `translate` here composes with the `transform`-based idle animation. */
.reef-fx-hero-layer--1 {
  position: absolute;
  width: 60%;
  height: 120%;
  top: -10%;
  right: -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--reef-200), transparent 70%);
  opacity: 0.55;
  filter: blur(20px);
  translate: calc((var(--reef-mx) - 0.5) * 26px) calc((var(--reef-my) - 0.5) * 18px);
  transition: translate 0.5s ease-out;
  will-change: transform, translate;
}

/* Concentric ripple rings emanating from a fixed point on the glow side.
   The box is centred on (right:14%, top:40%) via translate(50%,-50%); the
   ripple keyframes carry that same translate so scaling stays centred. */
.reef-fx-hero-layer--2,
.reef-fx-hero-layer--3,
.reef-fx-hero-layer--4 {
  position: absolute;
  top: 40%;
  right: 14%;
  width: 30vw;
  height: 30vw;
  max-width: 440px;
  max-height: 440px;
  border: 1.5px solid var(--reef-300);
  border-radius: 50%;
  opacity: 0;
  transform: translate(50%, -50%) scale(0.45);
  will-change: transform, opacity;
}

html.reef-fx .reef-hero-new-container,
html.reef-fx .reef-hero-new-grid { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .reef-fx-hero-layer--1 { animation: reef-glow-a 22s ease-in-out infinite; }
  .reef-fx-hero-layer--2 { animation: reef-ripple 7s var(--reef-ease) infinite; }
  .reef-fx-hero-layer--3 { animation: reef-ripple 7s var(--reef-ease) infinite 2.33s; }
  .reef-fx-hero-layer--4 { animation: reef-ripple 7s var(--reef-ease) infinite 4.66s; }
  html.reef-fx .reef-hero-new-image-main {
    animation: reef-float 7s ease-in-out infinite;
    will-change: transform;
  }
}
/* Reduced motion: show one steady ring instead of pulsing. */
html.reef-fx-reduced .reef-fx-hero-layer--2 { opacity: 0.25; transform: translate(50%, -50%) scale(1); }
@keyframes reef-ripple {
  0%   { opacity: 0; transform: translate(50%, -50%) scale(0.45); }
  30%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(50%, -50%) scale(1.2); }
}
@keyframes reef-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Homepage: center the ripple rings on the emphasised word ("broken").
   reef-refresh.js sets --reef-ring-x/y (px, relative to the hero canvas) from
   the word's live position; we only REPOSITION the rings here — their size,
   border and pulse animation are unchanged. The rings stay inside the canvas
   (z-index:0), so they read as a halo behind the heading. Interior heroes keep
   the default glow-side anchor defined above. */
html.reef-fx .reef-hero-new .reef-fx-hero-layer--2,
html.reef-fx .reef-hero-new .reef-fx-hero-layer--3,
html.reef-fx .reef-hero-new .reef-fx-hero-layer--4 {
  top: var(--reef-ring-y, 40%);
  left: var(--reef-ring-x, 86%);
  right: auto;
  transform: translate(-50%, -50%) scale(0.45);
}
html.reef-fx-reduced .reef-hero-new .reef-fx-hero-layer--2 {
  transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: no-preference) {
  html.reef-fx .reef-hero-new .reef-fx-hero-layer--2,
  html.reef-fx .reef-hero-new .reef-fx-hero-layer--3,
  html.reef-fx .reef-hero-new .reef-fx-hero-layer--4 {
    animation-name: reef-ripple-centered;
  }
}
@keyframes reef-ripple-centered {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
  30%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

/* Pink heroes (Brokers, Franchise): invert the motif to light so it reads on
   the brand-pink background. */
html.reef-fx .brokers-hero .reef-fx-hero-layer--1 {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.35), transparent 70%);
  opacity: 0.6;
}
html.reef-fx .brokers-hero .reef-fx-hero-layer--2,
html.reef-fx .brokers-hero .reef-fx-hero-layer--3,
html.reef-fx .brokers-hero .reef-fx-hero-layer--4 {
  border-color: rgba(255, 255, 255, 0.55);
}

/* Nudge the hero hand image down a touch so it sits lower in the frame. */
html.reef-fx .reef-hero-new-image {
  transform: translateY(2rem);
}

/* Flying capsule "pills" drifting around the hero — reef-pink + white only,
   tilted at rest (independent `rotate`) and drifting via the `translate`
   property so the two compose. They sit in the canvas behind the content. */
.reef-fx-pill {
  position: absolute;
  width: 16px;
  height: 40px;
  border-radius: 999px;
  /* Layered (front-to-back): a glossy shine streak down one side, cylindrical
     edge shading for roundness, then the two-tone white-cap / pink-body. */
  background:
    linear-gradient(90deg, transparent 6%, rgba(255, 255, 255, 0.7) 22%, transparent 44%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(180deg, #ffffff 0 50%, var(--reef-500) 50% 100%);
  box-shadow:
    0 8px 18px -8px rgba(179, 15, 71, 0.55),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.55);
  opacity: 0.9;
  will-change: translate;
}
.reef-fx-pill::after { /* seam where the white cap meets the pink body */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  transform: translateY(-0.5px);
  background: rgba(0, 0, 0, 0.12);
}
.reef-fx-pill--2 { top: 66%; left: 11%; width: 12px; height: 30px; rotate: -18deg; opacity: 0.7; }
.reef-fx-pill--3 { top: 15%; right: 8%; rotate: -38deg; }
.reef-fx-pill--4 { top: 68%; right: 13%; width: 20px; height: 50px; rotate: 16deg; opacity: 0.8; }
.reef-fx-pill--5 { top: 40%; right: 30%; width: 11px; height: 28px; rotate: 50deg; opacity: 0.5; }
/* Extra pill in the open upper-left margin (kept clear of the headline text,
   since pills sit behind the content and would otherwise hide behind letters). */
.reef-fx-pill--6 { top: 10%; left: 6%; width: 14px; height: 34px; rotate: -30deg; opacity: 0.8; }

@media (prefers-reduced-motion: no-preference) {
  .reef-fx-pill--2 { animation: reef-pill-b 11s ease-in-out infinite 1s; }
  .reef-fx-pill--3 { animation: reef-pill-b 8s ease-in-out infinite; }
  .reef-fx-pill--4 { animation: reef-pill-a 13s ease-in-out infinite 2s; }
  .reef-fx-pill--5 { animation: reef-pill-a 10s ease-in-out infinite 0.5s; }
  .reef-fx-pill--6 { animation: reef-pill-b 12s ease-in-out infinite 0.8s; }
}
@keyframes reef-pill-a {
  0%, 100% { translate: 0 0; }
  50%      { translate: 10px -22px; }
}
@keyframes reef-pill-b {
  0%, 100% { translate: 0 0; }
  50%      { translate: -12px -18px; }
}

/* Mobile: the hero stacks with the text on top and the image below, so anchor
   the pills to the bottom (image) zone — keeping them clear of the heading,
   subheading and CTA text up top. */
@media (max-width: 767px) {
  .reef-fx-pill--2 { top: auto; bottom: 14%; left: 6%;   right: auto; }
  .reef-fx-pill--3 { top: auto; bottom: 4%;  left: 24%;  right: auto; }
  .reef-fx-pill--4 { top: auto; bottom: 12%; right: 8%;  left: auto; }
  .reef-fx-pill--5 { top: auto; bottom: 3%;  right: 26%; left: auto; }
  .reef-fx-pill--6 { top: auto; bottom: 18%; left: 44%;  right: auto; }
}

/* Animated underline that draws under the single emphasised word ("broken")
   in the homepage headline after the hero reveals. */
html.reef-fx .reef-fx-underline {
  position: relative;
  white-space: nowrap;
}
html.reef-fx .reef-fx-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.1em;
  height: 0.1em;
  background: linear-gradient(90deg, var(--reef-500), var(--reef-300));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  html.reef-fx .reef-fx-underline::after {
    animation: reef-underline 0.9s var(--reef-ease) 0.6s forwards;
  }
}
@keyframes reef-underline { to { transform: scaleX(1); } }

/* ===========================================================================
   5. Brand-pink sections — alive with a slow light sweep + texture
   ===========================================================================
   The big pink areas are the “moving background” moments on interior pages. */
html.reef-fx .how-works-section-pink,
html.reef-fx .brokers-sound-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
html.reef-fx .how-works-section-pink > *,
html.reef-fx .brokers-sound-section > * { position: relative; z-index: 1; }
html.reef-fx .how-works-section-pink::after,
html.reef-fx .brokers-sound-section::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: 0;
  background: radial-gradient(40% 50% at 50% 50%, rgba(255, 255, 255, 0.18), transparent 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.reef-fx .how-works-section-pink::after,
  html.reef-fx .brokers-sound-section::after { animation: reef-sweep 16s ease-in-out infinite; }
}
@keyframes reef-sweep {
  0%, 100% { transform: translate(-22%, -6%); }
  50%      { transform: translate(22%, 6%); }
}

/* Testimonials marquee — reef-refresh.js clones the cards and adds .reef-marquee;
   the track then auto-scrolls by exactly one set's width (published as
   --reef-marquee-shift) for a seamless infinite loop. Pauses on hover. Reduced
   motion keeps the original manual scroll (JS skips the setup). */
html.reef-fx .testimonials-track.reef-marquee {
  overflow: visible;
  width: max-content;
  scroll-behavior: auto;
}
@media (prefers-reduced-motion: no-preference) {
  html.reef-fx .testimonials-track.reef-marquee {
    animation: reef-marquee var(--reef-marquee-time, 40s) linear infinite;
  }
  html.reef-fx .testimonials-track.reef-marquee:hover { animation-play-state: paused; }
}
@keyframes reef-marquee {
  to { transform: translateX(calc(var(--reef-marquee-shift, 50%) * -1)); }
}

/* ===========================================================================
   6. Stats — count-up emphasis + pop-in (the bit you liked, refined)
   =========================================================================== */
html.reef-fx .reef-stat-number,
html.reef-fx .stat-number {
  color: var(--reef-500);
  font-variant-numeric: tabular-nums; /* digits don't jitter while counting */
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  html.reef-fx .reef-stat-item.reef-in .reef-stat-number,
  html.reef-fx .stat-box.reef-in .stat-number {
    animation: reef-pop 0.6s var(--reef-pop) both;
  }
}
@keyframes reef-pop {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; }
  100% { transform: scale(1); }
}

/* ===========================================================================
   7. Cards — reveal, lift, brand-edge accent, arrow nudge
   =========================================================================== */
html.reef-fx .reef-benefit-box,
html.reef-fx .reef-health-card,
html.reef-fx .pricing-plan-card,
html.reef-fx .problem-card,
html.reef-fx .brokers-why-card,
html.reef-fx .brokers-benefit-card,
html.reef-fx .brokers-testimonial-card,
html.reef-fx .reef-featured-card,
html.reef-fx .reef-post-card,
html.reef-fx .stat-box {
  transition:
    transform 0.4s var(--reef-ease),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
html.reef-fx .reef-benefit-box:hover,
html.reef-fx .reef-health-card:hover,
html.reef-fx .pricing-plan-card:hover,
html.reef-fx .problem-card:hover,
html.reef-fx .brokers-why-card:hover,
html.reef-fx .brokers-benefit-card:hover,
html.reef-fx .brokers-testimonial-card:hover,
html.reef-fx .reef-featured-card:hover,
html.reef-fx .reef-post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -16px rgba(179, 15, 71, 0.45);
  border-color: var(--reef-400);
}

/* Benefit-box CTA arrow follows the hover. */
html.reef-fx .reef-benefit-box-cta { transition: transform 0.3s var(--reef-ease); }
html.reef-fx .reef-benefit-box:hover .reef-benefit-box-cta { transform: translateX(6px); }

/* ===========================================================================
   8. Buttons — confident hover + magnetic translate (set by the engine)
   ===========================================================================
   Magnetism uses the independent `translate` property; we own `transform`
   here so the two compose instead of fighting. */
html.reef-fx .reef-hero-btn-primary,
html.reef-fx .reef-footer-cta-btn {
  transition: transform 0.3s var(--reef-ease), box-shadow 0.3s ease, background-color 0.3s ease;
}
html.reef-fx .reef-hero-btn-primary { will-change: transform, translate; }
html.reef-fx .reef-hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(217, 20, 86, 0.6);
}
html.reef-fx .reef-footer-cta-btn:hover { transform: translateY(-2px) scale(1.02); }

/* ===========================================================================
   9. Footer CTA — brand wash drifts over the photo, content stays sharp
   =========================================================================== */
html.reef-fx .reef-footer-cta { isolation: isolate; }
html.reef-fx .reef-footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 90% at 18% 100%, rgba(238, 41, 102, 0.75), transparent 62%),
    radial-gradient(55% 85% at 85% 0%, rgba(255, 95, 150, 0.45), transparent 60%);
  background-size: 180% 180%;
  /* Screen (not multiply) lifts the dark photo toward brand pink — a glow,
     not a muddy darkening of the corners. */
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
  html.reef-fx .reef-footer-cta::before { animation: reef-wash 18s ease-in-out infinite; }
}
@keyframes reef-wash {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
html.reef-fx .reef-footer-cta-inner { position: relative; z-index: 1; }

/* ===========================================================================
   10. Scroll reveals — staggered, directional, composable
   ===========================================================================
   Uses the independent `translate`/`scale` properties so revealed cards keep
   their hover `transform`. No-JS / reduced-motion users never see these. */
@media (prefers-reduced-motion: no-preference) {
  html.reef-fx .reef-reveal {
    opacity: 0;
    translate: 0 30px;
    /* Entrance (opacity/translate) carries the stagger delay; hover properties
       (transform/shadow/border/color) transition with no delay so revealed cards
       still ease smoothly on hover instead of snapping. */
    transition:
      opacity 0.7s ease var(--reef-reveal-delay, 0ms),
      translate 0.7s var(--reef-ease) var(--reef-reveal-delay, 0ms),
      transform 0.3s var(--reef-ease),
      box-shadow 0.3s ease,
      border-color 0.3s ease,
      color 0.3s ease;
    will-change: opacity, translate;
  }
  /* Card grids enter with a gentle left/right alternation for energy. */
  html.reef-fx .reef-benefit-box:nth-child(even).reef-reveal,
  html.reef-fx .reef-health-card:nth-child(even).reef-reveal,
  html.reef-fx .problem-card:nth-child(even).reef-reveal,
  html.reef-fx .brokers-why-card:nth-child(even).reef-reveal,
  html.reef-fx .brokers-benefit-card:nth-child(even).reef-reveal,
  html.reef-fx .pricing-plan-card:nth-child(even).reef-reveal { translate: 26px 24px; }
  html.reef-fx .reef-benefit-box:nth-child(odd).reef-reveal,
  html.reef-fx .reef-health-card:nth-child(odd).reef-reveal,
  html.reef-fx .problem-card:nth-child(odd).reef-reveal,
  html.reef-fx .brokers-why-card:nth-child(odd).reef-reveal,
  html.reef-fx .brokers-benefit-card:nth-child(odd).reef-reveal,
  html.reef-fx .pricing-plan-card:nth-child(odd).reef-reveal { translate: -26px 24px; }

  html.reef-fx .reef-reveal.reef-in { opacity: 1; translate: 0 0; }

  /* A reveal target that hasn't intersected yet must never trap keyboard
     focus on invisible content: showing it the instant it (or a child) is
     focused covers the gap before the IntersectionObserver fires. */
  html.reef-fx .reef-reveal:focus-within { opacity: 1; translate: 0 0; }
}

/* Mobile: stacked full-width cards reveal with a clean vertical rise instead of
   the side-to-side slide (which would otherwise start off-screen and read as no
   animation at all once clipped at the viewport edge). */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html.reef-fx .reef-benefit-box.reef-reveal,
  html.reef-fx .reef-health-card.reef-reveal,
  html.reef-fx .problem-card.reef-reveal,
  html.reef-fx .brokers-why-card.reef-reveal,
  html.reef-fx .brokers-benefit-card.reef-reveal,
  html.reef-fx .pricing-plan-card.reef-reveal { translate: 0 28px; }
}

/* ===========================================================================
   11. Keyboard accessibility — focus-visible mirrors hover affordances
   =========================================================================== */
html.reef-fx .reef-benefit-box:focus-visible,
html.reef-fx .reef-health-card:focus-visible,
html.reef-fx .pricing-plan-card:focus-visible,
html.reef-fx .reef-post-card:focus-visible,
html.reef-fx .reef-featured-card:focus-visible {
  outline: 2px solid var(--reef-500);
  outline-offset: 3px;
  transform: translateY(-4px);
}
html.reef-fx .reef-hero-btn-primary:focus-visible,
html.reef-fx .reef-footer-cta-btn:focus-visible {
  outline: 2px solid var(--reef-500);
  outline-offset: 3px;
}

/* ===========================================================================
   12. Reduced-motion safety net — composition without movement
   =========================================================================== */
html.reef-fx-reduced .reef-fx-layer--2,
html.reef-fx-reduced .reef-fx-layer--3,
html.reef-fx-reduced .reef-fx-layer--4,
html.reef-fx-reduced .reef-fx-orb,
html.reef-fx-reduced .reef-fx-hero-layer--1,
html.reef-fx-reduced .how-works-section-pink::after,
html.reef-fx-reduced .brokers-sound-section::after,
html.reef-fx-reduced .reef-footer-cta::before { animation: none; }
html.reef-fx-reduced .reef-fx-hero-layer--3,
html.reef-fx-reduced .reef-fx-hero-layer--4,
html.reef-fx-reduced .reef-fx-pill { display: none; }
/* Still show the "broken" underline accent for reduced-motion users — just
   drawn instantly rather than animated. */
html.reef-fx-reduced .reef-fx-underline::after { transform: scaleX(1); }

/* Interaction feedback also honours the motion preference: keep the
   affordances (shadow, colour, outline) but remove hover/focus movement and
   make state changes instant. Placed after the hover/focus rules so it wins
   on equal specificity without !important. */
@media (prefers-reduced-motion: reduce) {
  html.reef-fx .reef-header,
  html.reef-fx .reef-fx-progress,
  html.reef-fx .reef-benefit-box,
  html.reef-fx .reef-health-card,
  html.reef-fx .pricing-plan-card,
  html.reef-fx .problem-card,
  html.reef-fx .brokers-why-card,
  html.reef-fx .brokers-benefit-card,
  html.reef-fx .brokers-testimonial-card,
  html.reef-fx .reef-featured-card,
  html.reef-fx .reef-post-card,
  html.reef-fx .reef-benefit-box-cta,
  html.reef-fx .reef-hero-btn-primary,
  html.reef-fx .reef-footer-cta-btn { transition-duration: 0.01ms; }

  html.reef-fx .reef-benefit-box:hover,
  html.reef-fx .reef-health-card:hover,
  html.reef-fx .pricing-plan-card:hover,
  html.reef-fx .problem-card:hover,
  html.reef-fx .brokers-why-card:hover,
  html.reef-fx .brokers-benefit-card:hover,
  html.reef-fx .brokers-testimonial-card:hover,
  html.reef-fx .reef-featured-card:hover,
  html.reef-fx .reef-post-card:hover,
  html.reef-fx .reef-benefit-box:focus-visible,
  html.reef-fx .reef-health-card:focus-visible,
  html.reef-fx .pricing-plan-card:focus-visible,
  html.reef-fx .reef-post-card:focus-visible,
  html.reef-fx .reef-featured-card:focus-visible,
  html.reef-fx .reef-hero-btn-primary:hover,
  html.reef-fx .reef-footer-cta-btn:hover,
  html.reef-fx .reef-benefit-box:hover .reef-benefit-box-cta { transform: none; }
}