/* Ganeden International — styles du runtime statique. Le contenu est visible par défaut. Ces règles ne s'appliquent que si JS est actif (classe gan-js posée par un script inline dans ). */ /* Reveals : masqués seulement quand JS peut les révéler */ .gan-js [data-reveal]{ opacity:0; transform:translateY(26px); } .gan-js [data-reveal][data-revealed]{ opacity:1; transform:none; transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce){ .gan-js [data-reveal]{ opacity:1; transform:none; } .gan-js [data-reveal][data-revealed]{ transition:none; } } /* Verrou de défilement pendant le seuil */ html[data-gan-locked], html[data-gan-locked] body{ overflow:hidden; } /* ---------- Seuil d'ouverture ---------- */ /* Sans JS, le seuil n'est jamais affiché : le site reste accessible. */ [data-gan-seuil]{ display:none; } [data-gan-seuil][data-open]{ display:flex; position:fixed; inset:0; z-index:200; align-items:center; justify-content:center; background:#030303; cursor:pointer; opacity:1; transition:opacity 1.2s ease; /* réserve la zone basse : la phrase ne doit jamais toucher la case */ padding:8vh 0 150px; } [data-gan-seuil][data-phase="4"]{ opacity:0; pointer-events:none; } [data-gan-seuil] [data-gan-dust]{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:0; transition:opacity 1.6s ease; } [data-gan-seuil][data-phase="2"] [data-gan-dust], [data-gan-seuil][data-phase="3"] [data-gan-dust]{ opacity:1; } /* Coins du carton d'invitation : se tracent, puis rejoignent le cadre du site */ [data-gan-seuil] [data-gan-corner]{ position:absolute; z-index:2; width:56px; height:56px; opacity:0; transform:scale(0.05); transition:top 1.4s cubic-bezier(.2,.7,.2,1), left 1.4s cubic-bezier(.2,.7,.2,1), right 1.4s cubic-bezier(.2,.7,.2,1), bottom 1.4s cubic-bezier(.2,.7,.2,1), width 1.4s cubic-bezier(.2,.7,.2,1), height 1.4s cubic-bezier(.2,.7,.2,1), transform 1.3s cubic-bezier(.2,.7,.2,1), opacity 1.2s ease .15s; } [data-gan-seuil][data-phase="1"] [data-gan-corner], [data-gan-seuil][data-phase="2"] [data-gan-corner], [data-gan-seuil][data-phase="3"] [data-gan-corner]{ opacity:.9; transform:scale(1); } [data-gan-seuil] [data-gan-corner="tl"]{ top:7vh; left:7vw; border-top:1px solid #D79A10; border-left:1px solid #D79A10; transform-origin:top left; } [data-gan-seuil] [data-gan-corner="tr"]{ top:7vh; right:7vw; border-top:1px solid #D79A10; border-right:1px solid #D79A10; transform-origin:top right; } [data-gan-seuil] [data-gan-corner="bl"]{ bottom:7vh; left:7vw; border-bottom:1px solid #D79A10; border-left:1px solid #D79A10; transform-origin:bottom left; } [data-gan-seuil] [data-gan-corner="br"]{ bottom:7vh; right:7vw; border-bottom:1px solid #D79A10; border-right:1px solid #D79A10; transform-origin:bottom right; } /* À la sortie, les coins deviennent ceux du cadre du site */ [data-gan-seuil][data-phase="4"] [data-gan-corner]{ width:24px; height:24px; transform:none; opacity:.55; } [data-gan-seuil][data-phase="4"] [data-gan-corner="tl"]{ top:10px; left:10px; } [data-gan-seuil][data-phase="4"] [data-gan-corner="tr"]{ top:10px; right:10px; } [data-gan-seuil][data-phase="4"] [data-gan-corner="bl"]{ bottom:10px; left:10px; } [data-gan-seuil][data-phase="4"] [data-gan-corner="br"]{ bottom:10px; right:10px; } /* Aurore : le halo qui monte du bas */ [data-gan-seuil] [data-gan-sky]{ position:absolute; left:50%; bottom:-28%; width:130vw; height:88vh; transform:translateX(-50%); pointer-events:none; z-index:1; background:radial-gradient(ellipse at 50% 100%, rgba(215,154,16,0.30), rgba(215,154,16,0.09) 40%, rgba(3,3,3,0) 72%); opacity:0; transition:opacity 1.8s ease; } [data-gan-seuil][data-phase="3"] [data-gan-sky], [data-gan-seuil][data-phase="4"] [data-gan-sky]{ opacity:1; } /* Contenu du seuil : zoom avant en fondu à la sortie */ [data-gan-seuil] [data-gan-seuil-content]{ position:relative; z-index:3; text-align:center; display:flex; flex-direction:column; align-items:center; padding:0 24px; transform:scale(1); opacity:1; transition:transform 1.4s cubic-bezier(.2,.7,.2,1), opacity 1.1s ease .1s; } [data-gan-seuil][data-phase="4"] [data-gan-seuil-content]{ transform:scale(1.2); opacity:0; } [data-gan-seuil] [data-gan-logo]{ opacity:0; transform:translateY(-22px); transition:opacity 1.3s ease, transform 1.3s cubic-bezier(.2,.7,.2,1); } [data-gan-seuil][data-phase="2"] [data-gan-logo], [data-gan-seuil][data-phase="3"] [data-gan-logo], [data-gan-seuil][data-phase="4"] [data-gan-logo]{ opacity:1; transform:translateY(0); } [data-gan-seuil] [data-gan-line]{ width:0; height:1px; margin:26px auto 22px; background:linear-gradient(90deg, transparent, #D79A10, transparent); transition:width 1.4s cubic-bezier(.2,.7,.2,1); } [data-gan-seuil][data-phase="2"] [data-gan-line], [data-gan-seuil][data-phase="3"] [data-gan-line], [data-gan-seuil][data-phase="4"] [data-gan-line]{ width:120px; } [data-gan-seuil] [data-gan-phrase]{ opacity:0; transform:translateY(18px); transition:opacity 1.3s ease .1s, transform 1.3s cubic-bezier(.2,.7,.2,1) .1s; } [data-gan-seuil][data-phase="3"] [data-gan-phrase], [data-gan-seuil][data-phase="4"] [data-gan-phrase]{ opacity:1; transform:translateY(0); } [data-gan-seuil] [data-gan-bottom]{ position:absolute; bottom:44px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:18px; z-index:4; opacity:0; transition:opacity 1s ease .4s; } [data-gan-seuil][data-phase="3"] [data-gan-bottom]{ opacity:1; } [data-gan-seuil] [data-gan-optout-label] span{ white-space:nowrap; } @media (max-width:420px){ [data-gan-seuil] [data-gan-optout-label] span{ white-space:normal; text-align:left; } } /* Écrans courts : le logo se réduit pour garder la respiration */ @media (max-height:640px){ [data-gan-seuil][data-open]{ padding:5vh 0 120px; } [data-gan-seuil] [data-gan-logo] img{ width:clamp(160px,26vw,220px) !important; } [data-gan-seuil] [data-gan-bottom]{ bottom:28px; gap:12px; } }