/* ============================================================ Travverse 3D FX — shared depth system for inner pages. Generic (no page-specific section names). Pair with fx3d.js. Colour fallbacks included so it works regardless of :root. ============================================================ */ :root { --fx-accent: #f4701d; --fx-gold: #f9ad35; } /* ---------- Depth reveal on scroll (self-perspective) ---------- */ /* Only hide when JS is confirmed running (.tv-js on ), so the page is never stuck invisible if the script is blocked. */ .tv-js [data-reveal] { opacity: 0; transform: perspective(1200px) translate3d(0, 26px, -80px) rotateX(7deg); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } [data-reveal].in { opacity: 1; transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0); } [data-reveal][data-delay="1"] { transition-delay: 0.08s; } [data-reveal][data-delay="2"] { transition-delay: 0.16s; } [data-reveal][data-delay="3"] { transition-delay: 0.24s; } [data-reveal][data-delay="4"] { transition-delay: 0.32s; } /* ---------- Pointer tilt ---------- */ [data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)); transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(.2,.7,.2,1); position: relative; } [data-tilt].tilting { transition: transform 0.08s linear; } [data-tilt]::before { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.3s; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(249,173,53,0.16), transparent 60%); } [data-tilt].tilting::before { opacity: 1; } /* ---------- Scroll deconstruction ---------- */ [data-dez] { transform-style: preserve-3d; will-change: transform; } [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } /* ---------- Hero stage + route-globe ---------- */ [data-fx-hero] { position: relative; overflow: hidden; } [data-fx-hero] > .container { position: relative; z-index: 2; } .hero-globe { position: absolute; top: 50%; right: -40px; width: 440px; height: 440px; transform: translateY(-50%); z-index: 0; pointer-events: none; perspective: 1100px; } .hero-globe .globe { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(14deg) rotateZ(-8deg); animation: fx-globe-spin 44s linear infinite; } @keyframes fx-globe-spin { from { transform: rotateX(14deg) rotateZ(-8deg) rotateY(0); } to { transform: rotateX(14deg) rotateZ(-8deg) rotateY(360deg); } } .hero-globe .g-core { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(249,173,53,0.55), rgba(244,112,29,0.12) 42%, rgba(11,11,9,0.0) 68%), radial-gradient(circle at 70% 75%, rgba(165,57,21,0.5), transparent 60%); box-shadow: inset 0 0 60px rgba(244,112,29,0.35), 0 0 90px rgba(244,112,29,0.18); } .hero-globe .g-ring { position: absolute; inset: 4%; border-radius: 50%; border: 1px solid rgba(244,112,29,0.22); box-shadow: 0 0 14px rgba(244,112,29,0.12); } .hero-globe .g-ring:nth-child(1) { transform: rotateY(0deg); } .hero-globe .g-ring:nth-child(2) { transform: rotateY(30deg); border-color: rgba(249,173,53,0.20); } .hero-globe .g-ring:nth-child(3) { transform: rotateY(60deg); } .hero-globe .g-ring:nth-child(4) { transform: rotateY(90deg); border-color: rgba(237,205,44,0.18); } .hero-globe .g-ring:nth-child(5) { transform: rotateY(120deg); } .hero-globe .g-ring:nth-child(6) { transform: rotateY(150deg); border-color: rgba(249,173,53,0.20); } .hero-globe .g-lat { position: absolute; left: 4%; right: 4%; border-radius: 50%; border: 1px solid rgba(246,239,227,0.10); } .hero-globe .g-lat.eq { top: 50%; height: 92%; transform: translateY(-50%) rotateX(90deg); border-color: rgba(244,112,29,0.30); } .hero-globe .g-lat.n1 { top: 28%; height: 60%; transform: translateY(-50%) rotateX(90deg); } .hero-globe .g-lat.s1 { top: 72%; height: 60%; transform: translateY(-50%) rotateX(90deg); } .hero-globe .g-node { position: absolute; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--gold, #f9ad35); box-shadow: 0 0 12px 2px rgba(249,173,53,0.8), 0 0 4px #fff; } .hero-globe .g-node:nth-child(7) { top: 30%; left: 60%; transform: translateZ(150px); } .hero-globe .g-node:nth-child(8) { top: 62%; left: 38%; transform: translateZ(150px); background: var(--accent, #f4701d); box-shadow: 0 0 12px 2px rgba(244,112,29,0.8); } .hero-globe .g-node:nth-child(9) { top: 46%; left: 72%; transform: translateZ(150px); } .hero-globe .g-node:nth-child(10) { top: 70%; left: 64%; transform: translateZ(150px); background: var(--accent, #f4701d); } .hero-globe .g-orbit { position: absolute; inset: -7%; border-radius: 50%; border: 1px dashed rgba(249,173,53,0.35); transform: rotateX(78deg) rotateZ(0); animation: fx-orbit-spin 18s linear infinite; } .hero-globe .g-orbit::after { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 3px rgba(249,173,53,0.9); } @keyframes fx-orbit-spin { from { transform: rotateX(78deg) rotateZ(0); } to { transform: rotateX(78deg) rotateZ(360deg); } } .hero-globe::after { content: ''; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(244,112,29,0.18), transparent 62%); z-index: -1; } /* 3D grid floor under the hero */ .hero-floor { position: absolute; left: 50%; bottom: -40px; width: 160%; height: 300px; transform: translateX(-50%) perspective(600px) rotateX(72deg); transform-origin: 50% 100%; background-image: linear-gradient(rgba(244,112,29,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(244,112,29,0.16) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #000, transparent 75%); z-index: 0; pointer-events: none; opacity: 0.5; } /* ---------- Responsive globe ---------- */ @media (max-width: 1100px) { .hero-globe { width: 380px; height: 380px; right: -70px; opacity: 0.95; } } @media (max-width: 860px) { .hero-globe { width: 320px; height: 320px; top: 3%; right: 50%; transform: translateX(50%); opacity: 0.65; } .hero-floor { opacity: 0.4; } } /* ---------- Reduced motion: show static, no animation ---------- */ @media (prefers-reduced-motion: reduce) { .tv-js [data-reveal] { opacity: 1 !important; transform: none !important; } [data-dez] { transform: none !important; } .hero-globe .globe, .hero-globe .g-orbit { animation: none; } }