/* ------------------------------------------------------------- investors -- */

.investors-section {
    padding-bottom: clamp(5rem, 10vw, 8rem);
}

/* The light at the end of the path now comes from the section, so the section
   mark stays on the same rail as every other one. */
.lantern-glow {
    position: absolute;
    inset: -4rem 0 -6rem;
    pointer-events: none;
    background:
        radial-gradient(ellipse 58% 62% at 50% 42%, rgba(255, 243, 194, 0.17), transparent 72%),
        radial-gradient(ellipse 42% 44% at 50% 96%, rgba(224, 195, 138, 0.12), transparent 74%);
}

/* The glow is centred at 50% 42%, which is beside the measure on a desktop and
   directly ON it at 390px. It lifted the ground under the lead to a median of
   98 against a base night of 46, and the near-white lead fell to 3.34:1 — the
   brightest ink on the page failing AA because the light behind it got
   brighter. Light at the end of the path is worth having; it is not worth the
   sentence in front of it. */
@media (max-width: 900px) {
    .lantern-glow {
        display: none;
    }
}

.investors-body {
    display: grid;
    gap: 0;
    max-width: 62ch;
}

.investors-body p {
    color: var(--night-ink-soft);
}

/* The sentence an investor carries into a partner meeting. */
.investors-takeaway {
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
    padding-left: 1.2rem;
    border-left: 2px solid color-mix(in srgb, var(--honey) 70%, transparent);
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--night-ink);
    max-width: 60ch;
}


/* The portal is a window cut into the night, not a picture hung on it. Without
   a rule the source plate showed as a raw white square sitting on the moss —
   the one place on the page where an asset looked pasted in.
   Reconstructed against .dream-loop/r26-final/home-desktop-11.png. */
/* Centred on the CONTENT, not on the container. The page's closing frame was
   the one element ignoring the rail that breaks/wide.css puts everything else
   on — "without this the page has two left edges and the spine breaks twice"
   — so the close carried three axes: head and buttons at the rail, prose at
   the measure, portal and caption on the container's own midline. Left-
   aligning it instead only moved the imbalance to the other side (a 460px
   medallion with 560px of bare moss beside it, measured). Inside the rail, a
   centred medallion shares the content's axis and stays a closing frame. */
.investor-portal {
    position: relative;
    display: grid;
    justify-items: center;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
}

@media (min-width: 900px) {
    .investor-portal {
        padding-left: calc(var(--rail) + 1.5rem);
    }

    /* The close is one composition. The portal and its caption sat on the
       content's centre while the ask sat on the rail 229px to the left — the
       page's final frame and the thing it wants were on two different axes.
       The spine governs the body; an ending is allowed to centre, and this
       one now does, together. */
    .investors-section .investor-portal + .hero-buttons {
        justify-content: center;
        padding-left: calc(var(--rail) + 1.5rem);
    }
}

.investor-portal::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: min(150%, 760px);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--lantern) 16%, transparent) 0%,
        transparent 62%
    );
    pointer-events: none;
    animation: portal-spill 9s ease-in-out infinite alternate;
    will-change: opacity, transform;
}

@keyframes portal-spill {
    from { opacity: 0.66; scale: 0.97; }
    to { opacity: 1; scale: 1.03; }
}

.portal-window {
    position: relative;
    display: block;
    width: min(100%, 460px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        /* The rim, catching the lantern. */
        0 0 0 1px color-mix(in srgb, var(--lantern) 62%, transparent),
        /* Light leaving the glass and landing on the moss around it. */
        0 0 150px -20px color-mix(in srgb, var(--lantern) 44%, transparent),
        /* Weight. A sphere resting in the scene casts down and close. */
        0 54px 60px -44px rgba(5, 9, 6, 0.98),
        0 22px 28px -24px rgba(5, 9, 6, 0.7);
}

.portal-window img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Scaled past the frame so the content reads as bulging toward you rather
       than lying flat behind a circular crop — the cheapest honest stand-in
       for refraction through a thick lens. 1.3, not 1.14: the plate has a
       pale paper edge painted round it, and at 1.14 that edge showed inside
       the glass as a white rim, "a sticker generated on white". */
    transform: scale(1.3);
    transform-origin: 50% 56%;
    filter: saturate(1.02) brightness(0.98);
    /* There is a candle in there. A flame that never moves is a photograph of
       a flame, so the light it throws breathes — slowly enough that you notice
       it only if you stay. */
    animation:
        portal-candle 9s ease-in-out infinite alternate,
        portal-refract 22s ease-in-out infinite alternate;
    will-change: transform, filter;
}

@keyframes portal-candle {
    from { filter: saturate(1.02) brightness(0.955); }
    to { filter: saturate(1.05) brightness(1.02); }
}

/* Counter to portal-gleam, and a third of its distance — the amount a lens
   this thick would actually displace what is behind it. */
@keyframes portal-refract {
    from { transform: scale(1.3) translate3d(0.5%, 0.3%, 0); }
    to { transform: scale(1.305) translate3d(-0.8%, -0.45%, 0); }
}

/* The body of the sphere. A real glass ball on a dark ground goes almost black
   where it turns away from you, and that falloff is the whole illusion — the
   previous pass was far too gentle, so it read as a picture with a ring drawn
   round it. */
.portal-window::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 38% 34%,
            rgba(255, 243, 194, 0.24) 0%,
            transparent 26%
        ),
        radial-gradient(
            circle at 42% 38%,
            transparent 30%,
            rgba(30, 44, 32, 0.34) 56%,
            rgba(14, 21, 15, 0.82) 78%,
            rgba(6, 10, 7, 0.97) 100%
        );
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* The surface of the glass: the hard gleam where the light strikes, a small
   hot catchlight inside it, the environment wrapping the opposite shoulder,
   and the bounce coming back up off the moss underneath. */
.portal-window::before {
    content: "";
    position: absolute;
    /* Oversized so the drift never walks an edge into view; the sphere's own
       overflow does the clipping. */
    inset: -14%;
    z-index: 2;
    background:
        radial-gradient(
            ellipse 30% 20% at 30% 20%,
            rgba(255, 255, 255, 0.72),
            rgba(255, 255, 255, 0.2) 52%,
            transparent 76%
        ),
        radial-gradient(
            ellipse 7% 4% at 25% 27%,
            rgba(255, 255, 255, 0.92),
            transparent 66%
        ),
        radial-gradient(
            ellipse 54% 22% at 66% 88%,
            color-mix(in srgb, var(--lantern) 52%, transparent),
            transparent 70%
        ),
        linear-gradient(
            116deg,
            transparent 58%,
            color-mix(in srgb, var(--lantern) 34%, transparent) 80%,
            transparent 94%
        );
    mix-blend-mode: screen;
    pointer-events: none;
    /* Transform only, so this rides the compositor and costs no layout. The
       arc is a few per cent across twenty-two seconds: at that speed it reads
       as a held object catching the light rather than as an effect. */
    animation: portal-gleam 22s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes portal-gleam {
    from { transform: translate3d(-1.6%, -1.1%, 0) rotate(-1.6deg); }
    to { transform: translate3d(2.4%, 1.4%, 0) rotate(1.6deg); }
}

.investor-portal figcaption {
    margin-top: 0.95rem;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--lantern);
}

@media (max-width: 860px) {
    .portal-window {
        width: min(100%, 320px);
    }
}