/* ============ 09 WORLD & LOCATIONS ============ */
.world{position:relative;--wsh:0;--wac:color-mix(in srgb,#2f8bff calc(var(--wsh)*100%),#3ee0c5);--wvi:color-mix(in srgb,#2f6bff calc(var(--wsh)*100%),#9b5cff);
  --dfont:'Bebas Neue','Noto Sans JP',Impact,sans-serif;--dmono:'DM Mono','IBM Plex Mono',ui-monospace,monospace}
.world-head{max-width:1180px;margin:0 auto;padding:6vh 6vw 8vh}
.world-head h2{font:400 clamp(2.6rem,11.5vw,10.5rem)/.86 var(--dfont);letter-spacing:.02em;color:var(--ink)}
.world-head h2 .out{color:transparent;-webkit-text-stroke:2px var(--wvi);transition:-webkit-text-stroke-color .6s}
.world-stage{position:relative}
.world-bg{position:sticky;top:0;height:100vh;overflow:hidden;z-index:0;background:#07040e}
#worldParticles{position:absolute;inset:0;width:100%;height:100%;display:block}
.world-vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 100%,rgba(6,5,11,.92),transparent 55%),linear-gradient(180deg,rgba(6,5,11,.5),transparent 30%,transparent 65%,rgba(6,5,11,.82));pointer-events:none}
.world-wash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 60% at 80% 20%,color-mix(in srgb,#2f6bff calc(var(--wsh)*46%),transparent),transparent 70%);opacity:var(--wsh);transition:opacity .3s}
.world-outro{position:absolute;inset:0;pointer-events:none;background:#06050b;opacity:0}
.world-panels{position:relative;z-index:2;margin-top:-100vh}
.wp{min-height:100vh;display:flex;align-items:center;padding:8vh 6vw}
.wp.l{justify-content:flex-start}.wp.r{justify-content:flex-end}
.wp-group{position:relative;max-width:26rem}
.wp.l .wp-group{margin-right:auto}.wp.r .wp-group{margin-left:auto}
.wp-mark{position:relative;display:inline-block;padding:1.1rem 1.4rem;background:rgba(8,5,16,.72);border:0;
  opacity:0;translate:0 28px;transition:opacity .8s cubic-bezier(.2,.8,.2,1),translate .8s cubic-bezier(.2,.8,.2,1),border-color .5s}
.wp.r .wp-mark{margin-left:auto}
.wp-tag{display:block;font:400 .58rem var(--dmono);letter-spacing:.22em;text-transform:uppercase;color:var(--wac);margin-bottom:.55rem;transition:color .5s}
.wp-mark h3{font:400 clamp(1.7rem,3.6vw,2.5rem)/1 var(--dfont);letter-spacing:.03em;color:var(--ink);white-space:nowrap}
.wp-chain{position:absolute;left:0;top:0;width:1px;height:1px;z-index:0;overflow:visible;
  color:color-mix(in srgb,var(--wac) 80%,transparent);opacity:0;transition:opacity .8s ease .15s,color .5s;pointer-events:none}
.wp.on .wp-chain{opacity:1}
.wp-chain .rp-link{animation:linkGlow 2.4s ease-in-out infinite}
.wp-chain .rp-link:nth-child(2n){animation-delay:.3s}
.wp-chain .rp-link:nth-child(3n){animation-delay:.6s}
@keyframes linkGlow{0%,100%{opacity:.55}50%{opacity:1}}
.wp-card{position:relative;max-width:26rem;margin-top:5.4rem;padding:1.9rem 2.1rem 2.1rem;background:rgba(8,5,16,.68);border:0;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  opacity:0;translate:0 44px;transition:opacity .85s cubic-bezier(.2,.8,.2,1) .1s,translate .85s cubic-bezier(.2,.8,.2,1) .1s,border-color .5s,box-shadow .3s}
.wp.l .wp-card{margin-left:4.2rem}
.wp.r .wp-card{margin-right:4.2rem}
.wp.on .wp-mark,.wp.on .wp-card{opacity:1;translate:0 0}
.wp-group:hover .wp-card{box-shadow:0 0 0 1px color-mix(in srgb,var(--wac) 55%,transparent),0 18px 44px rgba(0,0,0,.45);translate:0 -3px}
.wp-group:hover .wp-mark h3{text-shadow:0 0 22px color-mix(in srgb,var(--wac) 70%,transparent)}
.wp-card p{font-size:.9rem;line-height:1.75;color:#d3cee8;margin-bottom:.95rem}
.wp-card p:last-child{margin-bottom:0}
@media (max-width:900px){
  .wp,.wp.l,.wp.r{justify-content:flex-start;padding:6vh 5vw}
  .wp-group,.wp.r .wp-group{margin:0}
  .wp.r .wp-mark{margin-left:0}
  .wp-card,.wp.r .wp-card{margin-left:2.6rem;margin-right:0}
}
@media (prefers-reduced-motion:reduce){.wp-chain .rp-link{animation:none}.wp-mark,.wp-card{opacity:1;translate:0 0;transition:none}}

/* ---- borrowed effects, scoped to the location boxes only ----
   1) animated "marching ants" dashed border (Niklas Knaack)
   2) mouse-follow glow spot (Sami Tadros) ---- */
.wp-mark,.wp-card{
  --ma-a:color-mix(in srgb,var(--wac) 92%,#fff);
  --ma-b:transparent;
  --ma-speed:850ms;
  --ma-bw:1.5px;
  --ma-sa:6px;
  --ma-sb:6px;
  --ma-angle:45deg;
  --ma-size:calc(var(--ma-sa) + var(--ma-sb));
  --ma-shift:calc(var(--ma-size) / sin(var(--ma-angle)));
}
.wp-mark::before,.wp-mark::after,.wp-card::before,.wp-card::after{
  content:'';position:absolute;inset:calc(var(--ma-bw) * -1);pointer-events:none;
  background:repeating-linear-gradient(var(--ma-angle),var(--ma-a) 0 var(--ma-sa),var(--ma-b) var(--ma-sa) var(--ma-size));
  background-size:var(--ma-shift) 100%;
  mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  mask-clip:content-box,border-box;
  mask-composite:exclude;
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  -webkit-mask-clip:content-box,border-box;
  -webkit-mask-composite:xor;
  opacity:.85;transition:opacity .4s;
}
.wp-mark::before,.wp-card::before{padding:0 var(--ma-bw) var(--ma-bw) 0;animation:wma-b var(--ma-speed) linear infinite}
.wp-mark::after,.wp-card::after{padding:var(--ma-bw) 0 0 var(--ma-bw);animation:wma-a var(--ma-speed) linear infinite}
@keyframes wma-b{to{background-position:calc(var(--ma-shift) * -1) 0}}
@keyframes wma-a{to{background-position:var(--ma-shift) 0}}
.wp-group:hover .wp-mark::before,.wp-group:hover .wp-mark::after,.wp-group:hover .wp-card::before,.wp-group:hover .wp-card::after{opacity:1}
.wp-mark .gl,.wp-card .gl{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;padding:7px;
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;
  mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-clip:content-box,border-box;mask-composite:exclude}
.wp-mark .gl::before,.wp-card .gl::before{
  content:'';position:absolute;top:var(--gy,50%);left:var(--gx,50%);translate:-50% -50%;
  width:220px;height:220px;background:radial-gradient(var(--wac),transparent 65%);
  opacity:0;transition:opacity .5s;mix-blend-mode:screen;
}
.wp-mark:hover .gl::before,.wp-card:hover .gl::before{opacity:.5}
.wp-mark>*:not(.gl):not(.wp-chain),.wp-card>*{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.wp-mark::before,.wp-mark::after,.wp-card::before,.wp-card::after{animation:none}}

/* ---- each location gets its own fixed accent, independent of the page's blue shift ---- */
.wp[data-i="0"]{--wac:#9aa3ae}   /* Old-Earth: gray */
.wp[data-i="1"]{--wac:#4ade80}   /* Tree-Cave: green */
.wp[data-i="2"]{--wac:#ef4444}   /* ArkHold Academy: red */
.wp[data-i="3"]{--wac:#f2f3f5}   /* ArkCity: white */