/* ========================================================================== ImpulseNav — brand-name transition curtain Same 3.2s wave/pulse clock as Impulse Arrival. ========================================================================== */ :root { --impulse-ease: var(--nx-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); --impulse-void: #0a0c10; --impulse-void-wash: #141820; --impulse-impulse-bright: #f4ead2; --impulse-hex-delay: 0ms; --impulse-hex-ms: 3.2s; } /* Cover the page, but let it paint underneath so reveal has no decode hitch */ html.impulse-locked body.has-nx-shell > *:not(.impulse-nav) { animation: none !important; transition: none !important; pointer-events: none !important; } html.impulse-locked body.has-nx-shell main { transform: none !important; } html.impulse-unlocked body.has-nx-shell > *:not(.impulse-nav), html.impulse-unlocked #campus-page-stage, html.impulse-unlocked #campus-kiosk-stage { visibility: visible !important; opacity: 1 !important; } /* Page sits under the dissolving curtain — no snap after a black gap */ html.impulse-revealing body.has-nx-shell > *:not(.impulse-nav), html.impulse-revealing #campus-page-stage, html.impulse-revealing #campus-kiosk-stage { visibility: visible !important; opacity: 1 !important; pointer-events: none !important; } html.impulse-revealing .impulse-nav { visibility: visible; pointer-events: none; } html.impulse-skip-page-in body.has-nx-shell main, html.impulse-skip-page-in .tx-page, html.impulse-skip-page-in #reception-root { animation: none !important; transform: none !important; } /* Void backdrop until (and the in-document overlay) exist */ html.impulse-locked::before { content: ''; position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; background: radial-gradient(70% 50% at 50% 44%, rgba(244, 234, 210, 0.035), transparent 62%), linear-gradient(165deg, #07080c 0%, #0e1218 100%); } html.impulse-locked:has(.impulse-nav)::before, html.impulse-unlocked::before { display: none; } html.impulse-locked .impulse-nav:not(.is-releasing) { visibility: visible; opacity: 1; } html.impulse-locked { overflow: hidden !important; overscroll-behavior: none; } html.impulse-locked .impulse-nav, html.impulse-locked .impulse-nav * { view-transition-name: none !important; } html.impulse-locked #impulse-preloader, html.impulse-enter #impulse-preloader, html.impulse-revealing #impulse-preloader, html.impulse-unlocked #impulse-preloader { display: none !important; } /* Suppress view-transition flash under the curtain */ html.impulse-locked ::view-transition-group(*), html.impulse-locked ::view-transition-old(*), html.impulse-locked ::view-transition-new(*) { animation: none !important; opacity: 0 !important; } /* ---- Overlay ---- */ .impulse-nav { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: visible; pointer-events: none; visibility: hidden; opacity: 0; view-transition-name: none; } .impulse-nav.is-live, .impulse-nav.is-curtain { visibility: visible; opacity: 1; background: radial-gradient(70% 50% at 50% 44%, rgba(244, 234, 210, 0.035), transparent 62%), linear-gradient(165deg, #07080c 0%, #0e1218 100%); } .impulse-nav.is-releasing, .impulse-nav.is-releasing.is-live, .impulse-nav.is-releasing.is-curtain { opacity: 0; transition: opacity 800ms cubic-bezier(0.4, 0, 0.12, 1); } .impulse-nav__curtain { position: absolute; inset: 0; } .impulse-nav__void { position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 50% at 50% 44%, rgba(244, 234, 210, 0.035), transparent 62%), linear-gradient(165deg, #07080c 0%, #0e1218 100%); } .impulse-nav__field { --ip-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='none' stroke='%23d4c4a8' stroke-opacity='0.14' stroke-width='0.65' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.37L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.67V49h-2z'/%3E%3C/svg%3E"); --ip-hex-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='none' stroke='%23c4b496' stroke-opacity='0.55' stroke-width='0.8' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.37L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.67V49h-2z'/%3E%3C/svg%3E"); position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .impulse-nav__hex, .impulse-nav__hex-lit { position: absolute; inset: -8%; background-size: 44px 77px; } .impulse-nav__hex { background-image: var(--ip-hex); opacity: 0.55; } .impulse-nav__hex-lit { opacity: 0; background-image: var(--ip-hex-hot); filter: none; -webkit-mask-image: linear-gradient( 118deg, transparent 32%, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.28) 47%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.28) 53%, rgba(0, 0, 0, 0.08) 58%, transparent 68% ); mask-image: linear-gradient( 118deg, transparent 32%, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.28) 47%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.28) 53%, rgba(0, 0, 0, 0.08) 58%, transparent 68% ); -webkit-mask-size: 180% 140%; mask-size: 180% 140%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 122% 38%; mask-position: 122% 38%; } html.impulse-locked .impulse-nav__hex-lit, html.impulse-curtain .impulse-nav__hex-lit, html.impulse-revealing .impulse-nav__hex-lit, .impulse-nav.is-live .impulse-nav__hex-lit, .impulse-nav.is-curtain .impulse-nav__hex-lit { opacity: 0.72; animation: ip-hex-impulse var(--impulse-hex-ms) linear infinite; animation-delay: var(--impulse-hex-delay, 0ms); } html.impulse-locked .impulse-nav__hex-lit--lag, html.impulse-curtain .impulse-nav__hex-lit--lag, html.impulse-revealing .impulse-nav__hex-lit--lag, .impulse-nav.is-live .impulse-nav__hex-lit--lag, .impulse-nav.is-curtain .impulse-nav__hex-lit--lag { opacity: 0.28; filter: none; animation-delay: calc(var(--impulse-hex-delay, 0ms) - 1.1s); } .impulse-nav__stage { --ip-mark-size: min(9.5rem, 36vw); position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: min(20.5rem, calc(100vw - 2.5rem)); overflow: visible; } .impulse-nav__mark { position: relative; flex: 0 0 var(--ip-mark-size); width: var(--ip-mark-size); height: var(--ip-mark-size); max-width: none; overflow: visible; pointer-events: none; opacity: 1; } html.impulse-locked .impulse-nav__mark, .impulse-nav.is-mark .impulse-nav__mark { opacity: 1; } .impulse-nav__glow { position: absolute; inset: -48%; border-radius: 50%; background: radial-gradient(circle, rgba(244, 234, 210, 0.92) 0%, rgba(232, 217, 184, 0.4) 32%, transparent 70%); filter: none; opacity: 0.55; transform: scale(0.96); } html.impulse-locked .impulse-nav__glow, html.impulse-curtain .impulse-nav__glow, html.impulse-revealing .impulse-nav__glow, .impulse-nav.is-live .impulse-nav__glow, .impulse-nav.is-mark .impulse-nav__glow { animation: ip-glow-pulse var(--impulse-hex-ms) ease-in-out infinite; animation-delay: var(--impulse-hex-delay, 0ms); } .impulse-nav__mark-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: center; filter: none; } html.impulse-locked .impulse-nav__mark-img, html.impulse-curtain .impulse-nav__mark-img, html.impulse-revealing .impulse-nav__mark-img, .impulse-nav.is-live .impulse-nav__mark-img, .impulse-nav.is-mark .impulse-nav__mark-img { animation: ip-mark-pulse var(--impulse-hex-ms) ease-in-out infinite; animation-delay: var(--impulse-hex-delay, 0ms); } @keyframes ip-hex-impulse { 0% { -webkit-mask-position: 122% 38%; mask-position: 122% 38%; } 100% { -webkit-mask-position: -28% 62%; mask-position: -28% 62%; } } @keyframes ip-mark-pulse { 0%, 36%, 100% { transform: scale(1); } 46% { transform: scale(1.07); } 58% { transform: scale(1); } } @keyframes ip-glow-pulse { 0%, 36%, 100% { opacity: 0.42; transform: scale(0.96); } 46% { opacity: 0.72; transform: scale(1.08); } 62% { opacity: 0.42; transform: scale(0.96); } } .impulse-nav__ui { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; width: 100%; margin-top: 0.35rem; pointer-events: none; opacity: 1; text-align: center; } html.impulse-locked .impulse-nav__ui, .impulse-nav.is-live .impulse-nav__ui { opacity: 1; } .impulse-nav__brand { margin: 0; font-family: var(--nx-font-display, 'Outfit', system-ui, sans-serif); font-weight: 600; font-size: clamp(0.92rem, 2.1vw, 1.12rem); letter-spacing: 0.28em; text-transform: uppercase; line-height: 1; color: #f4ead2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 18px rgba(7, 8, 12, 0.9); } .impulse-nav__sub { margin: 0; font-family: var(--nx-font-body, 'Manrope', system-ui, sans-serif); font-weight: 500; font-size: clamp(0.78rem, 3.6vw, 0.92rem); letter-spacing: -0.01em; line-height: 1.35; color: rgba(232, 217, 184, 0.58); white-space: nowrap; } .impulse-nav__status { margin: 0.55rem 0 0; min-height: 1.2em; font-family: var(--nx-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 0.68rem; letter-spacing: 0.06em; color: rgba(232, 217, 184, 0.42); } .impulse-nav__meter { margin-top: 0.55rem; width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.85rem; } .impulse-nav__meter-track { position: relative; height: 4px; border-radius: 999px; background: rgba(244, 234, 210, 0.16); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(244, 234, 210, 0.12); } .impulse-nav__meter-fill { display: block; height: 100%; width: 100%; border-radius: inherit; transform: scaleX(var(--impulse-p, 0)); transform-origin: left center; background: linear-gradient(90deg, #d4c4a8 0%, #f4ead2 100%); } .impulse-nav__meter-val { font-family: var(--nx-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 0.78rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: #f4ead2; min-width: 2.4ch; text-align: right; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); } /* ---- Outgoing: page recedes under the same void ---- */ body.is-impulse-leaving main, body.is-impulse-leaving #reception-root, body.is-impulse-leaving .tx-page { filter: saturate(0.4) blur(2px); transition: filter 400ms var(--impulse-ease); } /* ---- View-transition anchors (morph runs under curtain) ---- */ [data-tx-port] { view-transition-name: impulse-port; } .impulse-hero-anchor { view-transition-name: impulse-hero; } ::view-transition-group(hall-stage) { animation-duration: 0.01ms; animation-timing-function: var(--impulse-ease); } @media (prefers-reduced-motion: reduce) { html.impulse-locked::before { display: none; } .impulse-nav { display: none !important; } .impulse-nav__hex-lit, .impulse-nav__glow, .impulse-nav__mark-img { animation: none; } html.impulse-locked body.has-nx-shell > *:not(.impulse-nav) { visibility: visible !important; opacity: 1 !important; } body.is-impulse-leaving main, body.is-impulse-leaving #reception-root, body.is-impulse-leaving .tx-page { filter: none !important; } }