/* חזרה בזמן · האתר המקורי מ-2005 (גרסת HTML) – standalone styles, independent of the live site */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0d0508;color:#f3e7d0;font:15px/1.45 "Arial Hebrew",Arial,"Noto Sans Hebrew",Helvetica,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:#f2c96b}
a:focus-visible,button:focus-visible{outline:2px solid #ffd76a;outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;right:8px;top:-60px;background:#ffd76a;color:#000;padding:6px 10px;z-index:99}
.skip-link:focus{top:8px}
[hidden]{display:none!important}

/* archive bar */
.arc-bar{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between;padding:8px 16px;background:#1d0d15;border-bottom:1px solid #4a2a33;font-size:13px}
.arc-note{margin:0;color:#d9c6a5}
.arc-note strong{color:#ffd76a}
.arc-back{color:#ffd76a;font-weight:bold;text-decoration:none;white-space:nowrap}
.arc-back:hover{text-decoration:underline}

/* stage: 800x600, scaled on desktop */
.stage-wrap{--s:1;position:relative;width:100%;height:calc(600px * var(--s));overflow:hidden}
.stage{position:absolute;top:0;left:50%;width:800px;height:600px;margin-left:-400px;transform:scale(var(--s));transform-origin:top center;overflow:hidden;
  background:radial-gradient(ellipse 70% 45% at 45% 18%,#5a2c3c 0%,#3a1a27 45%,#1e0c14 100%);outline:none}
.bg{position:absolute;inset:0;pointer-events:none}
.bg::before{content:"";position:absolute;left:0;right:0;top:0;height:40px;background:linear-gradient(#2a1119,#1a0a10)}
.bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100px;background:linear-gradient(rgba(10,3,6,0),#0a0306 60%)}
/* clouds: the two cloud layers of the 2005 SWF (sprite 72: bitmaps 68 + 70, opposite drift, 66% alpha, top 289px of the stage) + a soft haze, with light parallax */
.sky{position:absolute;left:0;top:0;width:800px;height:289px;overflow:hidden;opacity:.82;filter:sepia(.7) hue-rotate(-40deg) saturate(1.5) contrast(1.5) brightness(1.45);-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.sky-l{position:absolute;inset:-16px -24px;will-change:transform;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.sky-l i{position:absolute;top:0;left:0;height:100%;width:4624px;background-repeat:repeat-x;background-size:2312px 100%;will-change:transform}
.sky-far i{background-image:url(../img/sky/sky-far.webp);animation:skyL 83.5s linear infinite}
.sky-near i{background-image:url(../img/sky/sky-near.webp);animation:skyR 83.5s linear infinite;mix-blend-mode:screen;opacity:.85}
.sky-haze i{width:100%;background:radial-gradient(ellipse 60% 70% at 40% 20%,rgba(150,90,120,.28),transparent 70%),radial-gradient(ellipse 50% 60% at 85% 40%,rgba(90,40,70,.25),transparent 70%);animation:haze 14s ease-in-out infinite alternate}
@keyframes skyL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2312px,0,0)}}
@keyframes skyR{from{transform:translate3d(-2312px,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes haze{from{opacity:.6;transform:translate3d(-20px,0,0)}to{opacity:1;transform:translate3d(20px,4px,0)}}
.bg-jewelry{position:absolute;left:0;top:200px;width:800px;height:369px;opacity:.55;filter:saturate(.9) brightness(.8)}

/* menu */
.menu{position:absolute;top:0;right:0;left:0;height:40px;z-index:20}
.menu-toggle{display:none}
.menu ul{display:flex;flex-direction:row;justify-content:space-between;list-style:none;margin:0;padding:8px 8px 0;gap:2px}
.menu a,.menu .dead{display:block;padding:3px 4px;font-weight:bold;font-size:16px;color:#f0d79a;text-decoration:none;white-space:nowrap;border-radius:2px}
.menu a:hover,.menu a[aria-current="page"]{background:rgba(255,215,106,.14);color:#fff}
.menu .ext::after{content:" ↗";font-size:11px}
.menu .dead{color:#7d6a58;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}

.logo{position:absolute;left:40px;top:110px;width:242px;z-index:2}
.iandi{position:absolute;left:12px;bottom:8px;width:54px;z-index:15;display:block}
.iandi img{display:block;width:54px;height:auto}

.sec{position:absolute;inset:40px 0 0 0;z-index:5}
.panel{position:absolute;background:rgba(18,7,11,.78);border:1px solid rgba(240,215,154,.18);border-radius:8px;padding:14px 18px;color:#f3e7d0}
.panel h2,.panel h3{margin:0 0 8px;color:#ffe9b0;font-size:20px}
.panel h2 small,.panel h3 small{font-size:13px;color:#c9b38a;font-weight:normal}
.panel p{margin:0 0 10px}
.scroll{overflow-y:auto;scrollbar-color:#c9a64a #2a1119;scrollbar-width:thin}
.hint{position:absolute;font-size:12px;color:#e8d6b0;margin:0}
.arc-small{font-size:12px;color:#b9a68a}
.today{font-size:13px;color:#d9c6a5;margin-top:8px}

/* rashi */
.lion{position:absolute;left:28px;bottom:80px;width:200px;z-index:3}
.hero{position:absolute;bottom:0;z-index:4}
.hero-home{right:0;width:330px}
.news{right:330px;top:150px;width:290px;font-size:14px;font-weight:bold;text-align:right}
.news p{margin:0 0 12px}
.locotv{position:absolute;left:250px;bottom:20px;width:84px;text-align:center;color:#fff;text-decoration:none;font-size:11px;font-weight:bold;z-index:6}
.locotv img{display:block;width:84px;height:auto}
.locotv span{position:absolute;left:8px;right:8px;top:26px}

/* toor */
.hero-toor{left:0;width:330px}
.col{right:24px;top:60px;width:430px;bottom:70px;font-size:14px}
.col .lead{font-weight:bold;color:#ffe9b0}

/* shows */
.hero-shows{right:40px;width:330px}
.shows{left:150px;top:60px;width:330px;font-size:14px}
.shows ul{list-style:none;margin:0;padding:0}
.shows li{padding:5px 0;border-bottom:1px solid rgba(240,215,154,.12);font-weight:bold}
.shows time{color:#ffd76a;font-variant-numeric:tabular-nums}

/* gallery */
.hero-gallery{right:0;width:300px}
.gal{right:290px;top:70px;width:360px;padding-bottom:10px}
.gal-grid{display:grid;grid-template-columns:repeat(3,98px);gap:8px;justify-content:center;list-style:none;margin:0;padding:0;min-height:164px}
.gal-grid button{display:block;padding:0;border:2px solid #fff;background:#000;cursor:zoom-in;width:98px;height:74px}
.gal-grid img{display:block;width:94px;height:70px;object-fit:cover}
.gal-grid button:hover{border-color:#ffd76a}
.gal-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;font-size:13px}
.arrow{width:30px;height:30px;border-radius:50%;border:1px solid #f0d79a;background:#2a1119;color:#ffd76a;font-size:20px;line-height:26px;cursor:pointer;padding:0}
.arrow:disabled{opacity:.35;cursor:default}
.gal .hint{position:static;text-align:center;margin-top:6px}

/* media */
.tvs{position:absolute;left:70px;right:70px;top:46px}
.tv-page{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 6px;list-style:none;margin:0;padding:0}
.tv{position:relative;display:block;aspect-ratio:195/142;background:url(../img/tv-retro.webp) center/100% 100% no-repeat;color:#fff;text-decoration:none}
.tv .scr{position:absolute;left:6%;width:66%;top:21%;height:64%;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;font-size:13px;font-weight:bold;line-height:1.25;border-radius:14px;
  background:radial-gradient(ellipse at 50% 40%,#3c3c3c,#0b0b0b 80%);text-shadow:0 1px 2px #000}
a.tv .scr::before{content:"▶";position:absolute;top:6px;right:9px;font-size:11px;color:#ffd76a}
a.tv:hover .scr{background:radial-gradient(ellipse at 50% 40%,#5a4320,#120b04 80%);color:#ffe9b0}
.tv.off .scr{color:#cfc2ad}
.tv-legend{position:absolute;right:16px;bottom:14px;margin:0;font-size:11px;color:#cdbb9a}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6a5b4b;vertical-align:middle}
.dot.on{background:#ffd76a}
.more{position:absolute;left:90px;bottom:38px;background:none;border:0;color:#fff;font:bold 13px/1 inherit;font-family:inherit;cursor:pointer;text-decoration:underline}

/* albums */
.cds{position:absolute;left:260px;top:70px;width:330px;height:300px}
.cd{position:absolute;padding:0;border:0;background:none;cursor:pointer;transition:transform .35s ease,left .35s ease,top .35s ease}
.cd img{display:block;width:250px;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.cd-front{left:0;top:90px;z-index:3}
.cd-back{left:100px;top:0;z-index:2}
.cd:hover{transform:translateY(-4px)}
.cd-hint{left:260px;top:385px;width:270px;text-align:center;line-height:1.4}
.tracks{right:20px;top:40px;width:250px;bottom:60px;font-size:12px;overflow-y:auto;overscroll-behavior:contain}
.tracks ol{margin:0 0 8px;padding:0 18px 0 0}
.tracks li{margin:0 0 3px}
.tracks li a,.tracks li b{font-weight:bold;color:#ffe0a0;text-decoration:none}
.tracks li a::after{content:" ▶";font-size:9px;color:#ffd76a}
.tracks li a:hover{text-decoration:underline}
.tracks li span{display:block;font-size:11px;color:#c9b38a}
.credits-line{font-size:11px;color:#c9b38a}
.album-links{font-size:12px}

/* bio */
.biotext{right:0;top:115px;width:440px;bottom:20px;font-size:13.5px;border-radius:0 0 0 18px}
.biotext ul{margin:0;padding:0 14px 0 0}
.biotext li{margin-bottom:6px}
.biotext b{color:#ffe9b0}
.idcard{position:absolute;left:80px;top:90px;margin:0;width:270px;text-align:center}
.idcard img{display:block;width:270px;height:auto;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.idcard figcaption{font-size:12px;color:#cdbb9a;margin-top:6px}

/* contact / credits / mi */
.hero-contact{left:0;width:330px}
.contact{right:60px;top:200px;width:330px;transform:rotate(-2deg);font-size:14px}
.contact .brand{font-weight:bold;color:#ffe9b0;letter-spacing:1px}
.contact ul{margin:0;padding:0 18px 0 0}
.popup{right:80px;top:150px;width:340px;background:rgba(40,48,70,.92);font-weight:bold}
.popup .sinay{color:#ffd76a}
.mi{right:60px;left:300px;width:auto}
.mi h3{font-size:16px;margin-top:8px}
.mi ul{margin:0 0 8px;padding:0 18px 0 0}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(5,2,3,.9);display:flex;align-items:center;justify-content:center;gap:10px;padding:16px}
.lightbox figure{margin:0;text-align:center;max-width:min(92vw,520px)}
.lightbox img{display:block;margin:0 auto;max-height:78vh;width:auto;border:4px solid #fff;background:#fff}
.lightbox figcaption{color:#e8d6b0;font-size:13px;margin-top:8px}
.lb-close{position:absolute;top:12px;left:12px;width:36px;height:36px;border-radius:50%;border:1px solid #fff;background:#000;color:#fff;font-weight:bold;cursor:pointer}
.lb-arrow{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid #f0d79a;background:#2a1119;color:#ffd76a;font-size:24px;cursor:pointer;padding:0}

/* footer CTAs */
.arc-foot{padding:16px;text-align:center;background:#14070c;border-top:1px solid #4a2a33}
.cta-title{margin:0 0 8px;color:#ffe9b0;font-weight:bold}
.ctas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;margin:0 0 10px;padding:0}
.ctas a{display:inline-block;padding:8px 14px;border-radius:18px;border:1px solid #c9a64a;color:#ffe9b0;text-decoration:none;font-weight:bold;font-size:14px}
.ctas a:hover{background:rgba(255,215,106,.12)}

/* no-JS: plain vertical document */
.no-js .stage-wrap{height:auto;overflow:visible}
.no-js .stage{position:relative;left:auto;margin:0 auto;transform:none;height:auto;width:min(800px,100%);overflow:visible;padding-top:40px}
.no-js .sec{position:relative;inset:auto}
.no-js .sec[hidden]{display:block!important}


/* ===== B: the 2005 experience (motion) ===== */
.arc-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tool{display:inline-block;padding:4px 10px;border-radius:14px;border:1px solid #6d5236;background:#24121a;color:#f0d79a;font:bold 12px/1.3 inherit;font-family:inherit;text-decoration:none;cursor:pointer}
.tool[aria-pressed="true"]{border-color:#ffd76a;color:#fff;background:#3a2412}
#musicBtn[aria-pressed="true"]::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ffd76a;margin-left:5px;animation:dotBeat .9s ease-in-out infinite}
@keyframes dotBeat{50%{transform:scale(.5);opacity:.5}}
.arc-back{padding:4px 12px;border:1px solid #ffd76a;border-radius:14px}
.orig{white-space:pre-wrap}
.bul{list-style:none;margin:0;padding:0}
.bul li{margin-bottom:6px}
.bul li::before{content:"·"}
.contact .now{margin-top:10px;padding-top:8px;border-top:1px dashed rgba(240,215,154,.3);font-size:13px}
.arc-final{color:#d9c6a5}

/* menu hover/press like the Flash buttons */
.menu a{transition:transform .14s ease,color .14s,background .14s,text-shadow .14s}
.menu a:hover{transform:translateY(-2px);text-shadow:0 0 8px rgba(255,215,106,.8)}
.menu a:active,.menu a.press{transform:translateY(1px) scale(.94);color:#ffd76a}
.tv,.cd,.gal-grid button,.arrow,.more,.locotv,.iandi{transition:transform .14s ease,filter .14s}
.tv:active,.gal-grid button:active,.arrow:active,.more:active{transform:scale(.95)}

/* idle loops */
.js .lion{animation:lionGlow 3.2s ease-in-out infinite}
@keyframes lionGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,200,80,0))}50%{filter:drop-shadow(0 0 14px rgba(255,200,80,.55))}}
.js .logo{animation:logoShine 4s ease-in-out infinite}
@keyframes logoShine{0%,100%{filter:brightness(1)}45%{filter:brightness(1.35) drop-shadow(0 0 6px rgba(255,230,160,.6))}55%{filter:brightness(1)}}
.js .bg-jewelry{animation:jewelPan 18s ease-in-out infinite alternate}
@keyframes jewelPan{from{transform:translateX(-10px) scale(1.02)}to{transform:translateX(10px) scale(1.02)}}
.js .iandi img{animation:iandiSpin 7s ease-in-out infinite}
@keyframes iandiSpin{0%,80%,100%{transform:rotateY(0)}90%{transform:rotateY(180deg)}}
.locotv img{animation:tvFlick 2.6s steps(1) infinite}
@keyframes tvFlick{0%,100%{opacity:1}7%{opacity:.75}9%{opacity:1}53%{opacity:.85}55%{opacity:1}}

/* retro TV: scanlines + flicker, CRT off/on on page change */
.tv .scr::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,rgba(255,255,255,.04) 2px 3px);animation:scrFlick 3.4s steps(1) infinite}
.tv-page li:nth-child(2n) .scr::after{animation-delay:-1.3s}
.tv-page li:nth-child(3n) .scr::after{animation-delay:-2.1s}
@keyframes scrFlick{0%,100%{opacity:.9}3%{opacity:.5}5%{opacity:.9}61%{opacity:.7}62%{opacity:.9}}
.tv-page.crt-on .scr{animation:crtOnSm .5s ease-out both}
.tv-page.crt-on li:nth-child(2) .scr{animation-delay:.05s}.tv-page.crt-on li:nth-child(3) .scr{animation-delay:.1s}
.tv-page.crt-on li:nth-child(4) .scr{animation-delay:.15s}.tv-page.crt-on li:nth-child(5) .scr{animation-delay:.2s}
.tv-page.crt-on li:nth-child(6) .scr{animation-delay:.25s}.tv-page.crt-on li:nth-child(n+7) .scr{animation-delay:.3s}
@keyframes crtOnSm{0%{transform:scale(1,.02);filter:brightness(4)}40%{transform:scale(1,.02);filter:brightness(4)}70%{transform:scale(1,1);filter:brightness(1.8)}100%{transform:none;filter:none}}

/* CD spin on swap */
.cds{perspective:900px}
.cd.spin{animation:cdSpin .7s cubic-bezier(.3,.7,.3,1)}
@keyframes cdSpin{0%{transform:rotateY(0) scale(.9)}60%{transform:rotateY(330deg) scale(1.05)}100%{transform:rotateY(360deg) scale(1)}}

/* gallery slide */
.gal-pages{overflow:hidden}
.gal-grid.slide-l{animation:slideL .38s ease-out}
.gal-grid.slide-r{animation:slideR .38s ease-out}
@keyframes slideL{from{transform:translateX(-60%);opacity:0}to{transform:none;opacity:1}}
@keyframes slideR{from{transform:translateX(60%);opacity:0}to{transform:none;opacity:1}}
.lightbox img.lb-in{animation:lbIn .3s ease-out}
@keyframes lbIn{from{transform:scale(.9);opacity:.2}to{transform:none;opacity:1}}

/* section transitions (desktop): wipe / slide / zoom, like the Flash frames */
.sec.out{display:block!important;z-index:4;pointer-events:none;animation:secOut .42s ease-in forwards}
@keyframes secOut{to{opacity:0}}
.sec.t-wipe{animation:tWipe .55s cubic-bezier(.4,.1,.2,1) both}
.sec.t-slide{animation:tSlide .5s cubic-bezier(.2,.8,.2,1) both}
.sec.t-zoom{animation:tZoom .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes tWipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes tSlide{from{transform:translateX(-70px);opacity:0}to{transform:none;opacity:1}}
@keyframes tZoom{from{transform:scale(1.12);opacity:0;filter:blur(3px)}to{transform:none;opacity:1;filter:none}}
.sec .hero{transition:none}
.sec.t-wipe .hero,.sec.t-slide .hero,.sec.t-zoom .hero{animation:heroIn .6s .08s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroIn{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.sec.t-wipe .panel,.sec.t-slide .panel,.sec.t-zoom .panel{animation:panelIn .45s .18s ease-out both}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.contact{transform:rotate(-2deg)}
.sec.t-wipe .contact,.sec.t-slide .contact,.sec.t-zoom .contact{animation:contactIn .5s .18s ease-out both}
@keyframes contactIn{from{opacity:0;transform:rotate(-8deg) scale(.9)}to{opacity:1;transform:rotate(-2deg)}}

/* boot: the 2005 intro (CRT power-on -> TV -> dancer + logo -> stage build-up) */
.intro{position:fixed;inset:0;z-index:100;background:#000;overflow:hidden}
.crt-line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#fff;box-shadow:0 0 24px 6px rgba(255,255,255,.8);opacity:0}
.intro.p0 .crt-line{animation:crtOnB .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes crtOnB{0%{opacity:1;transform:scaleX(0)}35%{opacity:1;transform:scaleX(1);height:2px}70%{opacity:1;top:0;margin-top:0;height:100%}100%{opacity:0;top:0;margin-top:0;height:100%}}
.intro-tv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;background:radial-gradient(ellipse at 50% 45%,#3a1a27,#0a0306 75%)}
.tv-box{position:relative;width:min(560px,86vw)}
.tv-box>img{display:block;width:100%;height:auto}
/* TV screen of 20.jpg: (199,52) (551,105) (551,347) (199,346) on 760x570 */
.tv-scr{position:absolute;left:26.18%;top:9.12%;width:46.32%;height:51.75%;clip-path:polygon(0 0,100% 18%,100% 100%,0 99.7%);background:#000;overflow:hidden}
.tv-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .22s linear}
.tv-scr img.on{opacity:1}
.tv-scr::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(rgba(0,0,0,.16) 0 1px,transparent 1px 3px),linear-gradient(160deg,rgba(255,255,255,.14),transparent 45%);pointer-events:none}
.intro.p1 .intro-tv{animation:fadeInB .45s ease both}
.intro.p2 .intro-tv{opacity:1;animation:fadeOutB .4s ease both}
@keyframes fadeInB{from{opacity:0}to{opacity:1}}
@keyframes fadeInOut{0%{opacity:0}20%,80%{opacity:1}100%{opacity:0}}
.intro-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2vw;opacity:0}
.intro.p2 .intro-in{opacity:1}
.intro-dance{width:auto;height:min(64vh,420px);opacity:0}
.intro-logo{width:min(420px,62vw);opacity:0}
.intro.p2 .intro-dance{animation:danceIn 1.6s cubic-bezier(.2,.8,.2,1) both}
.intro.p2 .intro-logo{animation:logoIn 1.4s .4s ease-out both}
@keyframes danceIn{0%{opacity:0;transform:translateX(-40vw) skewX(-8deg)}60%{opacity:1;transform:translateX(2vw) skewX(3deg)}100%{opacity:1;transform:none}}
@keyframes logoIn{0%{opacity:0;transform:scale(1.6);filter:blur(8px) brightness(2)}100%{opacity:1;transform:none;filter:none}}
.intro.p3 .intro-in{animation:fadeOutB .5s ease-in forwards}
@keyframes fadeOutB{to{opacity:0}}
.intro.out{animation:fadeOutB .45s ease-in forwards}
.intro-skip{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.4);border:1px solid #f0d79a;color:#ffe9b0;font:bold 14px/1 inherit;font-family:inherit;padding:9px 16px;border-radius:20px;cursor:pointer;z-index:2}
.intro-skip:hover{background:rgba(255,215,106,.16)}
/* stage build-up after the intro */
.build .bg-jewelry{animation:buildJewel .9s ease-out both}
@keyframes buildJewel{from{opacity:0;transform:translateY(60px)}to{opacity:.55;transform:none}}
.build .menu li{animation:menuDrop .35s cubic-bezier(.2,.8,.2,1.3) both}
.build .menu li:nth-child(1){animation-delay:.30s}.build .menu li:nth-child(2){animation-delay:.36s}.build .menu li:nth-child(3){animation-delay:.42s}
.build .menu li:nth-child(4){animation-delay:.48s}.build .menu li:nth-child(5){animation-delay:.54s}.build .menu li:nth-child(6){animation-delay:.60s}
.build .menu li:nth-child(7){animation-delay:.66s}.build .menu li:nth-child(8){animation-delay:.72s}.build .menu li:nth-child(9){animation-delay:.78s}
.build .menu li:nth-child(10){animation-delay:.84s}.build .menu li:nth-child(11){animation-delay:.90s}.build .menu li:nth-child(12){animation-delay:.96s}
@keyframes menuDrop{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
.build #rashi .lion{animation:lionBuild 1s .5s cubic-bezier(.2,.8,.2,1.2) both,lionGlow 3.2s 1.5s ease-in-out infinite}
@keyframes lionBuild{from{opacity:0;transform:scale(.4) translateY(60px)}to{opacity:1;transform:none}}
.build .logo{animation:logoBuild .9s .9s ease-out both,logoShine 4s 2s ease-in-out infinite}
@keyframes logoBuild{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.build #rashi .hero{animation:heroBuild .8s 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroBuild{from{opacity:0;transform:translateX(120px)}to{opacity:1;transform:none}}
.build #rashi .news{animation:panelIn .5s 1.6s ease-out both}
.build #rashi .locotv,.build .iandi{animation:panelIn .5s 1.8s ease-out both}

/* side banners of the 2011 site (main.html: loop2 left, loop1 right, 97x593 beside the 800x600 stage). Clickless. */
.bside{position:absolute;top:calc(3.5px * var(--s));width:calc(97px * var(--s));height:calc(593px * var(--s));overflow:hidden;background:#000;pointer-events:none;user-select:none}
.bside-l{right:calc(50% + 408px * var(--s))}
.bside-r{left:calc(50% + 408px * var(--s))}
.bside img{display:block;width:100%;height:100%;object-fit:fill}
.bstrip{display:none}

/* ===== mobile: vertical, fast, nothing over faces ===== */
@media (max-width:820px){
  .bside{display:none}
  .bstrip{display:block;padding:18px 12px 6px;text-align:center}
  .bstrip-t{margin:0 0 10px;font-size:13px;color:#cdbb9a}
  .bstrip-row{display:flex;justify-content:center;gap:6px;overflow-x:auto;pointer-events:none;user-select:none}
  .bstrip-row img{flex:0 0 auto;width:min(97px,calc((100vw - 48px) / 5));height:auto;aspect-ratio:97/593;background:#000;border-radius:3px}
  .stage-wrap{height:auto!important;overflow:visible}
  .stage{position:relative;left:auto;margin:0;width:100%;height:auto;min-height:70vh;transform:none!important;overflow:visible;padding:0 0 24px}
  .bg-jewelry{top:auto;bottom:0;height:auto;opacity:.25}
  .bg::before{display:none}
  .sky{width:100%;height:220px}
  .menu{position:sticky;top:0;height:auto;background:#1a0a10;border-bottom:1px solid #4a2a33}
  .menu-toggle{display:block;width:100%;padding:12px 16px;background:none;border:0;color:#ffe9b0;font:bold 16px/1 inherit;font-family:inherit;text-align:right;cursor:pointer}
  .menu-toggle::after{content:" ☰";float:left}
  .menu ul{display:none;flex-direction:column;padding:0 8px 10px;gap:0}
  .menu.open ul{display:flex}
  .menu a,.menu .dead{font-size:17px;padding:10px 8px;border-bottom:1px solid rgba(240,215,154,.08)}
  .logo{position:static;display:block;width:170px;margin:14px auto 4px}
  .iandi{position:static;display:block;margin:6px auto;width:54px}
  .sec{position:relative;inset:auto;padding:0 12px}
  .panel{position:relative!important;inset:auto!important;width:auto!important;transform:none!important;margin:10px 0;max-height:none;bottom:auto}
  .tracks{overflow:visible}
  .hero,.lion{position:relative;display:block;margin:0 auto;bottom:auto;left:auto;right:auto}
  .hero{width:min(260px,70vw)!important}
  .lion{width:120px;display:none}
  #rashi .lion{display:block}
  .locotv{position:relative;display:block;left:auto;bottom:auto;margin:6px auto}
  .tvs{position:relative;left:auto;right:auto;top:auto}
  .tv-page{grid-template-columns:repeat(2,1fr)}
  .tv-legend,.more{position:relative;left:auto;right:auto;bottom:auto;display:block;margin:8px auto;text-align:center}
  .cds{position:relative;left:auto;top:auto;margin:10px auto;width:300px;height:250px}
  .cd img{width:200px}
  .cd-front{left:10px;top:50px}.cd-back{left:90px;top:0}
  .cd-hint{position:static;text-align:center}
  .idcard{position:relative;left:auto;top:auto;margin:10px auto;width:200px}
  .idcard img{width:200px}
  .gal-grid{grid-template-columns:repeat(3,minmax(0,98px))}
  .lightbox{padding:8px;gap:4px}
  .lb-arrow{width:34px;height:34px}
  .arc-bar{font-size:12px;padding:8px 12px}
  .tool-flash{display:none}
  .sec.t-wipe,.sec.t-slide,.sec.t-zoom{animation:tSlideM .35s ease-out both}
  @keyframes tSlideM{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .sec.out{display:none!important}
  .js .bg-jewelry{animation:none}
  .intro-in{flex-direction:column;gap:8px}
  .intro-dance{height:min(42vh,300px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sky-l{transform:none!important}
}