/* ==========================================================================
   ExploitLearn — landing-only extras (loaded on the home page only).
   Reuses the global tokens from exploit.css. Adds: binary-rain hero,
   pointer-reactive headline, section marks, minimal contact block.
   ========================================================================== */

/* ---- Binary-rain hero ---- */
/* The rain has to start right under the sticky navbar, so drop the page's top
   padding — this sheet only loads on the landing page. */
.main { padding-top: 0; }
/* ...but a TempData alert must not touch the navbar when one renders. */
.main > .container > .alert:first-child { margin-top: 28px; }

.ex-hero {
    position: relative;
    /* The hero owns the whole first screen: viewport minus the sticky navbar
       (+1px for its bottom border). No section can be half-visible at the fold.
       svh, not vh/dvh — mobile browser chrome must not resize this mid-scroll. */
    min-height: calc(100vh - var(--nav-h) - 1px);
    min-height: calc(100svh - var(--nav-h) - 1px);
    display: flex;
    align-items: center;
    overflow: hidden;
    /* leaves room for .hero-fold, so the centred content stays optically centred */
    padding-bottom: 56px;
}
/* Dissolve the rain into the page instead of ending it on a hard line.
   --bg-0 is pure black and the canvas paints rgb(0,0,0), so the seam vanishes. */
.ex-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 26%;
    background: linear-gradient(to bottom, transparent, var(--bg-0) 82%);
    z-index: 1;
    pointer-events: none;
}
#binary-rain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;                /* full-bleed, no border/radius */
}
.ex-hero > .container { position: relative; z-index: 2; }

.ex-headline {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.0;
    font-size: clamp(2.6rem, 8vw, 5.6rem);
    margin: 0 0 24px;
}
/* per-word reactive spans — color driven by JS via --wc */
.ex-headline .rx { color: var(--wc, var(--text)); transition: color .08s linear; }
.ex-headline .rx.accent { --wc: #22c55e; }

.ex-lead {
    font-size: 1.15rem;
    color: var(--text-dim);
    max-width: 58ch;
    margin: 0 0 30px;
}
.ex-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Fold bar: closes the hero and signposts what's below ---- */
.hero-fold {
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    height: 56px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.hero-fold:hover { color: var(--cyan); }
.hero-fold-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero-fold .nx { color: var(--cyan); }

/* ---- Scroll cue: a rain column condensing into a double chevron ----
   Clickable — jumps to the same section the fold bar points at. */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 64px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding rather than a bigger box: lifts the tap target to ~50x72 (the ink
       alone is only 26px wide) without moving the chevrons off their mark */
    padding: 8px 12px;
    border-radius: 12px;
}
/* the trail — a rain column narrowing toward the arrow */
.scroll-cue .rail { position: relative; width: 18px; height: 30px; }
.scroll-cue .rail::before {
    content: "";
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(34, 197, 94, .75));
}
/* two glyphs dripping down the trail, half a cycle apart */
.scroll-cue .rail span {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: .68rem;
    line-height: 1;
    color: #4ade80;
    text-shadow: 0 0 8px rgba(34, 197, 94, .75);
    animation: cue-drip 2.4s linear infinite;
}
.scroll-cue .rail span:last-child { animation-delay: 1.2s; }
/* phosphor bloom so the green reads against pure black */
.scroll-cue .chevs {
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 7px rgba(34, 197, 94, .6));
    transition: filter .2s ease;
}
.scroll-cue .chevs path {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s ease;
    animation: cue-cascade 1.9s ease-in-out infinite;
}
/* the lower chevron trails the upper one — reads as a downward cascade */
.scroll-cue .chevs .c2 { animation-delay: .2s; }

/* hover/focus: burn brighter so it reads as pressable */
.scroll-cue:hover .chevs { filter: drop-shadow(0 0 13px rgba(34, 197, 94, .9)); }
.scroll-cue:hover .chevs path { stroke: #4ade80; }
/* green ring, matching the form-field focus idiom in exploit.css */
.scroll-cue:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(22, 163, 74, .28); }

/* the % resolve against .rail, so the drip follows whatever height it has */
@keyframes cue-drip {
    0%   { top: -18%; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: .9; }
    100% { top: 96%; opacity: 0; }
}
@keyframes cue-cascade {
    0%, 100% { opacity: .32; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue .rail span, .scroll-cue .chevs path { animation: none; }
    .scroll-cue .chevs path { opacity: .85; }
}

/* The fold bar and the cue both jump here. No scroll-margin-top offset: the
   navbar does not overlay scrolled content — `overflow-x: hidden` on html/body
   neutralises its `position: sticky`, so it scrolls away with the page. Any
   offset here would leave a sliver of the hero showing above the heading.
   If that overflow is ever removed and the navbar starts sticking, this needs
   `scroll-margin-top: calc(var(--nav-h) + 1px)`. */
.section[id] { scroll-margin-top: 0; }

/* ---- Section indicator glyph ---- */
.section-mark {
    font-family: var(--font-mono);
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .78rem;
    margin-bottom: 14px;
}

/* ---- Minimal Telegram contact ---- */
.contact {
    text-align: center;
    padding: 56px 24px;
}
.contact h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 10px; }
.contact p { color: var(--text-dim); max-width: 520px; margin: 0 auto 24px; }
.contact .tg-handle {
    font-family: var(--font-mono);
    color: var(--text-faint);
    margin-top: 14px;
    letter-spacing: .04em;
}

/* ---- Mobile: the hero still has to fit inside the one screen it claims ---- */
@media (max-width: 760px) {
    .ex-hero { padding-bottom: 48px; }
    .ex-headline { margin-bottom: 18px; }
    .ex-lead { font-size: 1rem; margin-bottom: 24px; }
    .ex-hero .hero-stats { margin-top: 30px; gap: 20px 28px; }
    .hero-fold { height: 48px; font-size: .7rem; }
    /* the cue fits on a phone too, just tighter */
    .scroll-cue { bottom: 52px; }
    .scroll-cue .rail { height: 22px; }
    .scroll-cue .chevs { width: 22px; height: 22px; }
}

/* Short viewports — small phones, any phone in landscape, a squat desktop
   window — have no dead space under the stats, so the cue would land on top of
   the content. Height is the real constraint here, not width. */
@media (max-height: 780px) {
    .scroll-cue { display: none; }
}