/* Custom Styles for Wedding Landing Page */

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

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

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

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

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

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Navigation Styles */
#navbar.scrolled {
    background-color: rgba(44, 44, 44, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#navbar.scrolled .nav-link,
#navbar.scrolled a {
    color: white;
}

/* Hero Section */
#hero {
    background-attachment: fixed;
}

@media (max-width: 768px) {
    #hero {
        background-attachment: scroll;
    }
}

/* Timeline Styles */
.timeline-item {
    position: relative;
}

/* Countdown Animation */
.countdown-item {
    transition: transform 0.3s ease;
}

.countdown-item:hover {
    transform: scale(1.05);
}

/* Gallery Grid */
.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(44, 44, 44, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover::after {
    opacity: 1;
}

/* Lightbox Styles */
#lightbox {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#lightbox.active {
    opacity: 1;
    visibility: visible;
    display: flex;
}

/* Event Cards */
.event-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #FDF8F5;
}

::-webkit-scrollbar-thumb {
    background: #F8B67C;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e5a36a;
}

/* Selection Color */
::selection {
    background-color: #FFE4E1;
    color: #2C2C2C;
}

/* Focus Styles for Accessibility */
a:focus,
button:focus {
    outline: 2px solid #F8B67C;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    #navbar,
    #lightbox,
    .animate-bounce {
        display: none !important;
    }

    body {
        background: white !important;
    }

    section {
        page-break-inside: avoid;
    }
}

/* Loading State */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Responsive Typography */
@media (max-width: 640px) {
    .font-script {
        font-size: 0.9em;
    }
}

/* Hero Image Object Position Adjustments */
#hero img {
    object-position: center 30%;
}

@media (max-width: 768px) {
    #hero img {
        object-position: center center;
    }
}

/* ==========================================
   Enhanced Gallery Animations
   ========================================== */

/* Gallery Container Animation */
#gallery .grid {
    opacity: 0;
    animation: galleryFadeIn 0.8s ease-out forwards;
}

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

/* Stagger Animation for Gallery Items */
.gallery-item {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    animation: galleryItemIn 0.6s ease-out forwards;
}

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

/* Stagger delays for first 16 items */
.gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-item:nth-child(2) { animation-delay: 0.15s; }
.gallery-item:nth-child(3) { animation-delay: 0.2s; }
.gallery-item:nth-child(4) { animation-delay: 0.25s; }
.gallery-item:nth-child(5) { animation-delay: 0.3s; }
.gallery-item:nth-child(6) { animation-delay: 0.35s; }
.gallery-item:nth-child(7) { animation-delay: 0.4s; }
.gallery-item:nth-child(8) { animation-delay: 0.45s; }
.gallery-item:nth-child(9) { animation-delay: 0.5s; }
.gallery-item:nth-child(10) { animation-delay: 0.55s; }
.gallery-item:nth-child(11) { animation-delay: 0.6s; }
.gallery-item:nth-child(12) { animation-delay: 0.65s; }
.gallery-item:nth-child(13) { animation-delay: 0.7s; }
.gallery-item:nth-child(14) { animation-delay: 0.75s; }
.gallery-item:nth-child(15) { animation-delay: 0.8s; }
.gallery-item:nth-child(16) { animation-delay: 0.85s; }
.gallery-item:nth-child(n+17) { animation-delay: 0.9s; }

/* Enhanced Hover Effects */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px -10px rgba(248, 182, 124, 0.4);
    z-index: 10;
}

/* Image zoom effect */
.gallery-item img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.15);
}

/* Overlay gradient on hover */
.gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(248, 182, 124, 0.6) 0%,
        rgba(255, 228, 225, 0.3) 30%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.gallery-item:hover::before {
    opacity: 1;
}

/* Heart icon on hover */
.gallery-item::after {
    content: '\2665';
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 24px;
    color: white;
    opacity: 0;
    transform: scale(0) rotate(-15deg);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gallery-item:hover::after {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Magnify icon on hover center */
.gallery-item .magnify-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 3;
}

.gallery-item:hover .magnify-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Ripple effect on click */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.gallery-item:active::before {
    animation: ripple 0.6s ease-out;
}

/* Masonry-style varied heights for visual interest */
.gallery-item:nth-child(3n+1):not(:nth-child(3)):not(:nth-child(9)):not(:nth-child(17)):not(:nth-child(25)) {
    /* Keep default aspect-square */
}

/* Lightbox enhanced styles */
#lightbox img {
    animation: lightboxZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

@keyframes lightboxZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Lightbox navigation buttons enhanced */
#lightbox button {
    transition: all 0.3s ease;
}

#lightbox button:hover {
    transform: scale(1.2);
    color: #F8B67C;
}

/* Counter indicator for lightbox */
#lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 16px;
    border-radius: 20px;
}

/* ==========================================
   Polaroid Slideshow Styles
   ========================================== */

/* Slideshow Container */
#slideshow {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#slideshow.active {
    opacity: 1;
    visibility: visible;
    display: block;
}

/* Background Polaroids (scattered, blurred) */
.bg-polaroid {
    position: absolute;
    background: white;
    padding: 8px 8px 30px 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    opacity: 0.4;
    filter: blur(2px);
}

.bg-polaroid img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Main Polaroid Frame - NO BLUR, FULL OPACITY */
.polaroid-frame {
    background: white;
    padding: 12px 12px 50px 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);
    transform-origin: center center;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: scale(0.8) rotate(0deg);
    filter: none !important;
    z-index: 10;
}

.polaroid-frame.active {
    opacity: 1 !important;
    transform: scale(1) rotate(var(--rotation, 0deg));
    filter: none !important;
}

.polaroid-frame img {
    opacity: 1 !important;
    filter: none !important;
}

.polaroid-frame.exit {
    opacity: 0;
    transform: scale(0.8) translateY(-30px) rotate(var(--rotation, 0deg));
}

.polaroid-frame img {
    width: 100%;
    height: auto;
    display: block;
}

/* Polaroid caption area */
.polaroid-caption {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    text-align: center;
    font-family: 'Great Vibes', cursive;
    color: #666;
    font-size: 16px;
}

/* Different sizes for variety - LARGER */
.polaroid-frame.size-small {
    max-width: 280px;
}

.polaroid-frame.size-medium {
    max-width: 380px;
}

.polaroid-frame.size-large {
    max-width: 500px;
}

@media (max-width: 768px) {
    .polaroid-frame.size-small {
        max-width: 200px;
        padding: 8px 8px 40px 8px;
    }

    .polaroid-frame.size-medium {
        max-width: 260px;
        padding: 10px 10px 45px 10px;
    }

    .polaroid-frame.size-large {
        max-width: 320px;
        padding: 10px 10px 45px 10px;
    }
}

@media (min-width: 1024px) {
    .polaroid-frame.size-large {
        max-width: 550px;
    }
}

/* Animations */
@keyframes polaroidEnter {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(calc(var(--rotation, 0deg) - 10deg)) translateY(50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(var(--rotation, 0deg)) translateY(0);
    }
}

@keyframes polaroidFloat {
    0%, 100% {
        transform: scale(1) rotate(var(--rotation, 0deg)) translateY(0);
    }
    50% {
        transform: scale(1) rotate(var(--rotation, 0deg)) translateY(-8px);
    }
}

.polaroid-frame.entering {
    animation: polaroidEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.polaroid-frame.floating {
    animation: polaroidFloat 3s ease-in-out infinite;
}

/* Progress bar glow effect */
#slideshow-progress {
    box-shadow: 0 0 15px rgba(248, 182, 124, 0.6);
}

/* Tape effect on polaroid */
.polaroid-tape {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 60px;
    height: 20px;
    background: rgba(255, 248, 220, 0.8);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Heart decoration */
.polaroid-heart {
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: #F8B67C;
    font-size: 18px;
    opacity: 0.7;
}

/* ==========================================
   Heart Ending Styles - Grid Layout
   ========================================== */

.heart-container {
    position: relative;
}

.heart-photo-frame {
    border-radius: 3px;
}

.heart-photo-frame img {
    border-radius: 2px;
}

/* Inner heart (red border) - center small heart */
.heart-photo-frame.inner-heart {
    background: #e85a5a !important;
    box-shadow: 0 3px 12px rgba(232, 90, 90, 0.5) !important;
}

/* Inner heart glow animation */
@keyframes innerHeartGlow {
    0%, 100% {
        box-shadow: 0 3px 12px rgba(232, 90, 90, 0.5);
    }
    50% {
        box-shadow: 0 3px 20px rgba(232, 90, 90, 0.8);
    }
}

.heart-photo-frame.inner-heart {
    animation: innerHeartGlow 2s ease-in-out infinite;
}

/* Heart pulse animation after forming */
@keyframes heartPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.heart-container.pulse {
    animation: heartPulse 2s ease-in-out infinite;
}

/* Heart message styling */
.heart-message {
    white-space: nowrap;
}

/* Center name "Đ & N" in heart */
.heart-center-name {
    font-weight: 500;
    letter-spacing: 1px;
}

@keyframes nameGlow {
    0%, 100% {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1), 0 0 8px rgba(232, 90, 90, 0.3);
    }
    50% {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1), 0 0 15px rgba(232, 90, 90, 0.6);
    }
}

.heart-center-name {
    animation: nameGlow 2s ease-in-out infinite;
}

/* Responsive heart grid sizes */
@media (max-width: 480px) {
    .heart-container {
        width: 95vw !important;
        height: 85vw !important;
        gap: 2px !important;
        padding: 5px !important;
    }

    .heart-photo-frame {
        padding: 2px !important;
    }

    .heart-message {
        font-size: 1.5rem !important;
        bottom: -45px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .heart-container {
        width: 85vw !important;
        height: 75vw !important;
        gap: 3px !important;
    }

    .heart-message {
        font-size: 2rem !important;
        bottom: -50px !important;
    }
}

@media (min-width: 1025px) {
    .heart-container {
        width: min(90vw, 800px) !important;
        height: min(80vw, 700px) !important;
        gap: 5px !important;
    }

    .heart-photo-frame {
        padding: 4px !important;
    }

    .heart-message {
        font-size: 3rem !important;
        bottom: -70px !important;
    }
}