/* ============================================================ NOXURA — Ritual Transition Layer (CSS) ──────────────────────────────────────────────────────────── Fullscreen black veil + red mist + radial pulse. Aktivuje se přes [data-ritual] na + .bv-ritual-active na overlay. ============================================================ */ #bv-ritual-overlay { position: fixed; inset: 0; z-index: 99999; /* nad vším */ pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 380ms cubic-bezier(0.4, 0, 0.2, 1), visibility 380ms; contain: strict; isolation: isolate; } #bv-ritual-overlay.bv-ritual-active { opacity: 1; visibility: visible; pointer-events: all; } /* ── Veil — deep radial darkness ─────────────────────────── */ .bv-ritual-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(60, 5, 10, 0.78) 0%, rgba(20, 3, 5, 0.95) 35%, rgba(2, 0, 1, 1) 75%); animation: bv-veil-breathe 2.4s ease-in-out infinite; will-change: transform, opacity; } @keyframes bv-veil-breathe { 0%, 100% { transform: scale(1); opacity: 0.94; } 50% { transform: scale(1.05); opacity: 1; } } /* ── Radial blood-red pulse from center ─────────────────── */ .bv-ritual-pulse { position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; background: radial-gradient(circle, rgba(200, 22, 29, 0.65) 0%, rgba(139, 0, 0, 0.35) 35%, transparent 70%); filter: blur(28px); animation: bv-pulse-grow 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; will-change: width, height, opacity; } @keyframes bv-pulse-grow { 0% { width: 220px; height: 220px; margin: -110px 0 0 -110px; opacity: 0.85; } 100% { width: 1400px; height: 1400px; margin: -700px 0 0 -700px; opacity: 0; } } /* ── Red mist particles drifting upward ─────────────────── */ .bv-ritual-particles { position: absolute; inset: 0; pointer-events: none; } .bv-ritual-particles span { position: absolute; width: 3px; height: 3px; background: rgba(200, 22, 29, 0.8); border-radius: 50%; box-shadow: 0 0 8px rgba(200, 22, 29, 0.9), 0 0 18px rgba(200, 22, 29, 0.5); animation: bv-particle-rise 2.4s ease-out infinite; will-change: transform, opacity; } @keyframes bv-particle-rise { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-120vh) scale(1.4); opacity: 0; } } /* ── Content fade-out (current page leaving) ─────────────── */ html[data-ritual="leaving"] body { animation: bv-content-leave 380ms cubic-bezier(0.4, 0, 1, 1) forwards; } @keyframes bv-content-leave { 0% { opacity: 1; filter: brightness(1) blur(0); transform: scale(1); } 100% { opacity: 0.1; filter: brightness(0.25) blur(3px); transform: scale(0.985);} } /* ── Content fade-in (new page arriving) ─────────────────── */ html[data-ritual="arriving"] body { opacity: 0; filter: brightness(0.4) blur(6px); transform: scale(1.01); } html[data-ritual="revealing"] body { animation: bv-content-arrive 620ms cubic-bezier(0, 0, 0.2, 1) forwards; } @keyframes bv-content-arrive { 0% { opacity: 0; filter: brightness(0.4) blur(6px); transform: scale(1.01); } 60% { opacity: 0.7; filter: brightness(0.85) blur(1px); transform: scale(1.003); } 100% { opacity: 1; filter: brightness(1) blur(0); transform: scale(1); } } /* ── Lock interaction during ritual ─────────────────────── */ body.bv-ritual-locked { pointer-events: none; user-select: none; } /* ── Reduced motion respect ─────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #bv-ritual-overlay, html[data-ritual] body, .bv-ritual-veil, .bv-ritual-pulse, .bv-ritual-particles span { animation: none !important; transition: opacity 120ms linear !important; } html[data-ritual="arriving"] body, html[data-ritual="leaving"] body { filter: none !important; transform: none !important; } } /* ── Depth gradient — každá stránka má svou intenzitu ───── Použij data-depth atribut na body: 1 = landing (světlejší) 2 = me, founder 3 = bite, claim, login, recover 4 = lineage, awaken-pending 5 = awaken (nejtemnější, finále) ────────────────────────────────────────────────────────── */ body[data-depth="1"] { --bv-ambient-depth: 0.0; } body[data-depth="2"] { --bv-ambient-depth: 0.08; } body[data-depth="3"] { --bv-ambient-depth: 0.15; } body[data-depth="4"] { --bv-ambient-depth: 0.25; } body[data-depth="5"] { --bv-ambient-depth: 0.4; } /* Subtle red ambient overlay scaled by depth */ body[data-depth]::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(80, 5, 10, calc(var(--bv-ambient-depth, 0) * 0.5)) 0%, transparent 70%); pointer-events: none; z-index: 1; mix-blend-mode: multiply; }