/* ================================================================
   L'ALLUMAGE DU SHOW
   Ouverture Art deco retro-futuriste, legere et 100 % code.
   ================================================================ */
body.intro-open{overflow:hidden;touch-action:none}

.show-intro{
  --intro-gold:#D8B56A;
  --intro-gold-light:#F6E0A6;
  --intro-gold-deep:#8C672E;
  --intro-paon:#27A6A1;
  --intro-ruby:#C23B5A;
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  color:#F5EAD9;
  background:#080C18;
  font-family:'Josefin Sans','Outfit',system-ui,sans-serif;
}

.show-intro[hidden]{display:none!important}

.show-intro::before,
.show-intro::after{
  content:"";
  position:absolute;
  z-index:-3;
  top:0;
  bottom:0;
  width:50.5%;
  background:
    linear-gradient(135deg,transparent 0 48.8%,rgba(216,181,106,.032) 49% 51%,transparent 51.2%) 0 0/42px 42px,
    radial-gradient(90% 65% at 50% 48%,rgba(39,166,161,.11),transparent 66%),
    #080C18;
  transition:transform .76s cubic-bezier(.72,0,.2,1);
}

.show-intro::before{left:0;border-right:1px solid rgba(216,181,106,.16)}
.show-intro::after{right:0;border-left:1px solid rgba(216,181,106,.16)}

.show-intro.intro-leaving::before{transform:translateX(-102%)}
.show-intro.intro-leaving::after{transform:translateX(102%)}

.intro-ambient{
  position:absolute;
  inset:-20%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(216,181,106,.12),transparent 19%),
    radial-gradient(ellipse at 50% 52%,rgba(39,166,161,.10),transparent 43%);
  opacity:.55;
  transform:scale(.75);
}

.intro-running .intro-ambient{animation:intro-ambient-on 20.8s ease both}

.intro-vignette{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  box-shadow:inset 0 0 130px 34px rgba(0,0,0,.68);
}

.intro-skip{
  position:absolute;
  top:max(18px,env(safe-area-inset-top));
  right:max(18px,env(safe-area-inset-right));
  z-index:10;
  min-height:42px;
  padding:0 15px;
  color:rgba(245,234,217,.72);
  border:1px solid rgba(216,181,106,.28);
  border-radius:2px;
  background:rgba(8,12,24,.54);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.7px;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  transition:color .2s,border-color .2s,background .2s,opacity .3s;
}

.intro-skip:hover,
.intro-skip:focus-visible{
  color:#F5EAD9;
  border-color:var(--intro-gold);
  background:rgba(216,181,106,.10);
  outline:none;
}

.intro-stage{
  position:relative;
  width:min(100vw,960px);
  height:min(100dvh,960px);
  min-height:560px;
  display:grid;
  place-items:center;
  transform:translateZ(0);
}

.intro-kicker{
  position:absolute;
  top:clamp(76px,10dvh,108px);
  left:50%;
  z-index:4;
  width:max-content;
  max-width:80vw;
  transform:translateX(-50%);
  color:rgba(216,181,106,.62);
  font-size:clamp(10px,1.6vw,13px);
  font-weight:700;
  letter-spacing:clamp(3px,1vw,8px);
  text-align:center;
  text-transform:uppercase;
  opacity:.7;
}

.intro-kicker::before,
.intro-kicker::after{content:"◆";margin:0 12px;color:var(--intro-ruby);font-size:.7em}

.intro-circuit{
  position:absolute;
  inset:50% auto auto 50%;
  z-index:1;
  width:min(112vw,960px);
  height:min(112vw,960px);
  min-width:620px;
  min-height:620px;
  transform:translate(-50%,-50%);
  overflow:visible;
}

.intro-circuit .intro-ghost{
  fill:none;
  stroke:rgba(216,181,106,.075);
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}

.intro-circuit .intro-trace{
  fill:none;
  stroke:var(--intro-gold);
  stroke-width:3;
  stroke-linecap:square;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
  path-length:1;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
  filter:url(#intro-gold-glow);
}

.intro-circuit .intro-trace.fine{stroke-width:1.5}
.intro-circuit .intro-trace.bold{stroke-width:5}
.intro-circuit .intro-trace.paon{stroke:var(--intro-paon);filter:url(#intro-paon-glow)}

.intro-running .intro-trace{
  animation:intro-draw var(--duration,.78s) cubic-bezier(.45,0,.18,1) var(--delay,0s) forwards;
}

.intro-node{
  fill:var(--intro-gold-light);
  opacity:0;
  filter:url(#intro-gold-glow);
  transform-box:fill-box;
  transform-origin:center;
}

.intro-node.paon{fill:var(--intro-paon);filter:url(#intro-paon-glow)}
.intro-node.ruby{fill:var(--intro-ruby)}
.intro-running .intro-node{animation:intro-node-on .45s cubic-bezier(.2,1.7,.4,1) var(--delay,1s) forwards}

.intro-beacon{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:42px;
  height:42px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid rgba(216,181,106,.75);
  box-shadow:0 0 0 8px rgba(216,181,106,.035),0 0 28px rgba(216,181,106,.14);
  transition:opacity .3s,transform .45s;
}

.intro-beacon::before{
  content:"";
  position:absolute;
  inset:10px;
  background:var(--intro-ruby);
  box-shadow:0 0 18px rgba(194,59,90,.58);
}

.intro-waiting .intro-beacon{animation:intro-beacon-breathe 2.2s ease-in-out infinite}
.intro-running .intro-beacon{opacity:0;transform:translate(-50%,-50%) rotate(225deg) scale(.2)}

.intro-energy{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:min(70vw,520px);
  aspect-ratio:1;
  border:1px solid transparent;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.22);
  opacity:0;
  box-shadow:0 0 0 1px rgba(216,181,106,.3),0 0 70px rgba(39,166,161,.2);
}

.intro-running .intro-energy{animation:intro-energy-lock 1.05s ease-out 20.35s both}

.intro-logo-shell{
  position:relative;
  z-index:4;
  width:min(78vw,500px);
  opacity:0;
  transform:translateY(14px) scale(.86);
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.55));
  transition:transform .72s cubic-bezier(.5,0,.18,1),opacity .5s ease;
}

.intro-logo{
  display:block;
  width:100%;
  height:auto;
  clip-path:inset(50% 50% 50% 50%);
}

.intro-running .intro-logo-shell{
  animation:intro-logo-arrive 1.35s cubic-bezier(.18,.86,.26,1) 16.55s forwards;
}

.intro-running .intro-logo{
  animation:intro-logo-wipe 1.75s cubic-bezier(.5,0,.2,1) 16.05s forwards;
}

.intro-lock-star{
  position:absolute;
  left:50%;
  top:34%;
  color:var(--intro-gold-light);
  font-size:clamp(20px,4vw,34px);
  text-shadow:0 0 20px rgba(246,224,166,.92);
  opacity:0;
  transform:translate(-50%,-50%) scale(.2) rotate(-45deg);
}

.intro-running .intro-lock-star{animation:intro-star-lock .72s cubic-bezier(.2,1.7,.4,1) 20.72s forwards}

.intro-gate{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:clamp(70px,11dvh,116px);
  width:min(82vw,370px);
  min-height:68px;
  padding:13px 18px 11px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--intro-gold-light);
  border:1px solid rgba(216,181,106,.72);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(216,181,106,.12),rgba(216,181,106,.035));
  box-shadow:inset 0 0 0 4px rgba(8,12,24,.78),0 0 0 1px rgba(216,181,106,.13),0 14px 36px rgba(0,0,0,.38);
  font-size:clamp(12px,3.3vw,15px);
  font-weight:700;
  letter-spacing:1.8px;
  line-height:1.2;
  text-transform:uppercase;
  transition:transform .18s,background .2s,box-shadow .2s,opacity .28s;
}

.intro-gate::before,
.intro-gate::after{
  content:"";
  position:absolute;
  top:50%;
  width:38px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--intro-gold));
}

.intro-gate::before{right:calc(100% + 12px)}
.intro-gate::after{left:calc(100% + 12px);transform:rotate(180deg)}

.intro-gate:hover,
.intro-gate:focus-visible{
  background:linear-gradient(180deg,rgba(216,181,106,.2),rgba(216,181,106,.07));
  box-shadow:inset 0 0 0 4px rgba(8,12,24,.78),0 0 28px rgba(216,181,106,.16);
  outline:none;
}

.intro-gate:active{transform:translateX(-50%) scale(.97)}
.intro-gate-star{color:var(--intro-ruby);font-size:18px;text-shadow:0 0 12px rgba(194,59,90,.58)}
.intro-running .intro-gate{pointer-events:none;opacity:0;transform:translateX(-50%) translateY(9px)}

.intro-hint{
  position:absolute;
  z-index:7;
  left:50%;
  bottom:clamp(38px,6dvh,68px);
  width:max-content;
  max-width:82vw;
  transform:translateX(-50%);
  color:rgba(245,234,217,.38);
  font-size:10px;
  font-weight:600;
  letter-spacing:1.1px;
  text-align:center;
  text-transform:uppercase;
  transition:opacity .25s;
}

.intro-running .intro-hint{opacity:0}

.intro-status{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:clamp(42px,6dvh,70px);
  width:max-content;
  max-width:80vw;
  transform:translateX(-50%) translateY(8px);
  color:rgba(39,166,161,.82);
  font-size:10px;
  font-weight:700;
  letter-spacing:2.4px;
  text-align:center;
  text-transform:uppercase;
  opacity:0;
}

.intro-running .intro-status{animation:intro-status-in .35s ease .25s forwards}

.intro-leaving .intro-stage{
  animation:intro-stage-away .72s cubic-bezier(.65,0,.24,1) forwards;
}

.intro-replay{
  display:block;
  margin:9px auto 0;
  padding:7px 10px;
  color:var(--gold);
  border:1px solid rgba(216,181,106,.22);
  border-radius:2px;
  background:rgba(216,181,106,.035);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.3px;
  text-transform:uppercase;
  opacity:.84;
}

.intro-replay:hover,
.intro-replay:focus-visible{border-color:rgba(216,181,106,.62);opacity:1;outline:none}

@keyframes intro-draw{
  0%{stroke-dashoffset:1;opacity:0}
  8%{opacity:1}
  100%{stroke-dashoffset:0;opacity:.92}
}

@keyframes intro-node-on{
  0%{opacity:0;transform:scale(.1) rotate(45deg)}
  65%{opacity:1;transform:scale(1.5) rotate(45deg)}
  100%{opacity:.9;transform:scale(1) rotate(45deg)}
}

@keyframes intro-beacon-breathe{
  0%,100%{opacity:.62;box-shadow:0 0 0 8px rgba(216,181,106,.025),0 0 20px rgba(216,181,106,.12)}
  50%{opacity:1;box-shadow:0 0 0 14px rgba(216,181,106,.045),0 0 42px rgba(216,181,106,.26)}
}

@keyframes intro-ambient-on{
  0%{opacity:.3;transform:scale(.72)}
  58%{opacity:.92;transform:scale(1.04)}
  100%{opacity:.55;transform:scale(1)}
}

@keyframes intro-energy-lock{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.22)}
  40%{opacity:.9}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}
}

@keyframes intro-logo-arrive{
  0%{opacity:0;transform:translateY(14px) scale(.86)}
  62%{opacity:1;transform:translateY(-3px) scale(1.025)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes intro-logo-wipe{
  0%{clip-path:inset(50% 50% 50% 50%)}
  100%{clip-path:inset(0 0 0 0)}
}

@keyframes intro-star-lock{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-45deg)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.35) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.82) rotate(20deg)}
}

@keyframes intro-status-in{to{opacity:1;transform:translateX(-50%) translateY(0)}}

@keyframes intro-stage-away{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-19vh) scale(.72)}
}

@media (max-width:560px){
  .intro-stage{min-height:100dvh}
  .intro-circuit{width:760px;height:760px}
  .intro-logo-shell{width:min(88vw,420px)}
  .intro-kicker::before,.intro-kicker::after{margin:0 8px}
  .intro-skip{min-height:38px;padding:0 12px;font-size:10px}
}

@media (max-height:620px){
  .intro-stage{min-height:520px}
  .intro-kicker{top:54px}
  .intro-logo-shell{width:min(66vw,380px)}
  .intro-gate{bottom:46px}
  .intro-hint{display:none}
  .intro-status{bottom:22px}
}

@media (prefers-reduced-motion:reduce){
  .show-intro *,
  .show-intro::before,
  .show-intro::after{animation:none!important;transition:none!important}
  .intro-running .intro-trace{stroke-dashoffset:0;opacity:.76}
  .intro-running .intro-node{opacity:.85}
  .intro-running .intro-logo-shell{opacity:1;transform:none}
  .intro-running .intro-logo{clip-path:none}
  .intro-running .intro-status{opacity:1;transform:translateX(-50%)}
  .intro-leaving{opacity:0}
}