/* ── Family Fun Awaits! section ─────────────────────────────────────────
 * Atmospheric hero block sized to fill the viewport below the sticky
 * header. Z-stack:
 *   z -3  bg photo (scale 1.18 + translateY parallax driven by JS)
 *   z -2  soft black gradient overlay (right→left for text legibility)
 *   z -1  drifting cyan + amber pixel particles
 *   z  0  drifting joystick silhouettes, CRT scanlines, corner vignette
 *   z 10  inner container with title + lead + CTA
 */

.fz-family-fun {
    position: relative;
    /* True 100 svh — the header retracts on scroll-down (see the scroll-
       aware retract IIFE in js/site-header.js), so the section is no
       longer required to subtract the header's height to keep the CTA
       in view. svh keeps the size stable across iOS URL-bar toggles. */
    height: 100vh;
    height: 100svh;
    min-height: 420px;
    overflow: hidden;
    color: #ffffff;
    /* Solid fallback colour behind the bg image so any sliver between
       this section and its neighbours (or any pixel the parallax leaves
       briefly uncovered) shows site navy, never page white. */
    background-color: #0c0c3e;
    isolation: isolate;
}

/* WP admin bar still pushes everything down — that bar doesn't retract
   on scroll, so we still subtract its height for logged-in admins. */
.admin-bar .fz-family-fun {
    height: calc(100vh - 32px);
    height: calc(100svh - 32px);
}
@media (max-width: 782px) {
    .admin-bar .fz-family-fun {
        height: calc(100vh - 46px);
        height: calc(100svh - 46px);
    }
}

/* ── Background photo with subtle Ken Burns zoom ────────────────────── */

.fz-family-fun-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Permanent zoom gives the parallax translate headroom on both
       sides without ever showing the bg edge. scale(1.18) yields 9%
       of viewport-height overflow on each side; js/family-fun.js
       caps the parallax range at ±40 px so the bg edge stays well
       inside that overflow no matter the section height. */
    transform: scale(1.18) translateY(var(--fz-bg-parallax-y, 0px));
    will-change: transform;
}

/* ── Neutral darkening on the text side so title + lead stay legible ─
   No more blue tint colouring the bg photo — just a soft black
   gradient on the right (where the text lives) fading to transparent
   on the left so the photo's focal subject (kid + dinosaur) renders
   with its native colours. */

.fz-family-fun-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.30) 35%,
        rgba(0, 0, 0, 0.10) 60%,
        transparent          80%
    );
}

/* ── Floating cyan + amber pixel particles ──────────────────────────── */

.fz-family-fun-particles {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.fz-family-fun-particles span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
    animation: fz-ff-float linear infinite;
    opacity: 0;
}

.fz-family-fun-particles span:nth-child(1)  { left:  4%; bottom: -10px; animation-duration: 12s; animation-delay:  0.0s; }
.fz-family-fun-particles span:nth-child(2)  { left: 12%; bottom: -10px; animation-duration: 18s; animation-delay:  2.4s; background: #fce803; box-shadow: 0 0 10px rgba(252, 232, 3, 0.7); width: 5px; height: 5px; }
.fz-family-fun-particles span:nth-child(3)  { left: 21%; bottom: -10px; animation-duration: 14s; animation-delay:  1.0s; width: 7px; height: 7px; }
.fz-family-fun-particles span:nth-child(4)  { left: 30%; bottom: -10px; animation-duration: 20s; animation-delay:  4.6s; }
.fz-family-fun-particles span:nth-child(5)  { left: 39%; bottom: -10px; animation-duration: 16s; animation-delay:  2.2s; background: #fce803; box-shadow: 0 0 10px rgba(252, 232, 3, 0.7); }
.fz-family-fun-particles span:nth-child(6)  { left: 48%; bottom: -10px; animation-duration: 13s; animation-delay:  3.8s; width: 5px; height: 5px; }
.fz-family-fun-particles span:nth-child(7)  { left: 56%; bottom: -10px; animation-duration: 19s; animation-delay:  0.5s; }
.fz-family-fun-particles span:nth-child(8)  { left: 65%; bottom: -10px; animation-duration: 15s; animation-delay:  3.0s; width: 8px; height: 8px; background: #fce803; box-shadow: 0 0 12px rgba(252, 232, 3, 0.8); }
.fz-family-fun-particles span:nth-child(9)  { left: 74%; bottom: -10px; animation-duration: 17s; animation-delay:  1.5s; }
.fz-family-fun-particles span:nth-child(10) { left: 82%; bottom: -10px; animation-duration: 21s; animation-delay:  5.0s; width: 5px; height: 5px; }
.fz-family-fun-particles span:nth-child(11) { left: 90%; bottom: -10px; animation-duration: 14s; animation-delay:  2.7s; background: #fce803; box-shadow: 0 0 10px rgba(252, 232, 3, 0.7); }
.fz-family-fun-particles span:nth-child(12) { left: 96%; bottom: -10px; animation-duration: 18s; animation-delay:  4.1s; width: 7px; height: 7px; }

@keyframes fz-ff-float {
    0%   { transform: translateY(0)      scale(1);    opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translateY(-50vh)  scale(0.8); }
    92%  { opacity: 0.9; }
    100% { transform: translateY(-110vh) scale(0.4); opacity: 0; }
}

/* ── Drifting joystick silhouettes ────────────────────────────────────
   Reuses the same normal.png as the cursor — brand-recognition
   easter egg. Low opacity, slow drift, light cyan glow. 4 instances
   at different positions / sizes / animation phases. */

.fz-family-fun-icons {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.fz-family-fun-icons span {
    position: absolute;
    background-image: url('../assets/cursor/normal.png');
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    opacity: 0.22;
    filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.5));
    animation: fz-ff-icon-drift ease-in-out infinite;
    will-change: transform;
}

/* Each icon's base rotation is exposed via --r so the keyframe's
   `rotate(var(--r))` can drift around it. Setting `transform:
   rotate(-12deg)` directly would be overridden by the animation
   transform — that's why the icons were always reverting to 0° in
   the original markup. */
.fz-family-fun-icons span:nth-child(1) {
    --r: -12deg;
    left: 7%;  top: 18%;
    width: 46px; height: 46px;
    animation-duration: 22s;
    animation-delay:    0s;
}
.fz-family-fun-icons span:nth-child(2) {
    --r: 8deg;
    left: 72%; top: 25%;
    width: 38px; height: 38px;
    animation-duration: 28s;
    animation-delay:    -10s;
}
.fz-family-fun-icons span:nth-child(3) {
    --r: 15deg;
    left: 12%; top: 72%;
    width: 32px; height: 32px;
    animation-duration: 24s;
    animation-delay:    -18s;
}
.fz-family-fun-icons span:nth-child(4) {
    --r: -7deg;
    left: 85%; top: 68%;
    width: 42px; height: 42px;
    animation-duration: 26s;
    animation-delay:    -6s;
}

@keyframes fz-ff-icon-drift {
    0%, 100% { transform: translate(0, 0)        rotate(var(--r, 0deg)); }
    25%      { transform: translate(24px, -18px) rotate(calc(var(--r, 0deg) + 6deg)); }
    50%      { transform: translate(-14px, 12px) rotate(calc(var(--r, 0deg) - 4deg)); }
    75%      { transform: translate(18px, 10px)  rotate(calc(var(--r, 0deg) + 8deg)); }
}

/* ── CRT scanlines (subtle) ──────────────────────────────────────────── */

.fz-family-fun-scanlines {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0)        0px,
        rgba(0, 0, 0, 0)        3px,
        rgba(0, 240, 255, 0.03) 3px,
        rgba(0, 240, 255, 0.03) 4px
    );
    mix-blend-mode: screen;
    opacity: 0.7;
}

/* ── Soft corner vignette (replaces the harsh corner brackets) ───────── */

.fz-family-fun-vignette {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* ── Inner container + content layout ────────────────────────────────── */

.fz-family-fun-inner {
    position: relative;
    /* Highest z within the section's isolation context — explicitly
       above the icons / scanlines / vignette (z 0) and particles (-1)
       so text and CTA always read clean over the decorative layers. */
    z-index: 10;
    max-width: 1320px;
    height: 100%;
    margin: 0 auto;
    padding: clamp(60px, 8vw, 120px) clamp(24px, 5vw, 64px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.fz-family-fun-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
    text-align: center;
    /* Counter-parallax: drifts opposite to the bg via --fz-fg-parallax-y
       set on .fz-family-fun by js/family-fun.js. Bg goes up while
       content goes down (and vice versa) for a layered depth pop. */
    transform: translateY(var(--fz-fg-parallax-y, 0px));
    will-change: transform;
}

/* ── Title with gradient accent + glow pulse ────────────────────────── */

.fz-family-fun-title {
    font-size: clamp(2.2rem, 5.5vw, 4.5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 1.5rem;
    line-height: 1;
    color: #ffffff;
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.7),
        0 0 24px rgba(0, 240, 255, 0.35);
    animation: fz-ff-title-glow 3.5s ease-in-out infinite;
}

/* Title accent — cyan→amber gradient with a slow shimmer sweep. The
   200% background-size + animated background-position gives the text a
   moving white highlight that travels left→right continuously. Pure
   CSS, no extra DOM. */
.fz-family-fun-title-accent {
    background: linear-gradient(
        110deg,
        #00f0ff   0%,
        #fce803  30%,
        #ffffff  50%,
        #fce803  70%,
        #00f0ff 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.45));
    animation: fz-ff-shimmer 4.5s linear infinite;
}

@keyframes fz-ff-shimmer {
    0%   { background-position: 220% 50%; }
    100% { background-position: -120% 50%; }
}

/* The "n" in FUN does a 360° Y-axis flip every 4 s — sits still for
   ~65% of the cycle, then spins. Flashes cyan mid-flip so it reads as
   a playful neon-sign moment instead of a blank rotation. */
.fz-ff-flip-n {
    display: inline-block;
    transform-origin: 50% 50%;
    animation: fz-ff-n-flip 4s ease-in-out infinite;
    will-change: transform, color;
}

@keyframes fz-ff-n-flip {
    0%, 65%, 100% { transform: rotateY(0deg);   color: inherit; text-shadow: inherit; }
    82%           { transform: rotateY(180deg); color: #00f0ff; text-shadow: 0 0 24px rgba(0, 240, 255, 0.75), 0 2px 12px rgba(0, 0, 0, 0.7); }
}

@keyframes fz-ff-title-glow {
    0%, 100% { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 240, 255, 0.25); }
    50%      { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 36px rgba(0, 240, 255, 0.6);  }
}

/* ── Lead paragraph ──────────────────────────────────────────────────── */

.fz-family-fun-lead {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.55;
    /* Deliberately large gap below — combined with the CTA's margin-top
       this gives ~136 px total clear space between paragraph and button.
       Even with the pulse halo + lap arc extending upward, the gap
       reads as a clear visual break. */
    margin: 0 0 7rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

.fz-family-fun-lead strong {
    color: #00f0ff;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

/* ── Book Now CTA — pulsing cyan halo, lift on hover ────────────────── */

/* ── Lap-around animation custom property ───────────────────────────── */

/* @property registers `--fz-lap-angle` as an animatable <angle>. Without
   this declaration, the angle would jump 0→360deg discretely instead of
   sweeping smoothly. Chrome / Firefox / Safari all support it. */
@property --fz-lap-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.fz-family-fun-cta,
.fz-family-fun-cta:link,
.fz-family-fun-cta:visited {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.7rem 2.2rem;
    background: #ffffff;
    color: #1000bd;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.35s ease, color 0.2s ease;
    --fz-lap-angle: 0deg;
}

/* The "lap" ring — a 3 px halo sitting BEHIND the button (z -1) with a
   conic-gradient that has a bright cyan arc sweeping 360° every 4 s.
   The button's own white bg covers the centre of the pseudo, so only
   the 3 px halo around the perimeter shows — perceived as a moving
   highlight running once around the button each lap. */
.fz-family-fun-cta::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    z-index: -1;
    pointer-events: none;
    background: conic-gradient(
        from var(--fz-lap-angle),
        transparent          0deg,
        transparent        240deg,
        rgba(0, 240, 255, 0.55) 290deg,
        #00f0ff           320deg,
        rgba(0, 240, 255, 0.55) 350deg,
        transparent        360deg
    );
    filter: blur(1px);
    opacity: 1;
    /* Smooth fade-out on hover when the rule below kills it. */
    transition: opacity 0.25s ease;
    animation: fz-ff-cta-lap 4s linear infinite;
}

@keyframes fz-ff-cta-lap {
    to { --fz-lap-angle: 360deg; }
}

.fz-family-fun-cta:hover,
.fz-family-fun-cta:focus-visible {
    transform: translateY(-3px) scale(1.04);
    color: #0c0c3e;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.5),
        0 0 0 8px rgba(0, 240, 255, 0.45);
    outline: none;
}

/* Hide the lap arc on hover/focus — the solid hover halo (box-shadow)
   takes over as the primary visual; running both at once read as
   "competing rings" instead of two distinct effects. */
.fz-family-fun-cta:hover::before,
.fz-family-fun-cta:focus-visible::before {
    opacity: 0;
    animation-play-state: paused;
}

.fz-family-fun-cta i {
    transition: transform 0.3s ease;
}
.fz-family-fun-cta:hover i,
.fz-family-fun-cta:focus-visible i {
    transform: translateX(5px);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

/* Tablet + mobile (≤1280) — switch to a hero stack: oversized title
   pinned to the TOP, lead + CTA pushed to the BOTTOM via margin-top:
   auto on the lead. The wide empty middle puts the bg photo's focal
   subject (kid + dinosaur) front-and-centre.
   Asymmetric padding (more on top, less on bottom) makes the CTA hug
   the section's bottom edge for a deliberate "footer" feel. */
@media (max-width: 1280px) {
    .fz-family-fun-inner {
        padding-top:    80px;
        padding-bottom: 50px;
        padding-left:   clamp(20px, 5vw, 48px);
        padding-right:  clamp(20px, 5vw, 48px);
        justify-content: center;
        align-items: stretch;
    }
    /* Two-zone flex column: title fixed at the top, footer (lead + CTA)
       fixed at the bottom. justify-content: space-between distributes the
       FIRST child to the start and the LAST child to the end — title and
       footer literally bookend the column, with the bg photo's focal
       subject visible in the empty middle band. */
    .fz-family-fun-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }
    /* "FAMILY FUN" line + "AWAITS!" line stack vertically — accent
       becomes a block so it drops to its own row. Bumped font ramp so
       the title genuinely fills the top band on mobile + tablet. */
    .fz-family-fun-title {
        margin: 0;
        font-size: clamp(3.2rem, 11.5vw, 6.5rem);
        line-height: 0.92;
        letter-spacing: 0.015em;
    }
    .fz-family-fun-title-lede {
        display: block;
    }
    .fz-family-fun-title-accent {
        display: block;
        margin-top: 0.1em;
    }
    .fz-family-fun-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .fz-family-fun-lead {
        margin: 0 0 1.1rem;
        font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    }
    .fz-family-fun-cta {
        margin-top: 0;
    }
    /* Particles drift up through the middle area — kept on mobile too
       now that the layout has room for them. Icons + scanlines stay
       off to keep the surface calm and battery-friendly. */
    .fz-family-fun-icons,
    .fz-family-fun-scanlines { display: none; }
}

/* Mobile-only refinements (≤720) — tighter side padding + slightly
   smaller CTA. min-height stays at 420 so very short viewports still
   hold the layout shape. Asymmetric vertical padding kept (more top,
   less bottom) so CTA stays glued near the bottom edge. */
@media (max-width: 720px) {
    .fz-family-fun {
        min-height: 420px;
    }
    .fz-family-fun-inner {
        padding-left:  20px;
        padding-right: 20px;
    }
    .fz-family-fun-cta {
        padding: 0.65rem 1.85rem;
        font-size: 0.8rem;
    }
}

/* Landscape phones (≤720 × ≤560) — section is short; pull padding in
   and shrink the title so the CTA never falls below the fold. */
@media (max-width: 720px) and (max-height: 560px) {
    .fz-family-fun-inner {
        padding-top:    16px;
        padding-bottom: 14px;
    }
    .fz-family-fun-title {
        font-size: 2.1rem;
    }
    .fz-family-fun-lead {
        font-size: 0.88rem;
        margin-bottom: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fz-family-fun-bg,
    .fz-family-fun-particles span,
    .fz-family-fun-icons span,
    .fz-family-fun-title,
    .fz-family-fun-title-accent,
    .fz-ff-flip-n,
    .fz-family-fun-cta {
        animation: none;
    }
}