/* Main CSS File */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Styles for Themes */
.glassmorphism {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* --- Text Effects & Animations (Adapted from DSystem) --- */

/* Gradient Text */
.effect-gradient {
    background: linear-gradient(to right, var(--primary-color, #00d4ff), var(--secondary-color, #ff6b9d));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Neon Glow */
.effect-neon {
    color: #fff;
    text-shadow: 
        0 0 5px var(--primary-color, #00d4ff),
        0 0 10px var(--primary-color, #00d4ff),
        0 0 20px var(--primary-color, #00d4ff),
        0 0 40px var(--primary-color, #00d4ff),
        0 0 80px var(--primary-color, #00d4ff);
    animation: neonPulse 1.5s infinite alternate;
}
@keyframes neonPulse {
    from { text-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 20px var(--primary-color); }
    to { text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color), 0 0 40px var(--primary-color); }
}

/* Glitch Effect */
.effect-glitch {
    position: relative;
    /* Color handled by inline styles or inherit */
}
.effect-glitch::before,
.effect-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Important for transparency/masking */
}
.effect-glitch::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}
.effect-glitch::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
    0% { clip: rect(38px, 9999px, 81px, 0); }
    20% { clip: rect(74px, 9999px, 16px, 0); }
    40% { clip: rect(10px, 9999px, 96px, 0); }
    60% { clip: rect(50px, 9999px, 34px, 0); }
    80% { clip: rect(6px, 9999px, 78px, 0); }
    100% { clip: rect(27px, 9999px, 49px, 0); }
}
@keyframes glitch-anim2 {
    0% { clip: rect(2px, 9999px, 49px, 0); }
    5% { clip: rect(80px, 9999px, 86px, 0); }
    10% { clip: rect(74px, 9999px, 32px, 0); }
    15% { clip: rect(14px, 9999px, 81px, 0); }
    20% { clip: rect(48px, 9999px, 66px, 0); }
    25% { clip: rect(76px, 9999px, 54px, 0); }
    30% { clip: rect(64px, 9999px, 5px, 0); }
    35% { clip: rect(98px, 9999px, 39px, 0); }
    40% { clip: rect(68px, 9999px, 14px, 0); }
    45% { clip: rect(54px, 9999px, 20px, 0); }
    50% { clip: rect(35px, 9999px, 83px, 0); }
    55% { clip: rect(91px, 9999px, 84px, 0); }
    60% { clip: rect(86px, 9999px, 8px, 0); }
    65% { clip: rect(6px, 9999px, 16px, 0); }
    70% { clip: rect(64px, 9999px, 66px, 0); }
    75% { clip: rect(10px, 9999px, 58px, 0); }
    80% { clip: rect(76px, 9999px, 44px, 0); }
    85% { clip: rect(97px, 9999px, 40px, 0); }
    90% { clip: rect(81px, 9999px, 37px, 0); }
    95% { clip: rect(20px, 9999px, 61px, 0); }
    100% { clip: rect(81px, 9999px, 49px, 0); }
}

/* Sliced Text */
.effect-sliced {
    position: relative;
    color: transparent; /* Hide original text */
}
.effect-sliced::before,
.effect-sliced::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: inherit;
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}
.effect-sliced::before {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    z-index: 2;
    transform: translate(-2px, -2px);
}
.effect-sliced::after {
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    z-index: 1;
    transform: translate(2px, 2px);
    color: black;
    text-shadow: none;
}
.effect-sliced:hover::before { transform: translate(-5px, -5px); }
.effect-sliced:hover::after { transform: translate(5px, 5px); }

/* Long Shadow */
.effect-long-shadow {
    text-shadow: 
        1px 1px 0 var(--primary-color), 2px 2px 0 var(--primary-color), 3px 3px 0 var(--primary-color), 
        4px 4px 0 var(--primary-color), 5px 5px 0 var(--primary-color), 6px 6px 0 var(--primary-color),
        7px 7px 0 var(--primary-color), 8px 8px 0 var(--primary-color), 9px 9px 0 var(--primary-color),
        10px 10px 0 var(--primary-color);
    transition: text-shadow 0.3s ease, transform 0.3s ease;
}
.effect-long-shadow:hover {
    text-shadow: 
        1px 1px 0 var(--secondary-color), 2px 2px 0 var(--secondary-color), 3px 3px 0 var(--secondary-color), 
        4px 4px 0 var(--secondary-color), 5px 5px 0 var(--secondary-color), 6px 6px 0 var(--secondary-color);
    transform: translate(-5px, -5px);
}

/* Pattern Fill */
.effect-pattern {
    color: var(--primary-color, #fff); /* Fallback */
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--text-color, #fff);
    background-image: radial-gradient(var(--primary-color, #fff) 20%, transparent 20%), 
                      radial-gradient(var(--secondary-color, #fff) 20%, transparent 20%);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    -webkit-background-clip: text;
    background-clip: text;
    animation: patternMove 4s linear infinite;
}
@keyframes patternMove {
    0% { background-position: 0 0, 5px 5px; }
    100% { background-position: 20px 20px, 25px 25px; }
}

/* Frost / Glass */
.effect-frost {
    color: rgba(255, 255, 255, 0.2);
    position: relative;
    display: inline-block;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    padding: 0 1rem;
    text-shadow: 0 0 15px rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Typewriter */
.effect-typewriter {
    overflow: hidden;
    border-right: .15em solid var(--primary-color, orange);
    white-space: nowrap;
    margin: 0 auto;
    max-width: fit-content; /* FIX for cutting off text */
    animation: 
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
}
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--primary-color, orange); } }

/* 3D Depth */
.effect-3d {
    color: var(--primary-color, #fff);
    text-shadow: 
        0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 
        0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3);
    transform: rotateX(20deg);
    transition: transform 0.5s;
    display: inline-block; /* Needed for transform */
}
.effect-3d:hover { transform: rotateX(0deg); }


/* Music Control */
.music-control-fab {
    position: fixed;
    top: 20px; /* Top Right */
    right: 20px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.3s ease;
}
.music-control-fab:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.6);
}
.music-waves span {
    display: block;
    width: 3px;
    height: 10px;
    background: #4ade80; 
    margin: 0 2px;
    animation: waves 0.5s infinite linear;
}
.music-waves span:nth-child(1) { animation-delay: 0s; }
.music-waves span:nth-child(2) { animation-delay: 0.1s; }
.music-waves span:nth-child(3) { animation-delay: 0.2s; }
.music-waves.playing span { animation-play-state: running; }
.music-waves.paused span { animation-play-state: paused; height: 3px; }
@keyframes waves { 0%, 100% { height: 10px; } 50% { height: 25px; } }

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}
.animate-bounceIn { animation: bounceIn 1s; }