/* Gelli Belle Basement Web Wipe V2.5 — reader-only procedural overlay. */
.web-wipe{position:absolute;inset:0;z-index:5;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto;transition:opacity .6s ease}
.web-wipe canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;pointer-events:auto}
.web-wipe-prompt{position:absolute;top:max(24px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:max-content;max-width:75vw;padding:9px 17px;border-radius:999px;border:1px solid #f8f2d077;background:#132d3dc5;box-shadow:0 6px 30px #08182755;font-size:clamp(12px,1.5vw,18px);font-weight:700;text-align:center;line-height:1.25;color:#fff4dc;pointer-events:none;text-shadow:0 1px 8px #0006}
.web-wipe-progress{position:absolute;bottom:max(76px,env(safe-area-inset-bottom) + 66px);left:50%;transform:translateX(-50%);white-space:nowrap;max-width:75vw;background:#102b3acb;border:1px solid #e8e6d05c;border-radius:999px;padding:8px 14px;color:#fcf5e5;font-size:clamp(11px,1.3vw,15px);font-weight:700;pointer-events:none}
.web-wipe.complete{opacity:0;pointer-events:none}
.web-wipe-prompt.pulse{animation:web-hint 1.2s ease-in-out 3}
@keyframes web-hint{50%{box-shadow:0 0 22px #f5d9aebc}}
@media(max-height:420px){.web-wipe-prompt{top:5px;padding:4px 12px;font-size:11px}.web-wipe-progress{bottom:42px;padding:5px 12px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.web-wipe.complete{transition:none}.web-wipe-prompt.pulse{animation:none}}

/* A small, non-interactive instruction near the lower left: no interference with wiping. */
.web-wipe-gesture-hint{position:absolute;left:clamp(12px,3vw,38px);bottom:max(85px,calc(env(safe-area-inset-bottom) + 68px));z-index:2;display:flex;align-items:center;gap:8px;max-width:min(290px,44vw);padding:10px 14px 10px 10px;background:rgba(12,32,48,.71);border:1px solid rgba(236,245,234,.48);border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 8px 24px rgba(0,0,0,.20);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;user-select:none;-webkit-user-select:none;color:#fff4dd;transform:translateY(0) scale(1);opacity:1;visibility:visible;transition:opacity .3s ease,transform .3s ease,visibility .3s}
.web-wipe-gesture-hint::after{content:"";position:absolute;inset:-3px;border-radius:20px;box-shadow:0 0 0 0 rgba(255,232,190,.22);animation:web-wipe-breathe 3.4s ease-in-out infinite;pointer-events:none}
.web-wipe-gesture-hint.is-hidden{opacity:0;visibility:hidden;transform:translateY(7px) scale(.97)}
.web-wipe-gesture-art{display:flex;align-items:center;gap:2px;color:#ffe8b8;flex:none}
.web-wipe-gesture-hand{filter:drop-shadow(0 1px 4px rgba(255,227,181,.2));animation:web-wipe-hand-swipe 3.4s ease-in-out infinite;transform-origin:50% 60%}
.web-wipe-gesture-arrow{opacity:.85;animation:web-wipe-arrow-sway 3.4s ease-in-out infinite}
.web-wipe-gesture-hint strong{font-size:clamp(12px,1.45vw,17px);font-weight:800;letter-spacing:.01em;line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.5);white-space:nowrap}
@keyframes web-wipe-breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,232,190,.08)}50%{box-shadow:0 0 15px 2px rgba(255,232,190,.3)}}
@keyframes web-wipe-hand-swipe{0%,18%,82%,100%{transform:translateX(0) rotate(-5deg)}42%{transform:translateX(9px) rotate(2deg)}60%{transform:translateX(-3px) rotate(-8deg)}}
@keyframes web-wipe-arrow-sway{0%,20%,80%,100%{opacity:.58;transform:scaleX(.94)}48%{opacity:1;transform:scaleX(1.04)}}
@media(max-height:430px){.web-wipe-gesture-hint{bottom:48px;left:12px;padding:5px 9px 5px 5px;gap:3px;border-radius:12px}.web-wipe-gesture-hand{width:29px;height:29px}.web-wipe-gesture-arrow{width:43px}.web-wipe-gesture-hint strong{font-size:11px}}
@media(max-width:540px){.web-wipe-gesture-hint{gap:4px;max-width:51vw;padding:6px 7px}.web-wipe-gesture-hand{width:26px;height:26px}.web-wipe-gesture-arrow{width:33px}.web-wipe-gesture-hint strong{font-size:11px;white-space:normal}}
@media(prefers-reduced-motion:reduce){.web-wipe-gesture-hand,.web-wipe-gesture-arrow,.web-wipe-gesture-hint::after{animation:none}}