/* Custom styles and overrides for Sunrise Tour and Travels */

/* Hero background image */
.hero-bg {
    background-image: url('assets/images/de_djawatan_hd.jpg');
}

/* Hero gradient overlay adjusted to match new charcoal background (#0B121F) */
.hero-gradient {
    background: linear-gradient(0deg, rgba(11,18,31,0.9) 0%, rgba(11,18,31,0.3) 100%);
}

/* Map frame border override */
.map-frame {
    border: 0;
}

/* Keyframe Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in {
    opacity: 0;
    animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-up {
    opacity: 0;
    animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animation Delays */
.delay-100 {
    animation-delay: 100ms;
}
.delay-150 {
    animation-delay: 150ms;
}
.delay-200 {
    animation-delay: 200ms;
}
.delay-300 {
    animation-delay: 300ms;
}
.delay-450 {
    animation-delay: 450ms;
}

/* Cinematic scale down animation for Hero Background image on initial load */
@keyframes scaleDownHero {
    from {
        transform: scale(1.08);
    }
    to {
        transform: scale(1);
    }
}

.animate-hero-load {
    animation: scaleDownHero 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Header scroll transition */
header {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
header.scrolled {
    background-color: rgba(252, 251, 249, 0.95);
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 30px -10px rgba(11, 18, 31, 0.08);
    border-color: #E5E0D8;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
header.scrolled .nav-logo,
header.scrolled .nav-logo-icon {
    color: #E05A00 !important;
}
header.scrolled .nav-logo-text {
    color: #0B121F !important;
}
header.scrolled .nav-link {
    color: #4A5568 !important;
}
header.scrolled .nav-link:hover {
    color: #E05A00 !important;
}
header.scrolled .theme-toggle-btn {
    color: #0B121F !important;
    border-color: rgba(11, 18, 31, 0.2) !important;
}
header.scrolled .theme-toggle-btn:hover {
    background-color: rgba(11, 18, 31, 0.08) !important;
}
header.scrolled .header-cta {
    background-color: #E05A00 !important;
    color: #ffffff !important;
    border-color: #E05A00 !important;
}

/* Zoom Image Container */
.zoom-img-container {
    overflow: hidden;
    position: relative;
}
.zoom-img-container img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.zoom-img-container:hover img {
    transform: scale(1.05);
}

/* Grayscale slider images transition (Disabled: always full color) */
.dest-img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Minimalist Lift card effects */
.lift-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lift-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -15px rgba(11, 18, 31, 0.1);
}

/* Card Overlay Stack Shadow */
.shadow-overlay {
    box-shadow: 0 -20px 40px -15px rgba(11, 18, 31, 0.12);
}

/* Card Scroll Entrance Reveal */
.reveal-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-card.active {
    opacity: 1;
    transform: translateY(0);
}

/* Generalized Section Scroll Reveal */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Global Dark Mode Style Overrides */
html.dark body {
    background-color: #1A1D24;
    color: #E6E9F0;
}

html.dark .bg-background {
    background-color: #1A1D24 !important;
}

html.dark .text-on-surface {
    color: #E6E9F0 !important;
}

html.dark .text-on-surface-variant {
    color: #9CA6BA !important;
}

html.dark .text-secondary {
    color: #D1D5DB !important;
}

html.dark .bg-white {
    background-color: #242831 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .bg-surface-container {
    background-color: #242831 !important;
}

html.dark .bg-surface-container-low {
    background-color: #1E2129 !important;
}

html.dark .border-outline-variant {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark input, html.dark select {
    background-color: #2A2F3B !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Scrolled Header Dark Mode Adjustments */
html.dark header.scrolled {
    background-color: rgba(26, 29, 36, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark header.scrolled .nav-logo-text {
    color: #E6E9F0 !important;
}
html.dark header.scrolled .theme-toggle-btn {
    color: #E6E9F0 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html.dark header.scrolled .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Custom Circular View Transition Overrides */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
::view-transition-old(root) {
    z-index: 1;
}
::view-transition-new(root) {
    z-index: 9999;
}

/* Hide native webkit calendar icon and make it overlay on custom icon for seamless click trigger */
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 3rem;
    height: 100%;
    cursor: pointer;
}