/* TUKLASAYA! Animated Macroskills v7.2A — separate layers; pure CSS, no JS. */
.macro-art-wrap{pointer-events:auto!important}
.macro-art-stage{position:relative;flex:0 0 116%;min-width:0;transform:translate(1.5%,1.5%)}
.tuklasaya-orbit{--orbit-speed:62s;position:relative;width:100%;aspect-ratio:859/715;isolation:isolate;overflow:visible;background:radial-gradient(ellipse 58% 55% at 50% 51%,rgba(69,227,255,.32),transparent 80%),url('/assets/tuklasaya-orbit-ambience-v72.webp') center/cover no-repeat;border-radius:24px}
/* Light, concentric orbit ring helps visitors perceive motion. */
.macro-orbit-halo{position:absolute;inset:20% 17%;border:2px solid rgba(156,245,255,.55);border-radius:50%;box-shadow:0 0 17px rgba(29,230,254,.48),inset 0 0 22px rgba(17,224,255,.18);pointer-events:none;z-index:0}
.macro-orbit-halo:before,.macro-orbit-halo:after{content:'';position:absolute;border-radius:50%;inset:-4px;pointer-events:none}
.macro-orbit-halo:before{border:1px dashed rgba(255,220,104,.4);transform:scale(1.06)}
.macro-orbit-halo:after{inset:32%;box-shadow:0 0 88px 28px rgba(68,230,245,.19)}
/* The center image contains the original smiling learners, not the surrounding bubbles. */
.macro-orbit-learners{position:absolute;left:50%;top:52%;width:56%;height:auto;transform:translate(-50%,-50%);z-index:1;pointer-events:none;user-select:none;filter:drop-shadow(0 0 18px rgba(84,223,255,.25));animation:macroJoyfulFloat 5s ease-in-out infinite}
/* The ring carries all five links, so click / keyboard focus positions follow the movement. */
.macro-orbit-ring{position:absolute;inset:0;z-index:3;pointer-events:none;animation:macroRotate 62s linear infinite;transform-origin:50% 50%}
.macro-orbit-link{position:absolute;display:block;width:27.5%;aspect-ratio:1.22;transform:translate(-50%,-50%);border-radius:28%;pointer-events:auto;outline-offset:2px;text-decoration:none;touch-action:manipulation;cursor:pointer}
.macro-orbit-listening{left:50%;top:16%}
.macro-orbit-reading{left:82.4%;top:39.5%}
.macro-orbit-writing{left:70%;top:78%}
.macro-orbit-speaking{left:30%;top:78%}
.macro-orbit-viewing{left:17.6%;top:39.5%}
.macro-orbit-face{width:100%;height:100%;display:block;animation:macroCounterRotate 62s linear infinite;transform-origin:center;filter:drop-shadow(0 5px 9px rgba(0,16,60,.35))}
.macro-orbit-face img{width:100%;height:100%;object-fit:contain;display:block;transition:filter .2s ease,scale .2s ease}
.macro-orbit-link:hover .macro-orbit-face img,.macro-orbit-link:focus-visible .macro-orbit-face img{scale:1.10;filter:drop-shadow(0 0 16px rgba(255,219,77,.85)) saturate(1.15)}
.macro-orbit-link:focus-visible{outline:3px solid #ffdf71}
.tuklasaya-orbit:hover .macro-orbit-ring,.tuklasaya-orbit:hover .macro-orbit-face,.tuklasaya-orbit:focus-within .macro-orbit-ring,.tuklasaya-orbit:focus-within .macro-orbit-face{animation-play-state:paused}
/* Decorative glints show the children's delighted gaze without distorting their faces. */
.macro-orbit-spark{position:absolute;color:#ffe069;text-shadow:0 0 17px rgba(255,234,120,.8);z-index:2;pointer-events:none;animation:macroSparkle 3.1s ease-in-out infinite}
.macro-spark-one{left:45%;top:12%;font-size:26px;animation-delay:0s}
.macro-spark-two{left:65%;top:29%;font-size:22px;animation-delay:1s}
.macro-spark-three{left:36%;top:69%;font-size:16px;animation-delay:1.9s}
.tuklasaya-orbit .macro-tap-hint{z-index:5;bottom:1.3%;left:50%}
@keyframes macroRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes macroCounterRotate{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes macroJoyfulFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 9px))}}
@keyframes macroSparkle{0%,100%{opacity:.45;transform:scale(.82)}50%{opacity:1;transform:scale(1.28)}}
/* Keep the entire original website layout responsive and click targets at least 44px. */
@media(max-width:1199px){.macro-art-stage{flex-basis:120%}}
@media(max-width:850px){.macro-art-stage{flex:0 1 auto;width:min(100%,650px);transform:none}}
@media(max-width:520px){.macro-art-stage{width:112%;flex:none}.macro-orbit-link{width:29%}.tuklasaya-orbit .macro-tap-hint{font-size:10px;padding:5px 9px}}
@media(prefers-reduced-motion:reduce){.macro-orbit-ring,.macro-orbit-face,.macro-orbit-learners,.macro-orbit-spark{animation:none!important}.macro-orbit-face img{transition:none!important}}