/* ============================================ SindByte 3D Enhancements — shared styles ============================================ Everything here is inert until JS adds the `sb3d` class to (after successful init) plus per-effect classes to target elements. No rule matches an unenhanced page. ============================================ */ /* --- Hero 3D scene --- */ .sb3d-hero { position: relative; overflow: hidden; } .sb3d-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } .sb3d-hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 30%, rgba(6, 9, 18, 0) 0%, rgba(6, 9, 18, .55) 75%), linear-gradient(180deg, rgba(6, 9, 18, .35) 0%, rgba(6, 9, 18, .15) 40%, rgba(6, 9, 18, .6) 100%); } /* Subtle mode (documentation pages): lighter overlay, scene is faint anyway */ .sb3d-hero.sb3d-subtle > .sb3d-hero-overlay { background: radial-gradient(ellipse at 50% 30%, rgba(6, 9, 18, 0) 0%, rgba(6, 9, 18, .35) 80%), linear-gradient(180deg, rgba(6, 9, 18, .2) 0%, rgba(6, 9, 18, .1) 50%, rgba(6, 9, 18, .35) 100%); } /* JS sets position:relative + z-index:2 inline on hero content wrappers; this is only a safety net for direct children. */ html.sb3d .sb3d-hero > .sb3d-hero-content { position: relative; z-index: 2; } /* --- 3D tilt cards --- */ .sb3d-tilt-wrap { perspective: 1200px; } html.sb3d .sb3d-tilt { position: relative; transform-style: preserve-3d; transition: transform .18s ease-out, border-color .3s, box-shadow .3s; will-change: transform; } html.sb3d .sb3d-tilt > * { transform-style: preserve-3d; } /* Direct children get a subtle lift; JS does not touch them. */ html.sb3d .sb3d-tilt.sb3d-tilting > * { transform: translateZ(18px); } .sb3d-tilt-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .25s ease; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 35%, transparent 65%); mix-blend-mode: screen; } html.sb3d .sb3d-tilt.sb3d-tilting > .sb3d-tilt-glare { opacity: 1; } /* --- Scroll depth reveal --- */ .sb3d-reveal-stage { perspective: 1000px; } html.sb3d .sb3d-reveal { opacity: 0; transform: translateY(34px) translateZ(-60px) rotateX(6deg); transform-origin: 50% 100%; transition: opacity .7s ease-out, transform .7s cubic-bezier(.22, .8, .32, 1); will-change: opacity, transform; } html.sb3d .sb3d-reveal.sb3d-revealed { opacity: 1; transform: translateY(0) translateZ(0) rotateX(0); } @media (prefers-reduced-motion: reduce) { html.sb3d .sb3d-reveal { opacity: 1; transform: none; transition: none; } html.sb3d .sb3d-tilt { transition: border-color .3s, box-shadow .3s; } }