/* ============================================================ The Songbirds — dark theme base + bespoke animated effects ------------------------------------------------------------ Tailwind (Play CDN) supplies the utility/layout layer in each page . This file carries the dark base, brand tokens and the bespoke animated pieces (aurora, floating notes, sparkles, scroll-reveal, nav states) that read better as real CSS than utilities. It also guarantees a readable, on-brand baseline even if the CDN is slow or JavaScript is disabled. ============================================================ */ :root { --ink: #05060c; --surface: #0e1424; --surface-2: #131a30; --gold: #f5c453; --gold-deep: #d4a017; --cream: #f6f2e9; --muted: #a6abb8; --line: rgba(245, 196, 83, 0.16); --heart: #ff2d55; --blue: #4f7cff; --cyan: #38d6ff; --violet: #7a56ff; --shadow: 0 26px 64px -32px rgba(0, 0, 0, 0.92); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background-color: var(--ink); color: var(--cream); font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; line-height: 1.62; } /* Cool ambient glow anchored behind everything — black base, blue gradient zones */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(62% 50% at 50% -10%, rgba(79, 124, 255, 0.22), transparent 70%), radial-gradient(48% 44% at 94% 8%, rgba(56, 214, 255, 0.13), transparent 72%), radial-gradient(56% 50% at 2% 36%, rgba(90, 70, 220, 0.22), transparent 72%), radial-gradient(85% 60% at 50% 115%, rgba(21, 52, 128, 0.35), transparent 75%); } ::selection { background: rgba(245, 196, 83, 0.32); color: #fff; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: #232634; border-radius: 999px; border: 3px solid var(--ink); } ::-webkit-scrollbar-thumb:hover { background: #33374a; } h1, h2, h3, h4 { margin: 0; font-weight: 600; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, video { max-width: 100%; display: block; } b, strong { font-weight: 600; color: var(--cream); } /* ---------- Typography helpers ---------- */ .text-gold-grad { background: linear-gradient(100deg, #ffe7ac 0%, var(--gold) 46%, var(--gold-deep) 84%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; border-radius: 999px; padding: 0.82rem 1.45rem; font-weight: 600; font-size: 0.95rem; line-height: 1; cursor: pointer; border: 1px solid transparent; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, filter 0.25s ease; } .btn svg { width: 1.15em; height: 1.15em; } .btn-gold { color: #2a2005; background: linear-gradient(180deg, #ffe39a 0%, var(--gold) 55%, var(--gold-deep) 120%); box-shadow: 0 14px 34px -14px rgba(245, 196, 83, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .btn-gold:hover { transform: translateY(-2px); filter: brightness(1.06); } .btn-ghost { color: var(--cream); border-color: var(--line); background: rgba(255, 255, 255, 0.02); } .btn-ghost:hover { transform: translateY(-2px); border-color: rgba(245, 196, 83, 0.5); background: rgba(245, 196, 83, 0.08); } .btn:active { transform: translateY(0); } /* Shimmer sweep for featured surfaces */ .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.32) 50%, transparent 68%); transform: translateX(-130%); animation: shimmer 5.5s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { transform: translateX(-130%); } 46%, 60% { transform: translateX(130%); } } /* ---------- Hero badge ---------- */ .hero-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.46rem 0.95rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 0.82rem; color: var(--cream); } .hero-badge .dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--gold); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(245, 196, 83, 0.18); } 50% { box-shadow: 0 0 0 8px rgba(245, 196, 83, 0.02); } } /* ---------- Stats ---------- */ .stat .num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.7rem; font-weight: 700; line-height: 1; color: var(--cream); } .stat .lbl { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* ---------- Cards ---------- */ .card { position: relative; border-radius: 1.1rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 42%), var(--surface); border: 1px solid var(--line); padding: 1.6rem; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease; } .card:hover { transform: translateY(-6px); border-color: rgba(245, 196, 83, 0.42); box-shadow: var(--shadow); } .card .icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 0.9rem; color: var(--gold); background: radial-gradient(120% 120% at 30% 0%, rgba(245, 196, 83, 0.18), rgba(245, 196, 83, 0.04)); border: 1px solid rgba(245, 196, 83, 0.22); } .card .icon svg { width: 1.6rem; height: 1.6rem; } .tag { display: inline-block; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #2a2005; background: linear-gradient(180deg, #ffe39a, var(--gold)); } .link-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .link-card .arrow { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 999px; color: var(--gold); border: 1px solid var(--line); background: rgba(245, 196, 83, 0.06); transition: transform 0.3s ease, background-color 0.3s ease; } .link-card .arrow svg { width: 1.25rem; height: 1.25rem; } .link-card:hover .arrow { transform: translateX(4px); background: rgba(245, 196, 83, 0.16); } .note { border-radius: 1rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(245, 196, 83, 0.07), rgba(245, 196, 83, 0.02)); color: var(--muted); font-size: 0.95rem; } .note b { color: var(--cream); } .note a { color: var(--gold); border-bottom: 1px solid rgba(245, 196, 83, 0.4); } .songlist { display: grid; gap: 0.35rem; margin-top: 1.5rem; } .song { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: baseline; gap: 0.9rem; padding: 0.7rem 1rem; border-radius: 0.8rem; border: 1px solid transparent; transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .song:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--line); transform: translateX(3px); } .song .idx { font-variant-numeric: tabular-nums; color: var(--gold); opacity: 0.85; font-size: 0.9rem; } .song .name { font-weight: 500; overflow-wrap: anywhere; } .song .dur { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; } .step { position: relative; border-radius: 1rem; padding: 1.5rem; border: 1px solid var(--line); background: var(--surface); transition: transform 0.35s ease, border-color 0.35s ease; } .step:hover { transform: translateY(-4px); border-color: rgba(245, 196, 83, 0.4); } .step .num { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; font-weight: 700; color: #2a2005; background: linear-gradient(180deg, #ffe39a, var(--gold)); margin-bottom: 0.9rem; } .quote { margin: 0; padding-left: 1.1rem; border-left: 2px solid var(--gold); font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--cream); } .faq { border: 1px solid var(--line); background: var(--surface); border-radius: 0.9rem; overflow: hidden; transition: border-color .3s ease, background-color .3s ease; } .faq[open] { border-color: rgba(245,196,83,.42); background: rgba(245,196,83,.04); } .faq summary { position: relative; list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.2rem; font-weight: 500; color: var(--cream); outline: none; } .faq summary::-webkit-details-marker { display: none; } .faq .faq-ico { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; line-height: 1; color: var(--gold); transition: transform .3s ease; } .faq[open] .faq-ico { transform: translateY(-50%) rotate(45deg); } .faq p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--muted); font-size: 0.95rem; line-height: 1.6; } .hire-banner { position: relative; overflow: hidden; text-align: center; border-radius: 1.5rem; padding: 3.2rem 1.6rem; border: 1px solid rgba(245, 196, 83, 0.35); background: radial-gradient(80% 120% at 50% -20%, rgba(245, 196, 83, 0.28), transparent 60%), radial-gradient(120% 120% at 100% 120%, rgba(122, 86, 255, 0.22), transparent 55%), var(--surface); } .hire-badge { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1.1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .hire-badge::before { content: ""; width: 1.6rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); } /* Stage gallery — cycles /screenshots/web with a slow pan & zoom */ .gallery { position: relative; overflow: hidden; border-radius: 1rem; border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 16 / 10; transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .gallery picture { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1.1s ease; will-change: opacity, transform; } .gallery picture img { display: block; width: 100%; height: 100%; object-fit: cover; } .gallery picture.is-active { opacity: 1; } .gallery picture.kb-a { animation: kb-a 7.5s ease-in-out both; } .gallery picture.kb-b { animation: kb-b 7.5s ease-in-out both; } .gallery picture.kb-c { animation: kb-c 7.5s ease-in-out both; } .gallery picture.kb-d { animation: kb-d 7.5s ease-in-out both; } @keyframes kb-a { from { transform: scale(1.12) translate(1.6%, 1.2%); } to { transform: scale(1.03) translate(-0.8%, -0.6%); } } @keyframes kb-b { from { transform: scale(1.03); } to { transform: scale(1.13) translate(-1.8%, -1.2%); } } @keyframes kb-c { from { transform: scale(1.1) translate(2.2%, 0.6%); } to { transform: scale(1.1) translate(-2.2%, -0.6%); } } @keyframes kb-d { from { transform: scale(1.14) translate(-1.4%, -1.4%); } to { transform: scale(1.04) translate(1%, 0.8%); } } .gallery::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 12, 0.5)); pointer-events: none; } .gallery:hover { transform: translateY(-6px) scale(1.01); border-color: rgba(245, 196, 83, 0.4); box-shadow: var(--shadow); } .gallery .cap { position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 2; font-size: 0.82rem; color: var(--cream); } @media (prefers-reduced-motion: reduce) { .gallery picture, .gallery picture.kb-a, .gallery picture.kb-b, .gallery picture.kb-c, .gallery picture.kb-d { animation: none; transform: none; } } /* Staggered story frames — start the pan & zoom once the frame scrolls into view */ .reveal .gallery picture { animation-play-state: paused; } .reveal.in .gallery picture { animation-play-state: running; } /* Story paragraphs — open up the leading; panels match the image frames (same radius, border, surface) */ .story-grid p { display: flex; align-items: center; line-height: 1.75; padding: 2.5rem; background: rgba(19, 26, 48, 0.55); /* surface-2 at ~55% so the page background shows through */ border: 1px solid var(--line); border-radius: 1rem; } .story-grid p:hover { border-color: rgba(245, 196, 83, 0.4); box-shadow: var(--shadow); } /* Mobile story: strict image/text alternation (single column only — desktop zigzag untouched) */ @media (max-width: 1023px) { .story-grid { max-width: 44rem; margin-inline: auto; } .story-grid p { padding: 2rem; } .story-grid > :nth-child(1) { order: 1; } /* image — Songbirds */ .story-grid > :nth-child(2) { order: 2; } /* paragraph 1 */ .story-grid > :nth-child(3) { order: 4; } /* paragraph 2 */ .story-grid > :nth-child(4) { order: 3; } /* image — Sakis Wonderland #1 */ .story-grid > :nth-child(5) { order: 5; } /* image — Sakis Wonderland #2 */ .story-grid > :nth-child(6) { order: 6; } /* paragraph 3 */ .story-grid > :nth-child(7) { order: 8; } /* paragraph 4 */ .story-grid > :nth-child(8) { order: 7; } /* image — Talim */ } /* Story divider — bird-and-hairline separator under the "Our story" title */ .story-divider { display: block; width: 240px; max-width: 62%; height: auto; margin: 1.25rem auto 0; filter: drop-shadow(0 0 8px rgba(245, 196, 83, 0.28)); } .spotlight-visual { position: relative; } .spotlight-photo { position: relative; max-width: 420px; /* the spotlight clip is portrait — keep a phone-shaped frame */ margin-inline: auto; border-radius: 1.25rem; overflow: hidden; border: 1px solid rgba(245, 196, 83, 0.28); background: #05050a; box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.95); } /* Frame matches the video's native 460x854 portrait ratio, so nothing is cropped. */ .spotlight-photo video { display: block; width: 100%; height: auto; aspect-ratio: 460 / 854; object-fit: cover; } .sparkle-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 1.25rem; } .sparkle-field .p { position: absolute; left: 0; top: 0; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2); border-radius: 999px; background: radial-gradient(circle, #fff 0%, #7cb8ff 55%, transparent 72%); box-shadow: 0 0 7px rgba(124, 184, 255, 0.85); animation: spark var(--dur) ease-out forwards; } @keyframes spark { 0% { transform: translate(var(--px), var(--py)) scale(0.2); opacity: 1; } 100% { transform: translate(calc(var(--px) + var(--dx)), calc(var(--py) + var(--dy))) scale(1.05); opacity: 0; } } .spotlight-label { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; padding: 0.42rem 0.85rem; border-radius: 999px; background: rgba(8, 8, 12, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); font-size: 0.82rem; color: var(--cream); } /* ---------- Nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; } .nav-shell { width: 100%; background: transparent; border-bottom: 1px solid transparent; transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease; } .nav-shell.is-scrolled { background: rgba(8, 8, 12, 0.74); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--line); box-shadow: 0 12px 40px -24px rgba(0, 0, 0, 0.9); } .brand-name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; letter-spacing: 0.01em; color: var(--cream); } .brand-sub { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245, 196, 83, 0.85); } .navlink { position: relative; display: inline-block; padding: 0.5rem 0.8rem; border-radius: 0.6rem; color: var(--muted); font-weight: 500; transition: color 0.25s ease, background-color 0.25s ease; } .navlink:hover { color: var(--cream); background: rgba(255, 255, 255, 0.04); } .navlink.active { color: var(--gold); } .navlink.active::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.26rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .burger { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 0.75rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); cursor: pointer; } .burger-line { width: 20px; height: 2px; border-radius: 2px; background: var(--cream); transition: transform 0.3s ease, opacity 0.3s ease; } .nav.menu-open .burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav.menu-open .burger-line:nth-child(2) { opacity: 0; } .nav.menu-open .burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-menu { max-height: 0; opacity: 0; overflow: hidden; /* The panel carries its own backdrop so the menu stays readable even when the shell is still transparent (page scrolled to the top). */ background: rgba(8, 8, 12, 0.86); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid transparent; transition: max-height 0.4s ease, opacity 0.3s ease, border-color 0.35s ease; } .nav.menu-open .nav-menu { max-height: 44rem; opacity: 1; border-bottom-color: var(--line); } /* While the mobile menu is open, give the bar the same docked treatment so header + panel read as one solid panel (matches .is-scrolled). */ .nav.menu-open .nav-shell { background: rgba(8, 8, 12, 0.74); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--line); box-shadow: 0 12px 40px -24px rgba(0, 0, 0, 0.9); } /* ---------- Songs: section navigator (TOC bar) ---------- */ .toc-bar { position: sticky; top: 64px; z-index: 40; background-color: transparent; border-bottom: 1px solid transparent; transition: background-color 0.3s ease, border-color 0.3s ease; } .toc-sentinel { height: 1px; } /* Panel background only while the bar is docked to the top of the page. */ .toc-bar.toc-stuck { background-color: rgba(8, 8, 12, 0.78); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--line); } .toc-row { display: flex; align-items: center; gap: 0.3rem; max-width: 72rem; margin: 0 auto; } .toc-scroll { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; padding: 0.7rem 0.35rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); } .toc-scroll::-webkit-scrollbar { display: none; } .toc-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--muted); cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .toc-arrow svg { width: 1.1rem; height: 1.1rem; } .toc-arrow[hidden] { display: none; } .toc-arrow:hover { color: var(--cream); border-color: rgba(245, 196, 83, 0.4); } .toc-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .toc-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.08); pointer-events: none; /* Keep the gold thumb inside the rail. .toc-fade is 96px wide and slides to left:100%, so without this clip its right half hangs past the bar's edge and widens the page — on mobile (iOS especially) the whole layout can then pan sideways and fall apart. */ overflow: hidden; } .toc-fade { position: absolute; left: 0; bottom: 0; width: 96px; height: 100%; transform: translateX(-50%); background: linear-gradient(90deg, transparent 0%, rgba(245, 196, 83, 0.25) 22%, rgba(245, 196, 83, 0.55) 34%, var(--gold) 42%, var(--gold) 58%, rgba(245, 196, 83, 0.55) 66%, rgba(245, 196, 83, 0.25) 78%, transparent 100% ); } .toc-bar:not(.toc-can-scroll) .toc-progress { display: none; } .toc-chip { display: inline-flex; align-items: baseline; gap: 0.45rem; white-space: nowrap; padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--muted); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } .toc-chip:hover { color: var(--cream); border-color: rgba(245, 196, 83, 0.4); } .toc-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .toc-chip.active { color: var(--gold); border-color: rgba(245, 196, 83, 0.55); background: rgba(245, 196, 83, 0.08); } #setlist section { scroll-margin-top: 140px; } /* ---------- Socials / footer ---------- */ .social { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; color: var(--muted); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease; } .social svg { width: 1.2rem; height: 1.2rem; } .social:hover { color: var(--gold); border-color: rgba(245, 196, 83, 0.5); background: rgba(245, 196, 83, 0.08); transform: translateY(-2px); } .footer-h { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .footer-link { display: inline-block; padding: 0.28rem 0; color: var(--muted); transition: color 0.2s ease; } .footer-link:hover { color: var(--gold); } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } /* Song-list rows pop in a touch faster than the page-wide default, so scrolling through 500+ rows stays snappy. */ .songlist .song.reveal { transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } /* ---------- Aurora background orbs ---------- */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .aurora .orb { position: absolute; border-radius: 999px; filter: blur(72px); opacity: 0.45; will-change: transform; } .aurora .orb-1 { width: 48vmax; height: 48vmax; left: -14vmax; top: -16vmax; background: radial-gradient(circle at 30% 30%, rgba(79, 124, 255, 0.5), transparent 60%); animation: drift 26s ease-in-out infinite; } .aurora .orb-2 { width: 42vmax; height: 42vmax; right: -16vmax; top: 8vmax; background: radial-gradient(circle at 60% 40%, rgba(56, 214, 255, 0.4), transparent 62%); animation: drift2 32s ease-in-out infinite; } .aurora .orb-3 { width: 36vmax; height: 36vmax; left: 18vmax; bottom: -20vmax; background: radial-gradient(circle at 50% 50%, rgba(122, 86, 255, 0.36), transparent 66%); animation: drift3 38s ease-in-out infinite; } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vmax, 4vmax) scale(1.08); } } @keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5vmax, 5vmax) scale(1.1); } } @keyframes drift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vmax, -4vmax) scale(1.06); } } /* ---------- FX canvas (laser lights + lens flares) ---------- */ .fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; filter: blur(2px) saturate(1.1); } /* ---------- Floating hero notes ---------- */ .note-float { position: absolute; bottom: -12px; font-size: 1.5rem; color: rgba(245, 196, 83, 0.5); animation: noteFloat linear infinite; will-change: transform, opacity; user-select: none; } @keyframes noteFloat { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; } 12% { opacity: 0.9; } 85% { opacity: 0.32; } 100% { transform: translate3d(var(--nx, 0px), -84vh, 0) rotate(var(--rot, 22deg)); opacity: 0; } } /* ---------- Back to top ---------- */ .to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; color: var(--gold); background: rgba(11, 16, 32, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.25s ease, background-color 0.25s ease; } .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { border-color: rgba(245, 196, 83, 0.5); background: rgba(245, 196, 83, 0.12); transform: translateY(-3px); } .to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .to-top svg { width: 1.3rem; height: 1.3rem; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .aurora .orb, .note-float, .shimmer::after, .sparkle-field .p, .hero-badge .dot { animation: none !important; } .to-top { transition: none; } }