/* ========================================================= WOW LAYER — premium interactive polish for shadehub. Loaded last, builds on top of style.css + liquid-glass.css. ========================================================= */ /* --------------------------------------------------------- 1. STARFIELD — subtle drifting stars over the aurora bg. Two layers of tiny radial dots at different speeds = depth. --------------------------------------------------------- */ @keyframes wow-drift { from { background-position: 0 0; } to { background-position: -600px -400px; } } .app-bg::before { /* keep the aurora blob, stars go on a dedicated layer below */ } .wow-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1px 1px at 25px 35px, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 150px 120px, rgba(255,255,255,.32), transparent), radial-gradient(1.5px 1.5px at 310px 60px, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 420px 210px, rgba(255,255,255,.28), transparent), radial-gradient(1px 1px at 90px 260px, rgba(255,255,255,.35), transparent), radial-gradient(1.5px 1.5px at 520px 320px, rgba(255,255,255,.3), transparent), radial-gradient(1px 1px at 240px 390px, rgba(255,255,255,.4), transparent); background-size: 600px 400px; animation: wow-drift 120s linear infinite; opacity: .55; mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 30%, transparent 100%); } .no-bg-anim .wow-stars { display: none; } /* --------------------------------------------------------- 2. SPOTLIGHT — a soft light that follows the pointer across glass cards (JS sets --mx / --my per element). --------------------------------------------------------- */ .wow-spot { position: relative; } .wow-spot::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient( 420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.055), transparent 65% ); } .wow-spot:hover::after { opacity: 1; } /* border glow that tracks the pointer on the welcome card */ .welcome-card.wow-spot::before { content: "" !important; display: block !important; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: radial-gradient( 260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 65%, #fff 10%), transparent 70% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s ease; } .welcome-card.wow-spot:hover::before { opacity: .8; } /* --------------------------------------------------------- 3. BRAND — living gradient wordmark + breathing dot --------------------------------------------------------- */ @keyframes wow-gradient-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .wc-brand-name, .logo-name { background: linear-gradient( 90deg, var(--text) 0%, color-mix(in srgb, var(--accent) 80%, #fff 20%) 35%, var(--text) 70% ); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: wow-gradient-pan 7s ease-in-out infinite; } /* --------------------------------------------------------- 4. TITLE — shimmering headline --------------------------------------------------------- */ .wc-title { background: linear-gradient( 100deg, var(--text) 30%, color-mix(in srgb, var(--accent) 55%, var(--text)) 50%, var(--text) 70% ); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: wow-gradient-pan 9s ease-in-out infinite; } /* --------------------------------------------------------- 5. ENTRANCE — staggered rise of welcome card children --------------------------------------------------------- */ @keyframes wow-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .welcome-card > * { animation: wow-rise .55s var(--ease-out, ease) both; } .welcome-card > *:nth-child(1) { animation-delay: .05s; } .welcome-card > *:nth-child(2) { animation-delay: .12s; } .welcome-card > *:nth-child(3) { animation-delay: .19s; } .welcome-card > *:nth-child(4) { animation-delay: .26s; } .welcome-card > *:nth-child(5) { animation-delay: .33s; } .welcome-card > *:nth-child(6) { animation-delay: .40s; } .welcome-card > *:nth-child(7) { animation-delay: .47s; } /* --------------------------------------------------------- 6. JOIN BUTTON — glow, shine sweep, arrow nudge --------------------------------------------------------- */ #joinBtn { position: relative; overflow: hidden; transition: transform .18s var(--ease-out, ease), box-shadow .25s ease; } #joinBtn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient( 105deg, transparent, rgba(255, 255, 255, 0.22), transparent ); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; } #joinBtn:hover::after { left: 130%; } #joinBtn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 32px -6px color-mix(in srgb, var(--accent) 75%, transparent); } #joinBtn:active { transform: translateY(0) scale(.985); } #joinBtn svg { transition: transform .2s var(--ease-out, ease); } #joinBtn:hover svg { transform: translateX(3px); } /* --------------------------------------------------------- 7. INPUTS — lift + accent glow on focus --------------------------------------------------------- */ .welcome-card .cv-field input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--accent) 45%, transparent); } .welcome-card .cv-field { transition: transform .18s var(--ease-out, ease); } .welcome-card .cv-field:focus-within { transform: translateY(-1px); } /* --------------------------------------------------------- 8. ROOM ITEMS — richer hover --------------------------------------------------------- */ .rooms-grid .room-item, .rooms-list .room-item { transition: transform .18s var(--ease-out, ease), background .18s ease, border-color .18s ease, box-shadow .18s ease; } .rooms-grid .room-item:hover, .rooms-list .room-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--accent) 50%, transparent); } /* --------------------------------------------------------- 9. HEADER — status dot breath + settings gear spin --------------------------------------------------------- */ @keyframes wow-breath { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } } .hdr .logo-dot { animation: wow-breath 2.8s ease-in-out infinite; } #settingsBtn svg, .hdr .icon-btn svg { transition: transform .35s var(--ease-out, ease); } #settingsBtn:hover svg { transform: rotate(60deg); } /* --------------------------------------------------------- REDUCED MOTION — kill it all gracefully --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .wow-stars, .wc-brand-name, .logo-name, .wc-title { animation: none; } .welcome-card > * { animation: none; } #joinBtn::after { display: none; } .hdr .logo-dot { animation: none; } }