/**
 * System-wide motion: breathing, smooth hovers, micro-interactions
 */

@media (prefers-reduced-motion: reduce) {
    .breath,
    .breath-soft,
    .float-orb,
    .nav-profile-photo,
    .skill-card-icon,
    .whatsapp-fab,
    .loader-dot,
    .hero-image-breath,
    .hero-image-breath .hero-image-placeholder,
    .hero-image-breath .hero-portrait,
    .skill-badge {
        animation: none !important;
    }

    .skill-badge {
        background: var(--brand-secondary, #f26522) !important;
    }
}

/* ========== Breathing ========== */
@keyframes breath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

@keyframes breathSoft {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242, 101, 34, 0.25); }
    50% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(242, 101, 34, 0); }
}

@keyframes breathGlow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.08); }
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes whatsappFabFloat {
    0%, 100% { transform: translateY(-50%); }
    50% { transform: translateY(calc(-50% - 8px)); }
}

.breath {
    animation: breath 3.6s ease-in-out infinite;
}

.breath-soft {
    animation: breathSoft 4s ease-in-out infinite;
}

/* Hero portrait – professional smooth breathing */
@keyframes heroPortraitBreath {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.035) translateY(-6px); }
}

@keyframes heroGlowPulse {
    0%, 100% { box-shadow: 0 20px 50px rgba(0, 64, 128, 0.25), 0 0 0 0 rgba(242, 101, 34, 0.2); }
    50% { box-shadow: 0 28px 60px rgba(0, 64, 128, 0.32), 0 0 0 12px rgba(242, 101, 34, 0); }
}

.hero-image-breath {
    animation: heroGlowPulse 4.5s ease-in-out infinite;
}

.hero-image-breath .hero-image-placeholder,
.hero-image-breath .hero-portrait {
    animation: heroPortraitBreath 4.5s ease-in-out infinite;
    transform-origin: center center;
}

.hero-image-breath:hover .hero-image-placeholder,
.hero-image-breath:hover .hero-portrait {
    animation-play-state: paused;
}

.nav-profile-photo,
.footer-profile-photo {
    animation: breathSoft 4.5s ease-in-out infinite;
}

.skill-card-icon {
    animation: breath 4s ease-in-out infinite;
}

.hero .float-orb {
    animation: breathGlow 7s ease-in-out infinite;
}

.whatsapp-fab {
    animation: whatsappFabFloat 3.2s ease-in-out infinite;
}

.ts-quote-mark {
    animation: breath 3.8s ease-in-out infinite;
}

/* ========== Smooth hover lifts ========== */
.skill-card,
.project-card,
.pf-card,
.ts-card,
.stat-item,
.bk-card,
.contact-form,
.work-together-card {
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease,
        border-color 0.35s ease,
        background-color 0.35s ease !important;
}

.skill-card:hover,
.project-card:hover,
.pf-card:hover,
.ts-card:hover,
.stat-item:hover {
    transform: translateY(-10px);
}

.btn,
.btn-booking,
.btn-nav-cta,
.pf-chip,
.portfolio-filter-btn,
.social-icon,
.nav-menu a,
.pf-card-cta,
.project-read-more {
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease !important;
}

.btn:hover,
.btn-booking:not(.secondary):hover,
.btn-nav-cta:hover {
    transform: translateY(-3px);
}

.social-icon:hover {
    transform: translateY(-4px) scale(1.08);
}

.nav-logo:hover .nav-profile-photo,
.nav-logo:hover .nav-logo-icon {
    animation-play-state: paused;
    transform: scale(1.08);
}

.skill-card:hover .skill-card-icon {
    animation-play-state: paused;
    transform: rotate(8deg) scale(1.12);
}

/* ========== Icon / text visibility safety net ========== */
.section-title,
.skills-heading,
.skills-subtitle,
.skills-text,
.skill-card-title,
.skill-card-desc,
.work-together-title,
.work-together-text,
.stat-number,
.stat-label,
.ts-title,
.ts-subtitle,
.ts-text,
.ts-name,
.ts-role,
.ts-eyebrow,
.pf-hero-title,
.bk-hero-title,
.booking-card-title,
.nav-brand-name,
.footer-logo-text {
    visibility: visible !important;
    opacity: 1 !important;
}

.skill-card-icon,
.skill-card-icon svg,
.nav-menu .nav-icon,
.nav-menu .nav-icon svg,
.ts-quote-mark,
.ts-quote-mark svg,
.social-icon svg,
.footer-scroll-top svg,
.footer-chat svg {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Dark sections: force readable light text */
.skills .skills-heading,
.skills .skill-card-title,
.stats .stat-number,
.stats .stat-label,
.hero .hero-name,
.hero .hero-greeting,
.pf-hero-title,
.bk-hero-title {
    -webkit-text-fill-color: unset !important;
}

.skills .skills-heading,
.stats .stat-label {
    color: #ffffff !important;
}

.stats .stat-number {
    color: var(--brand-secondary, #f26522) !important;
}

/* Smooth page link underline + hover lift */
.nav-menu a,
.nav-menu .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.nav-menu a::after,
.nav-menu .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--brand-secondary, #f26522);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-menu a:hover,
.nav-menu .nav-link:hover {
    transform: translateY(-2px);
    color: var(--brand-secondary, #f26522) !important;
}

.nav-menu a:hover::after,
.nav-menu a.active::after,
.nav-menu .nav-link:hover::after,
.nav-menu .nav-link.active::after {
    width: 100%;
}

.nav-menu .nav-link-text {
    transition: letter-spacing 0.3s ease;
}

.nav-menu a:hover .nav-link-text {
    letter-spacing: 0.02em;
}

.nav-menu .nav-icon {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.nav-menu a:hover .nav-icon {
    transform: scale(1.12);
    color: var(--brand-secondary, #f26522);
}

.btn-nav-cta {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.3s ease !important;
}

.btn-nav-cta:hover {
    transform: translateY(-3px) scale(1.03);
}

@media (max-width: 768px) {
    .nav-menu a::after,
    .nav-menu .nav-link::after { display: none; }
}

/* Image hover zoom */
.about-image-wrap img,
.pf-card-media img,
.project-preview-placeholder img {
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-image-wrap:hover img,
.pf-card:hover .pf-card-media img,
.project-showcase-preview:hover img {
    transform: scale(1.05);
}