/* ==========================================================
   INTRO — le cockpit de Nessie
   Variables pilotées par js/intro.js :
   --roll (inclinaison), --pitch (tangage), --tx/--ty (secousses), --vit (aiguille)
   ========================================================== */
#intro {
  --roll: 0deg; --pitch: 0px; --tx: 0px; --ty: 0px; --vit: .55;
  --carlingue: #2c3a4f; --tableau: #34445a;
  position: fixed; inset: 0; z-index: 700; overflow: hidden; background: #0f1a26;
  opacity: 0; transition: opacity .8s ease;
}
#intro.is-in { opacity: 1; }
#intro.is-fin { opacity: 0; transition: opacity 1.1s ease .25s; pointer-events: none; }
#intro.is-rapide { transition: opacity .4s ease; }

.ck-secousse { position: absolute; inset: 0; transform: translate(var(--tx), var(--ty)); }

/* ---------- ce qu'on voit par le pare-brise ---------- */
.ck-vue { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.ck-vue:active { cursor: grabbing; }
.ck-monde {
  position: absolute; inset: -30vh -40vw; transform-origin: 50% 50%;
  transform: translateY(var(--pitch)) rotate(var(--roll));
}
.ck-ciel { position: absolute; left: 0; right: 0; top: 0; height: 68vh; background: linear-gradient(180deg, #4fb3d9 0%, #8fd8e8 45%, #ffe2b3 88%, #ffd29a 100%); }
.ck-soleil { position: absolute; left: 62%; top: 34vh; width: 18vh; height: 18vh; border-radius: 50%; background: radial-gradient(circle, #fff7d6 0 30%, rgba(255, 233, 160, .7) 45%, rgba(255, 220, 150, 0) 70%); animation: ckSoleil 5s ease-in-out infinite; }
@keyframes ckSoleil { 50% { transform: scale(1.12); } }
.ck-mer {
  position: absolute; left: 0; right: 0; top: 68vh; bottom: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .0) 0 26px, rgba(255, 255, 255, .13) 26px 29px) 0 0 / 100% 120px,
    linear-gradient(180deg, #7cc6cf 0%, #1f88a8 18%, #0b5a7d 60%, #073f5c 100%);
  animation: ckVagues 1.4s linear infinite;
}
.is-descente .ck-mer { animation-duration: .35s; }
@keyframes ckVagues { to { background-position: 0 120px, 0 0; } }
.ck-mer::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 6px; background: rgba(255, 244, 214, .8); filter: blur(3px); }

.ck-nuages { position: absolute; left: 50%; top: 68vh; width: 0; height: 0; pointer-events: none; }
.ck-nuage {
  position: absolute; left: -150px; top: -60px; width: 300px; height: 90px; border-radius: 99px; background: #fff;
  opacity: 0; will-change: transform, opacity;
}
.ck-nuage::before, .ck-nuage::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.ck-nuage::before { width: 130px; height: 130px; left: 50px; top: -62px; }
.ck-nuage::after { width: 95px; height: 95px; left: 150px; top: -38px; }

/* l'île à l'horizon */
.ck-ile { position: absolute; left: calc(50% - 6vw); top: 61vh; width: 640px; transform-origin: 50% 50%; will-change: transform; }
.ck-ile-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 20px rgba(0, 40, 60, .35)); pointer-events: none; }
.ck-ile.is-coucou .ck-ile-img { animation: ckCoucou .5s var(--ease-back); }
@keyframes ckCoucou { 40% { transform: scale(1.06) rotate(-2deg); } }
.ck-ile-bulle {
  position: absolute; left: 50%; top: -6%; transform: translate(-50%, -100%) scale(0); transform-origin: 50% 100%;
  padding: 18px 34px; border-radius: 40px; background: var(--jaune); border: 7px solid var(--encre); box-shadow: 10px 10px 0 var(--encre);
  font: 700 46px/1 'Souvenir', serif; white-space: nowrap; transition: transform .5s var(--ease-back);
}
.ck-ile-bulle::after { content: ''; position: absolute; left: 50%; bottom: -30px; width: 40px; height: 40px; margin-left: -20px; background: var(--jaune); border-right: 7px solid var(--encre); border-bottom: 7px solid var(--encre); transform: rotate(45deg); }
.ck-ile.is-cible .ck-ile-bulle { transform: translate(-50%, -100%) scale(1); animation: ckBulle 1.2s ease-in-out infinite .5s; }
@keyframes ckBulle { 50% { margin-top: -18px; } }
.ck-ile.is-cible::before {
  content: ''; position: absolute; left: 50%; top: 58%; width: 70%; aspect-ratio: 2 / 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 10px solid #fff; animation: ckCible 1.4s ease-out infinite; pointer-events: none;
}
@keyframes ckCible { from { opacity: .9; transform: translate(-50%, -50%) scale(.6); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
.ck-ile.is-cible .ck-ile-img { animation: ckBrille 1.4s ease-in-out infinite; }
@keyframes ckBrille { 50% { filter: drop-shadow(0 0 40px #fff6c8) drop-shadow(0 30px 20px rgba(0, 40, 60, .35)); } }

/* ---------- carlingue ---------- */
.ck-cadre { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ck-plafond { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: grid; justify-items: center; pointer-events: none; }
.ck-voyant {
  margin-top: 1.6vh; padding: 6px 16px; border-radius: 8px; border: 3px solid var(--encre);
  font: 700 13px 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase;
  background: #4a4136; color: #6e6352; transition: all .3s;
}
#intro.is-in .ck-voyant { animation: ckVoyant 1.6s steps(1) 1s both; background: #ffcf5a; color: var(--encre); box-shadow: 0 0 22px rgba(255, 207, 90, .7); }
@keyframes ckVoyant { 0%, 30%, 60% { background: #ffcf5a; } 15%, 45% { background: #4a4136; color: #6e6352; box-shadow: none; } }
.ck-fil { position: relative; width: 2px; height: 7vh; background: var(--encre); transform-origin: 50% 0; transform: rotate(calc(var(--roll) * -2.2)); transition: transform .4s ease-out; }
.ck-fil img { position: absolute; left: 50%; top: 100%; width: 54px; max-width: none; transform: translate(-50%, -12%); }

/* Nessie aux commandes */
.ck-pilote {
  position: absolute; right: 2vw; bottom: 25vh; height: 34vh; width: auto; max-width: none; z-index: 2;
  transform-origin: 50% 100%;
  filter: drop-shadow(-6px 8px 0 rgba(0, 0, 0, .25));
  animation: ckPilote 3.2s ease-in-out infinite;
}
@keyframes ckPilote { 50% { translate: 0 -6px; rotate: -1.5deg; } }
#intro.is-parle .ck-pilote { animation: ckParle .28s ease-in-out infinite alternate; }
@keyframes ckParle { to { scale: 1.02 .97; } }

/* manche à balai */
.ck-manche { position: absolute; left: 50%; bottom: 21vh; width: min(300px, 40vw); transform: translateX(-50%); z-index: 2; pointer-events: none; overflow: visible; }
.ck-manche-volant { transform-box: view-box; transform-origin: 150px 104px; transform: rotate(calc(var(--roll) * 1.8)); }

/* tableau de bord */
.ck-tableau {
  position: absolute; left: -2vw; right: -2vw; bottom: 0; height: 27vh; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-start; padding: 2.4vh 5vw 0;
  background: linear-gradient(180deg, #3d4f67, var(--tableau) 30%, #26323f);
  border-top: 6px solid var(--encre); border-radius: 50% 50% 0 0 / 46px 46px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
}
.ck-instruments { display: flex; gap: 1.6vw; align-items: center; }
.ck-cadran {
  position: relative; width: 13vh; height: 13vh; border-radius: 50%; border: 5px solid var(--encre);
  background: repeating-conic-gradient(from -135deg, #e8e2d2 0 2deg, transparent 2deg 27deg) , radial-gradient(circle, #20262e 60%, #141a20);
  box-shadow: inset 0 0 0 4px #4b5c72;
}
.ck-cadran small { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); font: 700 10px 'Space Mono', monospace; color: #e8e2d2; letter-spacing: .1em; }
.ck-aiguille { position: absolute; left: 50%; top: 50%; width: 4px; height: 42%; margin-left: -2px; background: var(--rouge); border-radius: 4px; transform-origin: 50% 0; transform: rotate(calc(var(--vit) * 270deg + 45deg)); transition: transform .3s; }
.ck-aiguille::before { content: ''; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #e8e2d2; border: 2px solid var(--encre); }
.ck-horizon { overflow: hidden; background: #141a20; }
.ck-horizon-ciel {
  position: absolute; inset: -40%; background: linear-gradient(180deg, #4fb3d9 50%, #8a5a33 50%);
  transform: translateY(calc(var(--pitch) * .25)) rotate(calc(var(--roll) * -1));
}
.ck-horizon-avion { position: absolute; left: 22%; right: 22%; top: 50%; height: 4px; margin-top: -2px; background: var(--jaune); border-radius: 4px; box-shadow: 0 0 0 2px var(--encre); }
.ck-horizon-avion::after { content: ''; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 2px var(--encre); }
.ck-ecran {
  display: grid; gap: 2px; padding: 1.2vh 1.2vw; min-width: 190px; border-radius: 10px; border: 5px solid var(--encre);
  background: #0e2a1d; color: #7dffb0; font: 700 12px/1.35 'Space Mono', monospace; letter-spacing: .06em;
  text-shadow: 0 0 6px rgba(125, 255, 176, .7); box-shadow: inset 0 0 18px rgba(0, 0, 0, .7);
}
.ck-voyants { display: grid; grid-template-columns: repeat(3, 12px); gap: 8px; }
.ck-voyants i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--encre); background: #58c26a; animation: ckClignote 1.8s steps(1) infinite; }
.ck-voyants i:nth-child(2n) { background: var(--jaune); animation-delay: -.6s; }
.ck-voyants i:nth-child(3n) { background: var(--rouge); animation-delay: -1.1s; animation-duration: 1.1s; }
@keyframes ckClignote { 50% { opacity: .25; } }

/* ---------- dialogue ---------- */
/* bulle de BD qui sort de la bouche de Nessie */
.ck-dialogue {
  position: absolute; right: calc(2vw + 22vh); bottom: 55vh; z-index: 10; width: min(380px, calc(100vw - 32px));
  transform-origin: 100% 100%; opacity: 0; transform: scale(.4) rotate(6deg);
  transition: transform .6s var(--ease-back) .6s, opacity .3s .6s;
  padding: 26px 26px 14px; background: #fff; border: 4px solid var(--encre); border-radius: 34px; box-shadow: 8px 8px 0 var(--encre);
  cursor: pointer; user-select: none;
}
#intro.is-in .ck-dialogue { opacity: 1; transform: none; }
/* la queue de la bulle, pointée vers Nessie */
.ck-dialogue::before, .ck-dialogue::after { content: ''; position: absolute; right: -2px; bottom: -46px; border-style: solid; }
.ck-dialogue::before { border-width: 0 0 50px 58px; border-color: transparent transparent transparent var(--encre); right: -18px; bottom: -52px; transform: skewX(-18deg); }
.ck-dialogue::after { border-width: 0 0 40px 44px; border-color: transparent transparent transparent #fff; right: -5px; bottom: -38px; transform: skewX(-18deg); }
.ck-dialogue.is-pop { animation: ckPop .45s var(--ease-back); }
@keyframes ckPop { from { transform: scale(.82) rotate(3deg); } }
.ck-dialogue.is-secoue { animation: ckSecoue .35s; }
@keyframes ckSecoue { 25% { translate: -8px 0; } 75% { translate: 8px 0; } }
.ck-nom {
  position: absolute; left: 22px; top: 0; transform: translateY(-55%) rotate(-3deg);
  padding: 3px 12px; border-radius: 99px; background: var(--rouge); color: var(--creme); border: 3px solid var(--encre);
  font: 700 12px 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase;
}
.ck-texte { min-height: 2.5em; font: 700 clamp(20px, 1.9vw, 26px)/1.25 'Souvenir', serif; letter-spacing: -.01em; }
.ck-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; min-height: 22px; }
.ck-progression { display: flex; gap: 6px; }
.ck-progression i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--encre); transition: all .3s; }
.ck-progression i.is-vu { background: var(--encre); }
.ck-progression i.is-ici { background: var(--rouge); width: 22px; border-radius: 99px; }
.ck-suite, .ck-consigne { font: 700 12px 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; display: none; }
.ck-suite b { display: inline-block; animation: ckFleche .7s ease-in-out infinite alternate; }
@keyframes ckFleche { to { transform: translateX(5px); } }
.ck-dialogue.is-pret .ck-suite { display: inline; }
.ck-dialogue.is-attente[data-attente="piloter"] .ck-consigne[data-pour="piloter"],
.ck-dialogue.is-attente[data-attente="ile"] .ck-consigne[data-pour="ile"] { display: inline; color: var(--rouge); animation: ckFleche .7s ease-in-out infinite alternate; }

/* essai des commandes */
.ck-essai {
  position: absolute; left: 50%; top: 12vh; z-index: 10; display: flex; gap: 14px; align-items: center;
  padding: 12px 18px; border-radius: 18px; background: rgba(29, 26, 23, .82); color: var(--creme);
  transform: translate(-50%, 20px) scale(.9); opacity: 0; pointer-events: none; transition: all .45s var(--ease-back);
  font: 700 13px 'Space Mono', monospace;
}
.ck-essai.is-in { transform: translate(-50%, 0); opacity: 1; }
.ck-touches { display: grid; grid-template-columns: repeat(3, auto); gap: 4px; }
.ck-touches kbd { font-size: 15px; transition: transform .1s, background .1s; }
.ck-touches kbd:first-child { grid-column: 2; }
.ck-touches kbd:nth-child(2) { grid-column: 1; grid-row: 2; }
.ck-touches kbd:nth-child(3) { grid-column: 2; grid-row: 2; }
.ck-touches kbd:nth-child(4) { grid-column: 3; grid-row: 2; }
.ck-touches kbd.is-on { background: var(--jaune); transform: translateY(2px); border-bottom-width: 2px; }
.ck-essai em { font-style: normal; opacity: .7; }

/* boutons */
.ck-son { position: absolute; left: 16px; top: 14px; z-index: 10; }
.ck-passer {
  position: absolute; right: 16px; top: 14px; z-index: 10; display: inline-flex; gap: 8px; align-items: center;
  padding: 10px 18px; border-radius: 99px; background: var(--creme); border: 2.5px solid var(--encre); box-shadow: 3px 3px 0 var(--encre);
  font-weight: 700; font-size: 14px; transition: transform .3s var(--ease-back), box-shadow .2s, background .2s;
}
.ck-passer:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--encre); }
.ck-passer.is-habitue { background: var(--jaune); animation: popIn .6s var(--ease-back) both 1s; }

/* ---------- atterrissage ---------- */
.is-descente .ck-dialogue { pointer-events: none; }
.is-descente .ck-essai { opacity: 0; }
.ck-flash { position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0%, #f6efe5 55%, #efe7dd 100%); transition: opacity .55s ease; }
.is-flash .ck-flash { opacity: 1; }

/* ---------- petits écrans ---------- */
@media (max-width: 760px) {
  .ck-tableau { height: 24vh; padding: 2vh 4vw 0; }
  .ck-gauche .ck-horizon, .ck-voyants { display: none; }
  .ck-cadran { width: 9vh; height: 9vh; }
  .ck-ecran { min-width: 0; font-size: 10px; }
  .ck-pilote { height: 20vh; right: 0; bottom: 30vh; }
  .ck-manche { bottom: 19vh; }
  .ck-voyant { font-size: 0; padding: 4px 8px; }
  .ck-voyant i { font-size: 14px; font-style: normal; }
  .ck-droite { display: none; }
  .ck-ile { left: 50%; }
  .ck-passer { padding: 8px 12px; font-size: 12px; }
  .ck-son .son-label { display: none; }
  .ck-dialogue { right: 12px; left: 12px; width: auto; bottom: calc(30vh + 21vh); padding: 22px 18px 12px; }
  .ck-dialogue::before { right: 40px; }
  .ck-dialogue::after { right: 53px; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-mer, .ck-pilote, .ck-soleil, .ck-voyants i { animation: none; }
}