/* ══════════════════════════════════════════════════════════════════════════
   THE PLANE LOADER (index.html #ldr and #ldrOut, js/loader.js), 7 Oct 2026.
   Founder: the loader must MASK the blank screen, not add «garbage before» it;
   a plane over a real Earth with a dotted trail «like in the game Peak»; the
   plane always flies left to right, both ways between the two sites.
     #ldr     arriving at the Academy: from Tenerife to the Academy (L5 / L6)
     #ldrOut  leaving for tg.tours: from behind the Earth to Tenerife (L1 / L4)
   Each scene is drawn for one stage (1280×800 on a computer, 390×844 on a
   phone held upright) and js/loader.js scales the stage to the screen. The
   wide globe images are 2240 px wide so a very wide screen never shows the
   globe's cut edge. Loaded in <head>: it has to be ready for the first paint.
   ══════════════════════════════════════════════════════════════════════════ */
.ldr{position:fixed;inset:0;z-index:1000;overflow:hidden}
.ldr[hidden]{display:none}
.ldr--depart{z-index:1001}
html.ldr-on{overflow:hidden}
/* the cookie notice waits until the plane has lifted: it must not sit on top of the paper */
html.ldr-on #tgConsent,html.ldr-on .cc{visibility:hidden!important}
.ldr__paper{position:absolute;inset:0;overflow:hidden;
  background:#FCF0E5 url(../assets/img/tex-paper-ivory.webp) 0 0/768px 768px;box-shadow:0 30px 60px rgba(26,6,24,.6)}
.ldr__stage{position:absolute;left:50%;transform:translateX(-50%) scale(var(--s,1))}
.ldr__stage--wide{--s:var(--sw,1);bottom:0;width:1280px;height:800px;transform-origin:50% 100%}
.ldr__stage--tall{--s:var(--st,1);top:0;width:390px;height:844px;transform-origin:50% 0;display:none}
.ldr__layer{position:absolute;left:0;top:0;overflow:visible}
.ldr__layer--back{z-index:1}
.ldr__layer--front{z-index:3}
.ldr__globe{position:absolute;left:-480px;top:0;width:2240px;height:800px;max-width:none;z-index:2;pointer-events:none;-webkit-user-select:none;user-select:none}
.ldr__globe--tall{left:0;width:390px;height:844px}
.ldr__plane{position:absolute;left:0;top:0;z-index:4;width:42px;height:42px;color:#2E1128;opacity:0;offset-rotate:auto 45deg;
  filter:drop-shadow(0 6px 6px rgba(46,17,40,.25))}
.ldr__plane svg{display:block;width:100%;height:100%}
/* 8 Oct 2026: the plane moves by transform on the compositor (js/loader.js); its own layer,
   and the Earth its own, so the trail repainting never repaints them */
.ldr__plane{will-change:transform}
.ldr__globe{will-change:transform}
.ldr__plane--s{width:34px;height:34px}
.ldr__plane.is-on{opacity:1}
.ldr__plane.is-behind{z-index:1}
.ldr__guide{fill:none;stroke:rgba(46,17,40,.18);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1 9}
.ldr__dots{fill:none;stroke:#9A630F;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 9}
.ldr__dots--s{stroke-width:2.5;stroke-dasharray:1 8}
.ldr__arc{font:600 15px/1 "Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:2px;fill:rgba(46,17,40,.5)}
.ldr__arc--s{font-size:13px;letter-spacing:1.5px}
.ldr__pin{fill:#F0B760;stroke:#2E1128;stroke-width:1.5}
.ldr__pulse{fill:none;stroke:#9A630F;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ldrPulse 2s ease-out infinite}
.ldr__pinlabel{font:700 14px/1 "Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;fill:#2E1128;
  stroke:#FCF0E5;stroke-width:4px;stroke-linejoin:round;paint-order:stroke}
.ldr__pinlabel--s{font-size:12px;stroke-width:3.5px}
.ldr__home{fill:#2E1128}
.ldr__homelabel{font:600 12px/1 "Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;fill:#5A4453}
.ldr__head{position:absolute;left:0;right:0;top:clamp(22px,6vh,48px);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ldr__mark{width:40px;height:40px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.8)) drop-shadow(0 -1px 0 rgba(110,70,15,.3))}
.ldr__title{margin:0;font:600 15px/1.3 "Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#5A4453}
.ldr__status{margin:0;font:400 13px/1.3 "Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#7A6272}
@keyframes ldrPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}

/* a phone held upright: the tall scene */
@media (max-width:600px) and (orientation:portrait){
  .ldr__stage--wide{display:none}
  .ldr__stage--tall{display:block}
  .ldr__head{top:auto;bottom:44px;left:24px;right:24px;align-items:flex-start;text-align:left;gap:6px}
  .ldr--depart .ldr__head{align-items:flex-end;text-align:right}
  .ldr__mark{width:30px;height:30px}
  .ldr__title{font-size:14px}
  .ldr__status{font-size:12.5px}
}

/* leaving: the paper drops over the page at once */
.ldr--depart .ldr__paper{transform:translateY(-102%)}
.ldr--depart.is-in .ldr__paper{transform:none;transition:transform .45s cubic-bezier(.3,0,.2,1)}
/* 9 Oct 2026: leaving for a site with no plane of its own (tg.tours, the platform), the landed
   scene fades to white, the colour tg.tours lifts on arrival (js/eclipse.js) */
.ldr--depart::after{content:"";position:absolute;inset:0;z-index:6;background:#fff;opacity:0;pointer-events:none}
.ldr--depart.is-white::after{opacity:1;transition:opacity .28s ease-in}
/* arriving: the paper lifts the moment the page is ready */
.ldr.is-lifting .ldr__paper{transform:translateY(-102%);transition:transform .7s cubic-bezier(.7,0,.2,1)}
/* no script: never trap the page, lift by itself */
.ldr--arrive:not(.is-js) .ldr__paper{animation:ldrAuto .7s cubic-bezier(.7,0,.2,1) 4s forwards}
.ldr--arrive:not(.is-js){animation:ldrGone 0s linear 4.8s forwards}
@keyframes ldrAuto{to{transform:translateY(-102%)}}
@keyframes ldrGone{to{visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  .ldr__pulse{animation:none;opacity:0}
  .ldr.is-lifting .ldr__paper{transform:none;opacity:0;transition:opacity .35s}
  .ldr--depart .ldr__paper,.ldr--depart.is-in .ldr__paper{transform:none;transition:none}
}