/* Central Roleplay · FiveM · page d'attente « Soon ». */
:root{
    --bg:#050505;
    --green:#3ee8a0;
    --green-2:#19c486;
    --green-deep:#0f8a57;
    --text:#f4f7f5;
    --ease:cubic-bezier(.22,1,.36,1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }
body{
    background:var(--bg) url("../media/los-santos-poster.jpg") center / cover no-repeat;
    color:var(--text);
    font-family:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
}

/* ── Fond : vidéo de Los Santos, teinte, vignette, grain ─────────────── */
.scene{ position:fixed; inset:0; z-index:0; overflow:hidden; }
/* Deux lecteurs superposés : la minute suivante est prête dans l'un pendant que l'autre joue. */
.reel{ position:absolute; inset:-2%; animation:drift 40s ease-in-out infinite alternate; }
.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.08) contrast(1.04); opacity:0; }
.bg.on{ opacity:1; }
@keyframes drift{ from{ transform:scale(1.02) translate3d(0,0,0); } to{ transform:scale(1.07) translate3d(-1%, -1%, 0); } }
.tint{
    position:absolute; inset:0;
    background:
        linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.15) 38%, rgba(5,5,5,.25) 62%, rgba(5,5,5,.85) 100%),
        linear-gradient(120deg, rgba(15,138,87,.18), rgba(255,120,80,.06) 55%, rgba(5,5,5,0));
}
.vignette{ position:absolute; inset:0; background:radial-gradient(ellipse 75% 70% at 50% 45%, transparent 40%, rgba(0,0,0,.72) 100%); }
.grain{
    position:absolute; inset:-50%; opacity:.09; pointer-events:none; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
/* Fondu au noir autour de la boucle de 5 minutes. */
.fade{ position:absolute; inset:0; background:#000; opacity:1; transition:opacity 1.4s ease; pointer-events:none; }
.fade.off{ opacity:0; }

/* ── Centre : logo et « Soon… » ───────────────────────────────────────── */
.stage{
    position:relative; z-index:1; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(22px, 4vh, 44px);
    padding:max(24px, env(safe-area-inset-top)) 20px max(90px, env(safe-area-inset-bottom));
    text-align:center;
}
.logo-wrap{ position:relative; width:clamp(150px, 22vw, 260px); opacity:0; }
.entered .logo-wrap{ animation:rise 1.6s var(--ease) .5s forwards; }
.tilt{ position:relative; transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .6s var(--ease); }
.logo{ display:block; width:100%; height:auto; filter:drop-shadow(0 14px 40px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(62,232,160,.18)); animation:float 7s ease-in-out infinite; }
.halo{
    position:absolute; left:50%; top:52%; width:170%; aspect-ratio:1; transform:translate(-50%, -50%);
    background:radial-gradient(circle, rgba(62,232,160,.22), rgba(62,232,160,.06) 42%, transparent 68%);
    filter:blur(6px); animation:breathe 6s ease-in-out infinite; pointer-events:none;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes breathe{ 0%,100%{ opacity:.65; transform:translate(-50%,-50%) scale(.96); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.04); } }
@keyframes rise{ from{ opacity:0; transform:translateY(24px) scale(.96); filter:blur(8px); } to{ opacity:1; transform:none; filter:none; } }

.soon{
    font-family:"Unbounded", "Plus Jakarta Sans", sans-serif; font-weight:800;
    font-size:clamp(56px, 13vw, 168px); line-height:.95; letter-spacing:-.045em;
    display:inline-flex; align-items:baseline;
    opacity:0;
}
.entered .soon{ animation:reveal 1.8s var(--ease) 1.1s forwards; }
.word{
    background:linear-gradient(180deg, #ffffff 0%, #eafff5 45%, #a6f5d2 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 10px 40px rgba(0,0,0,.55));
}
.dots{ display:inline-flex; align-items:flex-end; gap:.07em; margin-left:.08em; padding-bottom:.06em; }
.dots i{ display:block; width:.12em; height:.12em; border-radius:50%; background:var(--green); box-shadow:0 0 .25em rgba(62,232,160,.7); animation:blink 1.8s ease-in-out infinite; }
.dots i:nth-child(2){ animation-delay:.25s; }
.dots i:nth-child(3){ animation-delay:.5s; }
@keyframes blink{ 0%,100%{ opacity:.2; } 40%{ opacity:1; } }
@keyframes reveal{ from{ opacity:0; letter-spacing:.2em; filter:blur(14px); } to{ opacity:1; letter-spacing:-.045em; filter:none; } }

/* ── Bouton du son ────────────────────────────────────────────────────── */
.sound{
    position:fixed; z-index:2; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom));
    display:inline-flex; align-items:center; gap:10px;
    padding:10px 16px 10px 14px; border-radius:999px; cursor:pointer;
    font:600 13px/1 "Plus Jakarta Sans", sans-serif; letter-spacing:.02em; color:var(--text);
    background:rgba(8,10,9,.5); border:1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
    opacity:0; pointer-events:none;
    transition:background .25s, border-color .25s;
}
.entered .sound{ pointer-events:auto; animation:rise 1.2s var(--ease) 2s forwards; }
.sound:hover{ background:rgba(62,232,160,.14); border-color:rgba(62,232,160,.45); }
.sound:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
.bars{ display:inline-flex; align-items:flex-end; gap:3px; height:14px; }
.bars i{ width:3px; height:4px; border-radius:2px; background:currentColor; opacity:.6; transition:height .3s; }
.sound[aria-pressed="true"]{ border-color:rgba(62,232,160,.45); }
.sound[aria-pressed="true"] .bars i{ background:var(--green); opacity:1; animation:eq 1s ease-in-out infinite; }
.sound[aria-pressed="true"] .bars i:nth-child(2){ animation-delay:-.4s; }
.sound[aria-pressed="true"] .bars i:nth-child(3){ animation-delay:-.2s; }
.sound[aria-pressed="true"] .bars i:nth-child(4){ animation-delay:-.7s; }
@keyframes eq{ 0%,100%{ height:4px; } 50%{ height:14px; } }
/* Invitation discrète tant que la musique n'a pas démarré. */
.sound.hint::after{
    content:""; position:absolute; inset:-1px; border-radius:inherit; border:1px solid rgba(62,232,160,.6);
    animation:ping 2.2s var(--ease) infinite; pointer-events:none;
}
@keyframes ping{ from{ opacity:.9; transform:scale(1); } to{ opacity:0; transform:scale(1.35); } }

@media (max-width:560px){
    .sound-label{ display:none; }
    .sound{ padding:12px; }
}
/* ── Écran d'accès ─────────────────────────────────────────────────────── */
.gate{
    position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:24px;
    background:#050505; overflow:hidden;
    transition:opacity 1.1s var(--ease), visibility 1.1s;
}
.gate::before{ content:""; position:absolute; inset:-40px; background:url("../media/los-santos-poster.jpg") center / cover; filter:blur(22px) saturate(1.15); opacity:.75; transform:scale(1.05); }
.gate::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 42%, rgba(5,5,5,.35), rgba(5,5,5,.9) 72%); }
.gate-card{ position:relative; z-index:1; }
.entered .gate{ opacity:0; visibility:hidden; }
.gate-card{ width:min(420px, 100%); display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; animation:rise 1.2s var(--ease) both; }
.gate-logo{ width:120px; height:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(62,232,160,.2)); animation:float 7s ease-in-out infinite; }
.gate-title{ font-family:"Unbounded", sans-serif; font-weight:600; font-size:13px; letter-spacing:.42em; text-transform:uppercase; color:rgba(244,247,245,.72); padding-left:.42em; }
.progress{ position:relative; width:100%; height:4px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.progress span{ position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--green-2), var(--green)); box-shadow:0 0 16px rgba(62,232,160,.6); transition:width .35s var(--ease); }
.progress.done span{ width:100% !important; }
.gate-status{ min-height:1.4em; font-size:13px; color:rgba(244,247,245,.62); font-variant-numeric:tabular-nums; }
.enter{
    display:inline-flex; align-items:center; gap:10px; margin-top:4px;
    padding:15px 30px; border:0; border-radius:999px; cursor:pointer;
    font:700 15px/1 "Plus Jakarta Sans", sans-serif; letter-spacing:.01em;
    color:#03261a; background:var(--green);
    box-shadow:0 14px 36px -12px rgba(62,232,160,.65), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .2s var(--ease), box-shadow .25s, background .25s, opacity .3s;
}
.enter svg{ width:18px; height:18px; transition:transform .25s var(--ease); }
.enter:not(:disabled):hover{ transform:translateY(-2px); background:#56efb0; }
.enter:not(:disabled):hover svg{ transform:translateX(3px); }
.enter:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.enter:disabled{ cursor:wait; opacity:.4; box-shadow:none; }
.enter.ready{ animation:glow 2.4s ease-in-out infinite; }
@keyframes glow{ 0%,100%{ box-shadow:0 14px 36px -12px rgba(62,232,160,.65), 0 0 0 0 rgba(62,232,160,.45); } 50%{ box-shadow:0 14px 36px -12px rgba(62,232,160,.65), 0 0 0 10px rgba(62,232,160,0); } }
.gate-hint{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(244,247,245,.5); }
.gate-hint svg{ width:15px; height:15px; }

@media (prefers-reduced-motion:reduce){
    .reel, .logo, .halo, .grain, .dots i, .gate-logo, .gate-card, .enter.ready{ animation:none; }
    .entered .logo-wrap, .entered .soon, .entered .sound{ animation:none; opacity:1; }
}