/* NEO EARTH — GRAVITY DISSOLVE / dedicated optional opening layer.
   This stylesheet only decorates the existing intro. The original mark stays
   byte-for-byte identical; fragments are sampled at runtime from its PNG. */
.neo-intro-mark {
  position:relative;
  isolation:isolate;
}
/* The field belongs to the fixed overlay, NOT the small logo frame. */
.neo-intro-gravity {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
  opacity:1;
}
/* Restrained full-viewport depth cue: the white intro remains visible. */
.neo-intro::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transform:scale(1.07);
  background:radial-gradient(ellipse 67% 68% at 50% 44%,
    transparent 16%,rgba(75,128,166,.045) 47%,
    rgba(19,57,91,.15) 100%);
  transition:opacity .46s ease,transform 1.6s cubic-bezier(.25,.5,.28,1);
}
.neo-intro.is-disintegrating::after {
  opacity:1;
  transform:scale(.94);
}
.neo-intro.is-exiting::after { opacity:0; }
.neo-intro.is-ready.is-disintegrating .neo-intro-mark .neo-intro-logo {
  opacity:0;
  transform:translate3d(0,-2px,0) scale(.998);
  filter:blur(1px);
  transition:opacity .4s ease-out, transform .4s ease-out,filter .4s ease-out;
}
.neo-intro.is-disintegrating .neo-intro-flare,
.neo-intro.is-disintegrating .neo-intro-caption {
  opacity:0!important;
  transition:opacity .25s ease-out!important;
}
.neo-intro.is-disintegrating .neo-intro-glint {
  animation:none!important;
  opacity:0!important;
}
.neo-intro.is-exiting .neo-intro-gravity {
  opacity:0;
  transition:opacity .48s cubic-bezier(.2,.7,.3,1);
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference) {
  .neo-intro.is-ready .neo-intro-mark .neo-intro-glint{
    animation-duration:.76s;
    animation-delay:.78s;
  }
}
@media(prefers-reduced-motion:reduce){
  .neo-intro-gravity{display:none!important}
  .neo-intro::after{display:none!important}
  .neo-intro.is-disintegrating .neo-intro-mark .neo-intro-logo{
    opacity:1;transform:none;filter:none;transition:none!important
  }
  .neo-intro.is-disintegrating .neo-intro-flare,
  .neo-intro.is-disintegrating .neo-intro-caption{
    transition:none!important
  }
}

/* SKIP must stop immediately, not wait for WebKit's visibility transition. */
.neo-intro.is-finished {
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:none!important;
}

/* GPU-friendly complete-viewport fall-back for mobile WebKit. These rings
   also reinforce the normal sampled-PNG animation; they never modify the logo.
   No pixel-read, WebGL, image decode or scripted frame loop is required. */
.neo-mobile-gravity{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  opacity:0;visibility:hidden;
}
.neo-mobile-gravity-ring{
  position:absolute;left:50%;top:44%;
  width:130vmax;height:112vmax;max-width:1800px;max-height:1600px;
  border:1px solid rgba(41,123,176,.57);border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(145,203,236,.05);
  opacity:0;transform:translate3d(-50%,-50%,0) scale(1.17) rotate(-14deg);
  will-change:transform,opacity;
}
.neo-mobile-gravity-ring-b{
  width:101vmax;height:94vmax;
  border-color:rgba(75,165,203,.52);
}
.neo-mobile-gravity-ring-c{
  width:78vmax;height:67vmax;
  border-color:rgba(31,104,164,.55);
}
.neo-mobile-gravity-core{
  position:absolute;left:50%;top:44%;width:170px;height:170px;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(2,11,20,.97) 0 15%,rgba(9,43,72,.89) 25%,rgba(45,120,168,.45) 37%,transparent 70%);
  transform:translate3d(-50%,-50%,0) scale(.10);
  will-change:transform,opacity;
}
.neo-intro.is-disintegrating .neo-mobile-gravity{
  opacity:.85;visibility:visible;
}
.neo-intro.is-disintegrating .neo-mobile-gravity-ring{
  animation:neo-mobile-gravity-implode 1.12s cubic-bezier(.38,.06,.32,1) both;
}
.neo-intro.is-disintegrating .neo-mobile-gravity-ring-b{animation-delay:.09s}
.neo-intro.is-disintegrating .neo-mobile-gravity-ring-c{animation-delay:.17s}
.neo-intro.is-disintegrating .neo-mobile-gravity-core{
  animation:neo-mobile-gravity-well 1.12s ease-in-out both;
}
.neo-intro.is-css-gravity .neo-mobile-gravity{opacity:1}
.neo-intro.is-css-gravity .neo-mobile-gravity-ring{border-width:2px}
@keyframes neo-mobile-gravity-implode{
  0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(1.15) rotate(-14deg)}
  17%{opacity:.72}
  72%{opacity:.75}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.012) rotate(30deg)}
}
@keyframes neo-mobile-gravity-well{
  0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.1)}
  36%{opacity:.6;transform:translate3d(-50%,-50%,0) scale(.55)}
  76%{opacity:.96;transform:translate3d(-50%,-50%,0) scale(1.18)}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.04)}
}
@media(max-width:900px){
  .neo-mobile-gravity-ring{width:132vmax;height:112vmax}
  .neo-mobile-gravity-ring-b{width:106vmax;height:95vmax}
  .neo-mobile-gravity-ring-c{width:81vmax;height:69vmax}
  .neo-mobile-gravity-core{width:126px;height:126px}
  .neo-intro.is-disintegrating .neo-mobile-gravity{
    opacity:1;
  }
}
@media(prefers-reduced-motion:reduce){
  .neo-mobile-gravity{display:none!important}
  .neo-mobile-gravity-ring,.neo-mobile-gravity-core{
    animation:none!important;transition:none!important;will-change:auto;
  }
}

/* iPhone accessibility exception: the OS preference is always respected on
   normal visits. An intentional Replay or ?intro=1 is a user opt-in, so
   restore only this short, lightweight CSS gravity sequence. Never require
   Canvas, WebGL, or the original PNG's pixel decoding to succeed. */
@media(prefers-reduced-motion:reduce){
  #neo-intro.is-motion-requested .neo-mobile-gravity{
    display:block!important;
    visibility:hidden;
    opacity:0;
  }
  #neo-intro.is-motion-requested.is-disintegrating .neo-mobile-gravity{
    visibility:visible;
    opacity:1;
  }
  #neo-intro.is-motion-requested.is-disintegrating .neo-mobile-gravity-ring{
    animation:neo-mobile-gravity-implode 1.12s cubic-bezier(.38,.06,.32,1) both!important;
  }
  #neo-intro.is-motion-requested.is-disintegrating .neo-mobile-gravity-ring-b{
    animation-delay:.09s!important;
  }
  #neo-intro.is-motion-requested.is-disintegrating .neo-mobile-gravity-ring-c{
    animation-delay:.17s!important;
  }
  #neo-intro.is-motion-requested.is-disintegrating .neo-mobile-gravity-core{
    animation:neo-mobile-gravity-well 1.12s ease-in-out both!important;
  }
  #neo-intro.is-motion-requested.is-disintegrating .neo-intro-mark .neo-intro-logo{
    opacity:0!important;
  }
}

/* Normal homepage entry with iOS Reduce Motion: static, accessible well. */
@media(prefers-reduced-motion:reduce){
  #neo-intro.is-reduced-gravity .neo-mobile-gravity{
    display:block!important;visibility:visible;opacity:1!important;
  }
  #neo-intro.is-reduced-gravity .neo-mobile-gravity::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse 68% 61% at 50% 44%,
      #030d19 0%,#061b2b 20%,rgba(30,92,131,.86) 36%,
      rgba(61,141,177,.28) 57%,transparent 80%);
  }
  #neo-intro.is-reduced-gravity .neo-mobile-gravity-ring{
    animation:none!important;opacity:.35!important;
    transform:translate3d(-50%,-50%,0) scale(.17)!important;
    will-change:auto;
  }
  #neo-intro.is-reduced-gravity .neo-mobile-gravity-core{
    animation:none!important;opacity:.8!important;
    transform:translate3d(-50%,-50%,0) scale(1.1)!important;
    will-change:auto;
  }
  #neo-intro.is-reduced-gravity .neo-intro-mark .neo-intro-logo{
    opacity:0!important;
  }
}


/* NEO EARTH / abrupt signal-loss cut: moving gravity => BLACK => original skyline.
   No indicator, line, loading state, strobe, wipe, easing or copied effects. */
#neo-intro .neo-puchun{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:#000;opacity:0;visibility:hidden;
  transition:none!important;animation:none!important;
}
#neo-intro.is-puchun .neo-puchun{
  opacity:1!important;visibility:visible!important;
}
#neo-intro.is-puchun:not(.is-exiting){
  opacity:1!important;visibility:visible!important;
  transition:none!important;
}
#neo-intro.is-puchun.is-exiting{
  /* Reveal must also be a CUT. The skyline was positioned under blackout. */
  opacity:0!important;visibility:hidden!important;
  pointer-events:none!important;
  transition:none!important;
}
/* Pure black during the hold: SKIP stays operational via Escape; keyboard
   focus can still expose its control if someone specifically tabs to it. */
#neo-intro .neo-intro-skip{z-index:8}
#neo-intro.is-puchun:not(.is-exiting) .neo-intro-skip:not(:focus-visible){
  color:transparent!important;border-color:transparent!important;
}
@media(prefers-reduced-motion:reduce){
  #neo-intro.is-puchun,#neo-intro.is-puchun.is-exiting{
    animation:none!important;transition:none!important;
  }
}


/* NEO EARTH / CRT signal-collapse, not a full-screen strobe.
   The supplied reference lights only the machine's central display.
   Preserve that spatial cue: a bounded pearl-white panel gently compresses
   into one soft blue-violet hairline, then a single hard black cut.
   No rapid flicker, repeated pulses, full-viewport white, or copied graphics. */
#neo-intro .neo-puchun-flash{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  visibility:hidden;opacity:0;
  background:rgba(0,4,10,.92);
  animation:none!important;transition:none!important;
}
#neo-intro .neo-puchun-flash::before{
  content:"";display:block;position:absolute;
  left:50%;top:45%;width:min(86vw,850px);
  height:min(44vw,47vh,480px);
  max-height:47vh;min-height:100px;
  background:radial-gradient(ellipse at 49% 48%,
    #d2dfef 0%,#b1c6df 39%,#728cae 77%,#38536e 100%);
  opacity:0;transform:translate3d(-50%,-50%,0) scaleY(1);
  transform-origin:50% 50%;
  border:1px solid rgba(180,202,226,.17);
  box-shadow:0 0 22px rgba(132,164,206,.09);
}
#neo-intro .neo-puchun-flash::after{
  content:"";display:block;position:absolute;
  left:50%;top:45%;width:min(76vw,710px);height:2px;
  background:linear-gradient(90deg,transparent 0%,#51699d 16%,
    #9badcd 40%,#e2e9f6 50%,#a7cce8 60%,#566ca3 84%,transparent 100%);
  box-shadow:0 0 10px rgba(122,160,211,.45);
  opacity:0;transform:translate3d(-50%,-50%,0) scaleX(.2);
}
#neo-intro.is-puchun-flash:not(.is-puchun) .neo-puchun-flash{
  visibility:visible;opacity:1;
}
#neo-intro.is-puchun-flash:not(.is-puchun) .neo-puchun-flash::before{
  animation:neo-puchun-display-collapse 230ms linear both;
}
#neo-intro.is-puchun-flash:not(.is-puchun) .neo-puchun-flash::after{
  animation:neo-puchun-hairline 230ms linear both;
}
@keyframes neo-puchun-display-collapse{
  0%,32%{opacity:.74;transform:translate3d(-50%,-50%,0) scaleY(1)}
  55%{opacity:.64;transform:translate3d(-50%,-50%,0) scaleY(.72)}
  76%{opacity:.42;transform:translate3d(-50%,-50%,0) scaleY(.08)}
  86%,100%{opacity:0;transform:translate3d(-50%,-50%,0) scaleY(.004)}
}
@keyframes neo-puchun-hairline{
  0%,57%{opacity:0;transform:translate3d(-50%,-50%,0) scaleX(.18)}
  76%{opacity:.8;transform:translate3d(-50%,-50%,0) scaleX(.82)}
  90%{opacity:.48;transform:translate3d(-50%,-50%,0) scaleX(1)}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) scaleX(1)}
}
/* If WebKit pauses the tab mid-transition, black ALWAYS has priority. */
#neo-intro.is-puchun .neo-puchun-flash,
#neo-intro.is-puchun.is-exiting .neo-puchun-flash{
  visibility:hidden!important;opacity:0!important;
  animation:none!important;
}
#neo-intro.is-puchun-flash .neo-intro-skip:not(:focus-visible){
  color:transparent!important;border-color:transparent!important;
}
@media(max-width:900px){
  #neo-intro .neo-puchun-flash::before{
    width:min(88vw,550px);
    height:min(49vw,32vh,290px);
    min-height:95px;
  }
  #neo-intro .neo-puchun-flash::after{width:min(78vw,490px)}
}
/* Always suppress bright display changes when reduced motion is enabled,
   including explicit ?intro=1 and the Replay button. The user can still
   experience the black signal cut and quiet reveal. */
@media(prefers-reduced-motion:reduce){
  #neo-intro .neo-puchun-flash,
  #neo-intro.is-puchun-flash .neo-puchun-flash{
    visibility:hidden!important;opacity:0!important;animation:none!important;
  }
  #neo-intro .neo-puchun-flash::before,
  #neo-intro .neo-puchun-flash::after{
    animation:none!important;opacity:0!important;
  }
}


/* True Canvas 2D CRT renderer. It draws bounded phosphor pixels frame-by-frame
   instead of trying to reproduce a television power cut with CSS transforms. */
#neo-intro .neo-puchun-canvas{
  position:absolute;inset:0;z-index:7;pointer-events:none;
  display:block;width:100%;height:100%;
  opacity:0;visibility:hidden;
  transform:translateZ(0);
  transition:none!important;animation:none!important;
}
#neo-intro .neo-puchun-canvas.is-active{
  visibility:visible;opacity:1;
}
#neo-intro.is-canvas-puchun .neo-puchun-flash{
  visibility:hidden!important;opacity:0!important;
}
#neo-intro.is-canvas-puchun .neo-puchun-flash::before,
#neo-intro.is-canvas-puchun .neo-puchun-flash::after{
  animation:none!important;opacity:0!important;
}
#neo-intro.is-puchun .neo-puchun-canvas,
#neo-intro.is-exiting .neo-puchun-canvas{
  visibility:hidden!important;opacity:0!important;
}
@media(prefers-reduced-motion:reduce){
  #neo-intro:not(.is-motion-requested) .neo-puchun-canvas{
    visibility:hidden!important;opacity:0!important;
  }
}
