/* ═══════════════════════════════════════════════════════════════════ Sl1ck N°1 — Front-end overhaul layer (GSAP + Lenis + ambient) Keeps the existing marble + gold scheme. Loaded after main-styles.css and animations.css so these rules layer on top. ═══════════════════════════════════════════════════════════════════ */ /* Lenis smooth-scroll: neutralize CSS scroll-behavior so Lenis owns inertia (Lenis adds the .lenis class to ). */ html.lenis, html.lenis body, .lenis.lenis-smooth { scroll-behavior: auto !important; } /* Reserve space at the bottom for the persistent audio dock */ body.has-audio-dock { padding-bottom: 76px; } /* GPU guardrails — everything we animate gets a promoted layer */ .hero-split .char, .gallery-cell, .gallery-cell img, .merch-node, .merch-node-media img, [data-scroll-speed], .audio-dock { transform: translate3d(0, 0, 0); will-change: transform; } /* ── Hero split-text ─────────────────────────────────────────────── */ .hero-split { perspective: 600px; } .hero-split .char { display: inline-block; white-space: pre; transform-origin: 50% 100% -20px; } /* ── Hero ambient aurora canvas ──────────────────────────────────── */ #hero-ambient { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .home-section > .home-container { position: relative; z-index: 1; } /* ── Asymmetric gallery ──────────────────────────────────────────── */ .gallery-asym { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; } .gallery-cell { position: relative; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px var(--shadow-medium); } .gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease; } .gallery-cell:hover img { transform: scale(1.05); filter: saturate(1.28) contrast(1.04); } .gallery-cell figcaption { position: absolute; inset: auto 0 0 0; padding: 22px 16px 16px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0)); color: #fff; } .gallery-cell figcaption h3 { margin: 0 0 2px; font-size: 1.05rem; font-weight: 600; } .gallery-cell figcaption p { margin: 0; font-size: 0.85rem; opacity: 0.85; } /* column spans + vertical offsets for the staggered look */ .gc-a { grid-column: 1 / span 4; aspect-ratio: 4 / 5; } .gc-b { grid-column: 5 / span 4; aspect-ratio: 1 / 1; margin-top: 70px; } .gc-c { grid-column: 9 / span 4; aspect-ratio: 4 / 3; } .gc-d { grid-column: 1 / span 5; aspect-ratio: 1 / 1; margin-top: -46px; } .gc-e { grid-column: 6 / span 3; aspect-ratio: 3 / 4; margin-top: 26px; } .gc-f { grid-column: 9 / span 4; aspect-ratio: 1 / 1; } .gc-g { grid-column: 2 / span 4; aspect-ratio: 4 / 3; margin-top: 44px; } .gc-h { grid-column: 6 / span 3; aspect-ratio: 1 / 1; margin-top: -34px; } .gc-i { grid-column: 9 / span 4; aspect-ratio: 4 / 5; margin-top: 70px; } @media (max-width: 768px) { .gallery-asym { grid-template-columns: repeat(2, 1fr); gap: 14px; } .gallery-cell[class*="gc-"] { grid-column: span 1; margin-top: 0; aspect-ratio: 4 / 5; } } /* ── Boutique merch nodes + payment reveal ───────────────────────── */ .merch-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1000px; margin: 0 auto; } .merch-node { position: relative; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; } .merch-node:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(212, 175, 55, 0.28); } .merch-node-media { aspect-ratio: 1 / 1; overflow: hidden; background: #f2f2f2; } .merch-node-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .merch-node:hover .merch-node-media img { transform: scale(1.06); } .merch-node-info { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; } .merch-node-info h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--accent-black); } .merch-price { font-weight: 700; color: var(--accent-gold); } /* floating payment toggles revealed on hover */ .merch-node-actions { display: flex; gap: 10px; padding: 0 18px 18px; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; } .merch-node:hover .merch-node-actions { opacity: 1; transform: translateY(0); } .pay-hook { flex: 1; text-align: center; padding: 9px 0; border-radius: 10px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2px; text-decoration: none; transition: transform 0.2s ease, filter 0.2s ease; } .pay-hook:hover { transform: translateY(-2px); filter: brightness(1.06); } .pay-hook.apple { background: #111; color: #fff; } .pay-hook.paypal { background: #ffc439; color: #111; } @media (max-width: 768px) { .merch-nodes { grid-template-columns: 1fr; } .merch-node-actions { opacity: 1; transform: none; } /* always visible on touch */ } /* ── Sticky core audio dock ──────────────────────────────────────── */ .audio-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; transform: translateY(100%); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .audio-dock.visible { transform: translateY(0); } .audio-dock-inner { display: flex; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 10px 20px 12px; background: rgba(20, 20, 20, 0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(212, 175, 55, 0.35); border-bottom: none; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4); } .ad-play { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--accent-gold); color: var(--accent-black); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease; } .ad-play:hover { transform: scale(1.06); background: #b8941f; color: #fff; } .ad-visualizer { flex-shrink: 0; width: 180px; height: 44px; overflow: hidden; border-radius: 8px; background: rgba(212, 175, 55, 0.06); } #ad-viz { width: 100%; height: 100%; display: block; } .ad-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ad-title { font-size: 0.9rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ad-artist { font-size: 0.75rem; color: var(--accent-gold); } .ad-seek { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); cursor: pointer; position: relative; overflow: hidden; } .ad-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #b8912c, #d4af37, #fdf0b0); border-radius: 3px; } .ad-time { font-size: 0.75rem; color: #bbb; white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 768px) { .ad-visualizer { width: 90px; } .ad-meta { max-width: 130px; } } /* ── Reduced-motion / mobile guardrails ──────────────────────────── */ @media (prefers-reduced-motion: reduce) { .audio-dock, .merch-node, .merch-node-media img, .gallery-cell img, .hero-split .char { transition: none !important; } .gallery-cell:hover img, .merch-node:hover .merch-node-media img { transform: none; filter: none; } .gallery-cell, .merch-node { opacity: 1 !important; transform: none !important; } }