/* Animation d'arrivée TRINITIA (05/11/2026, demande Djym) : le logo de l'ancien hero s'allume, puis s'ouvre sur le site. */
#intro{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4vh,22px);
  background:radial-gradient(60% 55% at 50% 45%,#0e1530 0%,#070a14 70%);transition:opacity .75s cubic-bezier(.4,0,.2,1) .2s,visibility 0s linear .95s;cursor:pointer}
#intro.out{opacity:0;visibility:hidden;pointer-events:none}
#intro .stage{width:min(44vmin,340px);transition:transform .9s cubic-bezier(.6,0,.2,1),filter .9s}
#intro.out .iw,#intro.out .it,#intro.out .skip-i{opacity:0!important;transition:opacity .3s}
#intro .iw{font-family:var(--display);font-weight:400;font-size:clamp(20px,3.4vmin,30px);letter-spacing:.5em;padding-left:.5em;color:var(--ink);opacity:0;transform:translateY(8px)}
#intro .it{font-size:clamp(13px,1.9vmin,16px);color:var(--ink2);letter-spacing:.02em;opacity:0;transform:translateY(8px)}
#intro.go .iw{animation:iUp .9s cubic-bezier(.2,.8,.2,1) 1.85s forwards,iTrack 1.6s cubic-bezier(.2,.8,.2,1) 1.85s forwards}
#intro.go .it{animation:iUp .9s cubic-bezier(.2,.8,.2,1) 2.2s forwards}
@keyframes iUp{to{opacity:1;transform:none}}
@keyframes iTrack{from{letter-spacing:.9em}to{letter-spacing:.5em}}
#intro .skip-i{position:absolute;bottom:24px;font-size:12px;color:var(--ink3);letter-spacing:.08em;opacity:0;animation:iUp .6s ease 1s forwards}
html.intro-on,html.intro-on body{overflow:hidden}
  .hero-orbs{position:relative;width:100%;aspect-ratio:1;margin:0 auto}
  /* le logo s'ALLUME à l'arrivée : fondu + mise au point + montée en netteté */
  .hero-orbs .mark{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;opacity:0}
  #intro.go .hero-orbs .mark{animation:markIn 1.2s cubic-bezier(.2,.85,.25,1) 1.15s both}
  /* 30/09 : la silhouette du logo se DESSINE au néon (arcs ajustés au pixel sur le PNG), puis la matière remplit */
  .hero-orbs .rings{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
  /* 04/10 v2 : comète de lumière blanche + sillage irisé + éclats aux croisements + reflet de verre */
  #intro.go .hero-orbs .rings .tr,#intro.go .hero-orbs .rings .tl{animation:ringsOut 1.1s ease-in 2.25s both}
  .hero-orbs .rings .tr ellipse{stroke-dasharray:1.03 1.03;stroke-dashoffset:1.03}
  .hero-orbs .rings .tl ellipse{stroke-dasharray:.42 2;stroke-dashoffset:.42;opacity:0}
  .hero-orbs .rings .hd ellipse{stroke-dasharray:.012 2;stroke-dashoffset:.012;opacity:0}
  #intro.go .hero-orbs .rings .tr ellipse{animation:ringDraw 1.45s cubic-bezier(.55,0,.25,1) forwards}
  #intro.go .hero-orbs .rings .tl ellipse{animation:tailRun 1.45s cubic-bezier(.55,0,.25,1) forwards}
  #intro.go .hero-orbs .rings .hd ellipse{animation:headRun 1.45s cubic-bezier(.55,0,.25,1) forwards}
  #intro.go .hero-orbs .rings .r1{animation-delay:.15s!important}#intro.go .hero-orbs .rings .r2{animation-delay:.3s!important}#intro.go .hero-orbs .rings .r3{animation-delay:.45s!important}
  #intro.go .hero-orbs .rings .hd{animation:hdHide .01s linear 2.05s forwards}
  @keyframes hdHide{to{visibility:hidden}}
  @keyframes ringDraw{to{stroke-dashoffset:0}}
  @keyframes tailRun{0%{stroke-dashoffset:.42;opacity:0}8%{opacity:1}82%{opacity:1}99%{visibility:visible}100%{stroke-dashoffset:-.58;opacity:0;visibility:hidden}}
  @keyframes headRun{0%{stroke-dashoffset:.012;opacity:0}6%{opacity:1}90%{opacity:1}99%{visibility:visible}100%{stroke-dashoffset:-.988;opacity:0;visibility:hidden}}
  @keyframes ringsOut{from{opacity:1}to{opacity:0}}
  .hero-orbs .rings .gl .gs{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.2)}
  #intro.go .hero-orbs .rings .gl .gs{animation:glint .95s cubic-bezier(.2,.8,.3,1) both}
  #intro.go .hero-orbs .rings .g1 .gs{animation-delay:1.55s}#intro.go .hero-orbs .rings .g2 .gs{animation-delay:1.7s}#intro.go .hero-orbs .rings .g3 .gs{animation-delay:1.85s}
  #intro.go .hero-orbs .rings .g4 .gs{animation-delay:1.95s}#intro.go .hero-orbs .rings .g5 .gs{animation-delay:2.02s}#intro.go .hero-orbs .rings .g6 .gs{animation-delay:2.09s}
  @keyframes glint{0%{opacity:0;transform:scale(.2) rotate(0deg)}35%{opacity:1;transform:scale(1.15) rotate(25deg)}100%{opacity:0;transform:scale(.55) rotate(60deg)}}
  .hero-orbs .rings .flash{transform-box:fill-box;transform-origin:center;opacity:0}
  #intro.go .hero-orbs .rings .flash{animation:coreFlash 1.3s cubic-bezier(.2,.7,.3,1) 1.8s both}
  @keyframes coreFlash{0%{opacity:0;transform:scale(.3)}25%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
  /* reflet de verre qui balaie le logo (masqué par sa silhouette), puis revient discrètement */
  .hero-orbs .shine{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;
    -webkit-mask:url(/hero-spheres-v8.png) center/contain no-repeat;mask:url(/hero-spheres-v8.png) center/contain no-repeat}
  .hero-orbs .shine::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:45%;opacity:0;transform:translate3d(-120%,0,0) skewX(-18deg);will-change:transform;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 30%,rgba(255,255,255,.45) 50%,rgba(210,235,255,.08) 70%,transparent)}
  #intro.go .hero-orbs .shine::before{animation:shineSweep 9s cubic-bezier(.45,0,.2,1) 1.95s infinite}
  @keyframes shineSweep{0%{opacity:1;transform:translate3d(-120%,0,0) skewX(-18deg)}16%{opacity:1;transform:translate3d(290%,0,0) skewX(-18deg)}17%,100%{opacity:0;transform:translate3d(290%,0,0) skewX(-18deg)}}
  @keyframes markIn{0%{opacity:0;filter:blur(16px) brightness(1.6) saturate(1.3)}
    60%{opacity:1}80%{filter:blur(0) brightness(1.18) saturate(1.15)}100%{opacity:1;filter:blur(0) brightness(1.05) saturate(1.08)}}
  /* rétro-éclairage : 3 halos de couleur EXACTEMENT derrière chaque sphère (le néon) */
  .hero-orbs .bl{position:absolute;width:54%;height:54%;border-radius:50%;transform:translate(-50%,-50%);
    filter:blur(44px);z-index:1;opacity:0}
  .hero-orbs .bl-b{left:50%;top:25%;background:radial-gradient(circle,rgba(77,124,255,.5),transparent 66%);animation:blIgnite 1.3s ease-out .2s both,breatheO 7s ease-in-out 1.5s infinite}
  .hero-orbs .bl-c{left:33%;top:56%;background:radial-gradient(circle,rgba(55,224,200,.46),transparent 66%);animation:blIgnite 1.3s ease-out .1s both,breatheO 8.5s ease-in-out 1.4s infinite}
  .hero-orbs .bl-v{left:67%;top:57%;background:radial-gradient(circle,rgba(143,107,255,.5),transparent 66%);animation:blIgnite 1.4s ease-out .3s both,breatheO 9.5s ease-in-out 1.7s infinite}
  @keyframes blIgnite{0%{opacity:0}70%{opacity:.85}100%{opacity:.55}}
  @keyframes breatheO{0%,100%{opacity:.42}50%{opacity:.75}}
@media(prefers-reduced-motion:reduce){#intro{display:none}}
html.intro-on .hero .reveal{opacity:0!important;transform:translateY(18px)!important}