/* ══════════════════════════════════════════════════════════
   MÉCANOPTÈRES — carnet de terrain OCELLE-7
   nuit de jungle, cyan élytre, orange ocelle, ambre laser
   ══════════════════════════════════════════════════════════ */

:root{
  --nuit:#070b06;
  --chitine:#101812;
  --os:#ede4d4;
  --os-dim:rgba(237,228,212,.55);
  --elytre:#45c8d8;
  --ocelle:#ff8b2e;
  --laser:#ffc964;
  --petale:#e0507e;
  --laiton:#c99a4b;
  --acc:var(--elytre);
  --mono:"Space Mono",ui-monospace,monospace;
  --disp:"Syne",system-ui,sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
}
body[data-ch="2"]{--acc:var(--petale)}
body[data-ch="2t"],body[data-ch="1t"]{--acc:var(--laser)}
body[data-ch="3"]{--acc:var(--laiton)}

*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{
  background:var(--nuit);color:var(--os);
  font-family:var(--mono);
  overflow-x:hidden;
}
body.loading{overflow:hidden;height:100vh}

/* ─────────── préloader ─────────── */
#loader{
  position:fixed;inset:0;z-index:100;
  background:var(--nuit);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .9s ease,visibility .9s;
}
#loader.done{opacity:0;visibility:hidden}
.loader-hex .lh{fill:none;stroke:var(--elytre);stroke-width:2;transform-origin:0 0}
.loader-hex .lh1{animation:spin 6s linear infinite;opacity:.9}
.loader-hex .lh2{stroke:var(--ocelle);animation:spin 4s linear infinite reverse}
.loader-hex .lh-dot{fill:var(--os);animation:pulse 1.2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.loader-title{font-family:var(--disp);font-weight:800;letter-spacing:.42em;text-indent:.42em;font-size:13px;color:var(--os-dim)}
.loader-line{width:min(340px,70vw);height:1px;background:rgba(237,228,212,.15)}
#loader-fill{height:100%;width:0%;background:var(--elytre);box-shadow:0 0 12px var(--elytre)}
.loader-meta{width:min(340px,70vw);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;color:var(--os-dim)}
#loader-pct{color:var(--ocelle)}

/* ─────────── scène vidéo ─────────── */
#stage{position:fixed;inset:0;z-index:1;background:var(--nuit)}
.layer{position:absolute;inset:0}
.layer video{width:100%;height:100%;object-fit:cover;display:block}
#layer1{z-index:3}
#layer2{z-index:2}
#layer3{z-index:1}
.layer.off{display:none}

/* œil composé pendant la bascule optique */
#hexcanvas{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none;display:none}
#hexcanvas.on{display:block}

/* faisceau laser */
#beam{position:absolute;left:0;right:0;top:-10vh;z-index:4;height:0;pointer-events:none;opacity:0}
#beam.on{opacity:1}
.beam-core{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--laser);box-shadow:0 0 8px var(--laser),0 0 28px var(--laser),0 0 90px rgba(255,201,100,.6)}
.beam-flare{position:absolute;left:0;right:0;top:-46px;height:92px;background:linear-gradient(to bottom,transparent,rgba(255,201,100,.16) 45%,rgba(255,139,46,.22) 50%,rgba(255,201,100,.10) 56%,transparent)}
#scanlines{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:repeating-linear-gradient(to bottom,rgba(69,200,216,.05) 0 1px,transparent 1px 4px)}
#flash{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none}

#vignette{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(ellipse 130% 105% at 50% 42%,transparent 55%,rgba(4,7,4,.55) 100%);}
#grain{position:absolute;inset:-100px;z-index:7;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  animation:grain 900ms steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-40px,30px)}50%{transform:translate(30px,-45px)}75%{transform:translate(-25px,-20px)}100%{transform:translate(0,0)}}

/* ─────────── HUD ─────────── */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;transition:opacity 1.2s ease .4s}
body:not(.loading) #hud{opacity:1}
.hud-corner{position:absolute;width:22px;height:22px;border:1px solid rgba(237,228,212,.28)}
.hud-corner.tl{top:18px;left:18px;border-right:0;border-bottom:0}
.hud-corner.tr{top:18px;right:18px;border-left:0;border-bottom:0}
.hud-corner.bl{bottom:18px;left:18px;border-right:0;border-top:0}
.hud-corner.br{bottom:18px;right:18px;border-left:0;border-top:0}

.hud-item{position:absolute;font-size:10px;letter-spacing:.16em;line-height:1.75;color:var(--os-dim)}
.hud-item em{font-style:normal;color:rgba(237,228,212,.32)}
.hud-tl{top:26px;left:52px}
.hud-sigil{color:var(--acc)}
.hud-tr{top:26px;right:52px;text-align:right}
#organic-val{color:var(--acc);font-weight:700}
.hud-gauge{margin-top:6px;margin-left:auto;width:120px;height:2px;background:rgba(237,228,212,.14)}
#organic-fill{height:100%;width:100%;background:var(--acc);transition:background .6s}
.hud-bl{bottom:26px;left:52px}
.hud-br{bottom:26px;right:52px;text-align:right;color:var(--acc)}

#antenna{position:absolute;right:24px;top:50%;transform:translateY(-50%);height:38vh;width:10px}
.ant-line{position:absolute;left:4px;top:0;bottom:0;width:1px;background:rgba(237,228,212,.16)}
#ant-fill{width:100%;height:0%;background:var(--acc);box-shadow:0 0 6px var(--acc)}
.ant-node{position:absolute;left:1.5px;width:6px;height:6px;transform:rotate(45deg);border:1px solid rgba(237,228,212,.4);background:var(--nuit)}
.ant-tip{position:absolute;left:0;top:0;width:9px;height:1px;background:var(--acc)}

#alert{
  top:50%;left:50%;transform:translate(-50%,-50%);
  padding:10px 18px;border:1px solid var(--laser);color:var(--laser);
  font-size:11px;letter-spacing:.3em;text-indent:.3em;white-space:nowrap;
  background:rgba(7,11,6,.55);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .25s;
}
#alert.on{opacity:1;animation:blink .5s steps(2) infinite}
@keyframes blink{50%{border-color:rgba(255,201,100,.25);color:rgba(255,201,100,.55)}}

#transition-note{
  top:14vh;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.34em;text-indent:.34em;color:var(--acc);
  white-space:nowrap;opacity:0;transition:opacity .3s;
}
#transition-note.on{opacity:.9}

/* ─────────── héros ─────────── */
#hero{
  position:fixed;inset:0;z-index:15;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 6vw;
  text-shadow:0 2px 30px rgba(4,7,4,.8);
}
.hero-over{font-size:10px;letter-spacing:.4em;text-indent:.4em;color:var(--os-dim);margin-bottom:3.2vh;
  opacity:0;animation:rise 1.1s ease .2s forwards}
.hero-title{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(26px,5.2vw,88px);
  letter-spacing:.01em;line-height:.95;color:var(--os);
  white-space:nowrap;
  opacity:0;animation:rise 1.2s cubic-bezier(.2,.8,.2,1) .45s forwards;
}
.hero-title .tick{color:var(--ocelle)}
.hero-sub{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(19px,2.3vw,30px);color:rgba(237,228,212,.88);
  margin-top:2.6vh;line-height:1.35;
  opacity:0;animation:rise 1.2s ease .75s forwards;
}
.hero-cue{
  position:absolute;bottom:9vh;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:.34em;text-indent:.34em;color:var(--os-dim);
  opacity:0;animation:rise 1s ease 1.5s forwards;
}
.cue-line{display:block;width:1px;height:44px;margin:0 auto 12px;background:linear-gradient(var(--acc),transparent);
  animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
body.loading #hero *{animation-play-state:paused}

/* ─────────── légendes ─────────── */
#captions{position:fixed;inset:0;z-index:16;pointer-events:none}
.cap{
  position:absolute;max-width:min(420px,74vw);
  opacity:0;transform:translateY(22px);
  transition:opacity .55s ease,transform .55s ease;
}
.cap.left{left:6vw;bottom:16vh;text-align:left}
.cap.right{right:6vw;bottom:16vh;text-align:right}
.cap.show{opacity:1;transform:none}
.cap-eyebrow{font-size:10px;letter-spacing:.3em;color:var(--acc);margin-bottom:12px}
.cap.right .cap-eyebrow{text-indent:.3em}
.cap-eyebrow::before{content:"";display:inline-block;width:22px;height:1px;background:var(--acc);vertical-align:middle;margin-right:10px}
.cap.right .cap-eyebrow::before{display:none}
.cap.right .cap-eyebrow::after{content:"";display:inline-block;width:22px;height:1px;background:var(--acc);vertical-align:middle;margin-left:10px}
.cap-title{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(24px,3.1vw,42px);line-height:1.12;color:var(--os);
  text-shadow:0 2px 26px rgba(4,7,4,.85);
}
.cap-data{margin-top:14px;font-size:10px;letter-spacing:.18em;color:var(--os-dim)}
.cap.warn .cap-eyebrow,.cap.warn .cap-data{color:var(--laser)}
.cap.warn .cap-eyebrow::before,.cap.warn .cap-eyebrow::after{background:var(--laser)}

/* ─────────── chute ─────────── */
#endcard{
  position:fixed;inset:0;z-index:18;background:var(--nuit);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
}

/* journal de transmission */
#terminal{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(680px,84vw);
  opacity:0;transition:opacity .4s ease;
}
#terminal.on{opacity:1}
#termlog{
  font-family:var(--mono);font-size:clamp(10px,1.25vw,13px);
  line-height:2.1;letter-spacing:.08em;white-space:pre-wrap;
  color:var(--os-dim);
}
#termlog .hi{color:var(--laser)}
#termlog .req{font-family:var(--serif);font-style:italic;font-size:1.35em;letter-spacing:.02em;color:var(--os)}
#termcursor{color:var(--laser);animation:pulse 1s steps(2) infinite}

.end-inner{max-width:960px;padding:0 6vw;text-align:center;
  opacity:0;transform:translateY(30px);transition:opacity .9s ease .15s,transform .9s ease .15s}
#endcard.reveal .end-inner{opacity:1;transform:none}
#endcard.reveal #terminal{opacity:0;pointer-events:none}
.end-over{font-size:10px;letter-spacing:.34em;text-indent:.34em;color:var(--os-dim);margin-bottom:3.4vh}
.end-title{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(34px,5.4vw,68px);line-height:1.14;color:var(--os);
}
.end-index{display:flex;gap:26px;justify-content:center;margin:5.2vh 0 4.6vh;flex-wrap:wrap}
.spec{width:158px}
.spec img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  filter:saturate(.85);border:1px solid rgba(237,228,212,.16)}
.spec figcaption{margin-top:10px;font-size:9px;letter-spacing:.14em;line-height:1.8;color:var(--os-dim)}
.spec b{color:var(--os)}
.spec i{font-family:var(--serif);font-size:12px;letter-spacing:.04em;color:var(--laiton)}

/* spécimen 04 — l'observatrice */
.spec04 .spec04-visual{
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--laser);box-shadow:0 0 22px rgba(255,201,100,.14) inset,0 0 18px rgba(255,201,100,.12);
  background:
    repeating-linear-gradient(to bottom,rgba(255,201,100,.05) 0 1px,transparent 1px 4px),
    var(--chitine);
}
.spec04 svg{width:52px;height:52px}
.spec04 svg polygon{fill:none;stroke:var(--laser);stroke-width:2.5}
.spec04 svg polygon:last-of-type{stroke:var(--ocelle)}
.spec04 svg circle{fill:var(--os);animation:pulse 1.2s ease-in-out infinite}
.spec04 b,.spec04 figcaption{color:var(--laser)}
.spec04 i{color:var(--os)}
#endcard.reveal .spec04{animation:spec04in .5s steps(3) .9s backwards}
@keyframes spec04in{0%{opacity:0;filter:invert(1)}50%{opacity:1;filter:invert(1)}100%{opacity:1;filter:none}}

.end-twist{
  font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.9vw,22px);
  color:var(--laser);margin-bottom:4.4vh;
}
#restart{
  pointer-events:auto;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-indent:.26em;
  color:var(--os);background:none;border:1px solid rgba(237,228,212,.35);
  padding:15px 34px;transition:border-color .3s,color .3s,box-shadow .3s;
}
#restart:hover,#restart:focus-visible{border-color:var(--ocelle);color:var(--ocelle);box-shadow:0 0 24px rgba(255,139,46,.25);outline:none}
#restart:focus-visible{outline:1px dashed var(--ocelle);outline-offset:4px}
.end-credit{margin-top:5vh;font-size:9px;letter-spacing:.14em;color:rgba(237,228,212,.3)}

#scrollspace{position:relative;z-index:0;width:1px}

/* ─────────── responsive & accessibilité ─────────── */
@media (max-width:560px){
  .hero-title{white-space:normal;font-size:11vw;line-height:1.02}
}
@media (max-width:720px){
  .hud-tl,.hud-bl{left:34px}
  .hud-tr,.hud-br{right:34px}
  #antenna{display:none}
  .cap.left,.cap.right{left:7vw;right:7vw;text-align:left;bottom:14vh}
  .cap.right .cap-eyebrow{text-indent:0}
  .cap.right .cap-eyebrow::after{display:none}
  .cap.right .cap-eyebrow::before{display:inline-block}
}
@media (prefers-reduced-motion:reduce){
  #grain,.cue-line{animation:none}
  #alert.on{animation:none}
  #endcard.reveal .spec04{animation:none}
  .cap{transition:opacity .3s}
}