/* Tactile surfaces and motion, kept separate from the site's layout. */
.hero-art-link { position: relative; }
.hero-scene-canvas { position: absolute; top: 0; left: -8%; width: 125%; height: 100%; opacity: 0; transition: opacity .65s ease; pointer-events: none; }
.scene-ready .hero-scene-canvas { opacity: 1; }
.scene-ready .hero-art { opacity: 0; }
.scene-ready .hero-art-link { transform: none !important; }
.hero-art { transition: opacity .65s ease, transform .5s ease; }
.hero-bottom { position: relative; }
.hero-bottom .hero-languages { margin-left: auto; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 7px 12px; border: 1px solid #b6cfc1; border-radius: 8px; background: #f8fcf780; color: var(--teal); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:disabled { cursor: default; }
.motion-toggle:hover { background: #f8fcf7; }
.motion-symbol { width: 16px; height: 16px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.motion-symbol::before, .motion-symbol::after { content: ''; display: block; width: 3px; height: 11px; background: currentColor; border-radius: 1px; }
.motion-toggle[aria-checked=false] .motion-symbol::before { width: 0; height: 0; background: transparent; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; border-radius: 0; }
.motion-toggle[aria-checked=false] .motion-symbol::after { display: none; }

.topic-tabs { position: relative; isolation: isolate; }
.topic-tabs::before { content: ''; position: absolute; top: var(--tab-y, 0); left: 0; width: var(--tab-width, 0); height: var(--tab-height, 0); transform: translateX(var(--tab-x, 0)); background: var(--teal); border-radius: 10px; box-shadow: 0 4px 8px #0b5d5726, inset 0 1px 0 #ffffff30; transition: transform .45s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1); z-index: -1; }
.tabs-enhanced .topic-tab[aria-selected=true] { background: transparent; box-shadow: none; }
.topic-tab { transition: color .3s, background .3s; }
.topic-panel { --device-accent: #0b5d57; }
.topic-panel[data-topic=phone] { --device-accent: #a85234; }
.topic-panel[data-topic=wifi] { --device-accent: #3c7252; }
.topic-panel[data-topic=ai] { --device-accent: #176b74; }
.topic-panel[data-topic=safety] { --device-accent: #43632b; }
.topic-visual { perspective: 800px; background: radial-gradient(ellipse at 48% 38%, #ffffff 0, #edf4e9 62%, #e5eee2 100%); }
.device-node { background: linear-gradient(145deg, #fff 20%, #eff4e9 80%); box-shadow: inset 0 2px 1px #fff, inset 0 -6px 0 #dce6d6, inset -2px 0 2px #d5e3d4, 0 14px 0 -8px #bdd2be, 0 32px 34px -15px #244e3e40; transform: rotateX(10deg) rotateY(-12deg) rotateZ(-9deg); transition: box-shadow .5s, color .5s; }
.device-node .icon { color: var(--device-accent); filter: drop-shadow(0 2px 0 #fff); transition: color .4s; }
.device-node::after { content: ''; position: absolute; inset: 7px; border: 1px solid #ffffffd9; border-radius: 30px; pointer-events: none; }
.visual-orbit { border-style: solid; border-color: #b9cfbd80; transform: rotateX(22deg); }
.visual-orbit::before { content: ''; position: absolute; top: 50%; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--device-accent); box-shadow: 0 0 0 5px #0b5d5709; }
.orbit-two { border-color: #c8d9c866; }
.orbit-two::before { left: auto; right: -4px; width: 7px; height: 7px; background: var(--orange); box-shadow: none; }
.satellite { border: 1px solid #ffffff70; box-shadow: inset 0 1px 1px #ffffffc4, inset 0 -3px 0 #173a3715, 0 15px 20px -10px #244e3e38; }
.help-desk.in-view .device-node { animation: device-hover 6s ease-in-out infinite; }
.help-desk.in-view .visual-orbit { animation: orbit-turn 28s linear infinite; }
.help-desk.in-view .orbit-two { animation-duration: 40s; animation-direction: reverse; }
.help-desk.in-view .satellite-check { animation: satellite-hover 5s ease-in-out infinite; }
.help-desk.in-view .satellite-cursor { animation: satellite-hover 6s -2s ease-in-out infinite reverse; }
.topic-changing .device-node { animation-name: none; }

.prompt-playground { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #568a7559; background: linear-gradient(135deg, #164e43, #103a35 70%); box-shadow: inset 0 1px 0 #a1cdb249, inset 0 -1px 0 #021c2280, 0 5px 0 -2px #0d322d, 0 25px 50px -22px #173a376b; }
.prompt-playground::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at var(--light-x, 30%) var(--light-y, 15%), #9eeebf28, transparent 62%); pointer-events: none; }
.prompt-playground::after { content: ''; position: absolute; inset: 7px; border: 1px solid #d1f7dc0d; border-radius: 18px; pointer-events: none; }
.prompt-playground.is-visible { transform: perspective(1100px) rotateX(var(--surface-x, 0deg)) rotateY(var(--surface-y, 0deg)); transition: opacity .7s, transform .4s ease-out, box-shadow .4s; }
.prompt-playground:hover { box-shadow: inset 0 1px 0 #a1cdb270, inset 0 -1px 0 #021c2280, 0 5px 0 -2px #0d322d, 0 32px 60px -25px #173a377a; }
.prompt-option { box-shadow: inset 0 1px 0 #ffffff12; }
.prompt-option[aria-pressed=true] { box-shadow: 0 3px 8px #001b2233, inset 0 1px 0 white; }
.copy-prompt { box-shadow: inset 0 1px 0 #ffffff17, 0 3px 7px #001b221f; transition: background .2s, transform .2s, box-shadow .2s; }
.copy-prompt:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffff17; }

.map-panel { background: radial-gradient(ellipse at 48% 44%, #f5faf4, #e6f0e9 70%); border: 1px solid #dbe8de; box-shadow: inset 0 1px 0 #fff; }
.map-origin { filter: drop-shadow(0 3px 4px #0b5d5733); }
.map-origin-halo { transform-box: fill-box; transform-origin: center; }
.map-panel.in-view .map-origin-halo { animation: map-breathe 4s ease-out infinite; }
.map-panel.in-view .map-connection { animation: connection-flow 2.4s linear infinite; }
.map-town circle { stroke: #fff8; stroke-width: 2; filter: drop-shadow(0 2px 2px #b05a2720); }
.process-grid article.is-visible .step-top { animation: step-enter .9s var(--reveal-delay, 0ms) both; }
.contact-device { box-shadow: inset 0 2px 0 #fff, inset 0 -7px 0 #c8d9c5, 0 21px 30px -17px #0b5d573d; }
.btn-primary { box-shadow: inset 0 1px 0 #ffffff24, 0 4px 0 -2px #073f3b; }
.btn-primary:hover { box-shadow: inset 0 1px 0 #ffffff3b, 0 5px 0 -2px #073f3b, 0 12px 22px -12px #0b5d5770; }
.btn:active { transform: translateY(2px); }
.btn .icon, .text-link .icon { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.btn:hover .icon, .text-link:hover .icon { transform: translate(3px,-3px); }
.motion-ready [data-reveal] { transition-duration: .85s; transition-timing-function: cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay, 0ms); }
.motion-ready [data-reveal]:not(.is-visible) { transform: translateY(36px); }
html[data-motion=on] .hero-copy { animation: none; }
html[data-motion=on] .hero-copy > * { animation: hero-enter .95s cubic-bezier(.22,1,.36,1) both; }
html[data-motion=on] .hero-copy h1 { animation-delay: .1s; }
html[data-motion=on] .hero-copy .hero-body { animation-delay: .22s; }
html[data-motion=on] .hero-copy .hero-actions { animation-delay: .34s; }

@keyframes hero-enter { from { opacity: 0; transform: translateY(24px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes device-hover { 0%,100% { transform: translateY(1px) rotateX(10deg) rotateY(-12deg) rotateZ(-9deg); } 50% { transform: translateY(-10px) rotateX(5deg) rotateY(-6deg) rotateZ(-5deg); } }
@keyframes satellite-hover { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes orbit-turn { from { transform: rotateX(22deg) rotateZ(0); } to { transform: rotateX(22deg) rotateZ(360deg); } }
@keyframes map-breathe { 0% { transform: scale(.8); opacity: .85; } 85%,100% { transform: scale(1.45); opacity: 0; } }
@keyframes connection-flow { to { stroke-dashoffset: -22; } }
@keyframes step-enter { from { opacity: .2; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media(max-width:700px) {
 .hero-scene-canvas { width: 110%; left: -5%; }
 .hero-bottom { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
 .hero-bottom .hero-note { font-size: 9px; gap: 6px; }
 .motion-toggle { padding-inline: 9px; font-size: 10px; }
 .topic-tabs::before { display: none; }
 .tabs-enhanced .topic-tab[aria-selected=true] { background: var(--teal); }
 .device-node::after { border-radius: 22px; }
 .prompt-playground.is-visible { transform: none; }
}
@media(max-width:359px) { .hero-bottom { grid-template-columns: 1fr; gap: 6px; }.motion-toggle { justify-self: start; } }
html[data-motion=off] { scroll-behavior: auto; }
html[data-motion=off] *, html[data-motion=off] *::before, html[data-motion=off] *::after { animation: none !important; transition: none !important; }
html[data-motion=off] .motion-ready [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
html[data-motion=off] .hero-art-link, html[data-motion=off] .prompt-playground { transform: none !important; }
html[data-motion=off] .btn:hover .icon, html[data-motion=off] .text-link:hover .icon { transform: none; }
@media(prefers-reduced-motion:reduce) {
 .motion-ready [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
 .prompt-playground.is-visible, .hero-art-link { transform: none !important; }
}