/* ─── Swim Transition — Daniil page reveal ───────────────────────────────── */ /* ── Overlay container ───────────────────────────────────────────────────── */ .swim-overlay { position: fixed; inset: 0; /* belt-and-suspenders for mobile browsers with dynamic toolbars */ width: 100%; height: 100%; min-height: 100dvh; z-index: 9000; pointer-events: none; overflow: hidden; } /* ── Photo fill ──────────────────────────────────────────────────────────── */ /* clip-path start/end and background-position are injected by JS via GSAP */ /* so that the circle origin and face alignment are computed at click time. */ .swim-overlay__photo { position: absolute; inset: 0; /* background-image and background-position injected by JS */ background-size: cover; background-repeat: no-repeat; will-change: clip-path; } /* ── Deep-water vignette that pulses in ─────────────────────────────────── */ .swim-overlay__vignette { position: absolute; inset: 0; background: radial-gradient( ellipse 80% 70% at center, transparent 30%, rgba(0, 40, 120, 0.55) 100% ); opacity: 0; transition: opacity 1.0s ease 0.9s; } .swim-overlay.is-open .swim-overlay__vignette { opacity: 1; } /* ── Ripple rings (positioned via JS left/top) ───────────────────────────── */ .swim-ripple { position: absolute; border-radius: 50%; border: 1.5px solid rgba(220, 240, 255, 0.75); box-shadow: 0 0 8px rgba(100, 180, 255, 0.4); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; will-change: transform, opacity; } /* Ring sizes — slightly flattened like real pool-surface waves */ .swim-ripple:nth-child(3) { width: 140px; height: 80px; } .swim-ripple:nth-child(4) { width: 300px; height: 160px; } .swim-ripple:nth-child(5) { width: 520px; height: 280px; } .swim-overlay.is-open .swim-ripple:nth-child(3) { animation: swim-ring 0.85s cubic-bezier(0.2, 0, 0.6, 1) 0.18s forwards; } .swim-overlay.is-open .swim-ripple:nth-child(4) { animation: swim-ring 0.85s cubic-bezier(0.2, 0, 0.6, 1) 0.33s forwards; } .swim-overlay.is-open .swim-ripple:nth-child(5) { animation: swim-ring 0.85s cubic-bezier(0.2, 0, 0.6, 1) 0.50s forwards; } @keyframes swim-ring { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.9; } 60% { opacity: 0.4; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } /* ── Water droplets (positioned + animated by GSAP) ─────────────────────── */ .swim-drop { position: absolute; width: 5px; height: 9px; background: rgba(190, 230, 255, 0.88); border-radius: 50% 50% 48% 48% / 62% 62% 38% 38%; box-shadow: 0 0 4px rgba(150, 210, 255, 0.6); pointer-events: none; will-change: transform, opacity; } /* ── Entry fade: applied to on daniil.html after swim transition ──── */ body.swim-entry { animation: swim-entry-fade 0.65s ease-out forwards; } @keyframes swim-entry-fade { 0% { filter: brightness(1.6) saturate(0.2) hue-rotate(160deg); opacity: 0.6; } 50% { filter: brightness(1.1) saturate(0.7) hue-rotate(30deg); opacity: 0.9; } 100% { filter: brightness(1) saturate(1) hue-rotate(0deg); opacity: 1; } } /* ── Reduced-motion: skip animation, just cut ────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .swim-overlay__photo { transition: none; clip-path: none !important; } .swim-overlay__vignette { transition: none; } .swim-ripple { animation: none !important; } body.swim-entry { animation: none; } }