/* Serre-Ponçon Radio | Splash screen V1 | Styles encapsulés */
html.spr-splash-starting body { visibility: hidden !important; }
html.spr-splash-open { overflow: hidden !important; }
#spr-splash {
  --spr-red:#e50914;
  position:fixed; inset:0; z-index:2147483640; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:#07090e; color:#fff; isolation:isolate;
  opacity:1; transition:opacity 440ms ease;
  box-sizing:border-box;
  padding:clamp(22px,5vh,54px) 18px;
}
#spr-splash, #spr-splash * { box-sizing:border-box; }
#spr-splash.spr-splash--closing { opacity:0; pointer-events:none; }
#spr-splash .spr-splash__mountains {
  pointer-events:none; position:absolute; inset:0 0 auto; height:50%; z-index:-3;
  background: linear-gradient(to bottom,rgba(5,6,10,.25) 0%,rgba(5,7,12,.14) 25%, #07090e 100%),
              url('spr-montagnes.webp') center 5% / cover no-repeat;
  opacity:.9;
}
#spr-splash .spr-splash__reflection {
  pointer-events:none; position:absolute; inset:auto 0 0; height:35%; z-index:-2;
  background:linear-gradient(to bottom,#07090e 0%,rgba(6,8,13,.40) 43%,rgba(6,8,13,.70) 100%),
            url('spr-reflets.webp') center center / cover no-repeat;
  opacity:.53;
}
#spr-splash .spr-splash__redglow {
  pointer-events:none; position:absolute; inset:4% -20% 5%; z-index:-1;
  background:radial-gradient(ellipse 40% 22% at 50% 47%,rgba(229,9,20,.18),transparent 76%);
}
#spr-splash .spr-splash__content {width:min(100%,720px); position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:translateY(-1%);}
#spr-splash .spr-splash__disc {
  width:min(72vw,46vh,430px); aspect-ratio:1 / 1; max-width:430px; position:relative;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  animation:spr-logo-arrive 740ms cubic-bezier(.12,.8,.24,1) both;
}
#spr-splash .spr-splash__ring {
 position:absolute; inset:-3.5%; border:2px solid rgba(245,21,31,.65); border-radius:50%;
 box-shadow:0 0 17px rgba(229,9,20,.40),inset 0 0 18px rgba(229,9,20,.24);
 animation:spr-ring-pulse 1750ms ease-in-out infinite;
}
#spr-splash .spr-splash__ring--a {inset:-7%;opacity:.5; animation-delay:0ms;}
#spr-splash .spr-splash__ring--b {inset:-14%;opacity:.35;animation-delay:350ms; border-width:1px;}
#spr-splash .spr-splash__ring--c {inset:-22%;opacity:.16;animation-delay:700ms;border-width:1px;}
#spr-splash .spr-splash__logo {
  width:100%; height:100%; display:block; object-fit:contain;
  position:relative; z-index:2; filter:drop-shadow(0 12px 14px rgba(0,0,0,.55));
}
#spr-splash .spr-splash__waves {
 position:absolute; top:50%; left:50%; width:min(100vw,850px);height:120px;
 transform:translate(-50%,-50%);display:flex;justify-content:space-between;align-items:center;
 z-index:1; pointer-events:none; opacity:.95;
}
#spr-splash .spr-splash__wave-side {display:flex; flex:1; align-items:center; justify-content:center; gap:clamp(3px,.7vw,7px); height:100%; overflow:hidden;}
#spr-splash .spr-splash__wave-gap {width:min(49vw,380px); flex-shrink:0;}
#spr-splash .spr-splash__bar {width:clamp(2px,.55vw,4px);height:var(--wave-h,30px);background:linear-gradient(#ff6870,#e50914,#ff6a71);
 border-radius:4px;box-shadow:0 0 9px rgba(248,11,27,.8);transform-origin:center;
 animation:spr-wave-dance calc(650ms + var(--wave-speed,0ms)) ease-in-out infinite alternate; animation-delay:var(--wave-delay,0ms);}
#spr-splash .spr-splash__slogan {
 margin:clamp(24px,4.5vh,50px) 0 0; font-size:clamp(29px,5.6vw,53px);font-weight:300; letter-spacing:.03em;
 line-height:1.12; text-shadow:0 3px 15px #000; text-align:center;
 opacity:0; animation:spr-text-arrive 700ms 480ms ease forwards;
}
#spr-splash .spr-splash__slogan strong {font-weight:450;color:#ff2835;}
#spr-splash .spr-splash__separator {height:1px; width:min(65%,310px);margin:20px auto 18px;
 background:linear-gradient(90deg,transparent,#ff3340,transparent); opacity:0;animation:spr-text-arrive 650ms 700ms ease forwards;}
#spr-splash .spr-splash__signature {font-size:clamp(10px,1.9vw,14px);letter-spacing:clamp(.14em,.6vw,.34em);margin:0;text-align:center;color:#e8e7ea;
 opacity:0;animation:spr-text-arrive 700ms 750ms ease forwards;}
#spr-splash .spr-splash__signature b {color:#ff2633;font-weight:400;margin:0 .4em;}
#spr-splash .spr-splash__skip {
 position:absolute;right:clamp(18px,5vw,70px);bottom:max(26px,env(safe-area-inset-bottom));z-index:5;
 display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.54);border-radius:100px;
 padding:10px 19px;color:#f8f8fa;background:rgba(4,6,12,.55);cursor:pointer;
 font:500 14px system-ui,-apple-system,'Segoe UI',sans-serif;transition:background .2s,border-color .2s;
}
#spr-splash .spr-splash__skip:hover,#spr-splash .spr-splash__skip:focus-visible {background:rgba(229,9,20,.55);border-color:#ff4550;}
#spr-splash .spr-splash__skip:focus-visible {outline:3px solid #fff;outline-offset:3px;}
#spr-splash .spr-splash__skip span {font-size:23px;line-height:16px;}
@keyframes spr-logo-arrive{from{opacity:0;transform:scale(.90) translateY(12px);filter:blur(5px)} to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}
@keyframes spr-text-arrive{from{opacity:0;transform:translateY(11px)} to{opacity:1;transform:translateY(0)}}
@keyframes spr-ring-pulse{0%,100%{transform:scale(.96);opacity:.17} 60%{transform:scale(1.07);opacity:.75}}
@keyframes spr-wave-dance{0%{transform:scaleY(.26);opacity:.52} 100%{transform:scaleY(1.2);opacity:1}}
@media(max-width:600px){
 #spr-splash .spr-splash__content{ transform:translateY(-4%); }
 #spr-splash .spr-splash__disc{width:min(76vw,36vh,340px);}
 #spr-splash .spr-splash__waves {width:125vw;height:80px;}
 #spr-splash .spr-splash__wave-gap{width:64vw;}
 #spr-splash .spr-splash__wave-side{gap:3px;}
 #spr-splash .spr-splash__bar{width:2px;}
 #spr-splash .spr-splash__slogan{margin-top:32px;font-size:clamp(28px,7.5vw,40px);}
 #spr-splash .spr-splash__signature{letter-spacing:.17em;font-size:10px;}
 #spr-splash .spr-splash__skip{font-size:13px;padding:9px 16px;}
}
@media (prefers-reduced-motion:reduce) {
 #spr-splash *, #spr-splash *::before, #spr-splash *::after { animation:none !important;transition:none !important; }
 #spr-splash .spr-splash__slogan,#spr-splash .spr-splash__separator,#spr-splash .spr-splash__signature{opacity:1 !important;}
}
