/* ═══════════════════════════════════════════════════════════════════
   EVERGROW RADIANCE
   An ambient layer on top of the motion grammar (motion.css) and the
   atelier system. It changes no layout and moves no content. It adds
   light: aurora drifting behind dark sections, a slow champagne glint
   across gold accents and CTAs, a spotlight that follows the pointer
   across cards, and gold dust rising through the hero and the close.

   RULES (inherited from atelier.css)
   - Fail-open: everything here is decoration. If JS never runs, the page
     is exactly the page it was. Every rule that depends on JS is scoped
     to `html.rd-on`, which radiance.js sets only after it has armed.
   - Compositor only: aurora and glints animate transform/opacity.
     The text glint animates background-position on a handful of short
     spans, and only while they are on screen (`.rd-live`).
   - Green and gold only. No orange.
   - prefers-reduced-motion: every keyframe below is switched off.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --rd-gold: #D5B473;
    --rd-champagne: #F6E7C1;
    --rd-pearl: #FFF8E7;
    --rd-emerald: #2F5D4A;
    --rd-sage: #45523E;
    --rd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── 1. Aurora: soft lights drifting behind dark sections ─────────── */
/* The host becomes its own stacking context so the aurora can sit at
   z-index -1: above the section's background, below all of its content,
   including content that is not positioned. */
.rd-host { isolation: isolate; }
.rd-aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    overflow: clip;
    border-radius: inherit;
}
.rd-aurora > i {
    position: absolute;
    display: block;
    width: 62vmax;
    height: 62vmax;
    border-radius: 50%;
    opacity: 0.55;
    will-change: transform;
}
.rd-aurora > i:nth-child(1) {
    top: -30vmax;
    left: -18vmax;
    background: radial-gradient(closest-side, rgba(213, 180, 115, 0.16), rgba(213, 180, 115, 0.05) 55%, transparent 72%);
}
.rd-aurora > i:nth-child(2) {
    bottom: -34vmax;
    right: -20vmax;
    background: radial-gradient(closest-side, rgba(63, 120, 94, 0.30), rgba(47, 93, 74, 0.10) 55%, transparent 72%);
}
.rd-aurora > i:nth-child(3) {
    top: 20%;
    left: 40%;
    width: 38vmax;
    height: 38vmax;
    background: radial-gradient(closest-side, rgba(246, 231, 193, 0.07), transparent 70%);
}
html.rd-on .rd-aurora.rd-live > i:nth-child(1) { animation: rd-drift-a 26s ease-in-out infinite alternate; }
html.rd-on .rd-aurora.rd-live > i:nth-child(2) { animation: rd-drift-b 32s ease-in-out infinite alternate; }
html.rd-on .rd-aurora.rd-live > i:nth-child(3) { animation: rd-drift-c 21s ease-in-out infinite alternate; }

@keyframes rd-drift-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(14vw, 8vh, 0) scale(1.12); }
    100% { transform: translate3d(28vw, -2vh, 0) scale(0.96); }
}
@keyframes rd-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1.05); }
    50%  { transform: translate3d(-16vw, -10vh, 0) scale(0.92); }
    100% { transform: translate3d(-26vw, 4vh, 0) scale(1.1); }
}
@keyframes rd-drift-c {
    0%   { transform: translate3d(-10vw, 0, 0); opacity: 0.35; }
    100% { transform: translate3d(12vw, -6vh, 0); opacity: 0.8; }
}

/* ─── 2. Gold dust canvas (hero + close) ───────────────────────────── */
.rd-dust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.6s var(--rd-ease);
}
.rd-dust.is-on { opacity: 1; }

/* ─── 3. Champagne glint across gold display accents ───────────────── */
html.rd-on .rd-glint {
    background-image: linear-gradient(105deg,
        var(--rd-gold) 0%, var(--rd-gold) 38%,
        var(--rd-pearl) 48%, var(--rd-champagne) 52%,
        var(--rd-gold) 62%, var(--rd-gold) 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* The text is painted only where the background box reaches. Italic
       overhang and the display face's long descenders sit outside the
       content box, so widen it. Vertical padding on an inline box does
       not move the line; the horizontal pair cancels itself out. */
    padding: 0.06em 0.1em 0.2em 0;
    margin-right: -0.1em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
html.rd-on .rd-glint.rd-live {
    animation: rd-text-glint 7.5s var(--rd-ease) infinite;
}
@keyframes rd-text-glint {
    0%, 8%    { background-position: 100% 0; }
    34%, 100% { background-position: 0% 0; }
}

/* ─── 4. CTA glint: a slow light passing over the gold buttons ─────── */
html.rd-on .rd-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
html.rd-on .rd-cta::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 38%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 252, 240, 0) 20%, rgba(255, 252, 240, 0.65) 50%, rgba(255, 252, 240, 0) 80%, transparent 100%);
    transform: translateX(-130%) skewX(-18deg);
}
html.rd-on .rd-cta.rd-live::after {
    animation: rd-cta-glint 6.2s var(--rd-ease) infinite;
    animation-delay: var(--rd-delay, 1.2s);
}
@media (hover: hover) and (pointer: fine) {
    html.rd-on .rd-cta:hover::after {
        animation: rd-cta-glint-once 900ms var(--rd-ease) 1;
    }
}
@keyframes rd-cta-glint {
    0%        { transform: translateX(-130%) skewX(-18deg); }
    22%, 100% { transform: translateX(330%) skewX(-18deg); }
}
@keyframes rd-cta-glint-once {
    from { transform: translateX(-130%) skewX(-18deg); }
    to   { transform: translateX(330%) skewX(-18deg); }
}

/* ─── 5. Pointer spotlight on cards ────────────────────────────────── */
.rd-spot {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 420ms var(--rd-ease);
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(213, 180, 115, 0.22), transparent 60%);
}
.rd-spot::after {
    /* a gold rim that lights up nearest the pointer */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(213, 180, 115, 0.85), rgba(213, 180, 115, 0) 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.rd-spot.on-light {
    background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(213, 180, 115, 0.2), transparent 60%);
}
.rd-spot.is-on { opacity: 1; }

/* ─── 6. Number glint: a single pass of light when a stat lands ────── */
html.rd-on .rd-num { position: relative; }
html.rd-on .rd-num.rd-flash {
    animation: rd-num-flash 1400ms var(--rd-ease) 1;
}
@keyframes rd-num-flash {
    0%   { text-shadow: 0 0 0 rgba(246, 231, 193, 0); }
    35%  { text-shadow: 0 0 28px rgba(246, 231, 193, 0.55), 0 0 2px rgba(255, 248, 231, 0.7); }
    100% { text-shadow: 0 0 0 rgba(246, 231, 193, 0); }
}

/* ─── 7. Eyebrow hairlines draw themselves in ──────────────────────── */
html.rd-on .rd-rule-armed::before {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 900ms var(--rd-ease) 120ms;
}
html.rd-on .rd-rule-armed.rd-ruled::before { transform: scaleX(1); }

/* ─── Reduced motion: light stays, movement goes ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    .rd-aurora > i,
    html.rd-on .rd-glint.rd-live,
    html.rd-on .rd-cta.rd-live::after,
    html.rd-on .rd-cta:hover::after,
    html.rd-on .rd-num.rd-flash { animation: none !important; }
    .rd-dust { display: none; }
    html.rd-on .rd-glint { background-position: 50% 0; }
    html.rd-on .rd-rule-armed::before { transform: none; transition: none; }
}

@media print {
    .rd-aurora, .rd-dust, .rd-spot { display: none !important; }
}