@font-face{font-family:"Noto Sans Hebrew";src:url("fonts/noto-hebrew-hebrew.woff2") format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Noto Sans Hebrew";src:url("fonts/noto-hebrew-latin.woff2") format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2122}
:root{--emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;--h:100vh;--w:236vh;--vmin:min(1vw,1vh)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#9fd8f7;overscroll-behavior:none}
body{font-family:"Noto Sans Hebrew",Arial,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font-family:inherit}

/* ================= opening screen ================= */
.intro{position:fixed;inset:0;height:100vh;height:100dvh;z-index:30;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .7s ease,transform .7s ease}
.intro.out{opacity:0;transform:scale(1.08);pointer-events:none}
.intro-bg{position:absolute;inset:-4%;background:url("img/pano.jpg?v=4") 50% 40%/cover no-repeat;filter:blur(3px) saturate(1.1);animation:kb 26s ease-in-out infinite alternate}
.intro-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.18),rgba(255,255,255,0) 60%),
  linear-gradient(180deg,rgba(120,80,190,.35),rgba(255,190,220,.12) 45%,rgba(90,60,160,.45))}
@keyframes kb{from{transform:scale(1.02) translateX(-1.5%)}to{transform:scale(1.12) translateX(1.5%)}}
.intro-sparks{position:absolute;inset:0;pointer-events:none}
.intro-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:min(2.2vh,18px);padding:0 4vw;width:100%;max-width:900px}
.intro-title{margin:0;display:flex;flex-direction:column;align-items:center;line-height:1.28;text-align:center;color:#fff;font-weight:900;
  font-size:min(11.5vw,7.4vh,86px);
  text-shadow:0 0 .2em rgba(120,50,190,.85),0 0 .5em rgba(150,90,255,.8),0 0 1em rgba(90,40,170,.6);
  animation:titleIn 1s cubic-bezier(.2,1.4,.4,1) both}
.intro-title span:first-child{font-size:.8em;color:#fff6c2}
@keyframes titleIn{from{opacity:0;transform:translateY(-30px) scale(.85)}to{opacity:1;transform:none}}
.tagline{margin:0;font-weight:800;color:#3b1a6e;font-size:min(5.6vw,3.3vh,32px);padding:.35em 1em .45em;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,236,252,.9));box-shadow:0 .3em 1em rgba(90,40,160,.35),inset 0 -.12em 0 rgba(160,110,220,.25);
  animation:titleIn 1s .25s cubic-bezier(.2,1.4,.4,1) both;text-align:center}
.duo{position:relative;display:flex;align-items:flex-end;justify-content:center;height:min(36vh,58vw,340px);margin-top:1vh}
.al{height:100%;width:auto;filter:drop-shadow(0 1.2vh 1.2vh rgba(60,20,110,.35));animation:bob 3.2s ease-in-out infinite}
.al-y{height:96%;margin-inline-start:-4%;animation-delay:-1.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.2%)}}
.start{position:relative;margin-top:.4vh;border:0;cursor:pointer;color:#fff;font-weight:900;font-size:min(7.4vw,4.4vh,40px);
  padding:.42em 1.6em .55em;border-radius:999px;
  background:linear-gradient(180deg,#ffd35a 0%,#ff9d2e 55%,#ff7b1c 100%);
  box-shadow:0 .14em 0 #d55e05,0 .45em 1.1em rgba(140,50,0,.4),inset 0 .12em 0 rgba(255,255,255,.6),0 0 0 .12em rgba(255,255,255,.75);
  text-shadow:0 .05em .12em rgba(140,50,0,.45);animation:pulseBtn 1.8s ease-in-out infinite}
.start:active{transform:translateY(.1em) scale(.97)}
@keyframes pulseBtn{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.copy{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;z-index:1;
  font-size:13px;font-weight:700;color:rgba(255,255,255,.95);text-shadow:0 0 6px rgba(60,20,110,.7)}

/* ================= hub (v6 pattern) ================= */
.world{position:fixed;inset:0;height:100vh;height:100dvh;overflow:hidden;touch-action:none;cursor:grab;direction:ltr;
  background:linear-gradient(#b9a7f0,#f6c9e4 50%,#c8b6f5)}
.world.dragging{cursor:grabbing}
.track{position:absolute;left:0;top:0;height:var(--h);width:var(--w);will-change:transform;transform:translate3d(0,0,0)}
.pano,.pano-low{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-drag:none;pointer-events:none}
.pano-low{filter:blur(6px);transform:scale(1.01)}
.pano{opacity:0;transition:opacity .6s}
.pano.ready{opacity:1}
.fx,.sky-layer{position:absolute;pointer-events:none}
.fx{inset:0;overflow:hidden}
.sky-layer{left:0;top:0;height:var(--h);width:calc(var(--w) * .7 + 100vw);will-change:transform;z-index:1}
.cloud{position:absolute;width:calc(var(--h) * .30);height:calc(var(--h) * .09);border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.7),rgba(255,255,255,.3) 55%,rgba(255,255,255,0) 72%);
  filter:blur(2px);animation:drift linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(calc(var(--h) * .9))}}
.spark{position:absolute;width:calc(var(--h) * .012);height:calc(var(--h) * .012);border-radius:50%;
  background:radial-gradient(circle,#fff 0,#fff6c0 30%,rgba(255,220,120,0) 70%);animation:twinkle 3.2s ease-in-out infinite;opacity:0}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.25) translateY(calc(var(--h) * -.012))}70%{opacity:.4}}
.glow{position:absolute;width:calc(var(--h) * .22);height:calc(var(--h) * .22);border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,240,170,.45),rgba(255,230,140,0) 65%);animation:gpulse 4s ease-in-out infinite;mix-blend-mode:screen}
@keyframes gpulse{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}}
.drop{position:absolute;width:calc(var(--h) * .006);height:calc(var(--h) * .02);border-radius:50%;background:rgba(255,255,255,.8);animation:fallw linear infinite}
@keyframes fallw{from{transform:translateY(0);opacity:.9}to{transform:translateY(calc(var(--h) * .12));opacity:0}}

/* glowing 3D island labels */
.places{position:absolute;inset:0;z-index:2}
.hot{position:absolute;display:block;border-radius:30%;cursor:pointer;background:transparent;border:0;padding:0}
.lbl{position:absolute;transform:translate(-50%,-50%);direction:rtl;cursor:pointer;border:0;padding:0;background:none;outline:none;
  font-size:calc(var(--h) * .025);color:#fff;animation:float 4.6s ease-in-out infinite;animation-delay:calc(var(--d) * -1);z-index:3}
@keyframes float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-62%)}}
.pill{position:relative;display:flex;align-items:center;gap:.4em;padding:.32em .85em .38em .5em;border-radius:999px;white-space:nowrap;
  background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 100%);
  box-shadow:0 0 0 .12em rgba(255,255,255,.9),0 0 1.1em var(--gl),0 0 2.2em var(--gl),0 .3em .5em rgba(40,10,80,.35),
             inset 0 .22em .1em rgba(255,255,255,.55),inset 0 -.25em .3em rgba(0,0,0,.18);
  transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.pill::before{content:"";position:absolute;inset:-.5em;border-radius:999px;background:radial-gradient(ellipse,var(--gl),transparent 70%);opacity:.6;z-index:-1;animation:halo 2.4s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.35;transform:scale(.95)}50%{opacity:.85;transform:scale(1.08)}}
.ico{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 35% 30%,#fff,#eef4ff 60%,#cfdcf5);box-shadow:inset 0 -.12em .2em rgba(0,0,0,.15),0 .1em .2em rgba(0,0,0,.2)}
.ico img{width:88%;height:88%;object-fit:contain}
.ico .em{font-family:var(--emoji);font-size:1.1em;line-height:1}
.nm{font-weight:900;line-height:1.35;text-shadow:0 .04em .14em rgba(0,0,0,.35)}
.lbl:hover .pill,.lbl:focus-visible .pill,.lbl.lit .pill{transform:scale(1.1)}
.lbl.locked .pill{filter:saturate(.75)}
.lk{position:absolute;top:-.55em;left:-.45em;width:1.35em;height:1.35em;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(#fff,#e9e3ff);box-shadow:0 .08em .2em rgba(0,0,0,.3);font-size:.85em}
.lk svg{width:70%;height:70%}
.tag{position:absolute;bottom:-1.05em;left:50%;transform:translateX(-50%);font-size:.6em;font-weight:900;color:#5a2a90;white-space:nowrap;
  background:#fff;border-radius:999px;padding:.05em .7em .15em;box-shadow:0 .1em .3em rgba(60,20,110,.35)}
.lbl.live .pill::after{content:"";position:absolute;inset:-.18em;border-radius:999px;border:.12em solid rgba(255,255,255,.9);animation:ring 1.8s ease-out infinite}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}

.banner{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;
  font-weight:900;color:#fff;font-size:min(5vw,3vh,26px);white-space:nowrap;padding:.25em .95em .35em;border-radius:999px;
  background:linear-gradient(180deg,rgba(150,110,240,.88),rgba(110,70,210,.88));box-shadow:0 0 0 .1em rgba(255,255,255,.8),0 .25em .8em rgba(60,20,110,.35);
  opacity:0;transition:opacity .6s}
body.hub .banner{opacity:1}
.hint{position:fixed;left:50%;bottom:9vh;transform:translateX(-50%);z-index:6;pointer-events:none;display:none;align-items:center;gap:14px;
  font-size:min(9vw,46px);color:#fff;text-shadow:0 0 10px rgba(60,20,110,.6);transition:opacity .6s}
body.hub .hint{display:flex}
.hint.gone{opacity:0}
.hint .hand{font-family:var(--emoji);animation:swipe 1.6s ease-in-out infinite}
@keyframes swipe{0%,100%{transform:translateX(-26px)}50%{transform:translateX(26px)}}
.hint .arr{font-weight:900}
.nav{position:fixed;top:50%;z-index:6;transform:translateY(-50%);width:min(12vw,56px);height:min(12vw,56px);border-radius:50%;border:0;cursor:pointer;
  font-size:min(8vw,38px);font-weight:900;line-height:1;color:#6a3cc0;background:rgba(255,255,255,.85);box-shadow:0 .2em .6em rgba(60,20,110,.3);
  display:none;transition:opacity .3s}
body.hub .nav{display:block}
.nav-l{left:8px}.nav-r{right:8px}
.nav.off{opacity:0;pointer-events:none}.nav.faint{opacity:.55}

/* ================= magic gate (true CSS 3D) ================= */
.gate-wrap{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,rgba(255,246,255,.10),rgba(70,40,140,.58) 78%);animation:fadeIn .35s ease both;
  --gw:min(84vw,46dvh,500px);--gh:calc(var(--gw) * 1.5);--P:calc(var(--gw) * 1.6);
  /* the doorway inside the arch image (fractions of the gate box) */
  --hx:.2;--hy:.208;--hw:.6;--hh:.70;--ad:9px;--th:calc(var(--gw) * .035)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.gate-cam{position:relative;width:var(--gw);height:var(--gh);perspective:var(--P);
  perspective-origin:calc((var(--hx) + var(--hw) / 2) * 100%) calc((var(--hy) + var(--hh) * .55) * 100%);
  animation:camIn .7s cubic-bezier(.2,1.35,.4,1) both}
@keyframes camIn{from{opacity:0;transform:translateY(14vh) scale(.55)}to{opacity:1;transform:none}}
.gate-rig,.gate3d{position:absolute;inset:0;transform-style:preserve-3d}
.gate3d{animation:gateSwing 1.15s cubic-bezier(.25,1.1,.35,1) both}
@keyframes gateSwing{from{transform:rotateY(-38deg) rotateX(8deg) translateZ(calc(var(--gw) * -.6))}to{transform:rotateY(-9deg) rotateX(2deg) translateZ(0)}}
.gate3d>*{position:absolute}
/* arch: the rendered frame + a few darker copies behind it = real thickness */
.arch,.arch-d{left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}
.arch{transform:translateZ(1px)}
.arch-d{filter:brightness(.8) saturate(1.15) hue-rotate(-8deg)}
/* the island behind the doors, pushed far back and scaled so it fills the doorway exactly */
.portal{left:calc(var(--hx) * 100%);top:calc(var(--hy) * 100%);width:calc(var(--hw) * 100%);height:calc(var(--hh) * 100%);
  border-radius:50% 50% 0 0/26% 26% 0 0;overflow:hidden;background:#fff6dc;-webkit-mask:linear-gradient(#000 78%,transparent 97%);mask:linear-gradient(#000 78%,transparent 97%);
  transform:translateZ(calc(var(--gw) * -.42)) scale(calc(1 + .42 / 1.6))}
.portal-img{position:absolute;inset:-6%;background-repeat:no-repeat;transform:scale(1.15);transition:transform 2.6s cubic-bezier(.3,0,.2,1)}
.portal-sun{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 64%,#fff 0,rgba(255,252,225,.8) 12%,rgba(255,240,200,.25) 40%,rgba(255,255,255,0) 66%);opacity:.85}
.rays{position:absolute;left:50%;top:60%;width:260%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,235,.75) 0 6deg,rgba(255,255,235,0) 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 8%,transparent 60%);mask:radial-gradient(circle,#000 8%,transparent 60%)}
.doorway{left:calc(var(--hx) * 100%);top:calc(var(--hy) * 100%);width:calc(var(--hw) * 100%);height:calc(var(--hh) * 100%);
  transform-style:preserve-3d;transform:translateZ(calc(var(--ad) * -1 - 1px))}
.door{position:absolute;top:0;width:50.4%;height:100%;transform-style:preserve-3d;transition:transform 1.35s cubic-bezier(.5,.02,.18,1)}
.door-l{left:0;transform-origin:0 50%}
.door-r{right:0;transform-origin:100% 50%}
.door i{position:absolute;display:block}
.face{inset:0;background-image:var(--doorimg);background-size:200% 100%;background-repeat:no-repeat}
.door-l .face{background-position:0 0}.door-r .face{background-position:100% 0}
.door-l .face,.door-l .shade,.door-l .back{border-top-left-radius:42% 16%}
.door-r .face,.door-r .shade,.door-r .back{border-top-right-radius:42% 16%}
.shade{inset:0;opacity:0;transition:opacity 1.35s ease}
.door-l .shade{background:linear-gradient(90deg,rgba(45,20,90,.55),rgba(80,40,120,.25) 55%,rgba(255,236,170,.35))}
.door-r .shade{background:linear-gradient(270deg,rgba(45,20,90,.55),rgba(80,40,120,.25) 55%,rgba(255,236,170,.35))}
.edge{top:0;bottom:0;width:var(--th);background:linear-gradient(180deg,#fff6fb,#f7c6dc 45%,#c99ad8)}
.door-l .edge{right:0;transform-origin:100% 50%;transform:rotateY(-90deg)}
.door-r .edge{left:0;transform-origin:0 50%;transform:rotateY(90deg)}
.back{inset:0;transform:translateZ(calc(var(--th) * -1));background:linear-gradient(90deg,rgba(70,35,110,.45),rgba(255,220,150,.15)),var(--doorimg);background-size:100% 100%,200% 100%;background-repeat:no-repeat}
.door-l .back{background-position:0 0,0 0}.door-r .back{background-position:0 0,100% 0}
.seam{left:50%;top:4%;bottom:0;width:6%;transform:translateX(-50%) translateZ(1px);opacity:0;
  background:linear-gradient(90deg,rgba(255,255,230,0),#fffef2 45%,#fff 50%,#fffef2 55%,rgba(255,255,230,0));
  filter:blur(1px);box-shadow:0 0 18px 6px rgba(255,248,200,.9)}
.medal{left:50%;top:calc(var(--hy) * 100% - var(--gw) * .2);width:calc(var(--gw) * .2);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  transform:translateX(-50%) translateZ(6px);background:radial-gradient(circle at 35% 30%,#fff,#fff3fa 55%,#f6c9e0);
  box-shadow:0 0 0 calc(var(--gw) * .012) #ffd3e6,0 .25em .7em rgba(90,40,110,.3),0 0 1.4em rgba(255,220,240,.95)}
.medal img{width:76%;height:76%;object-fit:contain}
.medal .em{font-family:var(--emoji);font-size:calc(var(--gw) * .1)}
.lock3d{left:50%;top:calc((var(--hy) + var(--hh) * .42) * 100%);width:calc(var(--gw) * .3);margin-left:calc(var(--gw) * -.15);display:none;
  transform-origin:50% 8%;filter:drop-shadow(0 .5em .6em rgba(40,10,60,.45))}
.spill{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse 38% 34% at 50% 50%,rgba(255,250,215,.95),rgba(255,236,180,.45) 45%,rgba(255,255,255,0) 75%),
             repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,248,210,.32) 0 4deg,rgba(255,248,210,0) 4deg 15deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 10%,transparent 70%);mask:radial-gradient(circle at 50% 50%,#000 10%,transparent 70%)}
.gate-text{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;margin-top:calc(var(--gw) * -.05)}
.ribbon{position:relative;font-weight:900;color:#fff;font-size:calc(var(--gw) * .085);white-space:nowrap;
  padding:.2em 1em .32em;border-radius:.5em;background:linear-gradient(180deg,#a77bff,#7246e0);
  box-shadow:0 0 0 .08em #fff,0 .25em .6em rgba(40,10,90,.4),0 0 1.2em rgba(200,160,255,.7);animation:gTitleIn .6s .25s cubic-bezier(.2,1.4,.4,1) both}
.soon{display:none;margin-top:.4em;font-weight:900;color:#fff;font-size:calc(var(--gw) * .11);text-shadow:0 0 .3em rgba(255,140,220,.95),0 0 .7em rgba(150,110,255,.8)}
@keyframes gTitleIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.gate-x{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;z-index:6;
  font-size:24px;font-weight:900;color:#6a3cc0;background:rgba(255,255,255,.9);display:none}
.gate-flash{position:absolute;inset:0;background:radial-gradient(circle,#fff,#fffbe8 40%,#fff4fb);opacity:0;pointer-events:none;z-index:5}
.burst{position:absolute;inset:0;pointer-events:none;z-index:4}
.bp{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff,var(--pc) 45%,rgba(255,255,255,0) 70%);
  animation:bp 1.1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes bp{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.4);opacity:0}}
.star{position:absolute;font-size:18px;color:#fff6b0;text-shadow:0 0 8px #fff;animation:bp 1.3s ease-out forwards}

/* states: glow -> open -> through */
.gate-wrap.seamlit .seam{opacity:1;transition:opacity .35s ease}
.gate-wrap.open .seam{opacity:0;transition:opacity .5s .2s ease}
.gate-wrap.open .door-l{transform:rotateY(-105deg)}
.gate-wrap.open .door-r{transform:rotateY(105deg)}
.gate-wrap.open .shade{opacity:1}
.gate-wrap.open .portal-img{transform:scale(1.32)}
.gate-wrap.open .rays{animation:rays 3s ease-out forwards}
.gate-wrap.open .spill{opacity:.7;transition:opacity .9s .25s ease}
@keyframes rays{0%{opacity:0;transform:translate(-50%,-50%) rotate(0)}30%{opacity:1}100%{opacity:.9;transform:translate(-50%,-50%) rotate(40deg)}}
.gate-wrap.open .spill{animation:spillTurn 4s linear}
@keyframes spillTurn{to{transform:rotate(12deg)}}
.gate-rig{transition:transform 1.25s cubic-bezier(.45,0,.75,.55)}
.gate-wrap.through .gate-rig{transform:translateZ(calc(var(--gw) * 1.5)) rotateY(9deg)}
.gate-wrap.through .gate-text{opacity:0;transition:opacity .3s ease}
.gate-wrap.leave .gate-flash{opacity:1;transition:opacity .4s ease}
.gate-wrap.locked .lock3d{display:block;animation:lockSwing 1.6s .45s ease-in-out both}
.gate-wrap.locked .soon{display:block;animation:gTitleIn .6s .5s cubic-bezier(.2,1.4,.4,1) both}
.gate-wrap.locked .door-l{animation:rattleL .9s .6s ease-in-out both}
.gate-wrap.locked .door-r{animation:rattleR .9s .6s ease-in-out both}
.gate-wrap.locked .gate-x{display:block}
.gate-wrap.bye .gate-cam{animation:none;opacity:0;transform:scale(.6) translateY(10vh);transition:transform .45s ease-in,opacity .4s ease-in}
.gate-wrap.bye .gate-text{opacity:0;transition:opacity .3s ease}
@keyframes rattleL{0%,100%{transform:rotateY(0)}12%{transform:rotateY(9deg)}26%{transform:rotateY(1deg)}40%{transform:rotateY(7deg)}54%{transform:rotateY(0)}70%{transform:rotateY(4deg)}85%{transform:rotateY(0)}}
@keyframes rattleR{0%,100%{transform:rotateY(0)}12%{transform:rotateY(-9deg)}26%{transform:rotateY(-1deg)}40%{transform:rotateY(-7deg)}54%{transform:rotateY(0)}70%{transform:rotateY(-4deg)}85%{transform:rotateY(0)}}
@keyframes lockSwing{0%{transform:translateZ(calc(var(--gw) * .08)) scale(.3) rotate(0);opacity:0}22%{transform:translateZ(calc(var(--gw) * .08)) scale(1.12) rotate(0);opacity:1}
  40%{transform:translateZ(calc(var(--gw) * .08)) rotate(16deg)}58%{transform:translateZ(calc(var(--gw) * .08)) rotate(-12deg)}74%{transform:translateZ(calc(var(--gw) * .08)) rotate(7deg)}
  88%{transform:translateZ(calc(var(--gw) * .08)) rotate(-3deg)}100%{transform:translateZ(calc(var(--gw) * .08)) rotate(0)}}
body.zoom .track{transition:transform 2.4s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.gate3d{animation:none}}
.noscript{position:fixed;inset:auto 0 40% 0;text-align:center;font-size:28px;z-index:40}
@media (prefers-reduced-motion:reduce){.intro-bg,.al,.start,.lbl{animation:none}}

/* ================= island show: the whole island from a distance (v9) ================= */
.show{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(ellipse 70% 45% at 50% 54%,rgba(255,251,236,.95) 0,rgba(255,236,250,.55) 45%,rgba(255,255,255,0) 75%),
    linear-gradient(180deg,#9fc2f4 0%,#c3b6f4 34%,#f3cbe6 70%,#ffe3ec 100%);transition:opacity .75s ease}
.gate-wrap.show-on .show{opacity:1}
.show-rays{position:absolute;left:50%;top:54%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;opacity:0;will-change:transform;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.34) 0 5deg,rgba(255,255,255,0) 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.55) 25%,transparent 60%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.55) 25%,transparent 60%)}
.gate-wrap.show-on .show-rays{animation:showRays 14s linear infinite,showFade 1.2s .2s ease forwards}
@keyframes showRays{to{transform:rotate(360deg)}}
@keyframes showFade{to{opacity:1}}
.show-glow{position:absolute;left:50%;top:54%;width:96vmin;height:96vmin;margin:-48vmin 0 0 -48vmin;border-radius:50%;
  background:radial-gradient(circle,#fff 0,var(--gc) 26%,rgba(255,255,255,0) 66%);opacity:.55;will-change:transform,opacity}
.gate-wrap.show-on .show-glow{animation:showGlow 2.4s ease-in-out infinite alternate}
@keyframes showGlow{from{transform:scale(.92);opacity:.42}to{transform:scale(1.08);opacity:.7}}
.show-float{position:absolute;inset:0}
.gate-wrap.show-on .show-float{animation:showBob 2.8s ease-in-out infinite alternate}
@keyframes showBob{from{transform:translateY(-.7vmin)}to{transform:translateY(.7vmin)}}
.show-box{position:absolute;background-repeat:no-repeat;transform:scale(.76);transform-origin:50% 50%;
  -webkit-mask:radial-gradient(closest-side,#000 70%,transparent 100%);mask:radial-gradient(closest-side,#000 70%,transparent 100%);
  will-change:transform}
.gate-wrap.show-on .show-box{animation:showPush 4.4s cubic-bezier(.2,.65,.3,1) forwards}
@keyframes showPush{from{transform:scale(.76)}to{transform:scale(1)}}
.show-sparks{position:absolute;inset:0}
.show-sparks .tw{position:absolute;width:9px;height:9px;margin:-4px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 8px 3px rgba(255,250,210,.95),0 0 18px 6px rgba(255,200,240,.6);animation:twk 2s ease-in-out infinite}
.show-sparks .tw.star{width:auto;height:auto;background:none;box-shadow:none;color:#fff8c4;font-size:22px;line-height:1;
  text-shadow:0 0 8px #fff,0 0 16px rgba(255,190,240,.95)}
@keyframes twk{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
.show-cloud{position:absolute;width:70vmin;height:34vmin;border-radius:50%;opacity:0;will-change:transform;
  background:radial-gradient(ellipse at 50% 60%,#fff 0,rgba(255,255,255,.9) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 70%)}
.sc1{left:-22vmin;bottom:-10vmin}.sc2{right:-24vmin;bottom:-6vmin}.sc3{left:30%;bottom:-18vmin;width:80vmin}
.gate-wrap.show-on .sc1{animation:cloudL 4.4s cubic-bezier(.2,.65,.3,1) forwards}
.gate-wrap.show-on .sc2{animation:cloudR 4.4s cubic-bezier(.2,.65,.3,1) forwards}
.gate-wrap.show-on .sc3{animation:cloudB 4.4s cubic-bezier(.2,.65,.3,1) forwards}
@keyframes cloudL{0%{opacity:.95;transform:translate(26vmin,-6vmin) scale(1.3)}100%{opacity:.9;transform:none}}
@keyframes cloudR{0%{opacity:.95;transform:translate(-26vmin,-8vmin) scale(1.3)}100%{opacity:.9;transform:none}}
@keyframes cloudB{0%{opacity:.9;transform:translateY(-10vmin) scale(1.4)}100%{opacity:.85;transform:none}}
.show-name{position:absolute;left:50%;top:max(7vh,calc(env(safe-area-inset-top) + 18px));transform:translateX(-50%);white-space:nowrap;
  font-weight:900;color:#fff;font-size:min(9vw,52px);padding:.16em .9em .3em;border-radius:.55em;opacity:0;
  background:linear-gradient(180deg,#a77bff,#7246e0);box-shadow:0 0 0 .08em #fff,0 .25em .6em rgba(40,10,90,.35),0 0 1.4em rgba(220,180,255,.85)}
.gate-wrap.show-on .show-name{animation:showName .7s .45s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes showName{from{opacity:0;transform:translateX(-50%) scale(.3)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.gate-wrap.show-on .show-box{animation:none;transform:none}.gate-wrap.show-on .show-rays{animation:showFade .5s forwards}}

/* southern-district credit badge — opening screen only (v13) */
.zahav-badge{position:absolute;z-index:2;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 12px 6px;border-radius:16px;background:#fff;
  box-shadow:0 4px 14px rgba(60,30,120,.28);pointer-events:none;animation:zbIn .9s .5s ease-out both}
@keyframes zbIn{from{opacity:0}to{opacity:1}}
.zahav-badge img{display:block;height:68px;width:auto}
.zahav-badge span{font-size:12px;font-weight:800;line-height:1.2;color:#1f3a7a;white-space:nowrap;direction:rtl}
@media (max-height:720px) and (orientation:portrait){.intro{padding-bottom:64px}.zahav-badge{bottom:calc(26px + env(safe-area-inset-bottom,0px));padding:5px 10px 4px}.zahav-badge img{height:46px}.zahav-badge span{font-size:11px}}
@media (orientation:landscape){.zahav-badge{left:auto;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:none;padding:5px 10px 4px;border-radius:13px}
  .zahav-badge img{height:50px}.zahav-badge span{font-size:11px}}
@media (orientation:landscape) and (min-height:600px){.zahav-badge{right:24px;bottom:24px;padding:8px 14px 7px}.zahav-badge img{height:72px}.zahav-badge span{font-size:14px}}
@media (prefers-reduced-motion:reduce){.zahav-badge{animation:none}}