/* Bridge: the platform hero living inside ricrios.com's legacy layout.
   Scoped to the hero section and the sense chip; touches nothing else. */

/* The hero section keeps a flat ground so the canvas sits seamless in it —
   the mood-gradient overrides would otherwise ring the field. */
#hero-section {
    background: var(--surface-primary);
    padding: 0;
    /* The hero owns the viewport — every channel, every breakpoint.
       svh first so mobile URL bars can't shrink the moment; the legacy
       1200px cap is lifted. */
    height: 100vh;      /* fallback for UAs with broken svh/dvh */
    height: 100svh;
    height: 100dvh;
    /* A floor against a collapsed hero — but never taller than the
       viewport itself, or a landscape phone scrolls the mark off its
       own screen. min() keeps the floor where it helps and drops it
       where it would cut. */
    min-height: 600px;
    min-height: min(600px, 100svh);
    max-height: none;
}

/* Cinematic: the carapace IS the hero section — full bleed, edge to edge,
   and it paints with the page's own surface token so light and dark are
   seamless rather than a panel floating in a band. */
#hero-section rr-hero {
    position: absolute;
    inset: 0;
    /* The component carries a default 16/7 aspect ratio for standalone
       use. Here the section owns the box, and a ratio would win over
       inset:0 and squash the hero to a 171px band on a phone — the mark
       was never small, its FIELD was. A stretched hero has no ratio. */
    --hero-ratio: auto;
    --surface: var(--surface-primary);
    --text: var(--text-primary);
    --focus-ring: var(--text-primary);
}

/* ── The identity plate ────────────────────
   The name on the door, pinned to the field's lower-left. Pointer
   events pass through — the carapace keeps every touch. */
#hero-section { position: relative; }

.hero-ident {
    position: absolute;
    inset-block-end: var(--space-lg, 1.5rem);
    inset-inline-start: var(--safe-inline, var(--space-lg, 1.5rem));
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hero-ident-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    line-height: 1;
    color: var(--text-primary);
}

.hero-ident-role {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* The way down. One quiet glyph, drifting once per breath. */
.hero-scroll-cue {
    position: absolute;
    inset-block-end: var(--space-md, 1rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: 2;
    /* The counterpart accent: the hour's blue answering the orange. */
    color: var(--accent-secondary, var(--text-muted));
    font-size: 1rem;
    line-height: 1;
    padding: var(--space-xs, 0.5rem);
    text-decoration: none;
    animation: cue-drift 2.8s ease-in-out infinite;
}
.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible { color: var(--accent); }

@keyframes cue-drift {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-cue { animation: none; opacity: 0.8; }
}

/* On a phone the fold belongs to the mark alone — the plate crowded it
   and the thesis one swipe below carries the name anyway. */
@media (max-width: 640px), (orientation: portrait) and (max-width: 900px) {
    .hero-ident { display: none; }
}

.sense-toggle {
    position: fixed;
    inset-block-end: var(--space-md, 1rem);
    inset-inline-end: var(--space-md, 1rem);
    z-index: 100;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary, #a0a0a0);
    background: var(--surface-primary, #0a0a0a);
    border: 1px solid var(--border-subtle, #1a1a1a);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
.sense-toggle:hover { color: var(--time-primary); border-color: var(--time-primary); }
.sense-toggle:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.sense-toggle[aria-pressed="true"] { color: var(--time-primary); }