/* ========================================================================= LDNR Hero 3D — styles spécifiques à la section hero Canvas Three.js, loader animé, espace de scroll. Chargé uniquement sur la page d'accueil (is_front_page). ========================================================================= */ /* ── Fond global — couleur de base pour éviter le flash blanc ── */ /* Le fond est porté par UNIQUEMENT ; reste transparent. Sinon le fond opaque du body se peint au-dessus des z-index négatifs et masque l'aurora (#aurora-container, z-index:-1) → blobs invisibles. */ html { background-color: #030312 !important; } body { background-color: transparent !important; } /* Mode light : fond clair requis pour que mix-blend-mode: multiply de l'aurora fonctionne correctement (sinon le fond reste noir) */ html[data-theme="light"] { background-color: #dde8f5 !important; } html[data-theme="light"] body { background-color: transparent !important; } /* ── Transition contenu — remonte le contenu dans le viewport ── #scroll-space = 200vh. Le canvas fade-out finit à scrollY=100vh. Sans cette règle, le contenu est encore à 100vh sous le fold. Avec margin-top:-50vh : quand le canvas s'efface complètement, le contenu est déjà centré dans le viewport. Transition fluide. ── */ body.home #primary { margin-top: -50vh; position: relative; z-index: 0; /* reste sous le canvas (z-index:1) pendant l'animation */ } /* ── Wrappers Kadence — transparents sur la page d'accueil ── */ /* Le canvas Three.js est position:fixed derrière tout ; ces wrappers ont background:white par défaut et le masquent. */ body.home #page, body.home #content, body.home #primary, body.home .site-main, body.home main, body.home article, body.home .entry-content, body.home .content-wrap, body.home .site-content, body.home .wp-site-blocks, body.home .kadence-page-layout, body.home .kadence-blocks-column, body.home .kadence-inner-column-inner, body.home .kb-row-layout-wrap, body.home .kb-row-layout-inner, body.home .wp-block-group, body.home .wp-block-post-content { background: transparent !important; box-shadow: none !important; } /* ── Canvas Three.js — fond fixe plein écran ── */ #canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; will-change: opacity; } #canvas-container canvas { width: 100% !important; height: 100% !important; } /* ── Espace scroll — hauteur = durée animation Theatre.js ── */ #scroll-space { height: 200vh; position: relative; z-index: 0; } /* ── Loader — plein écran au chargement ── */ #loader { position: fixed; inset: 0; background: #050508; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; transition: opacity 0.8s ease; } #loader.fade-out { opacity: 0; pointer-events: none; } /* ── Logo SVG animé (cascade LDNR) ── */ .logo-container { width: 120px; height: 145px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; } .ldnr-svg { width: 100%; height: 100%; overflow: visible; } @keyframes cascade_ln { 0% { opacity: 0; transform: translateY(-44px); } 12.5% { opacity: 1; transform: translateY(0px); } 37.5% { opacity: 1; transform: translateY(0px); } 50% { opacity: 0; transform: translateY(44px); } 100% { opacity: 0; transform: translateY(-44px); } } @keyframes cascade_ll { 0% { opacity: 0; transform: translateY(-44px); } 4.99% { opacity: 0; transform: translateY(-44px); } 17.5% { opacity: 1; transform: translateY(0px); } 42.5% { opacity: 1; transform: translateY(0px); } 55% { opacity: 0; transform: translateY(44px); } 100% { opacity: 0; transform: translateY(-44px); } } @keyframes cascade_ld { 0% { opacity: 0; transform: translateY(-44px); } 9.99% { opacity: 0; transform: translateY(-44px); } 22.5% { opacity: 1; transform: translateY(0px); } 47.5% { opacity: 1; transform: translateY(0px); } 60% { opacity: 0; transform: translateY(44px); } 100% { opacity: 0; transform: translateY(-44px); } } @keyframes cascade_lr { 0% { opacity: 0; transform: translateY(-44px); } 14.99% { opacity: 0; transform: translateY(-44px); } 27.5% { opacity: 1; transform: translateY(0px); } 52.5% { opacity: 1; transform: translateY(0px); } 65% { opacity: 0; transform: translateY(44px); } 100% { opacity: 0; transform: translateY(-44px); } } .ln { opacity: 0; transform: translateY(-44px); animation: cascade_ln 2.0s ease-in-out infinite; } .ll { opacity: 0; transform: translateY(-44px); animation: cascade_ll 2.0s ease-in-out infinite; } .ld { opacity: 0; transform: translateY(-44px); animation: cascade_ld 2.0s ease-in-out infinite; } .lr { opacity: 0; transform: translateY(-44px); animation: cascade_lr 2.0s ease-in-out infinite; } .loader-bar-wrap { width: 200px; height: 1px; background: rgba(255, 255, 255, 0.1); } .loader-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #00c2ff, #9b30ff); transition: width 0.3s ease; } .loader-text { font-size: 0.65rem; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.3); font-family: 'Courier New', monospace; text-transform: uppercase; } /* ── Debug — affiché uniquement en DEV par main.js ── */ #debug { position: fixed; bottom: 1rem; right: 1rem; z-index: 50; font-size: 0.65rem; color: rgba(255, 255, 255, 0.25); font-family: monospace; pointer-events: none; }