/* ==============================================
   css/animations.css
   Anish Portfolio — Animation & Transition Styles
   ============================================== */

/* -----------------------------------------------
   1. Navbar Scroll Background Transition
      .site-header gets .scrolled class via JS
   ----------------------------------------------- */
.site-header {
    transition:
        background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter  0.45s cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-backdrop-filter 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        border-color     0.45s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow       0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header.scrolled {
    background-color: rgba(10, 10, 15, 0.2);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom-color: rgba(77, 159, 255, 0.1);
    box-shadow:
        0 1px 0 rgba(77, 159, 255, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

/* -----------------------------------------------
   2. Nav Link Underline Slide Animation
   ----------------------------------------------- */
.navbar__links:hover .navbar__link:not(:hover) {
    opacity: 0.55;
    transition: opacity 0.25s ease;
}

.navbar__links .navbar__link {
    transition:
        color          0.2s ease,
        opacity        0.25s ease,
        background-color 0.2s ease;
}

.navbar__link::after {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------------
   3. Logo Glow Pulse
   ----------------------------------------------- */
@keyframes logoPulse {
    0%   { text-shadow: 0 0 20px rgba(77, 159, 255, 0.6), 0 0 40px rgba(77, 159, 255, 0.25); }
    50%  { text-shadow: 0 0 28px rgba(77, 159, 255, 0.8), 0 0 56px rgba(77, 159, 255, 0.4); }
    100% { text-shadow: 0 0 20px rgba(77, 159, 255, 0.6), 0 0 40px rgba(77, 159, 255, 0.25); }
}

.navbar__logo-initials {
    animation: logoPulse 4s ease-in-out infinite;
}

/* -----------------------------------------------
   4. Logo Dot Blink
   ----------------------------------------------- */
@keyframes dotBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(77, 159, 255, 0.8); }
    50%       { opacity: 0.4; box-shadow: 0 0 3px rgba(77, 159, 255, 0.3); }
}

.navbar__logo-dot {
    animation: dotBlink 2.5s ease-in-out infinite;
}

/* -----------------------------------------------
   5. Status Dot Pulse
   ----------------------------------------------- */
@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); transform: scale(1); }
    50%       { box-shadow: 0 0 14px rgba(74, 222, 128, 0.9); transform: scale(1.15); }
}

.mobile-overlay__status-dot {
    animation: statusPulse 2s ease-in-out infinite;
}

/* -----------------------------------------------
   6. Hamburger → X Animation
   ----------------------------------------------- */
.hamburger__bar {
    transition:
        transform   0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity     0.25s ease,
        background-color 0.25s ease;
    transform-origin: center;
}

.navbar__hamburger.is-active .hamburger__bar--top {
    transform: translateY(6.5px) rotate(45deg);
}

.navbar__hamburger.is-active .hamburger__bar--middle {
    opacity: 0;
    transform: scaleX(0);
}

.navbar__hamburger.is-active .hamburger__bar--bottom {
    transform: translateY(-6.5px) rotate(-45deg);
}

.navbar__hamburger.is-active .hamburger__bar {
    background-color: #4D9FFF;
}

.navbar__hamburger:hover .hamburger__bar--top {
    transform: translateY(-2px);
}

.navbar__hamburger:hover .hamburger__bar--bottom {
    transform: translateY(2px);
}

.navbar__hamburger.is-active:hover .hamburger__bar--top {
    transform: translateY(6.5px) rotate(45deg);
}

.navbar__hamburger.is-active:hover .hamburger__bar--bottom {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* -----------------------------------------------
   7. Mobile Overlay Open/Close Animation
   ----------------------------------------------- */
@keyframes overlayReveal {
    from { opacity: 0; clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; clip-path: inset(0 0 0% 0); }
}

@keyframes overlayHide {
    from { opacity: 1; clip-path: inset(0 0 0% 0); }
    to   { opacity: 0; clip-path: inset(0 0 100% 0); }
}

.mobile-overlay {
    animation: none;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition:
        opacity        0.4s cubic-bezier(0.4, 0, 0.2, 1),
        clip-path      0.5s cubic-bezier(0.4, 0, 0.2, 1),
        visibility     0s linear 0.5s;
}

.mobile-overlay.is-open {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
    transition:
        opacity    0.4s cubic-bezier(0.4, 0, 0.2, 1),
        clip-path  0.5s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

/* -----------------------------------------------
   8. Mobile Nav Link Staggered Fade-In
   ----------------------------------------------- */
.mobile-overlay__item {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity    0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform  0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-overlay.is-open .mobile-overlay__item {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(0.2s + var(--i, 0) * 0.07s);
}

.mobile-overlay:not(.is-open) .mobile-overlay__item {
    transition-delay: calc(var(--i, 0) * 0.03s);
}

.mobile-overlay__footer {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity   0.4s ease,
        transform 0.4s ease;
}

.mobile-overlay.is-open .mobile-overlay__footer {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.65s;
}

/* -----------------------------------------------
   9. CTA Button Shimmer Effect
   ----------------------------------------------- */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.navbar__cta {
    background-image: linear-gradient(
        90deg,
        #4D9FFF 0%,
        #7bb8ff 40%,
        #4D9FFF 60%,
        #4D9FFF 100%
    );
    background-size: 200% 100%;
    background-position: 0% center;
    transition:
        background-position 0s,
        color     0.2s ease,
        box-shadow 0.2s ease,
        transform  0.2s ease,
        border-color 0.2s ease;
}

.navbar__cta:hover {
    background-image: none;
    background-color: transparent;
}

/* -----------------------------------------------
   10. Active Link Entrance Pulse
   ----------------------------------------------- */
@keyframes activePop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.navbar__link.is-active {
    animation: activePop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==============================================
   HERO SECTION — Animation Styles
   ============================================== */

/* -----------------------------------------------
   1. Page Load — Hero Content Entrance
   ----------------------------------------------- */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__greeting {
    opacity: 0;
    animation: heroFadeUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

.hero__name {
    opacity: 0;
    animation: heroFadeUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.hero__typing-row {
    opacity: 0;
    animation: heroFadeUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.45s forwards;
}

.hero__tagline {
    opacity: 0;
    animation: heroFadeUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.55s forwards;
}

.hero__buttons {
    opacity: 0;
    animation: heroFadeUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards;
}

.hero__social {
    opacity: 0;
    animation: heroFadeUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.85s forwards;
}

/* -----------------------------------------------
   Image wrap entrance — slides in from right
   FIX: opacity: 0 + forwards (NOT both)
        so JS .hero--floating class le override nagarna
   ----------------------------------------------- */
@keyframes heroImageEnter {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* BASE STATE — opacity: 0, animation: forwards (NOT both) */
.hero__image-wrap {
    opacity: 0;
    animation: heroImageEnter 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

/* -----------------------------------------------
   2. Profile Image — Floating Up-Down
      FIX: heroImageEnter + heroFloat duitai run huncha
           1.4s delay = entrance (0.9s) + delay (0.4s) + buffer (0.1s)
   ----------------------------------------------- */
@keyframes heroFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}

.hero__image-wrap.hero--floating {
    opacity: 1;
    animation:
        heroImageEnter 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards,
        heroFloat 5s ease-in-out 1.4s infinite;
}

/* -----------------------------------------------
   3. Image Ring — Rotating Glow Pulse
   ----------------------------------------------- */
@keyframes ringPulse {
    0%, 100% {
        box-shadow:
            0 0 30px rgba(77, 159, 255, 0.45),
            0 0 60px rgba(77, 159, 255, 0.15),
            inset 0 0 20px rgba(77, 159, 255, 0.05);
        border-color: rgba(77, 159, 255, 0.6);
    }
    50% {
        box-shadow:
            0 0 45px rgba(77, 159, 255, 0.7),
            0 0 90px rgba(77, 159, 255, 0.25),
            inset 0 0 30px rgba(77, 159, 255, 0.08);
        border-color: rgba(77, 159, 255, 0.9);
    }
}

.hero__image-ring {
    animation: ringPulse 3.5s ease-in-out infinite;
}

@keyframes ringRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.hero__image-wrap::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 1px dashed rgba(77, 159, 255, 0.2);
    animation: ringRotate 18s linear infinite;
    pointer-events: none;
    z-index: 3;
}

.hero__image-wrap::after {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    border: 1px dashed rgba(77, 159, 255, 0.1);
    animation: ringRotate 28s linear infinite reverse;
    pointer-events: none;
    z-index: 3;
}

/* -----------------------------------------------
   4. Typing Cursor Blink
   ----------------------------------------------- */
@keyframes cursorBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.hero__typing-cursor {
    animation: cursorBlink 0.85s step-end infinite;
}

.hero__typing-cursor.is-typing {
    animation: none;
    opacity: 1;
}

/* -----------------------------------------------
   5. Floating Geometric Shapes
   ----------------------------------------------- */
@keyframes shapeFloat1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%       { transform: translateY(-18px) rotate(8deg); }
    66%       { transform: translateY(10px) rotate(-4deg); }
}

@keyframes shapeFloat2 {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50%       { transform: translateY(-22px) rotate(55deg); }
}

@keyframes shapeFloat3 {
    0%, 100% { transform: translateY(0) scale(1); }
    40%       { transform: translateY(16px) scale(1.05); }
    80%       { transform: translateY(-10px) scale(0.97); }
}

@keyframes shapeFloat4 {
    0%, 100% { transform: rotate(30deg) translateY(0); }
    60%       { transform: rotate(50deg) translateY(-12px); }
}

.hero__shape--1 { animation: shapeFloat1 9s ease-in-out infinite; }
.hero__shape--2 { animation: shapeFloat2 7s ease-in-out infinite 1.5s; }
.hero__shape--3 { animation: shapeFloat3 11s ease-in-out infinite 0.5s; }
.hero__shape--4 { animation: shapeFloat4 8s ease-in-out infinite 2s; }

/* -----------------------------------------------
   6. Scroll Hint — Line Pulse
   ----------------------------------------------- */
@keyframes scrollLinePulse {
    0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
    30%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
    70%  { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
    100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

.hero__scroll-line {
    animation: scrollLinePulse 2s ease-in-out infinite 1.5s;
}

.hero__scroll-hint {
    opacity: 0;
    animation: heroFadeUp 0.6s ease 1.4s forwards;
}

/* -----------------------------------------------
   7. Greeting Wave Emoji
   ----------------------------------------------- */
@keyframes waveHand {
    0%, 60%, 100% { transform: rotate(0deg); }
    10%            { transform: rotate(18deg); }
    20%            { transform: rotate(-10deg); }
    30%            { transform: rotate(18deg); }
    40%            { transform: rotate(-6deg); }
    50%            { transform: rotate(12deg); }
}

.hero__greeting-wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: waveHand 2.4s ease-in-out 1s 2;
}

/* -----------------------------------------------
   8. Button Ripple on Click
   ----------------------------------------------- */
.hero__btn::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

.hero__btn:active::after {
    width: 200%;
    height: 200%;
    opacity: 0;
    transition: 0s;
}

/* -----------------------------------------------
   9. Social Link Stagger on Load
   ----------------------------------------------- */
.hero__social-link {
    opacity: 0;
    animation: heroFadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero__social-link:nth-child(1) { animation-delay: 0.9s; }
.hero__social-link:nth-child(2) { animation-delay: 1.0s; }
.hero__social-link:nth-child(3) { animation-delay: 1.1s; }

/* -----------------------------------------------
   Reduced Motion Overrides
   ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .hero__greeting,
    .hero__name,
    .hero__typing-row,
    .hero__tagline,
    .hero__buttons,
    .hero__social,
    .hero__image-wrap,
    .hero__scroll-hint,
    .hero__social-link {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }

    .hero__typing-cursor {
        animation: cursorBlink 0.85s step-end infinite !important;
    }

    .hero__image-ring { animation: none !important; }

    .hero__image-wrap::before,
    .hero__image-wrap::after { animation: none !important; }

    .hero__shape--1,
    .hero__shape--2,
    .hero__shape--3,
    .hero__shape--4 { animation: none !important; }

    .hero__scroll-line { animation: none !important; opacity: 0.5 !important; }
    .hero__greeting-wave { animation: none !important; }
}

/* ==============================================
   ABOUT SECTION — Animation Styles
   ============================================== */

/* -----------------------------------------------
   1. Scroll Reveal — Base States
   ----------------------------------------------- */
.reveal-child {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity   0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.reveal-section.is-revealed .reveal-child {
    opacity: 1;
    transform: translateY(0);
}

.about__header {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity   0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s,
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

.reveal-section.is-revealed .about__header {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------
   2. Section Title Bar — Width Expand on Reveal
   ----------------------------------------------- */
.section-title-bar {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.about__header .section-title-bar {
    transform-origin: center center;
}

.reveal-section.is-revealed .section-title-bar {
    transform: scaleX(1);
}

/* -----------------------------------------------
   3. Image — Hover Scale & Glow
   ----------------------------------------------- */
@keyframes imageBorderShimmer {
    0%   { border-color: rgba(77, 159, 255, 0.25); }
    50%  { border-color: rgba(77, 159, 255, 0.65); }
    100% { border-color: rgba(77, 159, 255, 0.25); }
}

.about__image-wrap:hover .about__image {
    animation: imageBorderShimmer 1.8s ease-in-out infinite;
}

.about__image-corner {
    transition:
        top    0.3s ease,
        left   0.3s ease,
        bottom 0.3s ease,
        right  0.3s ease,
        opacity 0.3s ease;
}

.about__image-wrap:hover .about__image-corner--tl { top: -10px; left: -10px; }
.about__image-wrap:hover .about__image-corner--br { bottom: -10px; right: -10px; }

/* -----------------------------------------------
   4. Experience Badge — Entrance + Pulse
   ----------------------------------------------- */
@keyframes badgeEntrance {
    from { opacity: 0; transform: scale(0.7) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
        border-color: rgba(77, 159, 255, 0.25);
    }
    50% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(77, 159, 255, 0.2);
        border-color: rgba(77, 159, 255, 0.5);
    }
}

.about__badge {
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(0.8) translateY(8px);
}

.reveal-section.is-revealed .about__badge {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition-delay: 0.5s;
    animation: badgePulse 3.5s ease-in-out infinite 1.2s;
}

/* -----------------------------------------------
   5. Detail Cards — Staggered Hover Glow
   ----------------------------------------------- */
.about__detail-card {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity      0.45s cubic-bezier(0.4, 0, 0.2, 1),
        transform    0.45s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.25s ease,
        box-shadow   0.25s ease,
        background   0.25s ease;
}

.reveal-section.is-revealed .about__detail-card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.38s; }
.reveal-section.is-revealed .about__detail-card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.reveal-section.is-revealed .about__detail-card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.52s; }
.reveal-section.is-revealed .about__detail-card:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.59s; }
.reveal-section.is-revealed .about__detail-card:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.66s; }
.reveal-section.is-revealed .about__detail-card:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.73s; }

@keyframes cardGlowPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(77, 159, 255, 0.08); }
    50%       { box-shadow: 0 0 22px rgba(77, 159, 255, 0.18); }
}

.about__detail-card:hover {
    animation: cardGlowPulse 1.6s ease-in-out infinite;
}

/* -----------------------------------------------
   6. Icon — Spin once on card hover
   ----------------------------------------------- */
@keyframes iconSpin {
    from { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(15deg) scale(1.15); }
    to   { transform: rotate(0deg) scale(1); }
}

.about__detail-card:hover .about__detail-icon i {
    animation: iconSpin 0.4s ease-in-out forwards;
}

/* -----------------------------------------------
   7. CV Button — Download arrow bounce on hover
   ----------------------------------------------- */
@keyframes downloadBounce {
    0%, 100% { transform: translateY(0); }
    40%       { transform: translateY(4px); }
    70%       { transform: translateY(2px); }
}

.about__cv-btn:hover i {
    animation: downloadBounce 0.6s ease-in-out infinite;
}

/* -----------------------------------------------
   8. Section Separator Line
   ----------------------------------------------- */
.about::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

.about.is-revealed::before {
    transform: scaleX(1);
}

/* -----------------------------------------------
   Reduced Motion Overrides
   ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .reveal-child,
    .about__header,
    .about__badge,
    .about__detail-card,
    .section-title-bar {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .about__image-wrap:hover .about__image { animation: none !important; }
    .about__detail-card:hover { animation: none !important; }
    .about__cv-btn:hover i { animation: none !important; }
}

/* ==============================================
   SKILLS SECTION — Animation Styles
   ============================================== */

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

.skill-card {
    transition:
        opacity 0.48s ease,
        transform 0.48s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.skill-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.skill-card:hover {
    transform: translateY(-6px);
    border-color: rgba(77, 159, 255, 0.38);
    box-shadow:
        0 0 0 1px rgba(77, 159, 255, 0.12),
        0 8px 32px rgba(77, 159, 255, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

.skill-card.revealed:hover {
    transform: translateY(-6px);
}

.skill-card:hover .skill-card__icon {
    background: rgba(77, 159, 255, 0.14);
    border-color: rgba(77, 159, 255, 0.32);
}

.skill-card:hover .skill-card__icon i {
    color: #74b6ff;
    filter: drop-shadow(0 0 6px rgba(77, 159, 255, 0.55));
}

.skills-tab {
    transition:
        color       0.2s ease,
        background  0.2s ease,
        border-color 0.2s ease,
        box-shadow  0.2s ease,
        transform   0.15s ease;
}

.skills-tab:active {
    transform: scale(0.97);
}

@keyframes accentGrow {
    from { width: 0; opacity: 0; }
    to   { width: 64px; opacity: 1; }
}

@keyframes accentPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(77, 159, 255, 0.3); }
    50%       { box-shadow: 0 0 18px rgba(77, 159, 255, 0.55); }
}

.skills-heading-accent {
    animation:
        accentGrow   0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both,
        accentPulse  3s ease-in-out 1.2s infinite;
}

/* ==============================================
   PROJECTS SECTION — Animation Styles
   ============================================== */

@keyframes projAccentGrow {
    from { width: 0; opacity: 0; }
    to   { width: 64px; opacity: 1; }
}

.projects-heading-accent {
    animation: projAccentGrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.project-card {
    transition:
        opacity        0.52s ease,
        transform      0.52s ease,
        border-color   0.35s ease,
        box-shadow     0.35s ease;
}

.project-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.project-card:hover {
    transform: translateY(-7px);
    border-color: rgba(77, 159, 255, 0.22);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(77, 159, 255, 0.1),
        0 0 30px rgba(77, 159, 255, 0.08);
}

.project-card.revealed:hover {
    transform: translateY(-7px);
}

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

.projects-footer {
    animation: fadeUp 0.6s ease 0.6s both;
}

/* ==============================================
   ARCHIVE PROJECTS — Animation Styles
   ============================================== */

@keyframes archiveAccentGrow {
    from { width: 0; opacity: 0; }
    to   { width: 64px; opacity: 1; }
}

.archive-projects__heading-accent {
    animation: archiveAccentGrow 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

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

.archive-projects__pagination {
    animation: paginationFade 0.5s ease 0.4s both;
}

/* ==============================================
   SINGLE PROJECT — Animation Styles
   ============================================== */

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

.sp-back-link  { animation: spHeroIn 0.55s ease 0.1s both; }
.sp-hero__title { animation: spHeroIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.sp-hero__role  { animation: spHeroIn 0.55s ease 0.35s both; }

@keyframes spKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
}

.sp-hero__image {
    animation: spKenBurns 12s ease-in-out infinite alternate;
}

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

.sp-content     { animation: spBodyIn 0.6s ease 0.3s both; }
.sp-details-card { animation: spBodyIn 0.6s ease 0.45s both; }

.sp-details-card {
    position: relative;
    overflow: hidden;
}

.sp-details-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(77, 159, 255, 0.45), transparent);
    border-radius: 1px;
}

@keyframes relatedAccentGrow {
    from { width: 0; opacity: 0; }
    to   { width: 48px; opacity: 1; }
}

.sp-related__accent {
    animation: relatedAccentGrow 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes btnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(77, 159, 255, 0); }
    50%      { box-shadow: 0 0 16px 4px rgba(77, 159, 255, 0.22); }
}

.sp-live-btn {
    animation: spBodyIn 0.5s ease 0.6s both, btnPulse 3s ease 1.2s 3;
}

/* ==============================================
   SERVICES SECTION — Animation Styles
   ============================================== */

@keyframes svcAccentGrow {
    from { width: 0; opacity: 0; }
    to   { width: 64px; opacity: 1; }
}

@keyframes svcAccentPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(77, 159, 255, 0.3); }
    50%      { box-shadow: 0 0 20px rgba(77, 159, 255, 0.55); }
}

.services-heading-accent {
    animation:
        svcAccentGrow  0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both,
        svcAccentPulse 3.2s ease-in-out 1.2s infinite;
}

.service-card {
    transition:
        opacity      0.5s ease,
        transform    0.5s ease,
        border-color 0.3s ease,
        box-shadow   0.3s ease;
}

.service-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.service-card:hover {
    transform: translateY(-7px);
    border-color: rgba(77, 159, 255, 0.2);
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(77, 159, 255, 0.08),
        0 0 28px rgba(77, 159, 255, 0.07);
}

.service-card.revealed:hover {
    transform: translateY(-7px);
}

/* ==============================================
   CONTACT SECTION — Animation Styles
   ============================================== */

.form-input:focus {
    border-color: #4D9FFF;
    background: rgba(77, 159, 255, 0.04);
    box-shadow:
        0 0 0 3px rgba(77, 159, 255, 0.12),
        0 0 20px rgba(77, 159, 255, 0.08);
}

@keyframes inputFocusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(77, 159, 255, 0.3); }
    70%  { box-shadow: 0 0 0 8px rgba(77, 159, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(77, 159, 255, 0); }
}

.form-input:focus {
    animation: inputFocusPulse 0.5s ease forwards;
}

.contact-submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-submit-btn:hover {
    background: #6aafff;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(77, 159, 255, 0.4);
}

.contact-submit-btn:hover::before { opacity: 1; }

.contact-submit-btn:hover .btn-arrow {
    transform: translateX(4px);
}

.contact-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(77, 159, 255, 0.3);
}

.contact-submit-btn.is-loading {
    pointer-events: none;
    opacity: 0.8;
}

.contact-submit-btn.is-loading .btn-text { opacity: 0.7; }

.contact-submit-btn.is-loading .btn-loader {
    display: block;
    animation: spinLoader 0.7s linear infinite;
}

.contact-submit-btn.is-loading .btn-arrow { display: none; }

@keyframes spinLoader {
    to { transform: rotate(360deg); }
}

@keyframes feedbackSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.contact-feedback.is-visible {
    animation: feedbackSlideIn 0.4s ease forwards;
}

.contact-info.is-revealed     { transition-delay: 0.05s; }
.contact-form-wrap.is-revealed { transition-delay: 0.2s; }

@keyframes cardShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.contact-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(77, 159, 255, 0.04),
        transparent
    );
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.contact-card {
    position: relative;
    overflow: hidden;
}

.contact-card:hover::after {
    opacity: 1;
    animation: cardShimmer 1.2s ease infinite;
}

.contact-section::after {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(77, 159, 255, 0.06) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

@keyframes borderTrace {
    0%   { border-color: rgba(77, 159, 255, 0.05); }
    50%  { border-color: rgba(77, 159, 255, 0.2); }
    100% { border-color: rgba(77, 159, 255, 0.1); }
}

.contact-form-wrap.is-revealed {
    animation: borderTrace 2s ease 0.3s forwards;
}

.contact-social-link {
    position: relative;
    overflow: hidden;
}

.contact-social-link::after {
    content: '';
    position: absolute;
    inset: 50%;
    background: rgba(77, 159, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.contact-social-link:hover::after {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 1;
}

.contact-social-link:active::after {
    opacity: 0;
    transition: 0s;
}

/* ==============================================
   FOOTER — Animation Styles
   ============================================== */

.footer-nav-link:hover {
    transform: translateX(6px);
}

.footer-nav-link:hover .footer-nav-arrow {
    opacity: 1;
    transform: translateX(0);
}

.footer-social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(77, 159, 255, 0.25);
}

@keyframes socialRipple {
    from { transform: scale(0.8); opacity: 0.6; }
    to   { transform: scale(2.2); opacity: 0; }
}

.footer-social-link:active::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(77, 159, 255, 0.2);
    animation: socialRipple 0.5s ease forwards;
}

.footer-social-link {
    position: relative;
    overflow: hidden;
}

@keyframes logoPulseFooter {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.12); }
}

.footer-logo:hover .footer-logo-glow {
    animation: logoPulseFooter 1.8s ease-in-out infinite;
}

.footer-logo:hover .footer-logo-text {
    border-color: rgba(77, 159, 255, 0.7);
    box-shadow: 0 0 16px rgba(77, 159, 255, 0.3);
}

.footer-logo-text {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

@keyframes bttBounceIn {
    0%   { transform: translateY(16px); opacity: 0; }
    60%  { transform: translateY(-4px); opacity: 1; }
    80%  { transform: translateY(2px); }
    100% { transform: translateY(0);   opacity: 1; }
}

.back-to-top.is-visible {
    animation: bttBounceIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes iconNudgeUp {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-4px); }
    100% { transform: translateY(-2px); }
}

.back-to-top:hover i {
    animation: iconNudgeUp 0.35s ease forwards;
}

@keyframes bttRipple {
    from { transform: scale(0); opacity: 0.5; }
    to   { transform: scale(2.5); opacity: 0; }
}

.back-to-top.is-clicking .back-to-top-ripple {
    animation: bttRipple 0.5s ease forwards;
}

@keyframes edgeBreathe {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

.footer-edge-glow {
    animation: edgeBreathe 4s ease-in-out infinite;
}

.footer-contact-item:hover .footer-contact-icon {
    background: rgba(77, 159, 255, 0.14);
    border-color: rgba(77, 159, 255, 0.35);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.footer-col-heading::after {
    transition: width 0.35s ease;
}

.footer-col:hover .footer-col-heading::after {
    width: 48px;
}

@keyframes nameShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.footer-credit-name {
    background: linear-gradient(
        90deg,
        #4D9FFF 0%,
        #a0cfff 40%,
        #4D9FFF 60%,
        #4D9FFF 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nameShimmer 4s linear infinite;
}