/* TyBoz — intro animée de l'accueil (theme/views/front/_intro.php, animée par theme/intro.js).
   Visible seulement quand <html> porte la classe has-intro (JavaScript actif, première visite de la session, animations permises). */
.intro{display:none}
.has-intro .intro{display:block;position:relative;height:460vh;background:#070817}
.intro-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#fff;isolation:isolate;
  background:radial-gradient(120% 80% at 50% 110%,color-mix(in srgb,var(--red) 38%,#070817) 0%,#0b0c22 45%,#070817 100%)}
.intro-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.intro-nebula{position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:blur(60px);opacity:.75;
  background:radial-gradient(30% 25% at 30% 40%,color-mix(in srgb,var(--red) 55%,transparent),transparent 70%),
             radial-gradient(28% 22% at 72% 58%,color-mix(in srgb,var(--plate) 40%,transparent),transparent 70%),
             radial-gradient(22% 18% at 55% 25%,color-mix(in srgb,#e879f9 30%,transparent),transparent 70%);
  animation:intro-neb 18s ease-in-out infinite alternate}
@keyframes intro-neb{to{transform:rotate(8deg) scale(1.08)}}

/* Nuage de compétences */
.intro-cloud{position:absolute;inset:0;z-index:1;pointer-events:none}
.intro-skill{position:absolute;left:0;top:0;white-space:nowrap;font:500 1rem/1 var(--mono);letter-spacing:.02em;padding:.45em .8em;border-radius:999px;
  color:color-mix(in srgb,#fff 88%,var(--plate));background:color-mix(in srgb,#fff 6%,transparent);border:1px solid color-mix(in srgb,#fff 14%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);will-change:transform,opacity}

/* Réalisations en orbite */
.intro-orbit{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.intro-card{position:absolute;left:0;top:0;margin:0;width:clamp(104px,19vw,250px);will-change:transform,opacity}
.intro-card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;background:#1b1f4a;
  box-shadow:0 0 0 1px color-mix(in srgb,#fff 18%,transparent),0 20px 50px -12px rgb(0 0 0 / .7),0 0 40px -10px color-mix(in srgb,var(--red) 70%,transparent)}
.intro-card figcaption{margin-top:.55rem;text-align:center;font:600 clamp(.7rem,1.2vw,.9rem)/1.2 var(--head);color:#fff;text-shadow:0 2px 10px rgb(0 0 0 / .6)}

/* Fusée */
.intro-rocket{position:absolute;left:50%;top:50%;z-index:4;width:0;height:0;will-change:transform}
.intro-rocket-body{position:absolute;left:-60px;top:-140px;width:120px;transform-origin:50% 60%}
.intro-rocket svg{display:block;width:120px;height:auto;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--red) 55%,transparent))}
.intro-flame{position:absolute;left:50%;top:228px;width:44px;height:120px;margin-left:-22px;transform-origin:50% 0;transform:scaleY(var(--thrust,.25));opacity:calc(.35 + var(--thrust,.25))}
.intro-flame span{position:absolute;left:50%;top:0;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;transform:translateX(-50%);animation:intro-flick .12s ease-in-out infinite alternate}
.intro-flame span:nth-child(1){width:44px;height:120px;background:radial-gradient(50% 60% at 50% 25%,#fff7c2,#ffb347 40%,#ff4d6d 70%,transparent 72%);filter:blur(2px)}
.intro-flame span:nth-child(2){width:26px;height:80px;background:radial-gradient(50% 60% at 50% 25%,#fff,#9fe9ff 50%,transparent 72%);animation-duration:.09s}
.intro-flame span:nth-child(3){width:80px;height:150px;top:-10px;background:radial-gradient(50% 55% at 50% 30%,color-mix(in srgb,var(--plate) 45%,transparent),transparent 70%);filter:blur(8px);animation-duration:.2s}
@keyframes intro-flick{from{transform:translateX(-50%) scale(.92,.96)}to{transform:translateX(-50%) scale(1.06,1.04)}}
.intro-smoke{position:absolute;left:50%;top:calc(50% + 90px);z-index:3;opacity:var(--smoke,0);pointer-events:none}
.intro-smoke span{position:absolute;left:-40px;top:0;width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,#fff 55%,transparent),transparent 70%);filter:blur(6px);animation:intro-smoke 1.6s linear infinite}
.intro-smoke span:nth-child(odd){animation-duration:2.1s}
.intro-smoke span:nth-child(2){animation-delay:-.2s}.intro-smoke span:nth-child(3){animation-delay:-.4s}.intro-smoke span:nth-child(4){animation-delay:-.6s}
.intro-smoke span:nth-child(5){animation-delay:-.8s}.intro-smoke span:nth-child(6){animation-delay:-1s}.intro-smoke span:nth-child(7){animation-delay:-1.2s}
.intro-smoke span:nth-child(8){animation-delay:-1.4s}.intro-smoke span:nth-child(9){animation-delay:-1.5s}.intro-smoke span:nth-child(10){animation-delay:-.1s}
@keyframes intro-smoke{0%{transform:translate(0,0) scale(.4);opacity:.9}100%{transform:translate(var(--dx,60px),160px) scale(2.6);opacity:0}}
.intro-smoke span:nth-child(even){--dx:-70px}

/* Textes */
.intro-title,.intro-final{position:absolute;left:0;right:0;z-index:5;text-align:center;padding:0 16px;pointer-events:none}
.intro-title{top:9vh}
.intro-brand{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 .6rem;font:700 clamp(2rem,5vw,3.4rem)/1 var(--head);letter-spacing:-.03em}
.intro-brand .brand-mark{background:color-mix(in srgb,#fff 10%,transparent);width:1.2em;height:1.2em;font-size:.6em;border-radius:.3em}
.intro-lead{margin:0 auto;max-width:34ch;font:400 clamp(1rem,1.8vw,1.25rem)/1.5 var(--body);color:color-mix(in srgb,#fff 78%,transparent)}
.intro-count{position:absolute;inset:0;z-index:5;margin:0;pointer-events:none}
.intro-count span{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);opacity:0;font:700 clamp(4rem,14vw,10rem)/1 var(--head);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;will-change:transform,opacity}
.intro-final{top:50%;transform:translateY(-50%);opacity:0}
.intro-play{margin:0;font:700 clamp(2.6rem,9vw,7rem)/1 var(--head);letter-spacing:-.04em;
  background:linear-gradient(100deg,#fff 10%,color-mix(in srgb,var(--red) 60%,#fff) 45%,var(--plate) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 40px color-mix(in srgb,var(--red) 50%,transparent))}
.intro-sub{margin:1.1rem 0 0;font:400 clamp(1rem,2vw,1.3rem)/1.4 var(--body);color:color-mix(in srgb,#fff 80%,transparent)}
.intro-hint{position:absolute;left:50%;bottom:4vh;z-index:6;transform:translateX(-50%);margin:0;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font:500 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,#fff 70%,transparent)}
.intro-mouse{width:24px;height:38px;border:2px solid currentColor;border-radius:14px;position:relative}
.intro-mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:intro-wheel 1.6s ease-in-out infinite}
@keyframes intro-wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
.intro-skip{position:absolute;right:16px;top:16px;z-index:7;font:500 .8125rem/1 var(--body);color:#fff;text-decoration:none;padding:.6rem 1rem;border-radius:999px;
  background:color-mix(in srgb,#fff 8%,transparent);border:1px solid color-mix(in srgb,#fff 22%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.intro-skip:hover{color:#fff;background:color-mix(in srgb,#fff 16%,transparent)}

@media (max-width:640px){
  .intro-rocket-body{transform:scale(.72)}
  .intro-skill{font-size:.8rem}
  .intro-title{top:7vh}
}
@media (prefers-reduced-motion:reduce){.has-intro .intro{display:none}}