/* Jérémy Sassi - couche de vol TB10 */

.sky-layer{
  position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.sky-layer.on{opacity:1}

/* ============================================================
   AVION
   ============================================================ */
.tb10{
  position:fixed;left:0;top:0;z-index:-1;
  width:180px;aspect-ratio:200/168;
  pointer-events:none;opacity:0;
  transition:opacity .9s var(--ease);
  will-change:transform;
}
.tb10.on{opacity:.96}
.tb10.grounded{display:none}
.tb10-body{width:100%;height:100%;will-change:transform;filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
.tb10 svg{width:100%;height:100%;overflow:visible}

.tb-prop{transform-origin:100px 26px;animation:tbSpin .085s linear infinite}
@keyframes tbSpin{to{transform:rotate(360deg)}}

.tb-nav{animation:tbNav 1.6s steps(1,end) infinite}
.tb-nav-r{animation-delay:.8s}
@keyframes tbNav{0%,45%{opacity:1}46%,100%{opacity:.15}}

.tb-strobe{animation:tbStrobe 1.4s linear infinite}
@keyframes tbStrobe{0%,6%{opacity:1}7%,14%{opacity:.1}15%,20%{opacity:1}21%,100%{opacity:0}}

.tb-vortex{opacity:0;transition:opacity .5s var(--ease)}
.tb10.pulling .tb-vortex{opacity:1;animation:tbVortex 1.1s ease-out infinite}
@keyframes tbVortex{0%{opacity:.55;stroke-dasharray:0 90}70%{opacity:.18}100%{opacity:0;stroke-dasharray:90 0}}

/* ============================================================
   PISTE
   ============================================================ */
.runway{
  position:fixed;left:0;right:0;bottom:0;height:62vh;z-index:-1;
  pointer-events:none;opacity:0;
  perspective:340px;perspective-origin:50% 0%;
  transition:opacity 1s var(--ease);
}
.runway.on{opacity:1}
.rwy-deck{
  position:absolute;left:50%;bottom:0;width:200%;height:150%;
  transform:translateX(-50%) rotateX(74deg);transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 2px,transparent 2px 260px),
    linear-gradient(180deg,#0a1220 0%,#131c2b 55%,#1a2434 100%);
  border-top:2px solid rgba(236,242,251,.5);
}
.rwy-center{
  position:absolute;left:50%;top:0;bottom:0;width:9px;margin-left:-4.5px;
  background:repeating-linear-gradient(180deg,rgba(236,242,251,.85) 0 70px,transparent 70px 140px);
  animation:rwyRun 1.1s linear infinite;
}
@keyframes rwyRun{to{background-position-y:140px}}
.rwy-threshold{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;gap:14px}
.rwy-threshold span{width:16px;height:150px;background:rgba(236,242,251,.72)}
.rwy-num{
  position:absolute;left:50%;top:190px;transform:translateX(-50%);
  font-family:var(--f-display);font-weight:700;font-size:120px;letter-spacing:.1em;
  color:rgba(236,242,251,.8);
}
.rwy-haze{
  position:absolute;left:0;right:0;top:0;height:52%;
  background:linear-gradient(180deg,var(--void) 8%,rgba(7,12,21,.55) 55%,transparent 100%);
}
.rwy-smoke{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;gap:26px;opacity:0}
.rwy-smoke.puff{animation:rwyPuff 1.5s ease-out forwards}
.rwy-smoke i{width:34px;height:34px;border-radius:50%;background:rgba(236,242,251,.42);filter:blur(9px)}
@keyframes rwyPuff{
  0%{opacity:0;transform:translateX(-50%) scale(.4)}
  22%{opacity:.95}
  100%{opacity:0;transform:translateX(-50%) scale(3.1)}
}

/* ============================================================
   PLANCHE DE BORD
   ============================================================ */
.cockpit{
  position:fixed;inset:0;z-index:45;pointer-events:none;
  opacity:0;transition:opacity 1s var(--ease);
  font-family:var(--f-mono);
}
.cockpit.on{opacity:1}
.cockpit.shake{animation:cpShake .42s ease-in-out}
@keyframes cpShake{
  0%,100%{transform:none}
  20%{transform:translate3d(-1.6px,1.1px,0)}
  40%{transform:translate3d(1.4px,-1.3px,0)}
  60%{transform:translate3d(-1.1px,-.8px,0)}
  80%{transform:translate3d(1.2px,1px,0)}
}

.tape{
  position:absolute;top:calc(50% - 34px);transform:translateY(-50%);
  width:70px;height:272px;
}
.tape-spd{left:16px}
.tape-alt{right:16px}
.tape-cap{
  position:absolute;top:-19px;left:0;right:0;text-align:center;
  font-size:.56rem;letter-spacing:.3em;color:var(--mist);
}
.tape-window{
  position:relative;height:100%;overflow:hidden;
  background:linear-gradient(90deg,rgba(10,17,30,.5),rgba(10,17,30,.74));
  border:1px solid var(--line);border-radius:12px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
}
.tape-strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.tape-mark{position:absolute;left:0;right:0;height:0;display:flex;align-items:center}
.tape-spd .tape-mark{justify-content:flex-start;padding-left:8px}
.tape-alt .tape-mark{justify-content:flex-end;padding-right:8px}
.tape-mark i{display:block;width:9px;height:1px;background:var(--line-2)}
.tape-mark.maj i{width:15px;background:var(--mist)}
.tape-mark b{font-weight:400;font-size:.6rem;color:var(--mist-2);letter-spacing:.02em;margin:0 7px}
.tape-box{
  position:absolute;top:50%;transform:translateY(-50%);
  left:-6px;right:-6px;text-align:center;
  font-size:.86rem;font-weight:700;color:var(--light);letter-spacing:.06em;
  background:rgba(7,12,21,.94);border:1px solid var(--signal);
  border-radius:7px;padding:4px 0;
  box-shadow:0 0 22px rgba(255,77,141,.28);
}
.tape-trend{
  position:absolute;left:2px;top:50%;width:3px;border-radius:3px;
  background:var(--sky);transform-origin:50% 0;transition:height .25s linear;
}

.vsi{position:absolute;right:5px;top:calc(50% - 60px);width:7px;height:120px}
.vsi-zero{position:absolute;left:-3px;right:-3px;top:50%;height:1px;background:var(--line-2)}
.vsi-bar{
  position:absolute;right:0;top:50%;width:5px;border-radius:3px;
  background:linear-gradient(var(--signal),var(--signal-2));height:0;
  transition:height .18s linear,transform .18s linear;
}
.vsi-val{
  position:absolute;left:-8px;right:-8px;top:calc(50% + 20px);text-align:center;
  font-size:.54rem;color:var(--mist);letter-spacing:.06em;
}

.pnl-mini{display:none;align-items:center;gap:16px}
.pnl-mini span{display:flex;align-items:baseline;gap:4px}
.pnl-mini b{font-size:.78rem;font-weight:700;color:var(--light);letter-spacing:.05em}
.pnl-mini i{font-style:normal;font-size:.5rem;letter-spacing:.16em;color:var(--mist)}

.panel{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:20px;
  padding:9px clamp(14px,3vw,26px);
  background:rgba(7,12,21,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .8s var(--ease);
}
.cockpit.on .panel{transform:none}

.pnl-id{display:flex;flex-direction:column;line-height:1.25;min-width:104px}
.pnl-id .reg{font-size:.82rem;font-weight:700;color:var(--light);letter-spacing:.13em}
.pnl-id .actype{font-size:.53rem;letter-spacing:.15em;color:var(--mist);text-transform:uppercase}

.pnl-hsi{position:relative;width:52px;height:52px;flex:none}
.pnl-hsi svg{width:100%;height:100%}
.pnl-hsi #hsiRose{transform-origin:50px 50px}
.hsi-val{
  position:absolute;left:0;right:0;bottom:-13px;text-align:center;
  font-size:.56rem;color:var(--mist-2);letter-spacing:.1em;
}

.pnl-eng{display:flex;flex-direction:column;gap:4px;min-width:150px}
.eng-row{display:flex;align-items:center;gap:8px;font-size:.56rem;letter-spacing:.12em;color:var(--mist)}
.eng-row .l{width:36px;flex:none}
.eng-row .v{width:34px;text-align:right;color:var(--mist-2);flex:none}
.eng-row .track{position:relative;flex:1;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.eng-row .track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:linear-gradient(90deg,var(--sky),var(--signal));transition:width .22s linear}
.flaps{display:flex;gap:3px;flex:1}
.flaps i{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .3s}
.flaps i.lit{background:var(--signal)}

.pnl-nav{flex:1;min-width:130px}
.nav-line{position:relative;height:26px}
.nav-line::before{
  content:"";position:absolute;left:0;right:0;top:13px;height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px);
}
.nav-done{position:absolute;left:0;top:13px;height:1px;width:0;background:var(--signal);box-shadow:0 0 10px var(--signal);transition:width .18s linear}
.nav-wpts{position:absolute;inset:0}
.nav-wpts span{
  position:absolute;top:13px;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;background:var(--ink);border:1px solid var(--line-2);
  transition:background .35s,border-color .35s,transform .35s var(--ease);
}
.nav-wpts span.hit{background:var(--signal);border-color:var(--signal);transform:scale(1.55)}
.nav-wpts span::after{
  content:attr(data-w);position:absolute;top:9px;left:50%;transform:translateX(-50%);
  font-size:.47rem;letter-spacing:.12em;color:var(--mist);white-space:nowrap;
}
.nav-wpts span.hit::after{color:var(--signal-2)}
.nav-ship{
  position:absolute;top:13px;left:0;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  color:var(--light);transition:left .12s linear;
  filter:drop-shadow(0 0 7px rgba(255,77,141,.75));
}
.nav-ship svg{width:100%;height:100%;display:block}

.pnl-status{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:188px;text-align:right}
.phase{font-size:.68rem;font-weight:700;letter-spacing:.2em;color:var(--signal)}
.radio{font-size:.53rem;letter-spacing:.08em;color:var(--mist);min-height:12px;white-space:nowrap;overflow:hidden}
.radio.live{color:var(--mist-2)}

/* ============================================================
   DEMARRAGE MOTEUR
   ============================================================ */
.startup{
  position:fixed;inset:0;z-index:200;background:var(--void);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .85s var(--ease),visibility .85s;
  font-family:var(--f-mono);
}
.startup.done{opacity:0;visibility:hidden;pointer-events:none}
.su-inner{text-align:center;padding:24px}
.su-reg{font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,7vw,3rem);color:var(--light);letter-spacing:.12em}
.su-type{font-size:.6rem;letter-spacing:.34em;color:var(--mist);text-transform:uppercase;margin-top:8px}
.su-list{list-style:none;margin:28px 0 0;padding:0;min-height:112px;text-align:left;display:inline-block}
.su-list li{
  font-size:.66rem;letter-spacing:.16em;color:var(--mist-2);text-transform:uppercase;
  margin:7px 0;opacity:0;transform:translateY(6px);
  animation:suIn .3s var(--ease) forwards;
}
.su-list li span{color:#3ddc84;margin-right:9px}
@keyframes suIn{to{opacity:1;transform:none}}
.su-prop{width:96px;height:96px;margin:14px auto 0;opacity:.9}
.su-prop svg{width:100%;height:100%}
#suBlades{transform-origin:60px 60px;animation:suSpin 2.4s cubic-bezier(.4,0,.25,1) forwards}
@keyframes suSpin{0%{transform:rotate(0)}100%{transform:rotate(3400deg)}}
.su-skip{font-size:.53rem;letter-spacing:.2em;color:var(--mist);text-transform:uppercase;margin-top:20px;opacity:.55}

/* ============================================================
   RESPONSIVE
   ============================================================ */
.jsassi-onepage footer{padding-bottom:86px}

@media (max-width:1320px){
  .tape{display:none}
  .pnl-mini{display:flex}
}
@media (max-width:1180px){
  .pnl-nav{display:none}
}
@media (max-width:980px){
  .pnl-hsi,.pnl-eng{display:none}
  .pnl-status{min-width:0}
  .pnl-mini{gap:13px}
}
@media (max-width:720px){
  .panel{gap:12px;padding:8px 14px}
  .pnl-id .actype{display:none}
  .pnl-mini .mini-vs{display:none}
  .pnl-mini b{font-size:.7rem}
  .phase{font-size:.58rem;letter-spacing:.12em}
  .radio{display:none}
  .rwy-num{font-size:74px}
  .jsassi-onepage footer{padding-bottom:74px}
}
@media (max-width:460px){
  .panel{gap:9px;padding:7px 12px}
  .pnl-id .reg{font-size:.7rem;letter-spacing:.09em}
  .pnl-mini{gap:10px}
  .pnl-mini b{font-size:.64rem}
  .pnl-mini i{font-size:.44rem;letter-spacing:.1em}
  .phase{font-size:.52rem}
  .rwy-num{font-size:52px}
}

@media (prefers-reduced-motion:reduce){
  .startup{display:none}
  .sky-layer,.runway{display:none}
  .tb-prop,.tb-nav,.tb-strobe,.rwy-center,.tb-vortex{animation:none}
  .tb10{transition:none}
  .cockpit.shake{animation:none}
  .panel{transition:none}
}