/* Local SVG masks add depth to components while the original backdrop stays still. */
.motion-section{position:relative;isolation:isolate}
.detail-surface{position:absolute;z-index:2;pointer-events:none;--dx:0px;--dy:0px}
.detail-svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.detail-part{opacity:0;transition:opacity .3s,filter .3s;transform-origin:center;pointer-events:none}
.detail-part.selected,.detail-part.hovered{opacity:1;filter:drop-shadow(0 0 4px #14b9f780)}
.detail-part.selected{transform:translate(var(--dx),var(--dy))}
.detail-part:nth-child(2n).selected{transform:translate(calc(var(--dx)*-.6),calc(var(--dy)*-.6))}
.detail-contour{fill:none;stroke:#42d9ff;stroke-width:1.3;stroke-opacity:.7;stroke-linecap:round;stroke-linejoin:round}
.detail-part.hovered .detail-contour{stroke:#00b6ff;stroke-width:2}
.detail-fibres{fill:none;stroke:#1dcfff;stroke-width:1.7;stroke-linecap:round;filter:drop-shadow(0 0 3px #10adff);opacity:0;transition:opacity .3s}
.detail-fibres path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s ease}
.detail-on .detail-fibres{opacity:.75}
.detail-on .detail-fibres path{stroke-dashoffset:0}
.detail-scan{stroke:#a8faff;stroke-width:3;opacity:0;filter:drop-shadow(0 0 5px #00c8ff)}
.detail-nfc{fill:none;stroke:#1ecbff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.detail-part.playing .detail-scan{animation:detail-scan 1.3s ease both}
.detail-part.playing .detail-nfc{animation:detail-nfc 1.3s ease both}
.detail-part.playing .detail-contour{animation:detail-charge 1.25s ease var(--delay,0ms) both}
/* The value-section highlights reuse the exact pixels in the backdrop. */
.value .detail-part.selected{transition-delay:0ms;transform:none!important;filter:none;opacity:.48;mix-blend-mode:screen}
.value .detail-part.hovered{transition-delay:0ms!important}
.value-scroll-linked .value-copy-motion{opacity:var(--copy-alpha,1)!important;translate:0 var(--copy-y,0px)!important;transition:none!important;will-change:opacity,translate}
.value-scroll-linked .detail-part{transform:none!important;filter:none;mix-blend-mode:screen;transition:filter .2s ease}
.value-scroll-linked .detail-part.scroll-lit{opacity:var(--scroll-alpha,0);translate:0 var(--scroll-y,0px);filter:blur(var(--scroll-blur,0px));transition:none;will-change:opacity,translate,filter}
.value-scroll-linked .detail-part .detail-contour,.value-scroll-linked .detail-scan{display:none}
.value-scroll-linked .detail-part.feature.scroll-lit{opacity:var(--scroll-alpha,.68)}
.value-scroll-linked .detail-part.feature.hovered{opacity:1;filter:brightness(1.18) saturate(1.2) drop-shadow(0 0 8px rgba(24,184,255,.48));mix-blend-mode:screen;translate:0 0;transition:filter .2s ease}
/* Extract and glow the illustration's own cyan pixels; no paths are drawn over it. */
#platform[data-native-lighting="true"] .detail-part{transform:none!important;}
#platform[data-native-lighting="true"] .detail-native-glow{opacity:0;mix-blend-mode:screen;clip-path:circle(0% at 18.6% 55%);}
#platform[data-native-lighting="true"] .detail-on .detail-native-glow{animation:platform-native-sweep 2.5s cubic-bezier(.18,.62,.24,1) forwards;}
@keyframes platform-native-sweep{
 0%{opacity:0;clip-path:circle(0% at 18.6% 55%)}
 8%{opacity:.42;clip-path:circle(5% at 18.6% 55%)}
 100%{opacity:.82;clip-path:circle(82% at 18.6% 55%)}
}
@keyframes detail-scan{0%{opacity:0;transform:translateY(-24px)}20%,80%{opacity:.9}100%{opacity:0;transform:translateY(24px)}}
@keyframes detail-nfc{0%{opacity:0;transform:scale(.6)}25%{opacity:.8}100%{opacity:0;transform:scale(1.7)}}
@keyframes detail-charge{0%{stroke-opacity:0}40%{stroke-opacity:1;stroke-width:3}100%{stroke-opacity:.5;stroke-width:1.3}}
.detail-hotspot{position:absolute;pointer-events:auto;border:0;background:transparent;padding:0;cursor:pointer;border-radius:12px;min-width:24px;min-height:24px}
.detail-marker{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:600 15px/1 Arial;background:#08273ed9;border:1px solid #66dbff;color:#c9f8ff;box-shadow:0 0 0 3px #25bcff13,0 3px 10px #083a6530;opacity:0;transform:scale(.85);transition:opacity .25s,transform .25s}
.detail-power .detail-marker{opacity:.9;transform:none}
#mobile .detail-surface .mobile-webapp-link{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 4px;border:1px solid rgba(114,218,255,.85);border-radius:6px;background:linear-gradient(180deg,#168fff,#0879ed);box-shadow:0 3px 10px rgba(0,113,236,.24);color:#f8fdff;font:800 clamp(6px,.55vw,10px)/1 Montserrat,sans-serif;letter-spacing:.01em;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.25);white-space:nowrap;cursor:pointer;pointer-events:auto;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
#mobile .detail-surface .mobile-webapp-link:before{content:"";position:absolute;inset:-8px;border-radius:12px}
#mobile .detail-surface .mobile-webapp-link:hover,#mobile .detail-surface .mobile-webapp-link:focus-visible{z-index:7;transform:scale(1.08);filter:brightness(1.16);box-shadow:0 0 0 2px rgba(114,218,255,.48),0 0 16px rgba(0,153,255,.75)}
#mobile .detail-surface .mobile-webapp-link:focus-visible{outline:2px solid #087fea;outline-offset:3px}
#mobile .detail-surface .mobile-webapp-link:active{transform:scale(.97);filter:brightness(1.22)}
#mobile .detail-part[data-part="2"].hovered{opacity:1;filter:drop-shadow(0 0 9px rgba(0,158,255,.62))}
#mobile .detail-part[data-part="5"].hovered{opacity:1;filter:drop-shadow(0 0 12px rgba(0,158,255,.7));mix-blend-mode:screen}
.detail-hotspot:hover .detail-marker,.detail-hotspot:focus-visible .detail-marker{opacity:1;transform:scale(1.08)}
.detail-hotspot:focus-visible{outline:none;background:transparent}
.detail-feature-hotspot .detail-marker{display:none}
.detail-feature-hotspot:focus-visible{outline:2px solid #72ddff;outline-offset:2px}
.detail-hotspot:focus-visible .detail-marker{outline:2px solid #008cdd;outline-offset:2px}
.detail-hotspot[aria-pressed=true] .detail-marker{background:#087ab8;color:#fff}
.detail-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.detail-fallback{display:none}
.motion-section > .container{position:relative;z-index:3;pointer-events:none}
.motion-section > .container a,.motion-section > .container button,.motion-section .module,.motion-section .mobile-use-case{pointer-events:auto}
.module-selected{border-color:#038fdf!important;box-shadow:0 0 0 2px #12b7ff55,0 12px 25px #078bdc22!important}
.module-selected .mi{filter:drop-shadow(0 0 5px #12b7ff55)}
.scroll-motion .scroll-item{opacity:1}
@media(prefers-reduced-motion:no-preference){
 .scroll-motion:not(.motion-visible) .scroll-item{opacity:0;translate:0 20px}
 .scroll-item{transition:opacity .65s ease var(--reveal-delay,0ms),translate .65s cubic-bezier(.2,.7,.3,1) var(--reveal-delay,0ms)}
 .motion-visible .scroll-item{opacity:1;translate:0 0}
 #platform.scroll-motion:not(.motion-visible) h2.scroll-item{clip-path:inset(0 100% 0 0)}
 #platform.scroll-motion h2.scroll-item{transition:opacity .72s ease var(--reveal-delay,0ms),translate .72s cubic-bezier(.2,.7,.3,1) var(--reveal-delay,0ms),clip-path .85s cubic-bezier(.2,.7,.3,1) var(--reveal-delay,0ms)}
 #platform.scroll-motion.motion-visible h2.scroll-item{clip-path:inset(0)}
 .live-control{transition:translate .22s,box-shadow .22s,filter .22s}
 .live-control:hover{translate:0 -2px;filter:brightness(1.08)}
 .live-control:active{translate:0 0}
}
@media(max-width:760px){
 .detail-hotspot{min-width:28px;min-height:28px}
 .detail-hotspot:not(.detail-power) .detail-marker{display:none}
 #mobile .detail-surface .mobile-webapp-link:before{inset:-14px}
 .detail-fallback-needed .detail-fallback{display:block;position:absolute;z-index:5;right:12px;bottom:32px;border:1px solid #3bb8e7;background:#073252;color:#e9fbff;padding:7px 11px;border-radius:18px;font:600 10px Montserrat,sans-serif;min-height:34px;cursor:pointer}
 .detail-compact .detail-hotspot{pointer-events:none}
 #modules.detail-compact .detail-surface{z-index:0}
}
@media(prefers-reduced-motion:reduce){
 .detail-part,.detail-fibres,.detail-fibres path,.detail-marker,.scroll-item,.live-control,.mobile-webapp-link{transition:none!important}
 .detail-part,.detail-part.selected,.detail-part.hovered{transform:none!important}
 .detail-part.playing *{animation:none!important}
 #mobile .detail-surface .mobile-webapp-link:hover,#mobile .detail-surface .mobile-webapp-link:active{transform:none!important}
 #platform .detail-native-glow{animation:none!important;clip-path:circle(82% at 18.6% 55%)!important}
 #platform .detail-on .detail-native-glow{opacity:.82!important}
 #platform h2.scroll-item{clip-path:none!important}
 .scroll-item{opacity:1!important;translate:none!important}
}


.motion-section{overflow:clip}
.motion-section{overflow:clip!important}

/* Rebuilt NFC info panel: sharp text over the artwork's original panel. */
#mobile .detail-surface .mobile-webapp-card{position:absolute;z-index:8;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;box-sizing:border-box;overflow:hidden;padding:clamp(5px,.48vw,9px) clamp(7px,.58vw,11px);border:1px solid rgba(93,204,255,.94);border-radius:clamp(8px,.75vw,14px);background:linear-gradient(145deg,rgba(7,43,72,.985),rgba(3,20,39,.99));box-shadow:0 0 0 1px rgba(0,145,255,.2),0 5px 15px rgba(0,24,52,.42),inset 0 1px 0 rgba(169,229,255,.18);color:#f5faff;pointer-events:auto;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease}
#mobile .detail-surface .mobile-webapp-card:hover,#mobile .detail-surface .mobile-webapp-card:focus-within{transform:translateY(-1px);filter:brightness(1.08);border-color:#8be3ff;box-shadow:0 0 0 2px rgba(73,192,255,.24),0 0 17px rgba(0,153,255,.38),inset 0 1px 0 rgba(190,239,255,.26)}
#mobile .mobile-webapp-title{display:block;width:100%;color:#fff;font:800 clamp(8px,.72vw,12px)/1.12 Montserrat,Arial,sans-serif;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.28)}
#mobile .mobile-webapp-description{display:block;width:100%;margin:3px 0 4px;color:#e2efff;font:500 clamp(7px,.66vw,10px)/1.2 Montserrat,Arial,sans-serif;letter-spacing:0;text-shadow:0 1px 2px rgba(0,0,0,.35)}
#mobile .webapp-copy-full{display:inline}
#mobile .webapp-copy-compact{display:none}
#mobile .detail-surface .mobile-webapp-link{position:relative;left:auto;top:auto;z-index:1;display:inline-flex;flex:0 0 auto;align-self:flex-start;align-items:center;justify-content:center;box-sizing:border-box;width:auto;height:auto;min-height:clamp(18px,1.45vw,25px);padding:0 clamp(7px,.65vw,12px);border:1px solid rgba(120,220,255,.88);border-radius:6px;background:linear-gradient(180deg,#168fff,#0879ed);box-shadow:0 3px 10px rgba(0,113,236,.24);color:#f8fdff;font:800 clamp(6px,.55vw,9px)/1 Montserrat,Arial,sans-serif;letter-spacing:.01em;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.25);white-space:nowrap;cursor:pointer;pointer-events:auto;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
#mobile .detail-surface .mobile-webapp-link:before{content:none}
#mobile .detail-surface .mobile-webapp-link:hover,#mobile .detail-surface .mobile-webapp-link:focus-visible{z-index:1;transform:translateY(-1px);filter:brightness(1.12);box-shadow:0 0 0 2px rgba(114,218,255,.35),0 0 12px rgba(0,153,255,.5)}
#mobile .detail-surface .mobile-webapp-link:focus-visible{outline:2px solid #87dfff;outline-offset:2px}
#mobile .detail-surface .mobile-webapp-link:active{transform:scale(.98);filter:brightness(1.18)}
@media(max-width:760px){
 #mobile .detail-surface .mobile-webapp-card{padding:4px 6px}
 #mobile .mobile-webapp-title{font-size:7px}
 #mobile .mobile-webapp-description{font-size:6px;line-height:1.1;margin:2px 0}
 #mobile .webapp-copy-full{display:none}
 #mobile .webapp-copy-compact{display:inline}
 #mobile .detail-surface .mobile-webapp-link{min-height:15px;font-size:6px;padding:0 6px}
}
@media(prefers-reduced-motion:reduce){
 #mobile .detail-surface .mobile-webapp-card,#mobile .detail-surface .mobile-webapp-link{transition:none!important}
 #mobile .detail-surface .mobile-webapp-card:hover,#mobile .detail-surface .mobile-webapp-card:focus-within{transform:none!important}
}
/* Keep the four baked value callouts crisp while their scroll reveal runs. */
.value-scroll-linked .detail-part.feature.scroll-lit:not(.hovered){filter:contrast(1.08) saturate(1.08)}