/* The words stay on the front plane; only the preview recedes.
   1100 / (1100 + 58) preserves the approved depth without a 3D compositing
   boundary: WebKit shifts SVG-filtered descendants inside perspective layers. */
.direction-demo.touch-cover{position:relative;height:auto;aspect-ratio:var(--cover-aspect,403 / 620);overflow:hidden;isolation:isolate;background:transparent;border-radius:22px;container-type:inline-size}
.directions-grid .direction-demo.touch-cover{margin:0;border:0;padding:0}
.touch-background{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:scale(1);transform-origin:50% 50%;filter:blur(0);transition:transform 680ms cubic-bezier(.22,.75,.2,1),filter 680ms cubic-bezier(.22,.75,.2,1);border-radius:inherit;overflow:hidden}
/* Preview chrome must not refract/blur into a pale rim; live sites keep their borders. */
.touch-background>.world{height:100%;border:0;border-radius:inherit}
/* The editorial half-column must fit its longest word on narrow cards. */
.touch-background .world.u-a .ua-title h3{font-size:min(29px,7.5cqw)}
.touch-cover[data-active="true"] .touch-background{transform:scale(.9499136442);filter:blur(3px)}
.touch-entry{position:absolute;inset:0;z-index:5;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;color:#fff;cursor:pointer;touch-action:manipulation;overflow:hidden}
.touch-entry:focus-visible{outline:2px solid #fff;outline-offset:-7px}
.touch-shade{position:absolute;z-index:30;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 50% 51%,#0b1714a8,#07130f75);opacity:0;transition:opacity 680ms cubic-bezier(.22,.75,.2,1)}
.touch-invitation{position:absolute;inset:0;opacity:0;transition:opacity 500ms ease;pointer-events:none}
.touch-title{position:absolute;z-index:2;left:50%;top:44%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;max-width:calc(100% - 32px);padding:11px 18px;border:1px solid #ffffff29;border-radius:999px;background:linear-gradient(145deg,#ffffff0b,transparent 65%),#171b20ed;box-shadow:inset 0 1px 0 #ffffff17,0 6px 20px -8px #0008;backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);color:#f8fafc;font-family:Onest,Arial,sans-serif;font-size:clamp(15px,3.8cqw,17px);font-weight:450;line-height:1.25;letter-spacing:-.018em;text-align:center;text-shadow:none;white-space:nowrap}
.touch-cover[data-active="true"] .touch-shade,.touch-cover[data-active="true"] .touch-invitation{opacity:1}
.touch-emblem{position:absolute;width:120px;height:120px;left:calc(50% - 60px);top:calc(44% + 48px);transform:scale(.88);transform-origin:50% 33px}
.touch-hand{position:absolute;left:15px;top:20px;width:90px;height:90px;fill:#171b20f2;stroke:#f8fafc;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 1px #0009) drop-shadow(0 2px 3px #0006);transform-origin:55% 14%;animation:cover-touch 3400ms cubic-bezier(.4,0,.2,1) infinite;animation-play-state:paused}
/* Inner art scales about the exact fingertip; the outer gesture and wave contact stay fixed. */
.touch-hand-art{stroke-width:2.1}
.touch-hand-crease{fill:none;stroke-width:1;opacity:.36}
.touch-contact{position:absolute;left:55px;top:28px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 16px 4px #ffffff38;opacity:0;animation:cover-contact 3400ms ease infinite;animation-play-state:paused}
.touch-cover[data-running="true"] .touch-hand,.touch-cover[data-running="true"] .touch-contact{animation-play-state:running}
@keyframes cover-touch{0%,12%{transform:translate(3px,9px) rotate(-10deg);opacity:.72}25%,32%{transform:translate(0,0) rotate(-10deg) scale(.96);opacity:1}48%,100%{transform:translate(3px,9px) rotate(-10deg);opacity:.72}}
@keyframes cover-contact{0%,23%,45%,100%{opacity:0;transform:scale(.5)}29%{opacity:.8;transform:scale(1)}35%{opacity:.3;transform:scale(1.7)}}
@media(prefers-reduced-motion:reduce){.touch-background,.touch-shade,.touch-invitation{transition:none}.touch-cover[data-active="true"] .touch-background{transform:none;filter:blur(2px)}.touch-hand,.touch-contact{animation:none!important}.touch-contact{display:none}}
.reduced .touch-background,.reduced .touch-shade,.reduced .touch-invitation{transition:none}
.reduced .touch-cover[data-active="true"] .touch-background{transform:none;filter:blur(2px)}
.reduced .touch-hand,.reduced .touch-contact{animation:none!important}
.reduced .touch-wave,.reduced .touch-contact{display:none}
.touch-wave-canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}
.touch-wave-ready>.world{visibility:hidden}
.capture-covers .touch-background>.world{visibility:visible!important}
.capture-covers .touch-wave-canvas{display:none!important}