/* Interaction study V2: no generic entrance transforms. */
.compare-stage{max-height:52dvh}
@media(max-height:650px){.experience-dialog{padding:14px!important}.experience-head{margin-bottom:12px!important}.experience-head h2{font-size:20px!important}.compare-stage{aspect-ratio:1.55!important}.compare-controls{margin-top:12px!important}.compare-bottom{margin-top:12px!important;gap:8px!important}}

[data-reveal]{transform:none;opacity:1}
.help-image img{transition:none}
.help-card:hover .help-image img{transform:none!important}
.case-pair{position:relative}
.case-open{position:absolute;inset:0;z-index:2;display:block;width:100%;border:0;border-radius:8px;background:transparent;color:#fff;cursor:zoom-in}
.case-open>span{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:14px;min-height:44px;padding:10px 17px;background:#142c44eb;border:1px solid #ffffff50;border-radius:999px;font-size:12px;font-weight:500;transition:background-color 200ms,box-shadow 200ms}
.case-open:hover>span,.case-open:focus-visible>span{background:#244f72;box-shadow:0 5px 20px #0003}
.case-open:focus-visible{outline:3px solid #a7c9e0;outline-offset:5px}
body:has(.experience-dialog[open]){overflow:hidden}
.experience-dialog{color:#f2f6f9;background:#102539;border:1px solid #ffffff2a;border-radius:18px;padding:28px;width:min(1000px,calc(100vw - 48px));max-height:calc(100dvh - 48px);overflow:auto;font-family:GiovanaHelp,Manrope,sans-serif;box-shadow:0 35px 100px #0005}
.experience-dialog::backdrop{background:#071521dc;backdrop-filter:blur(8px)}
.experience-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-bottom:22px}
.experience-head h2{font-size:clamp(23px,2.3vw,32px);font-weight:500;letter-spacing:-.8px;line-height:1.2;margin:0}
.experience-close,.case-arrow{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid #ffffff45;border-radius:50%;background:transparent;color:inherit;cursor:pointer;font-size:22px;transition:background 180ms}
.experience-close:hover,.case-arrow:hover{background:#ffffff17}
.compare-stage{--split:50%;position:relative;width:100%;aspect-ratio:1.55;background:#0b1b2a;border-radius:10px;overflow:hidden;isolation:isolate}
.compare-stage>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.compare-stage .compare-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:1}
.compare-caption{position:absolute;top:14px;left:14px;z-index:2;padding:6px 12px;border-radius:999px;background:#102539d9;font-size:12px;font-weight:500;pointer-events:none}
.compare-caption.is-after{left:auto;right:14px}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:#fff;z-index:3;pointer-events:none}
.compare-handle::before{content:'‹  ›';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff80;border-radius:50%;background:#102539e6;box-shadow:0 3px 18px #0004;font-size:22px;letter-spacing:2px}
.compare-stage input{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:4;cursor:ew-resize;opacity:0;touch-action:pan-y}
.compare-stage:has(input:focus-visible){outline:3px solid #a7c9e0;outline-offset:5px}
.compare-controls{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 0}
.compare-controls button{min-height:44px;min-width:90px;border:1px solid #ffffff30;border-radius:999px;background:transparent;padding:9px 15px;color:#d6e2ed;font:inherit;font-size:13px;cursor:pointer}
.compare-controls button[aria-pressed=true]{background:#e8f0f6;color:#17354e;border-color:#e8f0f6}
.compare-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.compare-hint{font-size:12px;color:#c2d2df;margin:0}
.case-pagination{display:flex;align-items:center;gap:14px;font-size:12px;color:#c2d2df}
.experience-dialog[open]{animation:experience-in 260ms cubic-bezier(.22,1,.36,1)}
@keyframes experience-in{from{opacity:.2;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:600px){
 .experience-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:18px;border-radius:14px}
 .experience-head{gap:12px;margin-bottom:18px}.experience-head h2{font-size:23px}
 .compare-stage{aspect-ratio:1.22}.compare-caption{top:9px;left:9px;font-size:11px;padding:5px 9px}.compare-caption.is-after{right:9px}
 .compare-controls{gap:6px}.compare-controls button{min-width:0;flex:1;padding:9px 8px;font-size:12px}
 .compare-bottom{flex-direction:column;gap:14px;margin-top:16px}.case-pagination{justify-content:space-between;width:100%}
 .compare-hint{font-size:11px}.case-open>span{padding:8px 14px}
}
@media(prefers-reduced-motion:reduce){.experience-dialog[open]{animation:none}}

.tour-open{position:absolute;top:12px;right:12px;min-height:44px;padding:10px 16px;border:1px solid #ffffff50;border-radius:999px;background:#102539da;color:#fff;font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:background 180ms}
.tour-open:hover{background:#244f72}
.tour-time{position:absolute;left:14px;bottom:16px;padding:6px 9px;border-radius:6px;background:#102539c9;color:#f4f7fa;font-size:11px;font-variant-numeric:tabular-nums;pointer-events:none}
.tour-progress{position:absolute;right:7px;bottom:7px;width:50px;height:50px;pointer-events:none;transform:rotate(-90deg)}
.tour-progress svg{display:block;width:100%;height:100%}.tour-progress circle{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.tour-dialog{width:min(500px,calc(100vw - 24px));padding:20px}.tour-dialog .experience-head{margin-bottom:16px}.tour-dialog .experience-head h2{font-size:23px}
.tour-film{display:block;margin:0 auto;width:auto;max-width:100%;height:min(68dvh,700px);aspect-ratio:9/16;object-fit:contain;background:#0b1b2a;border-radius:9px}

html:not([data-interactions]) .case-open,html:not([data-interactions]) .tour-open{display:none}