html {
    scroll-behavior: smooth;
}
.font-elegant-serif {
    font-family: "Lora", serif;
    font-style: italic;
}
#logo-button:hover #logo-tooltip,
#logo-button:focus #logo-tooltip {
    opacity: 1;
    pointer-events: auto;
}
.homepage-image-container .w-96.h-96 {
    border-radius: 50% !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    transition: transform 0.4s ease-out;
    animation: pulse-border 2s infinite cubic-bezier(0.66, 0, 0.34, 1);
}

.homepage-image-container .w-96.h-96:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 0 0 10px rgba(0, 123, 255, 0.4), 0 20px 40px rgba(0, 0, 0, 0.3);
}
@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(0, 123, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}
.absolute.inset-0.flex.flex-col.items-center.justify-center.text-center>p {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.group:hover .absolute.inset-0.flex.flex-col.items-center.justify-center.text-center>p {
    transform: translateY(0);
    opacity: 1;
}

.group:hover .absolute.inset-0.flex.flex-col.items-center.justify-center.text-center>p:nth-child(2) {
    transition-delay: 0.15s;
}
.animated-line {
    transform: scaleX(0);
    opacity: 0;
    transition: none;
}
@keyframes drawLeftLine {
    from {
        transform: scaleX(0);
        opacity: 0;
        transform-origin: right;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
        transform-origin: right;
    }
}
@keyframes drawRightLine {
    from {
        transform: scaleX(0);
        opacity: 0;
        transform-origin: left;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
        transform-origin: left;
    }
}
.divider-line-container .left-line {
    animation: drawLeftLine 1s ease-out forwards;
    animation-delay: 0.2s;
}

.divider-line-container .right-line {
    animation: drawRightLine 1s ease-out forwards;
    animation-delay: 0.2s;
}
.skill-card {
    transform-style: preserve-3d;
    position: relative;
    z-index: 1;
}
.skill-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(var(--skill-color-rgb), 0.3));
    z-index: -1;
    border-radius: inherit;
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    transform: scale(0.9);
}
.skill-card:hover::before {
    opacity: 1;
    transform: scale(1);
}
.skill-card[data-skill="java"] {
    --skill-color-rgb: 248, 152, 32;
}
.skill-card[data-skill="python"] {
    --skill-color-rgb: 55, 118, 171;
}
.skill-card[data-skill="html"] {
    --skill-color-rgb: 227, 76, 38;
}
.skill-card[data-skill="javascript"] {
    --skill-color-rgb: 240, 219, 79;
}
.skill-card[data-skill="css"] {
    --skill-color-rgb: 41, 101, 241;
}
.skill-modal.hidden {
    display: none;
}
.skill-modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.skill-modal.active {
    opacity: 1;
    pointer-events: auto;
}
.skill-modal .modal-content {
    transform: scale(0.95);
    transition: transform 0.3s ease;
    text-align: center;
}
.skill-modal.active .modal-content {
    transform: scale(1);
}
.project-card {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 1;
}
.project-card video {
    transition: transform 0.5s ease-in-out;
}
.project-card:hover video {
    transform: scale(1.05);
}
.project-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.1));
    z-index: 0;
    border-radius: inherit;
    filter: blur(5px);
    opacity: 0;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    transform: scale(0.98);
}
.project-card:hover::before {
    opacity: 1;
    transform: scale(1);
}
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 768px) {
    .typewriter-text {
        overflow: visible;
        white-space: normal;
        border-right: none;
        width: auto;
        max-width: none;
        animation: none;
        transform: none;
        text-align: center !important;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 1.5rem !important;
    }

    .homepage-section {
        flex-direction: column !important;
        padding-top: 6rem !important;
        align-items: center !important;
    }

    .homepage-heading,
    .homepage-subtitle,
    .typewriter-text {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }

    .homepage-heading {
        font-size: 2.5rem !important;
    }

    .homepage-subtitle {
        font-size: 1.5rem !important;
        margin-top: 1rem !important;
    }

    .contact-link-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: center !important;
        display: flex !important;
        margin-top: 2rem !important;
    }

    .homepage-image-container {
        width: 70% !important;
        max-width: 280px !important;
        height: auto !important;
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
        order: -1;
    }

    .w-96.h-96 {
        width: 100% !important;
        height: auto !important;
        border-radius: 50% !important;
        animation: none;
    }

    .divider-line-container {
        max-width: 90%;
        margin: 3rem auto !important;
    }

    .line-gap {
        width: 1rem !important;
    }

    .skill-modal .modal-content {
        max-width: 95%;
        padding: 1.5rem;
    }

    .skill-modal h3 {
        font-size: 2.2rem;
    }

    .skill-modal p {
        font-size: 1rem;
    }
}