/* ==========================================
   ULTRAKIT — animated scenes (shared by Feature Stack + Visual Tabs)
   ========================================== */
.uks { position: relative; width: 100%; aspect-ratio: 1.3; overflow: hidden; border-radius: inherit; background: linear-gradient(145deg, var(--a, #6c5ce7), var(--b, #a29bfe)); isolation: isolate; }
.uks * { box-sizing: border-box; }
.uks-stage { position: absolute; inset: 0; }
.uks i, .uks b, .uks span { display: block; }
.uks-label { position: absolute; left: 0; right: 0; top: 30%; transform: translateY(-50%); z-index: 5; text-align: center; color: #fff; pointer-events: none; padding: 0 12%; }
.uks-label b { font-size: clamp(20px, 3.2vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-shadow: 0 6px 24px rgba(0,0,0,.25); }
.uks-label span { margin-top: 8px; font-size: 13.5px; opacity: .85; line-height: 1.4; }

/* ---- shapes ---- */
.uks-shapes .s-ring { position: absolute; left: 9%; top: 26%; width: 17%; aspect-ratio: 1; border-radius: 50%; border: 9px solid rgba(255,255,255,.75); animation: uksFloat 6s ease-in-out infinite; }
.uks-shapes .s-clover { position: absolute; right: 14%; bottom: 17%; width: 30%; aspect-ratio: 1; animation: uksSpin 18s linear infinite; }
.uks-shapes .s-clover b { position: absolute; width: 54%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #fff, rgba(255,255,255,.55)); mix-blend-mode: screen; opacity: .9; }
.uks-shapes .s-clover b:nth-child(1) { left: 0; top: 0; } .uks-shapes .s-clover b:nth-child(2) { right: 0; top: 0; } .uks-shapes .s-clover b:nth-child(3) { left: 0; bottom: 0; } .uks-shapes .s-clover b:nth-child(4) { right: 0; bottom: 0; }
.uks-shapes .s-diamond { position: absolute; right: 8%; top: 32%; width: 6%; aspect-ratio: 1; background: #ffd76a; transform: rotate(45deg); border-radius: 22%; animation: uksPulse 3s ease-in-out infinite; }
.uks-shapes .s-glass { position: absolute; left: 12%; bottom: 14%; width: 7%; aspect-ratio: .8; background: rgba(255,255,255,.85); clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%); animation: uksFlip 4s ease-in-out infinite; }
.uks-shapes .s-sun { position: absolute; left: 22%; right: 22%; bottom: -30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #ffe08a, #ffb347 70%); opacity: .9; animation: uksRise 7s ease-in-out infinite; }
@keyframes uksFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes uksSpin { to { transform: rotate(360deg); } }
@keyframes uksPulse { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(135deg) scale(1.35); } }
@keyframes uksFlip { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }
@keyframes uksRise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10%); } }

/* ---- transform ---- */
.uks-transform i { position: absolute; background: rgba(255,255,255,.9); }
.uks-transform .t1 { left: 14%; top: 22%; width: 22%; aspect-ratio: 1; border-radius: 22%; animation: uksSpin 8s linear infinite; }
.uks-transform .t2 { right: 16%; top: 18%; width: 26%; height: 14%; border-radius: 40px; background: rgba(255,255,255,.55); animation: uksSkew 4s ease-in-out infinite; }
.uks-transform .t3 { left: 26%; bottom: 16%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: #ffd76a; animation: uksScale 3.4s ease-in-out infinite; }
.uks-transform .t4 { right: 18%; bottom: 20%; width: 24%; aspect-ratio: 1; border: 6px solid rgba(255,255,255,.85); background: transparent; animation: uksTilt 5s ease-in-out infinite; }
@keyframes uksSkew { 0%, 100% { transform: skewX(0) translateX(0); } 50% { transform: skewX(-28deg) translateX(-14px); } }
@keyframes uksScale { 0%, 100% { transform: scale(.6); } 50% { transform: scale(1.25); } }
@keyframes uksTilt { 0%, 100% { transform: perspective(300px) rotateX(0) rotateY(0); } 50% { transform: perspective(300px) rotateX(50deg) rotateY(30deg); } }

/* ---- appear ---- */
.uks-appear .ap-col { position: absolute; inset: 14% 22%; display: flex; flex-direction: column; gap: 5%; justify-content: center; }
.uks-appear .ap-col i { flex: 1; border-radius: 14px; background: rgba(255,255,255,.88); opacity: 0; transform: translateY(26px) scale(.94); animation: uksAppear 5s ease infinite; }
.uks-appear .ap-col i:nth-child(2) { animation-delay: .35s; background: rgba(255,255,255,.7); } .uks-appear .ap-col i:nth-child(3) { animation-delay: .7s; background: rgba(255,255,255,.55); } .uks-appear .ap-col i:nth-child(4) { animation-delay: 1.05s; background: rgba(255,255,255,.4); }
@keyframes uksAppear { 0% { opacity: 0; transform: translateY(26px) scale(.94); } 12%, 70% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* ---- pin ---- */
.uks-pin .pn-side { position: absolute; left: 9%; top: 12%; bottom: 12%; width: 32%; }
.uks-pin .pn-side i { position: absolute; left: 0; right: 0; top: 0; height: 46%; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.18); animation: uksPin 6s ease-in-out infinite; }
.uks-pin .pn-list { position: absolute; right: 8%; top: 8%; bottom: 8%; width: 44%; overflow: hidden; }
.uks-pin .pn-list > div { animation: uksScroll 6s ease-in-out infinite; }
.uks-pin .pn-list b { height: 20px; margin-bottom: 14px; border-radius: 8px; background: rgba(255,255,255,.7); } .uks-pin .pn-list b:nth-child(3n) { width: 70%; } .uks-pin .pn-list b:nth-child(4n) { width: 85%; background: rgba(255,255,255,.45); }
@keyframes uksScroll { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(-58%); } }
@keyframes uksPin { 0%, 10% { transform: translateY(0); } 40%, 90% { transform: translateY(0); box-shadow: 0 18px 40px rgba(0,0,0,.28); } 100% { transform: translateY(0); } }

/* ---- hscroll ---- */
.uks-hscroll .hs-track { position: absolute; left: 0; top: 24%; bottom: 30%; display: flex; gap: 6%; padding-left: 8%; width: 220%; animation: uksHs 7s ease-in-out infinite; }
.uks-hscroll .hs-track i { flex: 0 0 15%; border-radius: 14px; background: rgba(255,255,255,.85); } .uks-hscroll .hs-track i:nth-child(even) { background: rgba(255,255,255,.55); }
.uks-hscroll .hs-bar { position: absolute; left: 12%; right: 12%; bottom: 14%; height: 6px; border-radius: 6px; background: rgba(255,255,255,.25); overflow: hidden; }
.uks-hscroll .hs-bar span { height: 100%; width: 100%; background: #fff; transform-origin: left; animation: uksBar 7s ease-in-out infinite; }
@keyframes uksHs { 0%, 8% { transform: translateX(0); } 85%, 100% { transform: translateX(-48%); } }
@keyframes uksBar { 0%, 8% { transform: scaleX(.12); } 85%, 100% { transform: scaleX(1); } }

/* ---- float ---- */
.uks-float i { position: absolute; border-radius: 50%; background: rgba(255,255,255,.75); animation: uksFloat 5s ease-in-out infinite; }
.uks-float .b1 { left: 12%; top: 58%; width: 18%; aspect-ratio: 1; } .uks-float .b2 { left: 34%; top: 22%; width: 11%; aspect-ratio: 1; background: #ffd76a; animation-delay: -1s; } .uks-float .b3 { right: 16%; top: 40%; width: 24%; aspect-ratio: 1; background: rgba(255,255,255,.45); animation-delay: -2s; animation-duration: 7s; }
.uks-float .b4 { right: 30%; bottom: 12%; width: 9%; aspect-ratio: 1; animation-delay: -3s; } .uks-float .b5 { left: 8%; top: 16%; width: 8%; aspect-ratio: 1; background: rgba(255,255,255,.5); animation-delay: -.5s; } .uks-float .b6 { left: 46%; bottom: 20%; width: 14%; aspect-ratio: 1; background: rgba(255,255,255,.35); animation-delay: -4s; animation-duration: 8s; }

/* ---- reveal ---- */
.uks-reveal .rv-img { position: absolute; inset: 16% 18%; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #ffe08a, #ff8a65); }
.uks-reveal .rv-img i:first-child { position: absolute; left: 12%; bottom: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.55); }
.uks-reveal .rv-img i:last-child { position: absolute; right: 14%; top: 14%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.uks-reveal .rv-wipe { position: absolute; inset: 16% 18%; border-radius: 16px; background: var(--b, #6c5ce7); animation: uksWipe 4.6s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes uksWipe { 0% { transform: scaleX(1); transform-origin: right; } 40% { transform: scaleX(0); transform-origin: right; } 55% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

/* ---- morph ---- */
.uks-morph .m-blob { position: absolute; left: 24%; top: 16%; width: 52%; aspect-ratio: 1; background: linear-gradient(135deg, #fff, rgba(255,255,255,.4)); animation: uksMorph 7s ease-in-out infinite; }
.uks-morph .m2 { left: 38%; top: 34%; width: 30%; background: #ffd76a; opacity: .85; animation-duration: 5s; animation-direction: reverse; }
@keyframes uksMorph { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0); } 33% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 66% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; transform: rotate(120deg); } }

/* ---- text ---- */
.uks-text .tx { position: absolute; left: 14%; right: 14%; top: 50%; transform: translateY(-50%); }
.uks-text .tx span { height: 22px; margin-bottom: 16px; border-radius: 6px; background: #fff; clip-path: inset(0 100% 0 0); animation: uksTx 4.6s cubic-bezier(.7,0,.2,1) infinite; }
.uks-text .tx span:nth-child(2) { animation-delay: .25s; background: rgba(255,255,255,.75); } .uks-text .tx span:nth-child(3) { animation-delay: .5s; background: rgba(255,255,255,.6); } .uks-text .tx .short { width: 55%; animation-delay: .75s; background: #ffd76a; }
@keyframes uksTx { 0% { clip-path: inset(0 100% 0 0); } 30%, 75% { clip-path: inset(0 0 0 0); } 92%, 100% { clip-path: inset(0 0 0 100%); } }

/* ---- cursor ---- */
.uks-cursor .cu-card { position: absolute; inset: 18% 16%; border-radius: 16px; background: rgba(255,255,255,.85); padding: 7%; display: flex; flex-direction: column; gap: 10%; }
.uks-cursor .cu-card i { flex: 1; border-radius: 8px; background: rgba(20,20,43,.12); } .uks-cursor .cu-card i:first-child { flex: 1.6; }
.uks-cursor .cu-dot { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #14142b; z-index: 4; animation: uksCur 6s ease-in-out infinite; }
.uks-cursor .cu-ring { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid #14142b; background: rgba(255,215,106,.35); z-index: 3; animation: uksCur 6s ease-in-out infinite .12s, uksRing 6s ease-in-out infinite; }
@keyframes uksCur { 0% { transform: translate(30%, 40%); } 25% { transform: translate(300%, 90%); } 50% { transform: translate(210%, 300%); } 75% { transform: translate(60%, 250%); } 100% { transform: translate(30%, 40%); } }
@keyframes uksRing { 0%, 20%, 45%, 100% { width: 44px; height: 44px; } 30%, 40% { width: 74px; height: 74px; } }

/* ---- offcanvas ---- */
.uks-offcanvas .oc-page { position: absolute; inset: 14% 12%; border-radius: 14px; background: rgba(255,255,255,.85); padding: 6%; display: flex; flex-direction: column; gap: 8%; }
.uks-offcanvas .oc-page i { flex: 1; border-radius: 8px; background: rgba(20,20,43,.12); } .uks-offcanvas .oc-page i:first-child { flex: .5; }
.uks-offcanvas .oc-shade { position: absolute; inset: 0; background: rgba(10,10,30,.45); opacity: 0; animation: uksShade 5s ease-in-out infinite; }
.uks-offcanvas .oc-panel { position: absolute; top: 0; bottom: 0; right: 0; width: 46%; background: #14142b; padding: 8% 7%; display: flex; flex-direction: column; gap: 10%; transform: translateX(105%); animation: uksPanel 5s cubic-bezier(.7,0,.2,1) infinite; }
.uks-offcanvas .oc-panel b { height: 12px; border-radius: 6px; background: rgba(255,255,255,.7); } .uks-offcanvas .oc-panel b:nth-child(odd) { width: 70%; background: rgba(255,255,255,.4); }
@keyframes uksPanel { 0%, 12% { transform: translateX(105%); } 30%, 72% { transform: none; } 90%, 100% { transform: translateX(105%); } }
@keyframes uksShade { 0%, 12% { opacity: 0; } 30%, 72% { opacity: 1; } 90%, 100% { opacity: 0; } }

/* ---- dots ---- */
.uks-dots .dn-dots { position: absolute; right: 12%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 22px; z-index: 3; }
.uks-dots .dn-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.4); animation: uksDot 6s ease-in-out infinite; }
.uks-dots .dn-dots i:nth-child(2) { animation-delay: 1.5s; } .uks-dots .dn-dots i:nth-child(3) { animation-delay: 3s; } .uks-dots .dn-dots i:nth-child(4) { animation-delay: 4.5s; }
.uks-dots .dn-secs { position: absolute; left: 10%; top: 0; bottom: 0; width: 56%; overflow: hidden; }
.uks-dots .dn-secs > div { height: 100%; margin: 0; border-radius: 14px; background: rgba(255,255,255,.8); margin-top: 6%; animation: uksSec 6s ease-in-out infinite; }
.uks-dots .dn-secs > div:nth-child(even) { background: rgba(255,255,255,.5); }
@keyframes uksDot { 0%, 22%, 100% { background: rgba(255,255,255,.4); transform: scale(1); } 5%, 17% { background: #ffd76a; transform: scale(1.5); } }
@keyframes uksSec { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(-330%); } }

/* ---- divider ---- */
.uks-divider .dv-top { position: absolute; inset: 0 0 50% 0; background: rgba(255,255,255,.18); }
.uks-divider .dv-bot { position: absolute; inset: 62% 0 0 0; background: #fff; }
.uks-divider .dv-wave { position: absolute; left: -10%; width: 120%; top: 38%; height: 24%; fill: #fff; animation: uksWave 5s ease-in-out infinite; }
@keyframes uksWave { 0%, 100% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(6%) scaleY(1.5); } }

/* ---- theme ---- */
.uks-theme .th { position: absolute; inset: 12% 10%; border-radius: 14px; background: rgba(255,255,255,.9); padding: 5%; display: flex; flex-direction: column; gap: 6%; overflow: hidden; }
.uks-theme .th > div { position: relative; border-radius: 8px; background: rgba(20,20,43,.08); overflow: hidden; }
.uks-theme .th::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent); transform: translateX(-160%); animation: uksShim 3.6s ease-in-out infinite; }
.uks-theme .th-h { flex: .5; display: flex; align-items: center; gap: 4%; padding: 0 4%; } .uks-theme .th-h i { width: 12%; height: 50%; border-radius: 5px; background: var(--a); } .uks-theme .th-h span { width: 12%; height: 22%; border-radius: 4px; background: rgba(20,20,43,.2); } .uks-theme .th-h i + span { margin-left: auto; }
.uks-theme .th-hero { flex: 1.4; display: flex; flex-direction: column; justify-content: center; gap: 12%; padding: 0 8%; background: linear-gradient(135deg, var(--a), var(--b)) !important; opacity: .85; } .uks-theme .th-hero b { height: 12%; border-radius: 5px; background: rgba(255,255,255,.85); width: 60%; } .uks-theme .th-hero b + b { width: 38%; opacity: .6; }
.uks-theme .th-cards { flex: 1; display: flex; gap: 5%; background: none !important; } .uks-theme .th-cards i { flex: 1; border-radius: 8px; background: rgba(20,20,43,.1); }
@keyframes uksShim { 0% { transform: translateX(-160%); } 60%, 100% { transform: translateX(460%); } }

/* ---- easing ---- */
.uks-easing .ez { position: absolute; inset: 10% 14%; width: 72%; height: 80%; overflow: visible; }
.uks-easing .ez-grid { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 2; stroke-linecap: round; }
.uks-easing .ez-curve { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 260; animation: uksDraw 3.2s ease-in-out infinite; }
.uks-easing .ez-dot { fill: #ffd76a; filter: drop-shadow(0 0 8px rgba(255,215,106,.9)); }
@keyframes uksDraw { 0% { stroke-dashoffset: 260; } 70%, 100% { stroke-dashoffset: 0; } }

/* ---- global (wave grid) ---- */
.uks-global .gl { position: absolute; inset: 14% 16%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7%; }
.uks-global .gl i { border-radius: 26%; background: #fff; animation: uksGl 3.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes uksGl { 0%, 100% { transform: scale(.55); opacity: .45; } 50% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .uks *, .uks *::before, .uks *::after { animation: none !important; } .uks-text .tx span { clip-path: none; } .uks-appear .ap-col i { opacity: 1; transform: none; } }