.atp-container {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
.atp-container * {
box-sizing: border-box;
} .atp-bg-transparent {
background: transparent;
}
.atp-bg-dark {
background: rgba(10, 10, 20, 0.95);
border-radius: 12px;
}
.atp-bg-gradient {
background: linear-gradient(135deg, #0a0a14 0%, #1a1a2e 50%, #16213e 100%);
border-radius: 12px;
} .atp-text-wrapper {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: var(--atp-text-align, center);
min-height: 1.4em;
}
.atp-text-wrapper[style*="text-align: left"] {
justify-content: flex-start;
}
.atp-text-wrapper[style*="text-align: right"] {
justify-content: flex-end;
} .atp-text {
font-size: var(--atp-font-size, 48px);
font-weight: var(--atp-font-weight, 700);
line-height: 1.3;
color: var(--atp-color-primary, #00d4ff);
text-align: var(--atp-text-align, center);
display: inline-block;
white-space: nowrap;
} .atp-text.atp-has-shadow {
text-shadow: 
0 0 10px var(--atp-color-primary),
0 0 20px var(--atp-color-primary),
0 0 40px var(--atp-color-secondary);
} .atp-cursor {
display: inline-block;
font-size: var(--atp-font-size, 48px);
font-weight: var(--atp-font-weight, 700);
color: var(--atp-color-primary, #00d4ff);
animation: atpBlink 0.7s infinite;
margin-left: 2px;
}
@keyframes atpBlink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
} .atp-effect-typing .atp-text {
border-right: none;
} .atp-effect-fade .atp-text {
animation: atpFadeIn 0.6s ease forwards;
}
.atp-effect-fade .atp-text.atp-fade-out {
animation: atpFadeOut 0.6s ease forwards;
}
@keyframes atpFadeIn {
from { 
opacity: 0; 
transform: translateY(20px) scale(0.95);
}
to { 
opacity: 1; 
transform: translateY(0) scale(1);
}
}
@keyframes atpFadeOut {
from { 
opacity: 1; 
transform: translateY(0) scale(1);
}
to { 
opacity: 0; 
transform: translateY(-20px) scale(0.95);
}
} .atp-effect-slide .atp-text {
animation: atpSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.atp-effect-slide .atp-text.atp-slide-out {
animation: atpSlideOut 0.5s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
@keyframes atpSlideIn {
from { 
opacity: 0; 
transform: translateX(100px);
}
to { 
opacity: 1; 
transform: translateX(0);
}
}
@keyframes atpSlideOut {
from { 
opacity: 1; 
transform: translateX(0);
}
to { 
opacity: 0; 
transform: translateX(-100px);
}
} .atp-effect-bounce .atp-char {
display: inline-block;
opacity: 0;
transform: translateY(50px);
}
.atp-effect-bounce .atp-char.atp-visible {
animation: atpBounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.atp-effect-bounce .atp-char.atp-out {
animation: atpBounceOut 0.3s ease forwards;
}
@keyframes atpBounceIn {
0% { 
opacity: 0; 
transform: translateY(50px) scale(0);
}
60% { 
transform: translateY(-10px) scale(1.1);
}
100% { 
opacity: 1; 
transform: translateY(0) scale(1);
}
}
@keyframes atpBounceOut {
to { 
opacity: 0; 
transform: translateY(-30px) scale(0);
}
} .atp-effect-glitch .atp-text {
position: relative;
animation: atpGlitchText 0.3s infinite;
}
.atp-effect-glitch .atp-text::before,
.atp-effect-glitch .atp-text::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.atp-effect-glitch .atp-text::before {
color: var(--atp-color-secondary);
animation: atpGlitchBefore 0.3s infinite;
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.atp-effect-glitch .atp-text::after {
color: var(--atp-color-accent);
animation: atpGlitchAfter 0.3s infinite;
clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}
@keyframes atpGlitchText {
0%, 100% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
}
@keyframes atpGlitchBefore {
0%, 100% { transform: translate(0); }
20% { transform: translate(3px, -1px); }
40% { transform: translate(-3px, 1px); }
60% { transform: translate(1px, -2px); }
80% { transform: translate(-1px, 2px); }
}
@keyframes atpGlitchAfter {
0%, 100% { transform: translate(0); }
20% { transform: translate(-3px, 1px); }
40% { transform: translate(3px, -1px); }
60% { transform: translate(-1px, 2px); }
80% { transform: translate(1px, -2px); }
} .atp-effect-glitch .atp-text.atp-glitch-in {
animation: atpGlitchIn 0.6s steps(10) forwards, atpGlitchText 0.3s infinite 0.6s;
}
@keyframes atpGlitchIn {
0% { 
opacity: 0;
transform: scale(1.2) skewX(20deg);
filter: blur(10px);
}
50% {
opacity: 0.8;
transform: scale(0.95) skewX(-10deg);
filter: blur(2px);
}
100% { 
opacity: 1;
transform: scale(1) skewX(0);
filter: blur(0);
}
} .atp-effect-scramble .atp-text {
font-family: 'Courier New', Consolas, monospace;
letter-spacing: 2px;
}
.atp-effect-scramble .atp-char {
display: inline-block;
transition: color 0.1s;
}
.atp-effect-scramble .atp-char.atp-scrambling {
color: var(--atp-color-secondary);
}
.atp-effect-scramble .atp-char.atp-resolved {
color: var(--atp-color-primary);
text-shadow: 0 0 10px var(--atp-color-primary);
} .atp-effect-neon .atp-text {
animation: atpNeonFlicker 2s infinite;
text-shadow:
0 0 5px var(--atp-color-primary),
0 0 10px var(--atp-color-primary),
0 0 20px var(--atp-color-primary),
0 0 40px var(--atp-color-secondary),
0 0 80px var(--atp-color-secondary);
}
@keyframes atpNeonFlicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 5px var(--atp-color-primary),
0 0 10px var(--atp-color-primary),
0 0 20px var(--atp-color-primary),
0 0 40px var(--atp-color-secondary),
0 0 80px var(--atp-color-secondary);
}
20%, 24%, 55% {
text-shadow: none;
}
}
.atp-effect-neon .atp-text.atp-neon-in {
animation: atpNeonIn 0.8s ease forwards, atpNeonFlicker 2s infinite 0.8s;
}
@keyframes atpNeonIn {
0% {
opacity: 0;
text-shadow: none;
filter: blur(20px);
}
50% {
opacity: 0.5;
text-shadow: 0 0 40px var(--atp-color-primary);
}
100% {
opacity: 1;
filter: blur(0);
}
} .atp-effect-hologram .atp-text {
background: linear-gradient(
90deg,
var(--atp-color-primary) 0%,
var(--atp-color-secondary) 25%,
var(--atp-color-accent) 50%,
var(--atp-color-secondary) 75%,
var(--atp-color-primary) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: atpHologramShift 3s linear infinite;
position: relative;
}
.atp-effect-hologram .atp-text::before {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: inherit;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.5;
animation: atpHologramGhost 2s ease-in-out infinite;
filter: blur(2px);
}
@keyframes atpHologramShift {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
@keyframes atpHologramGhost {
0%, 100% { 
transform: translateY(0) skewX(0);
opacity: 0.3;
}
25% { 
transform: translateY(-3px) skewX(2deg);
opacity: 0.5;
}
75% { 
transform: translateY(3px) skewX(-2deg);
opacity: 0.4;
}
}
.atp-effect-hologram .atp-text.atp-hologram-in {
animation: atpHologramIn 1s ease forwards, atpHologramShift 3s linear infinite 1s;
}
@keyframes atpHologramIn {
0% {
opacity: 0;
transform: perspective(500px) rotateX(90deg) translateY(50px);
}
60% {
transform: perspective(500px) rotateX(-10deg) translateY(-10px);
}
100% {
opacity: 1;
transform: perspective(500px) rotateX(0) translateY(0);
}
} .atp-effect-cyber .atp-text {
position: relative;
text-transform: uppercase;
letter-spacing: 4px;
}
.atp-effect-cyber .atp-text::before {
content: '';
position: absolute;
left: -10%;
top: 50%;
width: 120%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--atp-color-primary), transparent);
animation: atpCyberScan 2s linear infinite;
transform: translateY(-50%);
}
.atp-effect-cyber .atp-char {
display: inline-block;
position: relative;
}
.atp-effect-cyber .atp-char::after {
content: attr(data-char);
position: absolute;
left: 0;
top: 0;
color: var(--atp-color-secondary);
opacity: 0;
animation: atpCyberEcho 0.5s ease forwards;
animation-delay: inherit;
}
@keyframes atpCyberScan {
0% { top: -20%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: 120%; opacity: 0; }
}
.atp-effect-cyber .atp-text.atp-cyber-in .atp-char {
animation: atpCyberCharIn 0.3s ease forwards;
opacity: 0;
}
@keyframes atpCyberCharIn {
0% {
opacity: 0;
transform: translateY(-20px) rotateX(90deg);
filter: blur(10px);
}
100% {
opacity: 1;
transform: translateY(0) rotateX(0);
filter: blur(0);
}
} .atp-effect-gradient .atp-text {
background: linear-gradient(
270deg,
var(--atp-color-primary),
var(--atp-color-secondary),
var(--atp-color-accent),
var(--atp-color-secondary),
var(--atp-color-primary)
);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: atpGradientWave 4s ease infinite;
}
@keyframes atpGradientWave {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.atp-effect-gradient .atp-text.atp-gradient-in {
animation: atpGradientIn 0.8s ease forwards, atpGradientWave 4s ease infinite 0.8s;
}
@keyframes atpGradientIn {
0% {
opacity: 0;
letter-spacing: 20px;
filter: blur(10px);
}
100% {
opacity: 1;
letter-spacing: normal;
filter: blur(0);
}
} .atp-effect-rainbow .atp-char {
display: inline-block;
animation: atpRainbow 2s linear infinite;
}
@keyframes atpRainbow {
0% { color: #ff0000; }
16.66% { color: #ff8800; }
33.33% { color: #ffff00; }
50% { color: #00ff00; }
66.66% { color: #0088ff; }
83.33% { color: #8800ff; }
100% { color: #ff0000; }
}
.atp-effect-rainbow .atp-char.atp-rainbow-in {
animation: atpRainbowIn 0.4s ease forwards, atpRainbow 2s linear infinite 0.4s;
opacity: 0;
}
@keyframes atpRainbowIn {
0% {
opacity: 0;
transform: scale(0) rotate(180deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0);
}
} .atp-effect-pulse .atp-text {
animation: atpPulse 1.5s ease-in-out infinite;
}
@keyframes atpPulse {
0%, 100% {
color: var(--atp-color-primary);
text-shadow: 0 0 10px var(--atp-color-primary);
transform: scale(1);
}
50% {
color: var(--atp-color-secondary);
text-shadow: 
0 0 20px var(--atp-color-secondary),
0 0 40px var(--atp-color-secondary);
transform: scale(1.02);
}
}
.atp-effect-pulse .atp-text.atp-pulse-in {
animation: atpPulseIn 0.6s ease forwards, atpPulse 1.5s ease-in-out infinite 0.6s;
}
@keyframes atpPulseIn {
0% {
opacity: 0;
transform: scale(0.5);
filter: blur(20px);
}
50% {
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
filter: blur(0);
}
} .atp-particles-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
} @media screen and (max-width: 1024px) {
.atp-text,
.atp-cursor {
font-size: calc(var(--atp-font-size, 48px) * 0.8);
}
}
@media screen and (max-width: 768px) {
.atp-text,
.atp-cursor {
font-size: calc(var(--atp-font-size, 48px) * 0.6);
}
.atp-container {
padding: 15px;
}
}
@media screen and (max-width: 480px) {
.atp-text,
.atp-cursor {
font-size: calc(var(--atp-font-size, 48px) * 0.45);
}
.atp-text {
white-space: normal;
word-wrap: break-word;
}
} @media (prefers-reduced-motion: reduce) {
.atp-text,
.atp-char,
.atp-cursor,
.atp-text::before,
.atp-text::after {
animation: none !important;
transition: none !important;
}
.atp-cursor {
opacity: 1;
}
}