/* ============================================================ Cabinet H.O.S.E — Premium Enhancement Layer Additive only. Loaded AFTER theme.min.css. Rollback = remove the to this file. Every motion effect is disabled under prefers-reduced-motion. Reuses existing tokens: --gold --navy --cream --transition-smooth ============================================================ */ /* ---- Lenis smooth scroll base (no-op if Lenis not active) ---- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ============================================================ 1. REVEAL CHOREOGRAPHY (GSAP-driven; graceful CSS fallback) Elements opt in with .reveal / .reveal-stagger. JS adds .is-in when in view. If JS/GSAP absent, .no-js-reveal on is removed and elements stay visible (never hidden). ============================================================ */ html.premium-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--transition-smooth), transform 0.9s var(--transition-smooth); will-change: opacity, transform; } html.premium-ready .reveal.is-in { opacity: 1; transform: none; } html.premium-ready .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--transition-smooth), transform 0.8s var(--transition-smooth); } html.premium-ready .reveal-stagger.is-in > * { opacity: 1; transform: none; } /* Split-text headline lines */ .premium-line-wrap { display: block; overflow: hidden; } html.premium-ready .premium-line { display: block; transform: translateY(110%); transition: transform 1s var(--transition-smooth); } html.premium-ready .premium-line.is-in { transform: translateY(0); } /* ============================================================ 2. MAGNETIC BUTTONS (desktop only) Note: gold buttons already have a shine sweep (.btn-gold::before in the theme), so we do NOT add another — magnetic + ripple only. ============================================================ */ .btn-magnetic { will-change: transform; } @media (hover: hover) and (pointer: fine) { .btn-magnetic { transition: transform 0.25s var(--transition-smooth), box-shadow 0.35s var(--transition-smooth); } } /* Ripple */ .premium-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,0.45); pointer-events: none; animation: premiumRipple 0.6s ease-out forwards; z-index: 2; } @keyframes premiumRipple { to { transform: scale(2.6); opacity: 0; } } /* ============================================================ 3. 3D CARD TILT (desktop, hover-capable only) ============================================================ */ @media (hover: hover) and (pointer: fine) { .tilt { transform-style: preserve-3d; transition: transform 0.4s var(--transition-smooth), box-shadow 0.4s var(--transition-smooth); will-change: transform; } .tilt > * { transform: translateZ(0); } .tilt:hover { box-shadow: var(--shadow-lg); } } /* ============================================================ 4. ACCESSIBLE FOCUS (keyboard users) — a11y win ============================================================ */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible, .nav-link:focus-visible, a.social-icon:focus-visible { outline-offset: 4px; } /* Don't show the ring for mouse clicks */ :focus:not(:focus-visible) { outline: none; } /* ============================================================ 5. HERO DEPTH — grain + soft gradient mesh (purely cosmetic) Sits above the hero image, below the text/overlay content. ============================================================ */ .hero-grain { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero-mesh { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(60% 50% at 15% 20%, rgba(201,169,110,0.18), transparent 70%), radial-gradient(50% 45% at 85% 80%, rgba(42,63,106,0.28), transparent 70%); opacity: 0.9; } /* Parallax layers move via JS transforms; keep them GPU-friendly */ .hero-parallax { will-change: transform; } /* ============================================================ 6. SKELETON LOADERS (for JS-rendered grids) ============================================================ */ .premium-skeleton { position: relative; overflow: hidden; background: rgba(0,0,0,0.05); border-radius: var(--ar-border-radius, 1rem); } .premium-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); animation: premiumShimmer 1.4s infinite; } [data-bs-theme="dark"] .premium-skeleton { background: rgba(255,255,255,0.06); } [data-bs-theme="dark"] .premium-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09), transparent); } @keyframes premiumShimmer { 100% { transform: translateX(100%); } } /* ============================================================ 7. BLUR-UP LAZY IMAGES ============================================================ */ img.premium-blur-up { filter: blur(14px); transform: scale(1.02); transition: filter 0.7s ease, transform 0.7s ease; } img.premium-blur-up.loaded { filter: blur(0); transform: none; } /* ============================================================ 8. PAGE TRANSITION CURTAIN (gold sweep) ============================================================ */ .premium-curtain { position: fixed; inset: 0; z-index: 99999; pointer-events: none; transform: translateY(100%); background: linear-gradient(135deg, var(--navy), var(--navy-light, #2A3F6A)); display: flex; align-items: center; justify-content: center; } .premium-curtain.cover { transform: translateY(0); transition: transform 0.55s var(--transition-smooth); } .premium-curtain.reveal { transform: translateY(-100%); transition: transform 0.6s var(--transition-smooth); } .premium-curtain .premium-curtain-mark { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(201,169,110,0.35); border-top-color: var(--gold); animation: premiumSpin 0.8s linear infinite; } @keyframes premiumSpin { to { transform: rotate(360deg); } } /* ============================================================ 9. CUSTOM CURSOR (desktop, opt-in via body.premium-cursor) ============================================================ */ @media (hover: hover) and (pointer: fine) { body.premium-cursor { cursor: none; } body.premium-cursor a, body.premium-cursor button, body.premium-cursor input, body.premium-cursor textarea, body.premium-cursor select, body.premium-cursor [role="button"] { cursor: none; } .premium-cursor-dot, .premium-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 100000; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; } .premium-cursor-dot { width: 7px; height: 7px; background: var(--gold); } .premium-cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(201,169,110,0.6); transition: width 0.25s var(--transition-smooth), height 0.25s var(--transition-smooth), background 0.25s var(--transition-smooth), border-color 0.25s var(--transition-smooth); } .premium-cursor-ring.is-hover { width: 54px; height: 54px; background: rgba(201,169,110,0.12); border-color: var(--gold); } } /* ============================================================ 10. COUNT-UP numbers (no layout shift) ============================================================ */ .premium-count { font-variant-numeric: tabular-nums; } /* ============================================================ 11. REDUCED MOTION — turn everything calm This block is the safety guarantee: users who opt out get essentially today's static experience. ============================================================ */ @media (prefers-reduced-motion: reduce) { html.premium-ready .reveal, html.premium-ready .reveal-stagger > *, html.premium-ready .premium-line { opacity: 1 !important; transform: none !important; transition: none !important; } .hero-grain, .hero-mesh { display: none !important; } .premium-skeleton::after, .btn-gold::after { animation: none !important; } .premium-curtain { display: none !important; } body.premium-cursor { cursor: auto !important; } .premium-cursor-dot, .premium-cursor-ring { display: none !important; } img.premium-blur-up { filter: none !important; transform: none !important; } }