/* ========================================================= CIRCULAR BUTTON ========================================================= */ .enter-button { position: relative; width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(0,217,255,.55); background: radial-gradient( circle, rgba(0,40,65,.7), rgba(1,7,14,.88) ); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .6s var(--ease), border-color .4s ease, box-shadow .5s ease, background .5s ease; } .enter-button::before { content: ""; position: absolute; inset: -10px; border: 1px solid rgba(0,217,255,.17); border-radius: 50%; transition: transform .6s var(--ease), border-color .5s ease; } .enter-button::after { content: ""; position: absolute; inset: -19px; border: 1px dashed rgba(255,255,255,.12); border-radius: 50%; animation: rotateRing 18s linear infinite; } @keyframes rotateRing { to { transform: rotate(360deg); } } .enter-button:hover { transform: scale(1.08); border-color: rgba(0,217,255,.95); background: radial-gradient( circle, rgba(0,100,145,.55), rgba(1,7,14,.9) ); box-shadow: 0 0 35px rgba(0,180,255,.22), 0 0 80px rgba(0,90,255,.12); } .enter-button:hover::before { transform: scale(1.12); border-color: rgba(0,217,255,.3); } .enter-arrow { font-size: 30px; font-weight: 300; line-height: 1; transition: transform .5s var(--ease); } .enter-button:hover .enter-arrow { transform: translateX(5px); } /* ========================================================= ENTER LABEL ========================================================= */ .enter-label { margin-top: 30px; font-family: Orbitron, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.8); } .enter-instruction { margin-top: 11px; font-family: Rajdhani, sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.30); } /* ========================================================= BOTTOM INFORMATION ========================================================= */ .entry-bottom { position: absolute; z-index: 9; bottom: 48px; left: 52px; right: 52px; display: flex; justify-content: space-between; align-items: center; font-family: Rajdhani, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 4px; color: rgba(255,255,255,.38); text-transform: uppercase; } .entry-bottom-right { color: rgba(0,217,255,.55); } /* ========================================================= APP ========================================================= */ /* ========================================================= EXIT ANIMATION ========================================================= */ #entryGate.exit { opacity: 0; visibility: hidden; } #entryGate.exit .entry-background { transform: scale(1.18); filter: saturate(.8) brightness(.35) blur(3px); } #entryGate.exit .entry-content { transform: translate(-50%, -50%) scale(1.06); opacity: 0; transition: opacity .7s ease, transform .9s var(--ease); } /* --------------------------------------------------------- FLOATING CONTROLS (theme toggle, Coach ATLAS button) They belong to the app, not the gate. While the gate is up (no .exit yet) they are hidden — visibility: hidden also makes them unclickable and unfocusable — from first paint. enterSwimtics() adds .exit; the controls then fade in once the gate's own 1.1s fade-out (#entryGate transition in entry-gate-visual.css) has finished. Both are later body siblings of #entryGate, so no extra state is needed. --------------------------------------------------------- */ #entryGate:not(.exit) ~ #themeToggle, #entryGate:not(.exit) ~ #aiCoachBtn { visibility: hidden; opacity: 0; } /* the toggle keeps its existing all .3s transition (hover, theme switch) */ #entryGate.exit ~ #themeToggle { transition: all .3s ease, opacity .4s ease 1.1s, visibility 0s linear 1.1s; } #entryGate.exit ~ #aiCoachBtn { transition: opacity .4s ease 1.1s, visibility 0s linear 1.1s; } /* reduced motion: the gate disappears at once, so reveal at once too */ @media(prefers-reduced-motion: reduce) { #entryGate.exit ~ #themeToggle, #entryGate.exit ~ #aiCoachBtn { transition-delay: 0s !important; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:800px) { .entry-frame { inset: 14px; } .entry-top { top: 32px; left: 30px; right: 30px; font-size: 8px; letter-spacing: 2px; } .entry-side-left, .entry-side-right { display: none; } .entry-bottom { bottom: 30px; left: 30px; right: 30px; font-size: 8px; letter-spacing: 2px; } .entry-logo { font-size: clamp(3rem, 15vw, 5rem); } .entry-subtitle { line-height: 1.7; } .background-number { right: -5vw; top: 15vh; font-size: 70vw; } .enter-button { width: 78px; height: 78px; } .enter-arrow { font-size: 25px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================= SWIMTICS PREMIUM MOTION SYSTEM ========================================================= */ /* --------------------------------------------------------- SCROLL PROGRESS --------------------------------------------------------- */ #swimticsScrollProgress { position: fixed; top: 50%; right: 18px; width: 2px; height: 90px; transform: translateY(-50%); background: rgba(255,255,255,.08); z-index: 999999; overflow: hidden; } #swimticsScrollProgress span { display: block; width: 100%; height: 0%; background: linear-gradient( 180deg, #00d9ff, rgba(0,217,255,.15) ); box-shadow: 0 0 12px rgba(0,217,255,.5); } /* --------------------------------------------------------- PAGE TRANSITION --------------------------------------------------------- */ .swimtics-page-transition { position: fixed; inset: 0; z-index: 999998; pointer-events: none; background: linear-gradient( 135deg, #020407, #061426 ); transform: translateY(100%); } /* --------------------------------------------------------- SECTION REVEAL --------------------------------------------------------- */ .swimtics-reveal { opacity: 0; transform: translateY(60px); filter: blur(8px); } .swimtics-reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); } /* --------------------------------------------------------- FEATURE CARD --------------------------------------------------------- */ .feature-card { transform: translateY(0) scale(1); transform-style: preserve-3d; will-change: transform; } /* --------------------------------------------------------- CARD LIGHT --------------------------------------------------------- */ .swimtics-card-light { position: absolute; width: 250px; height: 250px; border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(0,217,255,.12), transparent 70% ); filter: blur(25px); opacity: 0; transform: translate(-50%, -50%); z-index: 0; } /* --------------------------------------------------------- CARD BORDER SWEEP --------------------------------------------------------- */ .feature-card .swimtics-border-sweep { position: absolute; top: 0; left: -100%; width: 100%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(0,217,255,.8), transparent ); pointer-events: none; } .feature-card:hover .swimtics-border-sweep { animation: borderSweep .9s ease forwards; } @keyframes borderSweep { from { left: -100%; } to { left: 100%; } } /* --------------------------------------------------------- SECTION MARKER --------------------------------------------------------- */ .swimtics-section-marker { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; color: rgba(0,217,255,.7); font-family: Rajdhani, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; } .swimtics-section-marker::before { content: ""; width: 35px; height: 1px; background: rgba(0,217,255,.6); } /* --------------------------------------------------------- TECHNICAL CORNER --------------------------------------------------------- */ .swimtics-tech-corner { position: absolute; width: 30px; height: 30px; pointer-events: none; opacity: .35; } .swimtics-tech-corner::before, .swimtics-tech-corner::after { content: ""; position: absolute; background: rgba(0,217,255,.6); } .swimtics-tech-corner::before { width: 30px; height: 1px; } .swimtics-tech-corner::after { width: 1px; height: 30px; } /* --------------------------------------------------------- IMAGE / VIDEO PARALLAX --------------------------------------------------------- */ .swimtics-parallax { will-change: transform; } /* --------------------------------------------------------- PREMIUM DIVIDER --------------------------------------------------------- */ .swimtics-divider { position: relative; width: 100%; height: 1px; margin: 80px 0; background: rgba(255,255,255,.07); overflow: hidden; } .swimtics-divider::after { content: ""; position: absolute; left: -20%; top: 0; width: 20%; height: 1px; background: linear-gradient( 90deg, transparent, #00d9ff, transparent ); animation: dividerFlow 5s linear infinite; } @keyframes dividerFlow { to { left: 120%; } } /* --------------------------------------------------------- GLOW DOT --------------------------------------------------------- */ .swimtics-pulse-dot { width: 5px; height: 5px; border-radius: 50%; background: #00d9ff; box-shadow: 0 0 0 0 rgba(0,217,255,.5); animation: pulseDot 2.5s infinite; } @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(0,217,255,.45); } 70% { box-shadow: 0 0 0 10px rgba(0,217,255,0); } 100% { box-shadow: 0 0 0 0 rgba(0,217,255,0); } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:800px) { #swimticsScrollProgress { right: 8px; height: 60px; } } /* ========================================================= SWIMTICS PERFORMANCE ECOSYSTEM ========================================================= */ .swimtics-ecosystem-intro { position: relative; width: min(1200px, 88%); margin: 0 auto 95px; padding-left: 24px; } /* --------------------------------------------------------- SYSTEM LABEL --------------------------------------------------------- */ .swimtics-ecosystem-intro::before { content: ""; display: block; width: 85px; height: 2px; margin-bottom: 32px; background: linear-gradient( 90deg, #00d9ff, rgba(0,217,255,.08), transparent ); box-shadow: 0 0 14px rgba(0,217,255,.35); }