/* =========================================================
   landing.css — v146 opening page
   J'onn projects three hologram dioramas: the gallery (walk down
   the hallway into the Paintings room), Stories, and the 2D version.
   Loaded after gallery.css, so it wins over the old landing rules.
   ========================================================= */

#landing.lp{
  --lp-bg:#0B1115; --lp-txt:#E8EEF0; --lp-head:#F1F5F6; --lp-sub:#B5C3C7; --lp-kick:#9FE8DA;
  --lp-holo:#7FE3D0; --lp-holo-txt:#E6FFF9; --lp-D:46px;
  --lp-tech:"Orbitron","Roboto",Arial,sans-serif;
  display:block; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  padding:0;
  background:
    radial-gradient(120% 60% at 50% 0%,#12233A 0%,rgba(18,35,58,0) 60%),
    radial-gradient(90% 40% at 50% 100%,rgba(63,199,176,.10),rgba(63,199,176,0) 70%),
    var(--lp-bg);
  color:var(--lp-txt); color-scheme:dark;
}
#landing.lp .lp-sky{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#landing.lp .landing__in{position:relative;z-index:1;max-width:620px;margin:0 auto;
  padding:clamp(2rem,6vw,4rem) max(16px,env(safe-area-inset-right,0px)) 1.2rem max(16px,env(safe-area-inset-left,0px))}
#landing.lp .landing__kicker{color:var(--lp-kick);font-weight:500}
#landing.lp .landing__title{color:var(--lp-head);font-weight:700;font-size:clamp(2.6rem,11vw,5.2rem);text-wrap:balance}
#landing.lp .landing__sub{color:var(--lp-sub);font-weight:300;margin-bottom:.6rem}
#landing.lp .track{display:none}

/* ---------- the projector bay ---------- */
.lp-bay{position:relative;height:clamp(620px,165vw,790px);overflow:hidden;perspective:1000px;perspective-origin:50% 40%;touch-action:pan-y;margin:0 -8px}
.lp-bay::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 98%,rgba(127,227,208,.18),rgba(127,227,208,0) 50%);pointer-events:none}
.lp-floor{position:absolute;left:-40%;right:-40%;bottom:-6%;height:34%;transform:perspective(420px) rotateX(68deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(127,227,208,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(127,227,208,.22) 1px,transparent 1px);background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 55% 48% at 50% 42%,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);
          mask-image:radial-gradient(ellipse 55% 48% at 50% 42%,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);pointer-events:none}
.lp-stage{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}   /* v159: will-change keeps it on the GPU */
.lp-cone{position:absolute;left:50%;bottom:14%;width:130%;height:78%;transform:translateX(-50%) translateZ(-60px);
  background:linear-gradient(to top,rgba(127,227,208,.26),rgba(127,227,208,.08) 60%,rgba(127,227,208,0) 95%);
  clip-path:polygon(48% 100%,52% 100%,100% 0,0 0);
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 28%,rgba(0,0,0,.6) 55%,transparent 85%);
          mask-image:linear-gradient(to top,transparent 0%,#000 28%,rgba(0,0,0,.6) 55%,transparent 85%);
  filter:blur(2px);opacity:.6;transition:opacity .4s ease;pointer-events:none}
.lp-bay.pulse .lp-cone{opacity:1}

/* ---------- a hologram box ---------- */
.lp-holo{position:absolute;display:block;pointer-events:auto;transform-style:preserve-3d;backface-visibility:hidden;cursor:pointer;outline:none;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;transition:transform .9s cubic-bezier(.6,0,.2,1)}
#lp-gallery{left:21%;top:1%;width:58%;z-index:auto;transform:translateZ(-40px)}   /* v157: higher and a touch smaller, so "Walk the gallery" clears the two in front */
#lp-stories{left:3%;top:41%;width:40%;transform:translateZ(10px) rotateY(20deg)}
#lp-flat{right:3%;top:41%;width:40%;transform:translateZ(10px) rotateY(-20deg)}
@media (max-width:640px){ #lp-stories,#lp-flat{top:33%} }   /* v159: on phones the two in front sit closer under "Walk the gallery" */
.lp-bob{transform-style:preserve-3d;animation:lpBob 4s ease-in-out infinite}
#lp-stories .lp-bob{animation-delay:-1.3s} #lp-flat .lp-bob{animation-delay:-2.6s}
@keyframes lpBob{50%{transform:translateY(-8px)}}
.lp-box{position:relative;transform-style:preserve-3d;aspect-ratio:16/9;animation:lpFlick 6s steps(1) infinite}
#lp-stories .lp-box,#lp-flat .lp-box{aspect-ratio:3/4}
#lp-gallery .lp-box{--lp-D:52px}
@keyframes lpFlick{0%,100%{opacity:1}90%{opacity:.7}91%{opacity:1}95%{opacity:.82}96%{opacity:1}}
.lp-ly{position:absolute;inset:0;transform-style:preserve-3d;clip-path:inset(calc((1 - var(--rev,1)) * 100%) 0 0 0)}
.lp-ly img{position:absolute;display:block;max-width:none}
.lp-back{transform:translateZ(calc(var(--lp-D) * -1));overflow:hidden}
.lp-back img{inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.92)}
.lp-side{position:absolute;background:linear-gradient(var(--sd,to bottom),rgba(127,227,208,.30),rgba(127,227,208,.05));border:1px solid rgba(127,227,208,.45);box-sizing:border-box;pointer-events:none}
.lp-st{left:0;top:0;width:100%;height:var(--lp-D);transform-origin:top center;transform:translateZ(calc(var(--lp-D) * -1)) rotateX(90deg)}
.lp-sb{left:0;bottom:0;width:100%;height:var(--lp-D);transform-origin:bottom center;transform:translateZ(calc(var(--lp-D) * -1)) rotateX(-90deg);--sd:to top}
.lp-sl{left:0;top:0;height:100%;width:var(--lp-D);transform-origin:left center;transform:translateZ(calc(var(--lp-D) * -1)) rotateY(-90deg);--sd:to right}
.lp-sr{right:0;top:0;height:100%;width:var(--lp-D);transform-origin:right center;transform:translateZ(calc(var(--lp-D) * -1)) rotateY(90deg);--sd:to left}
.lp-glass{position:absolute;inset:0;transform:translateZ(1px);border:1px solid var(--lp-holo);box-shadow:0 0 22px rgba(127,227,208,.35),inset 0 0 26px rgba(127,227,208,.22);pointer-events:none}
.lp-glass::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(127,227,208,.10) 0 1px,transparent 1px 4px)}
.lp-glass::after{content:"";position:absolute;left:0;right:0;height:18%;top:-18%;background:linear-gradient(to bottom,transparent,rgba(127,227,208,.20),transparent);animation:lpSweep 4.2s linear infinite}
@keyframes lpSweep{to{top:100%}}
.lp-grain{position:absolute;inset:0;background-image:var(--lp-grain);opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.lp-scan{position:absolute;left:-2%;right:-2%;height:2px;top:calc((1 - var(--rev,1)) * 100%);background:var(--lp-holo-txt);box-shadow:0 0 10px 2px var(--lp-holo);transform:translateZ(2px);opacity:var(--scanop,0);pointer-events:none}

/* the gallery: walk down the hallway, into the Paintings room, paintings step off the wall */
.lp-walk img{transform-origin:39% 50%}
.lp-hall{animation:lpHall 11s linear infinite}
.lp-room{animation:lpRoom 11s linear infinite}
.lp-inroom img{animation:lpRoomOp 11s linear infinite}
@keyframes lpHall{0%{transform:scale(1);opacity:1;filter:brightness(.95)}45%{transform:scale(2.1);opacity:1}54%{transform:scale(2.9);opacity:0;filter:brightness(1.4)}93%{transform:scale(1);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes lpRoom{0%,46%{opacity:0;transform:scale(1.35)}56%{opacity:1;transform:scale(1.12)}66%{transform:scale(1)}88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes lpRoomOp{0%,52%{opacity:0}62%{opacity:1}88%{opacity:1}94%,100%{opacity:0}}

/* captions */
.lp-cap{margin-top:12px;text-align:center;color:var(--lp-holo-txt)}
.lp-cap b,#landing.lp #enter{display:block;width:100%;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;
  font-family:var(--lp-tech);font-weight:700;font-size:clamp(.66rem,3vw,.9rem);letter-spacing:.08em;text-transform:uppercase;color:var(--lp-holo-txt);line-height:1.3}
#landing.lp #enter:disabled{cursor:pointer;color:var(--lp-holo-txt)}
#landing.lp #enter #loadlabel{display:block;font-size:.62rem;letter-spacing:.14em;font-weight:500}
#landing.lp #enter #count{display:block;margin-top:2px;font-variant-numeric:tabular-nums;font-size:clamp(.9rem,4vw,1.15rem)}
.lp-cap small{display:block;margin-top:3px;font-size:.58rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--lp-holo)}
.lp-holo:focus-visible .lp-glass,#landing.lp #enter:focus-visible{outline:2px solid var(--lp-holo-txt);outline-offset:4px}
.lp-holo.lp-go{z-index:9}
.lp-holo.lp-go .lp-bob{animation:none}

/* J'onn on his projector pad */
.lp-jonn{position:absolute;left:50%;bottom:9%;width:18%;max-width:110px;transform:translateX(-50%) translateZ(60px);pointer-events:none}
.lp-jonn img{display:block;width:100%;animation:lpFloat 3.6s ease-in-out infinite}
@keyframes lpFloat{50%{transform:translateY(-6px)}}
.lp-pad{margin:-7% 0 0 -10%;width:120%;height:14px;border-radius:50%;background:radial-gradient(ellipse,rgba(127,227,208,.9),rgba(127,227,208,.15) 60%,transparent 72%)}

.lp-build{margin:.6rem 0 0;font:500 .6rem var(--lp-tech);letter-spacing:.2em;color:rgba(127,227,208,.4);text-align:right}
#landing.lp #fail{position:relative;z-index:1;max-width:620px;margin:0 auto;padding:3rem 16px;color:var(--lp-txt)}
#landing.lp #fail a{color:var(--lp-holo)}

@media (prefers-reduced-motion:reduce){
  .lp-bob,.lp-box,.lp-jonn img,.lp-glass::after,.lp-hall,.lp-room,.lp-inroom img{animation:none}
  .lp-room,.lp-inroom img{opacity:0}
}

/* v159: phones. Chrome on Android tears stacked 3D layers apart while scrolling (the frame, the
   picture and the words drift to different depths), worst on big 3x screens. So on a touch screen
   the holograms are flat: same boxes, same glow, no depth and no tilt. Desktop keeps the 3D. */
@media (hover:none) and (pointer:coarse){
  .lp-stage{transform:none !important;transform-style:flat;will-change:auto}
  .lp-holo,.lp-bob,.lp-box,.lp-ly{transform-style:flat}
  #lp-gallery{transform:none}
  #lp-stories{transform:perspective(900px) rotateY(20deg)}    /* the two in front keep their angle: one flat layer each, turned, nothing stacked inside */
  #lp-flat{transform:perspective(900px) rotateY(-20deg)}
  .lp-ly,.lp-back,.lp-glass,.lp-scan,.lp-ly img{transform:none !important}
  .lp-side{display:none}
  .lp-cone{transform:translateX(-50%)}
  .lp-jonn{transform:translateX(-50%)}
  .lp-holo.lp-go{transition:transform .6s ease}
}