/* Custom animations and complex styles that are hard to convert to Tailwind */

/* -------------------------------------------------------------------- */
/* Basic Animations */
/* -------------------------------------------------------------------- */

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

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* -------------------------------------------------------------------- */
/* Button Effects */
/* -------------------------------------------------------------------- */

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.cta-button:hover::before {
    left: 100%;
}

/* -------------------------------------------------------------------- */
/* Section Decorations */
/* -------------------------------------------------------------------- */

.testimonials-section::before {
    content: '"';
    position: absolute;
    top: -100px;
    left: 50px;
    font-size: 300px;
    opacity: 0.1;
    font-family: Georgia, serif;
}

/* -------------------------------------------------------------------- */
/* Scroll Effects */
/* -------------------------------------------------------------------- */

#personal-intro {
    will-change: transform;
}

#personal-intro.scroll-active {
    transition: transform 0.1s ease-out !important;
}

/* -------------------------------------------------------------------- */
/* Carousel Animations */
/* -------------------------------------------------------------------- */

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    transform: translateX(-100%);
    transition: all 0.8s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
}

/* Remove transitions when using animations */
.carousel-slide.exiting,
.carousel-slide.exiting-left,
.carousel-slide.entering-from-right {
    transition: none !important;
}

.carousel-slide.exiting {
    animation: exitSlide 1.2s ease-in-out forwards;
    z-index: 1;
}

.carousel-slide.exiting-left {
    animation: exitSlideLeft 0.8s ease-in-out forwards;
    z-index: 1;
}

.carousel-slide.entering-from-right {
    animation: enterFromRight 0.8s ease-in-out forwards;
    z-index: 2;
}

@keyframes exitSlide {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    40% {
        opacity: 0.3;
        transform: translateX(0) scale(0.9);
    }
    100% {
        opacity: 0.3;
        transform: translateX(-100%) scale(0.9);
    }
}

@keyframes exitSlideLeft {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateX(-100%) scale(1);
    }
}

@keyframes enterFromRight {
    0% {
        opacity: 0;
        transform: translateX(0) scale(0.85);
    }
    30% {
        opacity: 0.3;
        transform: translateX(0) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Initial state for backward entrance - hide slide completely */
.carousel-slide.pre-enter-right {
    opacity: 0 !important;
    transform: translateX(0) scale(0.85) !important;
    transition: none !important;
}

.carousel-dot.active {
    background-color: white !important;
}

/* -------------------------------------------------------------------- */
/* Robust Carousel Animations */
/* -------------------------------------------------------------------- */

.slide-in-left {
  animation: slideInLeft 0.8s ease forwards;
  z-index: 2;
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.shrink-fade-left {
  animation: shrinkFadeLeft 0.8s ease forwards;
  z-index: 1;
}

@keyframes shrinkFadeLeft {
  0%   { transform: translateX(0) scale(1);   opacity: 1; }
  40%  { transform: translateX(0) scale(0.9); opacity: .3; }
  100% { transform: translateX(-100%) scale(0.9); opacity: .3; }
}

.slide-in-right-grow {
  animation: slideInRightGrow 0.8s ease forwards;
  z-index: 1; /* keep below outgoing card during reverse */
}

@keyframes slideInRightGrow {
  from { transform: translateX(0) scale(0.85); opacity: 0; }
  to   { transform: translateX(0) scale(1);    opacity: 1; }
}

.slide-left {
  animation: slideLeft 0.8s ease forwards;
  z-index: 2; /* ensure outgoing card stays on top when moving left */
}

@keyframes slideLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Ensure no default transition interferes during animations */
.carousel-slide { 
    transition: none !important; 
}

/* -------------------------------------------------------------------- */
/* Card Hover Animation */
/* -------------------------------------------------------------------- */

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

.hover-card .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    padding: 24px;
    transform: translateY(calc(100% - 80px));
    transition: transform 0.3s ease 0s, 
                background 0.2s ease 0s, 
                color 0s ease 0.1s, 
                backdrop-filter 0s ease 0.1s,
                filter 0.1s ease 0.2s;
    z-index: 2;
    filter: drop-shadow(0 0px 15px rgba(0,0,0,0.95));
}

/* Desktop hover effects */
@media (hover: hover) and (pointer: fine) {
    .hover-card:hover .card-overlay {
        transform: translateY(0);
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: black;
        filter: none;
        transition: transform 0.3s ease 0s, 
                    background 0.1s ease 0s, 
                    color 0.1s ease 0s, 
                    backdrop-filter 0.1s ease 0s,
                    filter 0.1s ease 0s;
    }
}

/* Touch device interactions */
@media (hover: none) and (pointer: coarse) {
    .hover-card .card-overlay {
        /* On touch devices, ensure text is always visible */
        transform: translateY(calc(100% - 120px));
        background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3));
        backdrop-filter: none;
    }
    
    .hover-card:active .card-overlay {
        transform: translateY(0);
        background: rgba(255, 255, 255, 0.9);
        color: black;
        filter: none;
    }
}

/* -------------------------------------------------------------------- */
/* Ken Burns Slideshow Styles */
/* -------------------------------------------------------------------- */

.ken-burns-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: ease-in-out;
}

.ken-burns-slide img {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.ken-burns-slide.active {
    opacity: 1;
    z-index: 2;
}

.ken-burns-slide.active img {
    animation: kenBurnsEffect var(--kb-duration, 8s) ease-out forwards;
}

.ken-burns-slide.fading-out {
    z-index: 1;
}

.ken-burns-slide.fading-out img {
    animation: kenBurnsEffect var(--kb-duration, 8s) ease-out forwards;
    animation-fill-mode: forwards;
}

@keyframes kenBurnsEffect {
    0% {
        transform: var(--kb-start-transform, scale(1) translate(0, 0));
    }
    100% {
        transform: var(--kb-end-transform, scale(1.2) translate(-5%, -5%));
    }
}

/* -------------------------------------------------------------------- */
/* Scrollbar Hide Utility */
/* -------------------------------------------------------------------- */

.scrollbar-hide {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

/* -------------------------------------------------------------------- */
/* Ken Burns Slideshow Responsive Sizing */
/* -------------------------------------------------------------------- */

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 6/5) {
    .aspect-\[6\/5\] {
        position: relative;
    }
    .aspect-\[6\/5\]::before {
        content: "";
        display: block;
        padding-top: 83.333%; /* 5/6 * 100% = 83.333% for 6:5 aspect ratio */
    }
    .aspect-\[6\/5\] > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* -------------------------------------------------------------------- */
/* Mobile Optimizations */
/* -------------------------------------------------------------------- */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .ken-burns-slide.active img {
        animation: none;
    }
    
    .carousel-slide {
        transition: opacity 0.3s ease !important;
    }
    
    .hover-card .card-overlay {
        transition: opacity 0.3s ease !important;
    }
}

/* Fix Mobile Safari parallax issues */
@media (max-width: 1024px) {
    /* Disable fixed background attachment on mobile devices to fix iOS Safari parallax issues */
    .bg-fixed {
        background-attachment: scroll !important;
    }
}

/* Optimize performance on mobile devices */
@media (max-width: 768px) {
    /* Reduce Ken Burns effect intensity on mobile */
    @keyframes kenBurnsEffect {
        0% {
            transform: var(--kb-start-transform, scale(1) translate(0, 0));
        }
        100% {
            transform: var(--kb-end-transform, scale(1.1) translate(-2%, -2%));
        }
    }
    
    /* Simplify parallax effects on mobile */
    .hero {
        transform: none !important;
    }
    
    /* Optimize image scaling transitions */
    .group:hover img,
    .group-hover\\:scale-105:hover,
    .group-hover\\:scale-110:hover {
        transform: scale(1.02) !important;
    }
}