/* ==========================================
   ULTRAKIT ANIMATED TEXT (rebuilt)
   ========================================== */
.ultrakit-atx-wrapper { --atx-tc: #1a1a2e; --atx-c1: #6c5ce7; --atx-c2: #00cec9; --atx-dur: 600ms; width: 100%; box-sizing: border-box; font-family: inherit; text-align: center; }
.ultrakit-atx-wrapper *, .ultrakit-atx-wrapper *::before, .ultrakit-atx-wrapper *::after { box-sizing: border-box; }
.ultrakit-atx-title { margin: 0; color: var(--atx-tc); font-weight: 800; }
.atx-pre, .atx-suf { color: var(--atx-tc); }
.atx-newline .atx-anim { display: block; margin: 0.1em auto 0; width: max-content; max-width: 100%; }

/* the animated slot */
.atx-anim { position: relative; display: inline-block; vertical-align: bottom; white-space: nowrap; }
.is-ready .atx-anim { overflow: hidden; transition: width var(--atx-dur) cubic-bezier(.22,.9,.3,1); padding: 0 0.04em; margin: 0 -0.04em; }
.is-ready.atx-m-typewriter .atx-anim, .is-ready.atx-m-flip-x .atx-anim, .is-ready.atx-m-flip-y .atx-anim, .is-ready.atx-m-cube .atx-anim, .is-ready.atx-m-swing .atx-anim { overflow: visible; }
.is-ready.atx-m-typewriter .atx-anim { display: inline; transition: none; padding: 0; margin: 0; }
.is-ready.atx-m-flip-x .atx-anim, .is-ready.atx-m-flip-y .atx-anim, .is-ready.atx-m-cube .atx-anim { perspective: 700px; }
.atx-w { display: inline-block; white-space: nowrap; }
.is-ready:not(.atx-m-typewriter) .atx-w { position: absolute; left: 0; top: 0; }
.is-ready.atx-m-typewriter .atx-w { position: static; display: inline; }
.atx-u { display: inline-block; white-space: pre; }

/* ---------- highlight styles for the animated word ---------- */
.atx-anim { --wc: var(--atx-c1); color: var(--wc); }
.atx-hs-plain .atx-anim { color: var(--wc, var(--atx-tc)); }
.atx-hs-gradient .atx-anim { background: linear-gradient(90deg, var(--atx-c1), var(--atx-c2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.atx-hs-gradient .atx-anim.has-color { background: none; -webkit-text-fill-color: var(--wc); color: var(--wc); }
.atx-hs-underline .atx-anim { box-shadow: inset 0 -0.12em 0 color-mix(in srgb, var(--wc) 85%, transparent); }
.atx-hs-marker .atx-anim { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--wc) 40%, transparent) 58%); color: var(--atx-tc); }
.atx-hs-box .atx-anim { background: var(--wc); color: #ffffff; padding: 0 0.28em; margin: 0 -0.04em; border-radius: 0.18em; }
.atx-hs-pill .atx-anim { background: color-mix(in srgb, var(--wc) 14%, transparent); padding: 0 0.32em; margin: 0 -0.04em; border-radius: 999px; }
.atx-hs-outline .atx-anim { -webkit-text-stroke: 0.035em var(--wc); -webkit-text-fill-color: transparent; color: transparent; }
.atx-hs-glow .atx-anim { text-shadow: 0 0 0.3em color-mix(in srgb, var(--wc) 70%, transparent), 0 0 0.9em color-mix(in srgb, var(--wc) 45%, transparent); }
.atx-hs-badge .atx-anim { background: var(--wc); color: #ffffff; padding: 0 0.28em; border-radius: 0.2em; transform: rotate(-2deg); box-shadow: 0 0.1em 0 color-mix(in srgb, var(--wc) 55%, #000000); overflow: visible; }
.atx-hs-box .atx-w, .atx-hs-badge .atx-w { color: #ffffff; -webkit-text-fill-color: #ffffff; }

/* ---------- typewriter cursor ---------- */
.atx-cursor { display: inline-block; margin-left: 2px; color: var(--wc, var(--atx-c1)); -webkit-text-fill-color: currentColor; animation: ukAtxBlink 0.9s steps(1) infinite; }
.atx-cur-bar .atx-cursor { width: 0.08em; height: 0.95em; margin-left: 0.06em; background: currentColor; transform: translateY(0.12em); }
.atx-cur-block .atx-cursor { width: 0.55em; height: 0.95em; margin-left: 0.06em; background: currentColor; opacity: 0.85; transform: translateY(0.12em); }
.atx-cur-underscore .atx-cursor { width: 0.6em; height: 0.09em; margin-left: 0.06em; background: currentColor; transform: translateY(0.1em); }
.atx-cur-none .atx-cursor { display: none; }
@keyframes ukAtxBlink { 50% { opacity: 0; } }

/* ---------- word-level animations ---------- */
.atx-w.in, .atx-w.out { animation-duration: var(--atx-dur); animation-fill-mode: both; animation-timing-function: cubic-bezier(.22,.9,.3,1); }
.atx-m-slide-up .atx-w.in { animation-name: ukAtxUpIn; } .atx-m-slide-up .atx-w.out { animation-name: ukAtxUpOut; }
.atx-m-slide-down .atx-w.in { animation-name: ukAtxDnIn; } .atx-m-slide-down .atx-w.out { animation-name: ukAtxDnOut; }
.atx-m-slide-left .atx-w.in { animation-name: ukAtxLfIn; } .atx-m-slide-left .atx-w.out { animation-name: ukAtxLfOut; }
.atx-m-flip-x .atx-w.in { animation-name: ukAtxFxIn; transform-origin: 50% 100%; } .atx-m-flip-x .atx-w.out { animation-name: ukAtxFxOut; transform-origin: 50% 0; }
.atx-m-flip-y .atx-w.in { animation-name: ukAtxFyIn; } .atx-m-flip-y .atx-w.out { animation-name: ukAtxFyOut; }
.atx-m-cube .atx-w.in { animation-name: ukAtxCbIn; transform-origin: 50% 50% -0.6em; } .atx-m-cube .atx-w.out { animation-name: ukAtxCbOut; transform-origin: 50% 50% -0.6em; }
.atx-m-fade .atx-w.in { animation-name: ukAtxFdIn; } .atx-m-fade .atx-w.out { animation-name: ukAtxFdOut; }
.atx-m-zoom-in .atx-w.in { animation-name: ukAtxZiIn; } .atx-m-zoom-in .atx-w.out { animation-name: ukAtxZiOut; }
.atx-m-zoom-out .atx-w.in { animation-name: ukAtxZoIn; } .atx-m-zoom-out .atx-w.out { animation-name: ukAtxZoOut; }
.atx-m-blur .atx-w.in { animation-name: ukAtxBlIn; } .atx-m-blur .atx-w.out { animation-name: ukAtxBlOut; }
.atx-m-swing .atx-w.in { animation-name: ukAtxSwIn; transform-origin: 0 0; } .atx-m-swing .atx-w.out { animation-name: ukAtxSwOut; transform-origin: 0 0; }
.atx-m-clip .atx-w.in { animation-name: ukAtxClIn; } .atx-m-clip .atx-w.out { animation-name: ukAtxClOut; }
.atx-m-glitch .atx-w.in { animation-name: ukAtxGlIn; } .atx-m-glitch .atx-w.out { animation-name: ukAtxGlOut; }
@keyframes ukAtxUpIn { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes ukAtxUpOut { from { transform: none; opacity: 1; } to { transform: translateY(-105%); opacity: 0; } }
@keyframes ukAtxDnIn { from { transform: translateY(-105%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes ukAtxDnOut { from { transform: none; opacity: 1; } to { transform: translateY(105%); opacity: 0; } }
@keyframes ukAtxLfIn { from { transform: translateX(60%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes ukAtxLfOut { from { transform: none; opacity: 1; } to { transform: translateX(-60%); opacity: 0; } }
@keyframes ukAtxFxIn { from { transform: rotateX(-95deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes ukAtxFxOut { from { transform: none; opacity: 1; } to { transform: rotateX(95deg); opacity: 0; } }
@keyframes ukAtxFyIn { from { transform: rotateY(-95deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes ukAtxFyOut { from { transform: none; opacity: 1; } to { transform: rotateY(95deg); opacity: 0; } }
@keyframes ukAtxCbIn { from { transform: rotateX(-90deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes ukAtxCbOut { from { transform: none; opacity: 1; } to { transform: rotateX(90deg); opacity: 0; } }
@keyframes ukAtxFdIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ukAtxFdOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes ukAtxZiIn { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes ukAtxZiOut { from { transform: none; opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@keyframes ukAtxZoIn { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes ukAtxZoOut { from { transform: none; opacity: 1; } to { transform: scale(0.3); opacity: 0; } }
@keyframes ukAtxBlIn { from { filter: blur(14px); opacity: 0; } to { filter: none; opacity: 1; } } @keyframes ukAtxBlOut { from { filter: none; opacity: 1; } to { filter: blur(14px); opacity: 0; } }
@keyframes ukAtxSwIn { from { transform: rotate(-70deg); opacity: 0; } 60% { transform: rotate(10deg); opacity: 1; } to { transform: none; opacity: 1; } } @keyframes ukAtxSwOut { from { transform: none; opacity: 1; } to { transform: rotate(70deg); opacity: 0; } }
@keyframes ukAtxClIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes ukAtxClOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes ukAtxGlIn { 0% { opacity: 0; transform: translateX(-6px) skewX(12deg); filter: hue-rotate(90deg); } 25% { opacity: 1; transform: translateX(5px); } 50% { transform: translateX(-4px) skewX(-8deg); } 75% { transform: translateX(3px); } 100% { transform: none; filter: none; } }
@keyframes ukAtxGlOut { 0% { opacity: 1; } 30% { transform: translateX(6px) skewX(-10deg); filter: hue-rotate(-90deg); } 100% { opacity: 0; transform: translateX(-8px); } }

/* ---------- letter-level animations ---------- */
.atx-w.out.is-letters { animation: ukAtxFdOut 0.25s ease both; }
.atx-w.in .atx-u { animation-duration: calc(var(--atx-dur) * 1.1); animation-fill-mode: both; animation-timing-function: cubic-bezier(.34,1.56,.64,1); animation-delay: calc(var(--i) * var(--atx-stg, 45ms)); }
.atx-m-drop .atx-w.in .atx-u { animation-name: ukAtxDrop; } .atx-m-wave .atx-w.in .atx-u { animation-name: ukAtxWave; } .atx-m-rubber .atx-w.in .atx-u { animation-name: ukAtxRubber; } .atx-m-spread .atx-w.in .atx-u { animation-name: ukAtxSpread; animation-timing-function: cubic-bezier(.22,.9,.3,1); }
@keyframes ukAtxDrop { from { transform: translateY(-1.2em); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ukAtxWave { 0% { transform: translateY(0); opacity: 0; } 30% { transform: translateY(-0.45em); opacity: 1; } 60% { transform: translateY(0.12em); } 100% { transform: none; opacity: 1; } }
@keyframes ukAtxRubber { 0% { transform: scale(0, 0); opacity: 0; } 40% { transform: scale(1.5, 0.6); opacity: 1; } 65% { transform: scale(0.85, 1.3); } 100% { transform: none; } }
@keyframes ukAtxSpread { from { transform: translateX(var(--sx, 0.6em)) scale(0.6); opacity: 0; letter-spacing: 0.4em; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .atx-cursor { animation: none; } .atx-w.in, .atx-w.out, .atx-w.in .atx-u { animation: none !important; } }

/* =====================================================
   PREMIUM ADDITIONS — slot / flip-letters / pop modes,
   gradient cursor, select-delete, progress, eyebrow,
   description, buttons, 9 one-click presets
   ===================================================== */
.atx-m-slot .atx-w.in { animation-name: ukAtxSlotIn; animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); } .atx-m-slot .atx-w.out { animation-name: ukAtxSlotOut; animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
@keyframes ukAtxSlotIn { 0% { transform: translateY(150%); filter: blur(6px); opacity: 0; } 70% { filter: blur(0); opacity: 1; } 100% { transform: none; filter: none; opacity: 1; } }
@keyframes ukAtxSlotOut { from { transform: none; opacity: 1; } to { transform: translateY(-150%); filter: blur(6px); opacity: 0; } }
.is-ready.atx-m-flipl .atx-anim { overflow: visible; perspective: 700px; }
.atx-m-flipl .atx-w.in .atx-u { animation-name: ukAtxFlipL; transform-origin: 50% 100%; animation-timing-function: cubic-bezier(.22, .9, .3, 1); }
@keyframes ukAtxFlipL { from { transform: rotateX(-100deg) translateY(.3em); opacity: 0; } to { transform: none; opacity: 1; } }
.atx-m-pop .atx-w.in .atx-u { animation-name: ukAtxPop; }
@keyframes ukAtxPop { 0% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.45); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* cursor + select */
.atx-cur-gradient .atx-cursor { width: .09em; height: .95em; margin-left: .06em; border-radius: 3px; background: linear-gradient(var(--atx-c1), var(--atx-c2)); transform: translateY(.12em); }
.atx-w.is-sel { background: color-mix(in srgb, var(--wc, var(--atx-c1)) 32%, transparent); border-radius: .08em; -webkit-text-fill-color: currentColor; }
.atx-hs-gradient .atx-w.is-sel { -webkit-text-fill-color: var(--atx-c1); }

/* progress */
.atx-prog { width: 90px; height: 4px; border-radius: 4px; margin: 18px auto 0; background: color-mix(in srgb, var(--atx-tc) 12%, transparent); overflow: hidden; }
.atx-prog i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--atx-c1), var(--atx-c2)); }
@keyframes ukAtxProg { from { width: 0; } to { width: 100%; } }

/* eyebrow / description / buttons */
.atx-eb { display: inline-block; margin: 0 0 18px; padding: 8px 18px; border-radius: 40px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--atx-c1); background: color-mix(in srgb, var(--atx-c1) 12%, transparent); }
.atx-desc { margin: 20px auto 0; max-width: 640px; font-size: 18px; line-height: 1.65; color: color-mix(in srgb, var(--atx-tc) 68%, transparent); }
.atx-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: var(--atx-jc, center); margin-top: 28px; }
.ultrakit-atx-wrapper .atx-btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 40px; font-size: 16px; font-weight: 800; text-decoration: none !important; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.22, .9, .3, 1), box-shadow .3s; }
.ultrakit-atx-wrapper .atx-btn.is-primary { color: #fff !important; background: linear-gradient(120deg, var(--atx-c1), var(--atx-c2)); box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--atx-c1) 70%, transparent); }
.ultrakit-atx-wrapper .atx-btn.is-ghost { color: var(--atx-tc) !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--atx-tc) 18%, transparent); }
.atx-btn:hover { transform: translateY(-3px); } .atx-btn svg { transition: transform .3s; } .atx-btn:hover svg { transform: translateX(4px); }
.atx-btn.is-primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-20deg); animation: ukAtxShine 3.6s ease-in-out infinite; }
@keyframes ukAtxShine { 0%, 62% { left: -60%; } 100% { left: 130%; } }

/* ---------- presets (typography & finishing) ---------- */
.atx-pz-saas .ultrakit-atx-title { font-size: clamp(34px, 5.4vw, 66px); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; }
.atx-pz-poster .ultrakit-atx-title { font-size: clamp(40px, 8vw, 110px); font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .95; }
.atx-pz-poster .atx-hs-outline .atx-anim, .atx-pz-poster.atx-hs-outline .atx-anim { -webkit-text-stroke-width: .03em; }
.atx-pz-dark .ultrakit-atx-title { font-size: clamp(34px, 5.4vw, 66px); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; }
.atx-pz-dark .atx-desc, .atx-pz-neon .atx-desc { color: rgba(255, 255, 255, .72); }
.atx-pz-dark .atx-btn.is-ghost, .atx-pz-neon .atx-btn.is-ghost { color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28); }
.atx-pz-dark .atx-prog, .atx-pz-neon .atx-prog { background: rgba(255, 255, 255, .16); }
.atx-pz-terminal .ultrakit-atx-title { display: inline-block; text-align: left; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: clamp(22px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.01em; line-height: 1.4; background: #0d1117; padding: 54px 34px 30px; border-radius: 18px; position: relative; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6), inset 0 0 0 1px #30363d; max-width: 100%; }
.atx-pz-terminal .ultrakit-atx-title::before { content: ""; position: absolute; left: 22px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840; }
.atx-pz-terminal .atx-pre::before { content: "$ "; color: #7d8590; }
.atx-pz-terminal .atx-anim { -webkit-text-fill-color: #3dffb8; color: #3dffb8; background: none; }
.atx-pz-marker .ultrakit-atx-title { font-size: clamp(34px, 5.2vw, 62px); font-weight: 900; letter-spacing: -.04em; line-height: 1.1; }
.atx-pz-pill .ultrakit-atx-title { font-size: clamp(32px, 5vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.3; }
.atx-pz-editorial .ultrakit-atx-title { font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px, 5.6vw, 68px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.atx-pz-editorial .atx-anim { font-style: italic; }
.atx-pz-editorial .atx-desc { font-family: Georgia, serif; }
.atx-pz-neon .ultrakit-atx-title { font-size: clamp(34px, 5.4vw, 66px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-shadow: 0 0 .3em rgba(255, 255, 255, .25); }
.atx-pz-neon .atx-anim { text-shadow: 0 0 .25em var(--atx-c1), 0 0 .8em var(--atx-c1), 0 0 1.4em var(--atx-c2); color: #fff; -webkit-text-fill-color: #fff; background: none; }
.atx-pz-playful .ultrakit-atx-title { font-size: clamp(34px, 5.4vw, 66px); font-weight: 900; letter-spacing: -.03em; line-height: 1.25; }

@media (max-width: 767px) { .ultrakit-atx-wrapper .atx-btn { height: 50px; padding: 0 22px; font-size: 15px; } .atx-pz-terminal .ultrakit-atx-title { padding: 50px 22px 24px; } }
@media (prefers-reduced-motion: reduce) { .atx-btn.is-primary::after { animation: none; } .atx-prog i { animation: none !important; width: 100%; } }
.atx-newline.is-ready .atx-anim { margin: 0.1em auto 0.05em; }
.atx-align-left.atx-newline.is-ready .atx-anim { margin-left: 0; }
.atx-pz-terminal .atx-desc { margin-top: 40px; }