/* VOnet V9.1 — scoped animation restoration, 29 October 2026.
   All existing page layouts, PHP form and 21 locale dictionaries stay intact. */
:root{--vonet-motion-out:540ms;--vonet-motion-in:180ms;--basket-size:56px;--basket-right:max(14px,env(safe-area-inset-right,0px));--basket-bottom:max(14px,env(safe-area-inset-bottom,0px))}
/* VOnet v3 — paper-like multi-stage folding into the same fixed lower-right
   basket. The animation shrinks about the basket itself (not a lateral slide).
   A softened polygon outline, 3D hinge, moving crease highlights and a
   transient turned-up corner give a physical fold without heavy canvases. */
@keyframes vonet-paper-fold {
  0% {
    transform:perspective(1300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewY(0deg) scale(1);
    clip-path:polygon(0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%,0 50%);
    border-radius:0;opacity:1;
    animation-timing-function:cubic-bezier(.22,.04,.34,.96);
  }
  17% {
    transform:perspective(1300px) rotateX(2deg) rotateY(-3deg) rotateZ(.5deg) skewY(-.6deg) scale(.965,.974);
    clip-path:polygon(0 0,51% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%,0 50%);
    border-radius:5px;opacity:1;
    animation-timing-function:cubic-bezier(.3,0,.52,1);
  }
  39% {
    transform:perspective(1300px) rotateX(12deg) rotateY(-10deg) rotateZ(1.5deg) skewY(-1.8deg) scale(.76,.84);
    clip-path:polygon(5% 1%,48% 4%,98% 1%,98% 48%,100% 99%,49% 96%,2% 95%,3% 50%);
    border-radius:11px;opacity:1;
    animation-timing-function:cubic-bezier(.35,.1,.65,1);
  }
  61% {
    transform:perspective(1300px) rotateX(24deg) rotateY(-23deg) rotateZ(-4deg) skewY(-3deg) scale(.44,.57);
    clip-path:polygon(15% 7%,53% 14%,92% 5%,94% 50%,100% 100%,51% 86%,8% 88%,17% 50%);
    border-radius:22px;opacity:1;
    animation-timing-function:cubic-bezier(.4,.04,.68,.94);
  }
  82% {
    transform:perspective(1300px) rotateX(33deg) rotateY(-32deg) rotateZ(-11deg) skewY(-2deg) scale(.125,.195);
    clip-path:polygon(20% 15%,50% 21%,86% 11%,89% 51%,97% 94%,52% 79%,16% 81%,26% 52%);
    border-radius:24px;opacity:1;
    animation-timing-function:cubic-bezier(.42,0,.74,1);
  }
  100% {
    transform:perspective(1300px) rotateX(38deg) rotateY(-37deg) rotateZ(-16deg) skewY(0deg) scale(.002);
    clip-path:polygon(25% 24%,50% 25%,75% 24%,76% 50%,76% 76%,50% 75%,25% 76%,24% 50%);
    border-radius:28px;opacity:0;
  }
}
/* A diagonal fold crease moves with the sheet as it collapses. */
@keyframes vonet-crease-glide {
  0%,8% {opacity:0;transform:translate3d(-16%, -10%,0) rotate(-8deg) scale(1.3);}
  27% {opacity:.34;transform:translate3d(-7%,-6%,0) rotate(-3deg) scale(1.05);}
  52% {opacity:.63;transform:translate3d(5%,5%,0) rotate(6deg) scale(.85);}
  76% {opacity:.76;transform:translate3d(15%,12%,0) rotate(10deg) scale(.63);}
  95%,100% {opacity:0;transform:translate3d(26%,24%,0) rotate(16deg) scale(.3);}
}
@keyframes vonet-corner-turn {
  0%,12% {opacity:0;transform:perspective(600px) rotateY(0) rotateX(0) scale(1);}
  32% {opacity:.22;transform:perspective(600px) rotateY(-12deg) rotateX(-14deg) scale(.99);}
  59% {opacity:.65;transform:perspective(600px) rotateY(-43deg) rotateX(-25deg) scale(.82);}
  83% {opacity:.38;transform:perspective(600px) rotateY(-68deg) rotateX(-38deg) scale(.56);}
  100% {opacity:0;transform:perspective(600px) rotateY(-76deg) rotateX(-48deg) scale(.3);}
}
@keyframes vonet-shadow-pinch {
  0%,14% {opacity:0;transform:scale(1);}
  38% {opacity:.25;transform:scale(.87);}
  72% {opacity:.48;transform:scale(.5);}
  100% {opacity:0;transform:scale(.1);}
}
@keyframes vonet-curtain-in {
  0% {opacity:.55;clip-path:inset(0 100% 0 0);transform:translate3d(0,6px,0);}
  72% {opacity:1;clip-path:inset(0 9% 0 0);transform:translate3d(0,1px,0);}
  100% {opacity:1;clip-path:inset(0);transform:translate3d(0,0,0);}
}
@keyframes vonet-basket-pulse {
  0% {opacity:0;transform:scale(.65);}
  22% {opacity:1;transform:scale(1);}
  78% {opacity:1;transform:scale(1.05);}
  96% {opacity:1;transform:scale(.93);}
  100% {opacity:.98;transform:scale(.94);}
}
@keyframes vonet-basket-swallow {
  0%,74% {opacity:0;transform:scale(.6);}
  84% {opacity:.65;transform:scale(1.4);}
  100% {opacity:0;transform:scale(.4);}
}
#vonet-exit-surface {
  position:fixed;
  top:var(--motion-header-y,72px);
  right:0;bottom:0;left:0;width:100%;
  overflow:hidden;background:#030a19;
  /* This origin matches the basket centre exactly, even after scrolling. */
  transform-origin:calc(100% - 42px) calc(100% - 42px);
  z-index:55;pointer-events:none;will-change:transform,opacity;
  isolation:isolate;backface-visibility:hidden;
}
#vonet-exit-surface .vonet-motion-document {
  position:absolute;left:0;right:0;width:100%;
}
#vonet-exit-surface.vonet-motion-active {
  animation:vonet-paper-fold var(--vonet-motion-out) both;
}
/* Lightweight highlights; decorative only, no text duplication. */
#vonet-exit-surface .vonet-fold-crease {
  position:absolute;inset:-10%;pointer-events:none;
  background:
    linear-gradient(135deg,transparent 34%,rgba(5,10,24,.28) 46%,rgba(165,226,255,.19) 47.2%,rgba(3,8,22,.32) 49%,transparent 54%),
    linear-gradient(42deg,transparent 31%,rgba(90,148,220,.13) 47%,rgba(5,10,24,.40) 48%,transparent 56%);
  opacity:0;mix-blend-mode:normal;
  animation:vonet-crease-glide var(--vonet-motion-out) ease-in-out both;
}
#vonet-exit-surface .vonet-fold-flap {
  position:absolute;top:0;right:0;width:58%;height:58%;pointer-events:none;
  transform-origin:100% 0%;backface-visibility:hidden;
  clip-path:polygon(5% 0,100% 0,100% 98%);
  background:linear-gradient(215deg,rgba(178,221,255,.28),rgba(28,74,145,.22) 25%,rgba(2,6,18,.50) 56%,transparent 85%);
  animation:vonet-corner-turn var(--vonet-motion-out) ease-in-out both;
}
#vonet-exit-surface .vonet-fold-shadow {
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 22px 20px 48px rgba(0,0,0,.27),inset -5px -7px 24px rgba(18,28,62,.44);
  opacity:0;animation:vonet-shadow-pinch var(--vonet-motion-out) ease-in both;
}
body.vonet-folding > main,body.vonet-folding > footer {visibility:hidden;}
#vonet-corner-basket {
  position:fixed;width:56px;height:56px;right:14px;bottom:14px;z-index:56;
  pointer-events:none;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.18) 15%,rgba(47,107,255,.12) 45%,transparent 73%);
  filter:drop-shadow(0 0 7px rgba(34,211,238,.48));
  animation:vonet-basket-pulse var(--vonet-motion-out) ease-out both;
}
#vonet-corner-basket::after {
  content:"";position:absolute;inset:7px;border:2px solid rgba(91,232,255,.7);
  border-radius:50%;pointer-events:none;
  animation:vonet-basket-swallow var(--vonet-motion-out) ease-out both;
}
#vonet-corner-basket svg {display:block;width:46px;height:46px;overflow:visible;}
#vonet-corner-basket .basket-rim {fill:#050a18;stroke:#6aebff;stroke-width:2.2;}
#vonet-corner-basket .basket-base {fill:#0d2541;stroke:#4f86ff;stroke-width:2;}
#vonet-corner-basket .basket-shine {fill:none;stroke:#b1f6ff;stroke-width:1.5;stroke-linecap:round;}
html.vonet-arriving > body > main,html.vonet-arriving > body > footer {
  animation:vonet-curtain-in var(--vonet-motion-in) cubic-bezier(.22,.66,.25,1) both;
}
@media (max-width:560px) {
  :root {--vonet-motion-out:460ms;--vonet-motion-in:160ms;}
  #vonet-exit-surface {transform-origin:calc(100% - 38px) calc(100% - 38px);}
  #vonet-corner-basket {width:52px;height:52px;right:12px;bottom:12px;}
  /* Avoid compositing the heavier extra fold-shadow on small GPUs. */
  #vonet-exit-surface .vonet-fold-shadow {display:none;}
}

#vonet-corner-basket{width:var(--basket-size);height:var(--basket-size);right:var(--basket-right);bottom:var(--basket-bottom)}
#vonet-exit-surface{transform-origin:calc(100% - var(--basket-right) - var(--basket-size) / 2) calc(100% - var(--basket-bottom) - var(--basket-size) / 2)}
@media(max-width:560px){:root{--basket-size:52px;--basket-right:max(12px,env(safe-area-inset-right,0px));--basket-bottom:max(12px,env(safe-area-inset-bottom,0px))}}
/* Animated routes and circulating data packets over the approved global map. */
.vonet-network-pulse{position:absolute;pointer-events:none;user-select:none;overflow:visible;direction:ltr;z-index:2;filter:drop-shadow(0 0 5px rgba(15,192,255,.48))}
.hero-inside>.vonet-network-pulse{top:-20px;right:clamp(-22px,-.7vw,-5px);width:min(76vw,1072px);aspect-ratio:1072 / 576;height:auto}
@media(min-width:1050px) and (max-height:990px){.hero-inside>.vonet-network-pulse{width:min(76vw,1030px);top:-14px}}
@media(max-width:1049px){.hero-inside>.vonet-network-pulse{width:79vw;right:-22px}}
@media(max-width:760px){.hero-inside>.vonet-network-pulse{top:auto;bottom:0;right:0;width:100%;height:auto;aspect-ratio:1072 / 576;opacity:.8}}
.vonet-network-pulse .route{fill:none;stroke:#3cd8ff;stroke-width:1.25;stroke-opacity:.48;stroke-dasharray:3.5 9;animation:vonet-route-dash 9s linear infinite}
.vonet-network-pulse .route-glow{fill:none;stroke:#1db9ff;stroke-width:3;stroke-opacity:.10}
.vonet-network-pulse .packet{fill:#b8f9ff;stroke:#2bd4ff;stroke-width:2;filter:drop-shadow(0 0 5px #26d6ff) drop-shadow(0 0 7px #008cff)}
@keyframes vonet-route-dash{to{stroke-dashoffset:-120}}
.world-art>.vonet-network-pulse{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.network-wave::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,#73edff 0 2px,transparent 3px) 0 50%/80px 50px;opacity:.20;animation:vonet-wavelights 8s linear infinite}
@keyframes vonet-wavelights{to{background-position:240px 50%}}
@media(prefers-reduced-motion:reduce){
  :root{--vonet-motion-out:0ms;--vonet-motion-in:0ms}
  #vonet-exit-surface,#vonet-corner-basket{display:none!important}
  .vonet-network-pulse .route,.network-wave::after{animation:none!important}
  html.vonet-arriving > body > main,html.vonet-arriving > body > footer{animation:none!important}
}
/* Keep network sparkles behind text, especially on small screens. */
.bigger-network::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#030b1a 0%,rgba(3,11,26,.96) 35%,rgba(3,11,26,.40) 68%,transparent 100%)}
.bigger-network .network-inner{z-index:2}
.network-wave::after{opacity:.11;mask-image:linear-gradient(90deg,transparent 0%,transparent 37%,#000 85%)}
@media(max-width:760px){
  .bigger-network::before{background:linear-gradient(180deg,rgba(3,11,26,.98) 0%,rgba(3,11,26,.92) 47%,rgba(3,11,26,.40) 100%)}
  .network-wave{opacity:.40}
  .network-wave::after{opacity:.07;mask-image:linear-gradient(180deg,transparent 0%,#000 80%)}
}


/* V9.6: remove the 10px flash/jump on inner-page navigation.
   V8's old `body.v8 main` fade-in animation re-starts whenever the
   paper-fold transition clones <main>. That makes the clone appear at
   translateY(10px) and opacity .3, causing the visible hop. The homepage
   has a different body class and did not exhibit the problem. */
body.v8 > main { animation: none; }
#vonet-exit-surface .vonet-motion-document > main {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}
/* Incoming inner pages reveal without vertical displacement.
   The paper folding into the bottom-right basket remains untouched. */
@keyframes vonet-curtain-stable {
  0% {clip-path:inset(0 100% 0 0);opacity:1;transform:none;}
  100% {clip-path:inset(0 0 0 0);opacity:1;transform:none;}
}
html.vonet-arriving > body.v8 > main,
html.vonet-arriving > body.v8 > footer {
  animation: vonet-curtain-stable var(--vonet-motion-in) cubic-bezier(.22,.66,.25,1) both;
}
@media (prefers-reduced-motion:reduce) {
  html.vonet-arriving > body.v8 > main,
  html.vonet-arriving > body.v8 > footer { animation:none !important; }
}