/* Guided interaction layer for image-based portfolio walkthroughs. */
.folio-demo-loader{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;background:linear-gradient(145deg,#071b18,#113d32 65%,#0a2925);color:#f3f4f1;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease;pointer-events:none;text-align:center}
.is-loading>.folio-demo-loader{opacity:1;visibility:visible;pointer-events:auto}
.folio-loader-mark{font:34px Georgia,serif;color:#71d1c3;animation:folioLoaderBloom 1.2s ease-in-out infinite alternate}
.folio-loader-spinner{display:block;width:34px;height:34px;border-radius:50%;border:2px solid #ffffff36;border-top-color:#79d7c8;animation:folioLoaderSpin .85s linear infinite}
.folio-demo-loader strong{font:400 24px Georgia,serif;letter-spacing:-.03em}
.folio-demo-loader small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a6c9bd}
@keyframes folioLoaderSpin{to{transform:rotate(360deg)}}
@keyframes folioLoaderBloom{to{transform:scale(1.18) rotate(20deg);opacity:.65}}
.folio-app-screen{position:relative}
.folio-demo-hotspot{position:absolute;z-index:3;display:block;border:1px solid rgba(255,255,255,.55);border-radius:10px;background:rgba(255,255,255,.025);cursor:pointer;padding:0;box-shadow:0 0 0 3px rgba(2,184,181,.1);transition:background .2s,border-color .2s,box-shadow .2s}
.folio-demo-hotspot:after{content:"";position:absolute;right:5px;top:50%;width:10px;height:10px;transform:translateY(-50%);border-radius:50%;background:#02b8b5;border:2px solid white;box-shadow:0 0 0 4px rgba(2,184,181,.25);animation:folioTapPulse 2.2s ease-in-out infinite}
.folio-demo-hotspot:hover,.folio-demo-hotspot:focus-visible{background:rgba(2,184,181,.2);border-color:#02b8b5;box-shadow:0 0 0 4px rgba(2,184,181,.32);outline:0}
@keyframes folioTapPulse{50%{box-shadow:0 0 0 9px rgba(2,184,181,0)}}
.folio-demo-hint{display:block;text-align:center;padding:0 15px 18px;font-size:11px;letter-spacing:.035em;color:#a9d4c7;min-height:30px}
.folio-demo-hint.is-confirmed{color:#c8f7db}
.folio-web-demo-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid rgba(39,75,54,.2);padding:15px clamp(22px,3vw,58px);color:#456352;font-size:11px;letter-spacing:.055em}
.folio-web-demo-bar>div{display:flex;gap:6px}
.folio-web-demo-bar button{font:500 11px Arial,sans-serif;cursor:pointer;color:#274b3c;background:#f1f5ee;border:1px solid #afc6b7;border-radius:999px;padding:9px 14px;transition:.2s}
.folio-web-demo-bar button:hover,.folio-web-demo-bar button:focus-visible,.folio-web-demo-bar button.is-active{background:#113d32;color:#fff;border-color:#113d32}
.folio-web-scroll-button{position:absolute;right:13px;bottom:18px;z-index:6;border:1px solid #ffffff75;border-radius:999px;background:#113d32eb;color:#fff;padding:9px 12px;font:600 10px Arial,sans-serif;letter-spacing:.04em;cursor:pointer;box-shadow:0 7px 18px #061d1766}
.folio-web-scroll-button:hover,.folio-web-scroll-button:focus-visible{background:#02b8b5;color:#092723;outline:2px solid #fff}
.folio-controls .folio-autoplay-toggle{width:auto;height:37px;border-radius:999px;padding:0 14px;font-size:10px;letter-spacing:.06em;white-space:nowrap;min-width:78px}
@media(max-width:700px){.folio-web-demo-bar{align-items:flex-start;flex-direction:column}.folio-web-demo-bar button{padding:8px 12px}.folio-controls .folio-autoplay-toggle{min-width:36px;width:36px;height:36px;padding:0}.folio-autoplay-toggle span:last-child{display:none}.folio-demo-hint{font-size:10px}}
@media(max-width:420px){.folio-rail-head{flex-wrap:wrap;gap:10px}.folio-rail-head>span{max-width:100%}.folio-rail-head .folio-controls{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.folio-loader-spinner,.folio-loader-mark,.folio-demo-hotspot:after{animation:none}.folio-demo-loader{transition:none}}