/* ==============================
   THEME 1: NORMAL
   Default portfolio look. No global color/font overrides — this theme
   just uses the site's own light/dark variables from style.css.
============================== */

.puzzle-loader {
    display: flex;
    gap: clamp(2px, 1vw, 5px);
    animation: t1-settleGlow 0.9s ease 1.3s;
}
@keyframes t1-settleGlow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 10px var(--accent-color)); }
}
.puzzle-piece {
    font-size: clamp(1.8rem, 6vw, 3rem);
    font-weight: 700;
    color: var(--text-color);
    display: inline-block;
    opacity: 0;
}

/* 1. Puzzle (Original) */
.anim-puzzle .puzzle-piece {
    transform: translateY(20px) rotate(15deg);
    animation: t1-puzzleAssemble 2s ease forwards;
    animation-delay: calc(var(--i) * 0.1s);
}
@keyframes t1-puzzleAssemble {
    0% { opacity: 0; transform: translateY(20px) rotate(15deg); }
    50% { opacity: 1; transform: translateY(-10px) rotate(-5deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0); }
}

/* 2. Typewriter */
.anim-type .puzzle-piece {
    animation: t1-typeReveal 0.1s linear forwards;
    animation-delay: calc(var(--i) * 0.15s);
}
@keyframes t1-typeReveal {
    to { opacity: 1; }
}

/* 3. Drop */
.anim-drop .puzzle-piece {
    transform: translateY(-50px);
    animation: t1-dropIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: calc(var(--i) * 0.1s);
}
@keyframes t1-dropIn {
    to { opacity: 1; transform: translateY(0); }
}

/* 4. Fade Up */
.anim-fade .puzzle-piece {
    transform: translateY(15px);
    animation: t1-fadeUp 0.6s ease forwards;
    animation-delay: calc(var(--i) * 0.12s);
}
@keyframes t1-fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* 5. Neon Glow */
.anim-neon .puzzle-piece {
    filter: blur(4px);
    animation: t1-neonGlow 1.5s ease forwards;
    animation-delay: calc(var(--i) * 0.1s);
}
@keyframes t1-neonGlow {
    50% { opacity: 1; filter: blur(0px); text-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color); }
    100% { opacity: 1; filter: blur(0px); text-shadow: none; }
}

/* 6. Bounce */
.anim-bounce .puzzle-piece {
    transform: translateY(-100px);
    animation: t1-bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation-delay: calc(var(--i) * 0.1s);
}
@keyframes t1-bounceIn {
    0% { opacity: 0; transform: translateY(-100px); }
    50% { opacity: 1; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 7. 3D Flip */
.anim-flip {
    perspective: 1000px;
}
.anim-flip .puzzle-piece {
    transform: rotateX(-90deg);
    transform-origin: bottom;
    animation: t1-flipIn 0.6s ease forwards;
    animation-delay: calc(var(--i) * 0.15s);
}
@keyframes t1-flipIn {
    0% { opacity: 0; transform: rotateX(-90deg); }
    100% { opacity: 1; transform: rotateX(0deg); }
}

/* 8. Shapes Burst */
.anim-shapes {
    position: relative;
}
.anim-shapes::before, .anim-shapes::after {
    content: '';
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--accent-color);
    z-index: -1;
    opacity: 0;
    top: 50%; left: 50%;
    margin-top: -30px; margin-left: -30px;
}
.anim-shapes::before {
    animation: t1-shapeBurst1 1.5s ease-out forwards;
}
.anim-shapes::after {
    border-radius: 10px;
    background: #ff4d4d;
    animation: t1-shapeBurst2 1.5s ease-out forwards;
    animation-delay: 0.2s;
}
.anim-shapes .puzzle-piece {
    animation: t1-popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: calc(var(--i) * 0.1s);
}
@keyframes t1-popIn {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes t1-shapeBurst1 {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: translate(-120px, -120px) scale(1.5); opacity: 0; }
}
@keyframes t1-shapeBurst2 {
    0% { transform: scale(0) rotate(0); opacity: 1; }
    100% { transform: translate(120px, 120px) scale(1.5) rotate(180deg); opacity: 0; }
}