/* ========================================================= LOADER · Porte vers le cadeau Deux battants, deux mains, maintien de 3 secondes. Nautique, luxe sombre, neon blanc sur bleu profond. Reutilise les variables de :root definies dans styles.css. ========================================================= */ /* Blocage du scroll tant que le loader est actif. La classe est posee sur par loader.js. */ html.loader-lock, html.loader-lock body { overflow: hidden; /* evite le rebond tactile vertical pendant le maintien */ overscroll-behavior: none; } /* ---------- Conteneur plein ecran ---------- */ .loader { position: fixed; inset: 0; z-index: 9999; display: block; background: var(--ink-0); color: var(--text); font-family: var(--sans); /* etat ouvert : on fond le voile une fois les battants partis */ opacity: 1; transition: opacity 0.9s ease; } .loader[hidden] { display: none; } /* ---------- Les deux battants (porte) ---------- */ .loader-door { position: absolute; top: 0; bottom: 0; width: 50%; /* zone tactile : on coupe le geste de defilement du navigateur */ touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden; cursor: pointer; /* glissement a l'ouverture */ transition: transform 1.15s cubic-bezier(0.77, 0, 0.175, 1); will-change: transform; } .loader-door--left { left: 0; background: var(--ink-1); border-right: 1px solid var(--line); } .loader-door--right { right: 0; background: var(--ink-1); border-left: 1px solid var(--line); } /* Lueur neon du bord interieur quand le cote est tenu */ .loader-door::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--neon), transparent); box-shadow: 0 0 26px 6px var(--glow); opacity: 0; transition: opacity 0.35s ease; } .loader-door--left::after { right: 0; } .loader-door--right::after { left: 0; } .loader-door.is-active::after { opacity: 1; } /* Surbrillance du battant actif (reste plein, juste un peu plus clair) */ .loader-door.is-active { background: var(--ink-2); } /* Etiquette de cote (Papa / Maman) discrete sur chaque battant */ .loader-side-label { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); writing-mode: vertical-rl; text-orientation: mixed; transition: color 0.35s ease, text-shadow 0.35s ease; pointer-events: none; } .loader-door--left .loader-side-label { left: clamp(1rem, 4vw, 3rem); } .loader-door--right .loader-side-label { right: clamp(1rem, 4vw, 3rem); transform: translateY(-50%) rotate(180deg); } .loader-door.is-active .loader-side-label { color: var(--neon); text-shadow: 0 0 16px var(--glow); } /* ---------- Bloc central (au-dessus des battants) ---------- */ .loader-core { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: clamp(3rem, 13vh, 7.5rem) clamp(1.4rem, 5vw, 4rem) 2rem; pointer-events: none; /* laisse les pointeurs atteindre les battants */ transition: opacity 0.5s ease; } .loader-overline { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.36em; text-transform: uppercase; color: var(--steel); display: inline-flex; align-items: center; gap: 1rem; } .loader-overline .loader-rule { display: inline-block; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--steel), transparent); box-shadow: 0 0 8px var(--glow); } .loader-title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 5.5vw, 3.3rem); line-height: 1.0; letter-spacing: -0.01em; margin: 0.9rem 0 0.3rem; } .loader-title em { font-style: italic; color: var(--steel); text-shadow: 0 0 38px rgba(158, 196, 214, 0.28); } .loader-hint { max-width: 42ch; margin: 0.6rem auto 1.7rem; font-size: 0.86rem; font-weight: 300; letter-spacing: 0.02em; color: var(--muted); line-height: 1.6; } /* empreinte sur chaque battant (où poser le doigt) */ .door-fp { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); width: clamp(48px, 9vw, 76px); height: auto; opacity: 0.32; filter: brightness(0) invert(1); /* icône noire -> blanche */ /* on NE transitionne PAS le filtre (ça causait un flash noir) */ transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; } .loader-door.is-active .door-fp { opacity: 0.92; transform: translateX(-50%) scale(1.12); filter: brightness(0) invert(1) drop-shadow(0 0 12px var(--glow)); } /* ---------- Anneau + serrure ---------- */ .loader-ring { position: relative; width: clamp(112px, 25vw, 162px); height: clamp(112px, 25vw, 162px); margin-top: clamp(2rem, 9vh, 6rem); /* descend la serrure vers le centre */ display: grid; place-items: center; } /* lueur derrière la serrure : s'intensifie avec le maintien (--p piloté par loader.js) */ .lock-glow { position: absolute; width: 215%; height: 215%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 216, 150, 0.62) 0%, rgba(196, 230, 248, 0.4) 34%, transparent 68%); opacity: calc(var(--p, 0) * 0.95); transform: scale(calc(0.4 + var(--p, 0) * 0.9)); filter: blur(7px); transition: opacity 0.12s linear, transform 0.12s linear; pointer-events: none; } .lock-spin { position: relative; width: 100%; height: 100%; display: grid; place-items: center; } .lock-medallion { width: 84%; height: auto; filter: drop-shadow(0 5px 16px rgba(0, 0, 0, 0.5)); } /* maintien des deux côtés : la serrure tourne doucement et vibre */ .loader.is-charging .lock-spin { animation: lockSpin 7s linear infinite; } .loader.is-charging .lock-medallion { animation: lockShake 0.11s linear infinite; } @keyframes lockSpin { to { transform: rotate(360deg); } } @keyframes lockShake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(calc((0.35 + var(--p, 0) * 0.65) * -2px), calc((0.35 + var(--p, 0) * 0.65) * 1.5px)); } 40% { transform: translate(calc((0.35 + var(--p, 0) * 0.65) * 2px), calc((0.35 + var(--p, 0) * 0.65) * -1.5px)); } 60% { transform: translate(calc((0.35 + var(--p, 0) * 0.65) * -1.5px), calc((0.35 + var(--p, 0) * 0.65) * 1px)); } 80% { transform: translate(calc((0.35 + var(--p, 0) * 0.65) * 1px), calc((0.35 + var(--p, 0) * 0.65) * -1px)); } } /* ouverture : flash de lumière */ .loader.is-open .lock-glow { opacity: 1; transform: scale(1.8); } .loader.is-open .lock-spin { animation-duration: 1.1s; } /* ---------- Element audio (jamais visible) ---------- */ .loader-audio { display: none; } /* ---------- Ouverture : portes ecartees, voile fondu ---------- */ .loader.is-open .loader-door--left { transform: translateX(-100%); } .loader.is-open .loader-door--right { transform: translateX(100%); } .loader.is-open .loader-core { opacity: 0; } .loader.is-open { opacity: 0; background: transparent; } /* ---------- Responsive ---------- */ @media (max-width: 560px) { .loader-hint { font-size: 0.88rem; } .loader-side-label { letter-spacing: 0.3em; } } /* ---------- Mouvement reduit : ouverture sobre (fondu court) ---------- */ @media (prefers-reduced-motion: reduce) { .loader, .loader-door, .loader-core, .loader-ring .ring-fill { transition-duration: 0.25s !important; } /* pas de grand glissement, on s'efface simplement */ .loader.is-open .loader-door--left, .loader.is-open .loader-door--right { transform: none; } }