/* ============================================
   18. ANIMATIONS & KEYFRAMES
   ============================================ */

@keyframes fadeIn {
    from {
        opacity:0;
        transform:translateY(20px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

.lesson-card {
    animation:fadeIn 0.4s ease-out;
    animation-fill-mode:both;
    transition: transform 0.5s ease;
}

.lesson-card:hover {
    transform: translateY(-3px) !important;
}

.lesson-card:nth-child(1) { animation-delay:0.05s; }
.lesson-card:nth-child(2) { animation-delay:0.1s; }
.lesson-card:nth-child(3) { animation-delay:0.15s; }
.lesson-card:nth-child(4) { animation-delay:0.2s; }
.lesson-card:nth-child(5) { animation-delay:0.25s; }
.lesson-card:nth-child(6) { animation-delay:0.3s; }
.lesson-card:nth-child(7) { animation-delay:0.35s; }
.lesson-card:nth-child(8) { animation-delay:0.4s; }
.lesson-card:nth-child(9) { animation-delay:0.45s; }
.lesson-card:nth-child(10) { animation-delay:0.5s; }
.lesson-card:nth-child(11) { animation-delay:0.55s; }
.lesson-card:nth-child(12) { animation-delay:0.6s; }

@keyframes glitch {
    0% { transform: translate(0); filter: none; }
    10% { transform: translate(-5px, 2px) skewX(-5deg); filter: hue-rotate(90deg); }
    20% { transform: translate(5px, -2px) skewX(5deg); filter: hue-rotate(180deg); }
    30% { transform: translate(-3px, 0) skewX(-3deg); filter: hue-rotate(270deg); }
    40% { transform: translate(3px, 2px) skewX(3deg); filter: hue-rotate(90deg); }
    50% { transform: translate(-2px, -1px) skewX(-2deg); filter: none; }
    60% { transform: translate(2px, 1px) skewX(2deg); filter: hue-rotate(180deg); }
    70% { transform: translate(-1px, 0) skewX(-1deg); filter: hue-rotate(270deg); }
    80% { transform: translate(1px, 1px) skewX(1deg); filter: none; }
    90% { transform: translate(0); filter: none; }
    100% { transform: translate(0); filter: none; }
}

#penguin-img {
    transition: transform 0.1s ease;
}

#penguin-img:hover {
    animation: glitch 0.5s ease-out;
}

.title-transform {
    display: inline-block;
    cursor: pointer;
}

.title-char {
    display: inline-block;
    transition: transform 0.6s ease, opacity 0.6s ease;
    position: relative;
}

.title-char.out-up { animation: slideOutUp 0.6s ease-in forwards; }
.title-char.out-down { animation: slideOutDown 0.6s ease-in forwards; }
.title-char.out-left { animation: slideOutLeft 0.6s ease-in forwards; }
.title-char.out-right { animation: slideOutRight 0.6s ease-in forwards; }
.title-char.in-up { animation: slideInUp 0.6s ease-out forwards; }
.title-char.in-down { animation: slideInDown 0.6s ease-out forwards; }
.title-char.in-left { animation: slideInLeft 0.6s ease-out forwards; }
.title-char.in-right { animation: slideInRight 0.6s ease-out forwards; }

@keyframes slideOutUp {
    to { transform: translateY(-100px); opacity: 0; }
}
@keyframes slideOutDown {
    to { transform: translateY(100px); opacity: 0; }
}
@keyframes slideOutLeft {
    to { transform: translateX(-200px); opacity: 0; }
}
@keyframes slideOutRight {
    to { transform: translateX(200px); opacity: 0; }
}
@keyframes slideInUp {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes slideInDown {
    from { transform: translateY(-100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes slideInLeft {
    from { transform: translateX(-200px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
    from { transform: translateX(200px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}