/** * intro.css — Radar Watch (intro v3). * * Hidden by default; shown only when has the `has-intro` class (set by * the head gating script when the intro is allowed to run). Repeat visits, * reduced-motion, and JS-off cases stay flash-free with the hero visible. * * Scoped tokens reuse the theme brand palette: --ink, --slate-700/400/200, * --slate-50, --onog-red. Self-hosted Bebas/Manrope (loaded by tokens.css) — * no Google Fonts, no CDN. */ #signal-intro { display: none; } /* Lock scroll while the intro is queued/playing. */ html.has-intro { overflow: hidden; } html.has-intro #signal-intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; /* above the sticky header + sea canvas */ overflow: hidden; } /* Intro local custom props (scope diameter mirrors the prototype). */ #signal-intro { --scope: min(46vh, 70vw, 540px); } /* Ink veil — covers the loading sea from t=0; the handoff masks a growing hole. */ #signal-intro .veil { position: absolute; inset: 0; background: var(--ink); } .in-col { position: relative; text-align: center; padding: 0 6vw; display: flex; flex-direction: column; align-items: center; } /* ── lockup (flies to nav .brand-mark at handoff) ── */ .in-wm { display: inline-block; will-change: transform; } .in-onog { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-weight: 400; line-height: 0.9; font-size: min(9vh, 13vw); letter-spacing: 0.06em; margin-right: -0.06em; color: var(--white, #fff); } .in-sub { display: flex; justify-content: space-between; margin-top: 0.9vh; padding: 0 0.25em; font-family: var(--font-body, 'Manrope', sans-serif); font-weight: 700; font-size: min(1.5vh, 2.2vw); color: var(--onog-red, #E6141E); } /* ── PPI scope ── */ .scope-wrap { position: relative; width: var(--scope); height: var(--scope); margin-top: 4vh; } .arc { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); /* Override base.css svg{display:block;max-width:100%} — those resets collapse the height and shift the center ~14px left on the real site. */ display: inline; max-width: none; max-height: none; transform: rotate(-90deg); pointer-events: none; } .arc .tr { fill: none; stroke: var(--slate-700, #3D4654); stroke-opacity: 0.45; stroke-width: 0.35; } .arc .fl { fill: none; stroke: var(--slate-50, #F4F6FA); stroke-width: 0.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px rgba(244, 246, 250, 0.55)); } .scope { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #0D1A33 0%, #091226 62%, #070D1B 100%); } #ppi { position: absolute; inset: 0; width: 100%; height: 100%; animation: onog-crt 3.7s linear infinite; } @keyframes onog-crt { 0%, 100% { opacity: 1; } 50% { opacity: 0.96; } } .grid { position: absolute; inset: 0; width: 100%; height: 100%; /* Override base.css svg resets — keep display/max-width neutral here too. */ display: block; /* block is fine for grid since width=height=100% exact */ max-width: none; max-height: none; pointer-events: none; } .glass { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 42%), radial-gradient(circle at 50% 50%, rgba(10, 15, 26, 0) 55%, rgba(10, 15, 26, 0.55) 100%); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55), 0 0 0 1px #232C3D, 0 0 44px rgba(27, 77, 140, 0.16); } .tag { position: absolute; transform: translate(-50%, -170%); opacity: 0; font-family: var(--font-body, 'Manrope', sans-serif); font-weight: 700; font-size: 9px; letter-spacing: 0.14em; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 8px rgba(10, 15, 26, 0.9); } .tag-tgt { color: var(--onog-red, #E6141E); } .tag-onog { color: var(--slate-50, #F4F6FA); } .rd { position: absolute; font-family: var(--font-body, 'Manrope', sans-serif); font-weight: 600; font-size: 10px; letter-spacing: 0.18em; color: var(--slate-400, #8B95A6); white-space: nowrap; } .rd-tl { top: -4px; left: 0; transform: translateY(-100%); } .rd-tr { top: -4px; right: 0; transform: translateY(-100%); text-align: right; } .rd-bl { bottom: -6px; left: 0; transform: translateY(100%); } .rd-br { bottom: -6px; right: 0; transform: translateY(100%); text-align: right; } .snd-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 4.2vh; width: var(--scope); } .snd-label { font-family: var(--font-body, 'Manrope', sans-serif); font-weight: 600; font-size: 11px; letter-spacing: 0.22em; color: var(--slate-400, #8B95A6); text-align: left; } .snd-count { font-family: var(--font-display, 'Bebas Neue', sans-serif); line-height: 0.9; font-size: min(6vh, 10vw); color: var(--white, #fff); } .snd-count small { font-family: var(--font-body, 'Manrope', sans-serif); font-weight: 600; font-size: 0.32em; color: var(--slate-400, #8B95A6); margin-left: 0.25em; letter-spacing: 0.1em; } @media (max-width: 760px) { .snd-label { font-size: 9px; letter-spacing: 0.16em; } .rd { font-size: 8px; letter-spacing: 0.14em; } } /* ── headline mask spans (used by the handoff line-rise) ── */ .hl-mask { display: block; overflow: hidden; } .hl-line { display: block; } /* ── skip hint: bottom-centre of the intro overlay ── */ .intro-skip-hint { display: none; /* hidden by default; shown only when intro is active */ } html.has-intro .intro-skip-hint { display: block; position: fixed; bottom: clamp(1.25rem, 4vh, 2rem); left: 50%; transform: translateX(-50%); z-index: 1010; font-family: var(--font-body, 'Manrope', sans-serif); font-weight: 600; font-size: 0.625rem; /* 10px */ letter-spacing: 0.28em; text-transform: uppercase; color: var(--slate-400, #8B95A6); white-space: nowrap; pointer-events: none; user-select: none; }