/* SHIFT weird layer — shared by all pages (EN + /ar/). Bump ?v= on change. */
/* ==================================================================
   WEIRD LAYER — signature moments (hole intro, clone room, flyer, ears)
   ================================================================== */
:root{--wl-coral:#db5050;--wl-deep:#0d0c0c;--wl-grey:#a6a1a1;--wl-cream:#f0e8e0;--wl-earth:#221a15}

/* ----- 3.1 Rabbit Hole intro ----- */
#holeScroll{height:320vh;position:relative;background:var(--wl-deep)}
html.wl-seen #holeScroll{display:none}
#holeScene{position:sticky;top:0;height:100vh;overflow:hidden;
  background:radial-gradient(100vmin 100vmin at 50% 50%,#191210 0%,var(--wl-deep) 72%)}
/* body{overflow-x:hidden} breaks sticky, so the scene is pinned while the intro runs */
html.in-hole #holeScene{position:fixed;top:0;left:0;right:0;z-index:950;will-change:opacity}
html:not(.in-hole) #holeScroll{overflow:hidden}
.wl-tunnel{position:absolute;inset:0;display:grid;place-items:center;will-change:transform}
.wl-ring{position:absolute;border-radius:50%;border:2px solid rgba(70,52,40,.5);box-shadow:inset 0 0 80px rgba(0,0,0,.9)}
.wl-ring:nth-child(1){width:95vmin;height:95vmin;background:radial-gradient(circle,transparent 55%,#141010 100%)}
.wl-ring:nth-child(2){width:72vmin;height:72vmin;border-color:rgba(80,58,44,.45)}
.wl-ring:nth-child(3){width:52vmin;height:52vmin;border-color:rgba(90,64,48,.4)}
.wl-ring:nth-child(4){width:36vmin;height:36vmin;border-color:rgba(100,70,52,.35)}
.wl-opening{position:absolute;width:24vmin;height:24vmin;border-radius:50%;background:var(--wl-coral);
  display:grid;place-items:center;box-shadow:0 0 120px rgba(219,80,80,.55),inset 0 -14px 40px rgba(0,0,0,.35);
  will-change:transform,opacity}
.wl-opening svg{width:78%;height:auto;display:block}
/* photoreal hole art (approved pick) — sits over the CSS tunnel, which stays as fallback */
.wl-holeImgWrap{position:absolute;inset:0;overflow:hidden}
.wl-holeImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 47%;
  transform-origin:47% 38%;will-change:transform}
/* portrait phones use the vertical recomposition of the agreed art —
   origins target the rabbit's EYE (not the nose) so the climb ends eye-to-eye */
@media (orientation:portrait){
  .wl-holeImg{transform-origin:43% 24%;object-position:50% 36%}
}
.wl-dust{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(219,80,80,.65);animation:wlFall linear infinite}
@keyframes wlFall{from{transform:translateY(-10vh);opacity:0}15%{opacity:1}to{transform:translateY(105vh);opacity:0}}
.wl-holeText{position:absolute;top:12vh;left:0;right:0;text-align:center;padding:0 24px;will-change:opacity;z-index:2}
.wl-kicker{font-family:'Inter',sans-serif;direction:ltr;letter-spacing:.28em;font-size:clamp(.8rem,3.4vw,1rem);font-weight:700;color:var(--wl-coral);text-transform:uppercase}
.wl-holeText .wl-h{font-family:'Cairo','Inter',sans-serif;font-weight:800;font-size:clamp(1.4rem,5.5vw,2.4rem);margin-top:14px;color:var(--wl-cream);text-shadow:0 2px 14px rgba(0,0,0,.85)}
.wl-holeText .wl-kicker{text-shadow:0 1px 8px rgba(0,0,0,.9)}
.wl-hint{position:absolute;bottom:6vh;left:0;right:0;text-align:center;color:var(--wl-grey);
  font-size:.78rem;letter-spacing:.25em;animation:wlPulse 2s ease-in-out infinite;z-index:2}
@keyframes wlPulse{0%,100%{opacity:.35}50%{opacity:.9}}
#wlSkip{position:fixed;top:18px;inset-inline-end:18px;z-index:1600;background:rgba(23,22,22,.6);
  border:1px solid rgba(166,161,161,.35);color:var(--wl-grey);padding:10px 18px;border-radius:999px;
  font-family:inherit;font-size:.8rem;cursor:pointer;backdrop-filter:blur(6px);transition:.3s;min-height:44px}
#wlSkip:hover,#wlSkip:focus-visible{color:var(--wl-cream);border-color:var(--wl-coral)}
#wlSkip:focus-visible{outline:2px solid var(--wl-coral);outline-offset:2px}
html:not(.in-hole) #wlSkip{display:none}
html.in-hole .nav,html.in-hole .sticky-cta,html.in-hole .wa-float,
html.in-hole .annc,html.in-hole #langBtn,html.in-hole .lang-btn,html.in-hole .scroll-progress{opacity:0;pointer-events:none}
.nav,.sticky-cta,.wa-float,.annc,#langBtn,.lang-btn,.scroll-progress{transition-property:opacity,transform,box-shadow,background;transition-duration:.4s}
#wlEnter{display:none}
/* static (reduced-motion) variant: one screen, no scroll-jack */
html.wl-static #holeScroll{height:100vh}
html.wl-static #holeScene{position:relative;height:100vh}
html.wl-static .wl-dust{display:none}
html.wl-static .wl-hint{display:none}
html.wl-static #wlSkip{display:none}
html.wl-static #wlEnter{display:inline-block;position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);
  z-index:3;color:var(--wl-cream);background:rgba(23,22,22,.7);border:1px solid var(--wl-coral);
  padding:12px 26px;border-radius:999px;text-decoration:none;font-size:.9rem}

/* ----- 3.2 Clone Room ----- */
#cloneRoom{background:var(--wl-deep);padding:110px 0 0;overflow:hidden}
.wl-tag{font-family:'Inter',sans-serif;direction:ltr;color:var(--wl-grey);letter-spacing:.35em;font-size:.68rem;text-transform:uppercase;margin-bottom:14px}
html[dir="rtl"] .wl-tag{text-align:right}
.wl-cloneGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2.6vw,22px);max-width:640px;margin:56px auto 0}
.wl-clone{aspect-ratio:3/4;display:grid;place-items:center;cursor:pointer;border:none;background:transparent;
  padding:6%;border-radius:12px;transition:background .3s}
.wl-clone:focus-visible{outline:2px solid var(--wl-coral);outline-offset:2px}
.wl-clone svg{width:100%;height:100%;transition:transform .45s cubic-bezier(.34,1.4,.5,1)}
.wl-clone .front{display:none}
.wl-clone.awake{background:rgba(219,80,80,.07)}
.wl-clone.awake .back{display:none}
.wl-clone.awake .front{display:block;transform:scale(1.08)}
.wl-clone .back .earR{transform-origin:60% 100%}
.wl-clone.twitch .back .earR{animation:wlTwitch .7s ease}
@keyframes wlTwitch{0%,100%{transform:rotate(0)}30%{transform:rotate(2deg)}65%{transform:rotate(-1.4deg)}}
@media (prefers-reduced-motion:reduce){.wl-clone.twitch .back .earR{animation:none}}
.wl-band{position:relative;margin-top:80px;min-height:min(58vw,520px);display:flex;align-items:flex-end;justify-content:center}
.wl-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.wl-band::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--wl-deep) 0%,rgba(13,12,12,.1) 28%,rgba(13,12,12,.28) 58%,rgba(13,12,12,.97) 92%)}
.wl-punch{position:relative;z-index:2;text-align:center;padding:0 20px 7vh}
.wl-punch .wl-en{font-family:'Anton','Inter',sans-serif;direction:ltr;letter-spacing:.22em;
  font-size:clamp(.85rem,3vw,1.25rem);color:var(--wl-cream);text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.85)}
.wl-punch .wl-en b{color:var(--wl-coral);font-weight:400}
.wl-punch p{margin-top:12px;color:var(--wl-grey);font-weight:700;font-size:clamp(.95rem,3vw,1.15rem)}
/* mobile: text stays ON the band, bottom-anchored — band kept close to the
   art's native ratio so the full rabbit line-up stays in frame (zoomed out) */
@media (max-width:640px){
  .wl-band{min-height:56vw;margin-top:44px}
  .wl-cloneGrid{margin-top:36px}
  .wl-punch{padding:0 14px 12px}
  .wl-punch .wl-en{font-size:.68rem;letter-spacing:.13em}
  .wl-punch p{font-size:.78rem;margin-top:6px}
}

/* ----- 3.4 Missing-Flyer newsletter ----- */
.nl-form.wl-flyer{background:var(--wl-cream);border:none;border-radius:2px;padding:30px 24px 0;
  transform:rotate(-1.4deg);box-shadow:0 24px 60px rgba(0,0,0,.55);position:relative;color:#171616}
.nl-form.wl-flyer::before{content:'';position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:110px;height:28px;background:rgba(255,255,255,.28);border-inline:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 6px rgba(0,0,0,.18);backdrop-filter:blur(1px)}
.wl-missing{font-family:'Anton','Cairo',sans-serif;font-size:clamp(2.4rem,6vw,3.2rem);letter-spacing:.14em;
  text-align:center;color:#171616;line-height:1;direction:ltr}
.wl-mugwrap{position:relative;width:min(210px,58%);margin:18px auto 4px;border:2px solid #171616;overflow:hidden}
.wl-mugwrap img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.3) brightness(1.06)}
.wl-mugwrap::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(23,22,22,.5) 1px,transparent 1.45px);background-size:5px 5px;
  mix-blend-mode:overlay;pointer-events:none}
.wl-lines{font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;
  text-align:center;color:#453f3b;line-height:2.1;margin:10px 0 16px}
.wl-lines b{color:var(--wl-coral)}
.nl-form.wl-flyer .nl-title{color:#171616;text-align:center}
.nl-form.wl-flyer .nl-sub{color:#57504c;text-align:center;font-size:.85rem}
.nl-form.wl-flyer .finput{background:#fff;border:1.5px solid #171616;color:#171616;border-radius:0}
.nl-form.wl-flyer .finput::placeholder{color:#8a827c}
.nl-form.wl-flyer .finput:focus{border-color:var(--wl-coral);outline:none}
.nl-form.wl-flyer .btn-red{border-radius:0}
.wl-tabs{display:grid;grid-template-columns:repeat(5,1fr);margin-top:22px;border-top:1.5px dashed rgba(23,22,22,.45)}
.wl-tab{border-inline-start:1.5px dashed rgba(23,22,22,.35);padding:12px 2px 16px;font-family:'Inter',sans-serif;
  font-size:.52rem;letter-spacing:.05em;text-align:center;color:#57504c;text-transform:uppercase;
  transform-origin:top center;background:var(--wl-cream)}
.wl-tab:first-child{border-inline-start:none}
.wl-tab.tear{animation:wlTear 1s ease forwards}
@keyframes wlTear{25%{transform:rotate(5deg) translateY(3px)}100%{transform:rotate(22deg) translateY(80px);opacity:0}}
@media (prefers-reduced-motion:reduce){.wl-tab.tear{animation:none;opacity:0}}
.wl-got{display:none;text-align:center;font-weight:800;color:var(--wl-coral);padding:0 0 18px;font-size:1rem}
.wl-got.show{display:block}
/* base form styles for pages whose own CSS has none (the /ar/ static pages) */
.wl-flyer .finput{display:block;width:100%;padding:13px 14px;font-family:inherit;font-size:.95rem;margin-bottom:12px}
.wl-sub{color:var(--wl-grey);text-align:center;margin-top:26px}
.wl-flyer .btn-red{width:100%;text-align:center;cursor:pointer;border:none;font-family:inherit;font-size:1rem}

/* ----- 3.5 WhatsApp rabbit ears ----- */
.wa-float{width:64px;height:64px;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.wa-float:hover{transform:none;box-shadow:none}
.wl-ears{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wl-ear{position:absolute;bottom:-8px;width:19px;height:48px;background:var(--wl-coral);
  border-radius:11px 11px 0 0;transition:transform .3s ease}
.wl-ear::after{content:'';position:absolute;inset:7px 5px 12px;background:rgba(240,232,224,.35);border-radius:8px}
.wl-ear.l{left:11px;transform:rotate(-9deg)}
.wl-ear.r{right:11px;transform:rotate(9deg)}
.wa-float:hover .wl-ear.l,.wa-float:focus-visible .wl-ear.l{transform:rotate(-9deg) translateY(-8px)}
.wa-float:hover .wl-ear.r,.wa-float:focus-visible .wl-ear.r{transform:rotate(9deg) translateY(-8px)}
.wl-burrow{position:absolute;bottom:-4px;left:2px;right:2px;height:16px;border-radius:50%;
  background:#171616;border:1.5px solid rgba(219,80,80,.55);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.wl-wabadge{position:absolute;top:-2px;inset-inline-end:-4px;width:24px;height:24px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;color:#fff;box-shadow:0 4px 14px rgba(37,211,102,.5)}
.wl-wabadge svg{width:14px;height:14px}
.wl-tip{position:absolute;bottom:72px;inset-inline-end:0;background:#171616;color:var(--wl-cream);
  font-size:.8rem;font-weight:700;padding:9px 14px;border-radius:12px;white-space:nowrap;
  border:1px solid rgba(219,80,80,.45);opacity:0;pointer-events:none;transform:translateY(6px);transition:.25s}
.wa-float:hover .wl-tip,.wa-float:focus-visible .wl-tip{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .wl-dust,.wl-hint{animation:none}
  .wl-ear,.wl-tip{transition:none}
}
/* mobile corner: keep clear air between the ears, the language pill and the
   sticky register bar (they share the same corner zone on phones) */
@media (max-width:960px){
  .wa-float{bottom:168px}
  html[dir="rtl"] .wa-float{bottom:168px}
}

/* ==================================================================
   PHASE 2
   ================================================================== */

/* ----- 2.1 X-Ray curriculum (/workshop) ----- */
.wl-xray-wrap{display:grid;grid-template-columns:minmax(270px,400px) 1fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:52px}
@media(max-width:860px){.wl-xray-wrap{grid-template-columns:1fr}}
.wl-xray{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#131313;
  border:1px solid rgba(166,161,161,.18);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.wl-xray img{display:block;width:100%;height:auto}
.wl-xlabel{position:absolute;top:10px;left:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.58rem;letter-spacing:.18em;color:#9fc4d8;opacity:.9;text-transform:uppercase;direction:ltr;
  background:rgba(13,12,12,.55);padding:3px 7px;border-radius:4px}
.wl-hs{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;border:2px solid rgba(219,80,80,.65);background:rgba(219,80,80,.12);cursor:pointer;padding:0}
.wl-hs::after{content:'';position:absolute;inset:13px;border-radius:50%;background:var(--wl-coral);opacity:.85}
.wl-hs:focus-visible{outline:2px solid var(--wl-cream);outline-offset:2px}
.wl-hs[aria-expanded="true"]{background:rgba(219,80,80,.32);animation:wlPing 1.6s ease-out infinite}
@keyframes wlPing{0%{box-shadow:0 0 0 0 rgba(219,80,80,.5)}70%{box-shadow:0 0 0 14px rgba(219,80,80,0)}100%{box-shadow:0 0 0 0 rgba(219,80,80,0)}}
.wl-hs-name{position:absolute;top:46px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:.62rem;letter-spacing:.08em;color:#cfe4f0;background:rgba(13,12,12,.75);padding:3px 9px;
  border-radius:6px;pointer-events:none;opacity:0;transition:.2s;z-index:2}
.wl-hs:hover .wl-hs-name,.wl-hs:focus-visible .wl-hs-name,.wl-hs[aria-expanded="true"] .wl-hs-name{opacity:1}
/* ----- P2 · 3.6 community collage wall (homepage #skool) ----- */
.wl-collage{position:relative;overflow:hidden}
.wl-collage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.wl-collage::after{content:'';position:absolute;inset:0;background:rgba(10,10,10,.55);pointer-events:none}
.wl-collage .container,.wl-polaroids,.wl-collage-caption{position:relative;z-index:2}
.wl-polaroids{display:flex;gap:clamp(12px,2.4vw,28px);justify-content:center;flex-wrap:wrap;
  margin:46px auto 0;padding:0 20px;max-width:900px}
.wl-pol{background:#fff;padding:9px 9px 30px;box-shadow:0 14px 34px rgba(0,0,0,.55);position:relative;
  transform:rotate(var(--r,-3deg));transition:transform .3s ease;width:clamp(150px,24vw,230px)}
.wl-pol img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.92)}
.wl-pol::before{content:'';position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:80px;height:22px;background:rgba(240,232,224,.5);box-shadow:0 1px 4px rgba(0,0,0,.25);z-index:2}
.wl-pol span{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:.62rem;
  color:#57504c;letter-spacing:.06em;font-weight:700}
.wl-pol:hover{transform:rotate(0) translateY(-6px);z-index:3}
.wl-collage-caption{text-align:center;color:var(--wl-cream);margin-top:30px;font-weight:700;
  text-shadow:0 2px 10px rgba(0,0,0,.7);padding:0 20px}
@media (prefers-reduced-motion:reduce){.wl-pol{transition:none}}

/* homepage workshop-block poster: the rabbit-hole poster has type at every edge,
   so show it whole instead of cover-cropping it */
.ws-feat-vis img{object-fit:contain;object-position:center}
/* stacked layout: give the poster cell the poster's own 4:5 ratio so the art
   fills edge-to-edge with no side bands and no crop */
@media (max-width:960px){
  .ws-feat-vis{aspect-ratio:1/1;min-height:0}
}

/* ----- P2 · 3.5 global neon footer band ----- */
.wl-neon{position:relative;overflow:hidden;background:#0d0c0c;min-height:clamp(190px,26vw,340px);
  display:flex;align-items:flex-end;justify-content:center}
.wl-neon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:24% center}
.wl-neon::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(13,12,12,.35) 0%,transparent 35%,rgba(10,10,10,.88) 96%)}
.wl-neon-glow{position:absolute;top:0;bottom:34%;left:6%;width:46%;
  background:radial-gradient(52% 62% at 32% 36%,rgba(219,80,80,.3),transparent 72%);
  mix-blend-mode:screen;animation:wlFlicker 4s infinite;pointer-events:none}
@keyframes wlFlicker{0%,100%{opacity:1}3%{opacity:.5}5%{opacity:1}42%{opacity:.92}44%{opacity:.55}46%{opacity:1}83%{opacity:.85}85%{opacity:1}}
.wl-neon-line{position:relative;z-index:2;margin:0;padding:0 20px 20px;color:var(--wl-cream);
  font-weight:700;text-align:center;direction:rtl;text-shadow:0 2px 10px rgba(0,0,0,.85);font-size:.95rem}
@media (prefers-reduced-motion:reduce){.wl-neon-glow{animation:none}}

/* ----- P2 · 3.4 upside-down answer (/faq) ----- */
.wl-flip-band{position:relative;overflow:hidden;border-radius:10px;margin:6px 0 14px;min-height:200px;display:grid;place-items:center}
.wl-flip-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.wl-flip-band::after{content:'';position:absolute;inset:0;background:rgba(10,10,10,.5)}
.wl-flip-text{position:relative;z-index:2;transform:rotate(180deg);transition:transform .5s ease;
  padding:28px 22px;max-width:56ch;text-align:center;color:var(--wl-cream);font-weight:700;
  line-height:2;text-shadow:0 2px 8px rgba(0,0,0,.85)}
.wl-flip-text.up{transform:rotate(0)}
.wl-flip-btn{display:inline-block;background:transparent;border:1px solid var(--wl-coral);
  color:var(--wl-coral);border-radius:999px;padding:10px 22px;cursor:pointer;font:inherit;font-weight:700;transition:.25s}
.wl-flip-btn:hover,.wl-flip-btn:focus-visible{background:var(--wl-coral);color:#fff}
@media (prefers-reduced-motion:reduce){.wl-flip-text{transition:none}}

/* ----- P2 · 3.3 museum portraits (/about) ----- */
.wl-gallery{display:flex;flex-direction:column;gap:26px;align-items:center}
.wl-frame{--gold1:#b8933f;--gold2:#e6c876;--gold3:#7a5e1f;
  padding:10px;border:12px solid var(--gold1);outline:3px solid var(--gold3);
  box-shadow:inset 0 0 0 3px var(--gold2),0 18px 44px rgba(0,0,0,.6);
  background:#1c1218;position:relative;max-width:100%}
.wl-frame img{display:block;max-width:100%;height:auto}
.wl-plaque{margin:16px auto 0;width:max-content;max-width:90%;
  background:linear-gradient(180deg,#d9b45c,#a97f2f);color:#241a06;font-weight:700;
  letter-spacing:.16em;font-size:.6rem;padding:7px 16px;border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px rgba(0,0,0,.5);
  text-transform:uppercase;direction:ltr;text-align:center}
button.wl-frame{cursor:pointer;font:inherit}
.wl-frame.rabbit{width:min(240px,70%);transform:rotate(1.5deg);transition:transform .35s ease}
.wl-frame.rabbit:hover{transform:rotate(2.5deg)}
.wl-frame.rabbit.straight,.wl-frame.rabbit.straight:hover{transform:rotate(0)}
.wl-frame.rabbit:focus-visible{outline:3px solid var(--wl-coral)}
@media (prefers-reduced-motion:reduce){.wl-frame.rabbit{transition:none}}

/* ----- P2 · 3.2 laurel treatment (/festival) ----- */
.wl-stage{position:relative;overflow:hidden}
.wl-stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:.5}
.wl-stage-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.5) 0%,rgba(10,10,10,.86) 90%)}
.wl-stage .container{position:relative;z-index:2}
.wl-select{color:var(--wl-cream);letter-spacing:.42em;font-size:.66rem;text-transform:uppercase;
  margin-bottom:16px;direction:ltr;opacity:.85}
.wl-laurels{display:flex;gap:clamp(10px,2.4vw,20px);margin-bottom:24px}
.wl-laurel{width:clamp(36px,6vw,54px);height:auto;display:block}
.wl-laurel path{stroke:var(--wl-coral);fill:none;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.wl-laurels.draw .wl-laurel path{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s ease var(--d,0s)}
.wl-laurels .wl-laurel:nth-child(2) path{--d:.15s}
.wl-laurels .wl-laurel:nth-child(3) path{--d:.3s}
.wl-laurels .wl-laurel:nth-child(4) path{--d:.45s}
.wl-laurels .wl-laurel:nth-child(5) path{--d:.6s}
@media (prefers-reduced-motion:reduce){
  .wl-laurel path{stroke-dashoffset:0}
  .wl-laurels.draw .wl-laurel path{transition:none}
}
.wl-filmstrip{height:24px;background:#171616;position:relative;border:none}
.wl-filmstrip::before,.wl-filmstrip::after{content:'';position:absolute;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,rgba(240,232,224,.7) 0 8px,transparent 8px 20px)}
.wl-filmstrip::before{top:4px}
.wl-filmstrip::after{bottom:4px}

/* ----- P2 · 3.1 vending machine (/production) — reuses the hotspot/panel mechanic ----- */
.wl-slot{position:absolute;left:37%;top:76%;width:34px;height:48px;pointer-events:none;overflow:visible}
.wl-slot i{display:block;width:26px;height:40px;border-radius:6px;background:var(--wl-coral);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.5);opacity:0}
.wl-slot.pop i{animation:wlCanDrop .65s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes wlCanDrop{0%{transform:translateY(-340%);opacity:0}30%{opacity:1}80%{transform:translateY(6%)}100%{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.wl-slot.pop i{animation:none;opacity:1}}

/* JS-active: the server-rendered day list becomes the reveal panel (visibility toggling only) */
.xray-js .wl-xray-panel{display:block}
.xray-js .wl-xray-panel>*{display:none}
.xray-js .wl-xray-panel>.lit{display:block;opacity:1 !important;transform:none !important;animation:wlFadeIn .35s ease}
@keyframes wlFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .wl-hs[aria-expanded="true"]{animation:none}
  .xray-js .wl-xray-panel>.lit{animation:none}
}

/* ---- 3.9 SEPT CAMPAIGN ART · tilted poster cards + scroll interrupt ---- */
.wl-postcard{display:block;width:min(400px,90%);height:auto;margin:0 auto;border-radius:16px;
  transform:rotate(-1.6deg);transition:transform .35s ease;box-shadow:0 26px 70px rgba(0,0,0,.55)}
a:hover>.wl-postcard,.wl-postcard:hover{transform:rotate(0)}
.wl-postcard.wide{width:min(820px,94%);transform:rotate(-.8deg)}
@media (prefers-reduced-motion:reduce){.wl-postcard,.wl-postcard.wide{transform:none;transition:none}}
.wl-scrollbait{text-align:center}
.wl-scrollbait .wl-sb-cap{margin:26px auto 18px;font-size:1.05rem;max-width:560px;color:#9a9a9a}