/* ═══════════════════════════════════════════════════════════════════════ CINEMATIC ENTRANCE — "AGLF is activating" Every temporary hidden state is scoped under html.aglf-entrance, so the choreography can never break the authored, static layout: removing the class returns the page to its resting state untouched. The class is added by an inline script in base.html (skipped for prefers-reduced-motion), removed again for every sub-page by an inline script right after the opening tag, and finally removed by app.js once the hero timeline finishes (or is skipped). This file sits after redesign.css and campaign.css so it can override discreetly. ═══════════════════════════════════════════════════════════════════════ */ /* Mask scaffolding — layout-neutral block spans wrapping the existing text inside the kicker / h1 / lede. Only the reveal state is entrance-scoped. */ .atlas-hero-copy .aglf-mask, .atlas-hero-copy .aglf-mask-inner { display: block; } /* Temporary nav hairline, injected by app.js and removed at cleanup. */ .atlas-nav-rule { position: fixed; z-index: 89; top: 11px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-line) 18%, var(--color-line) 82%, transparent); pointer-events: none; } /* The coordinate plaque on the map is a pseudo-element (not animatable by the timeline), so give it a transition and let it fade in when the entrance class lifts. */ .atlas-visual::after { transition: opacity 700ms var(--ease-out); } /* ── Atmosphere: freeze the breathing loops; the timeline drives opacity. */ html.aglf-entrance .atlas-hero-atmos, html.aglf-entrance .atlas-hero-image, html.aglf-entrance .atlas-map-network g .map-halo { animation: none; } html.aglf-entrance .atlas-hero-atmos { will-change: opacity; } /* ── Masked copy reveals */ html.aglf-entrance .atlas-hero-copy .aglf-mask { overflow: hidden; } html.aglf-entrance .atlas-hero-copy .aglf-mask-inner { will-change: transform; } html.aglf-entrance .atlas-kicker .aglf-mask-inner, html.aglf-entrance .atlas-hero-copy h1 .aglf-mask-inner { transform: translateY(115%); } html.aglf-entrance .atlas-hero-lede .aglf-mask-inner { transform: translateY(48%); } /* ── Accent rules draw centre-out */ html.aglf-entrance .atlas-hero-rule, html.aglf-entrance .atlas-hero-baseline, html.aglf-entrance .atlas-nav-rule { transform: scale(0); transform-origin: 50% 50%; will-change: transform; } /* ── Navigation held off until its choreography step */ html.aglf-entrance .atlas-nav .site-nav-inner { opacity: 0; will-change: opacity, transform; } html.aglf-entrance .atlas-nav .site-nav-brand { opacity: 0; transform: translateY(-10px); will-change: opacity, transform; } html.aglf-entrance .atlas-nav .site-nav-links .nav-link, html.aglf-entrance .atlas-nav .nav-cta, html.aglf-entrance .atlas-nav .nav-controls { opacity: 0; will-change: opacity, transform; } /* ── Hero supporting content */ html.aglf-entrance .atlas-hero-copy .atlas-actions, html.aglf-entrance .atlas-brief { opacity: 0; will-change: opacity, transform; } /* ── Geospatial elements */ html.aglf-entrance .atlas-hero-image { opacity: 0; will-change: opacity, transform; } html.aglf-entrance .atlas-map-network path { stroke-dashoffset: 42; will-change: stroke-dashoffset; } html.aglf-entrance .atlas-map-network .map-ring, html.aglf-entrance .atlas-map-network .map-point, html.aglf-entrance .atlas-map-network g .map-halo { opacity: 0; } html.aglf-entrance .map-data-card, html.aglf-entrance .atlas-visual figcaption { opacity: 0; will-change: opacity, transform; } html.aglf-entrance .atlas-visual::after { opacity: 0; } /* ── Belt-and-braces: even if the class ever stuck on for a reduced-motion visitor, show everything instantly. */ @media (prefers-reduced-motion: reduce) { html.aglf-entrance .atlas-hero-copy .aglf-mask, html.aglf-entrance .atlas-hero-copy .aglf-mask-inner, html.aglf-entrance .atlas-hero-rule, html.aglf-entrance .atlas-hero-baseline, html.aglf-entrance .atlas-nav-rule, html.aglf-entrance .atlas-nav .site-nav-inner, html.aglf-entrance .atlas-nav .site-nav-brand, html.aglf-entrance .atlas-nav .site-nav-links .nav-link, html.aglf-entrance .atlas-nav .nav-cta, html.aglf-entrance .atlas-nav .nav-controls, html.aglf-entrance .atlas-hero-copy .atlas-actions, html.aglf-entrance .atlas-brief, html.aglf-entrance .atlas-hero-image, html.aglf-entrance .atlas-map-network path, html.aglf-entrance .atlas-map-network .map-ring, html.aglf-entrance .atlas-map-network .map-point, html.aglf-entrance .atlas-map-network g .map-halo, html.aglf-entrance .map-data-card, html.aglf-entrance .atlas-visual figcaption, html.aglf-entrance .atlas-visual::after { transform: none; opacity: 1; stroke-dashoffset: 0; animation: none; transition: none; } }