/* ==========================================================================
   TEMAN MENDAKI — PRIVATE TRIP PENDAKIAN
   Warm Editorial Luxury (Light Mode) Design System Stylesheet
   ========================================================================== */

/* 1. Global Typography & Core Palette */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: transparent;
    color: #18181B;
}

/* 2. Atmospheric Background - Panorama Gunung Sindoro & Sumbing Lebih Jernih */
@keyframes bgKenBurnsOpening {
    0% {
        transform: scale(1.08);
        filter: brightness(0.96) contrast(1.08) saturate(1.08);
    }
    100% {
        transform: scale(1.02);
        filter: brightness(1.04) contrast(1.14) saturate(1.18);
    }
}

.persistent-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -3;
    background-image: url('images/background.png');
    background-position: center 25%;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.02);
    filter: brightness(1.04) contrast(1.14) saturate(1.18);
    animation: bgKenBurnsOpening 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.persistent-overlay {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(to bottom, rgba(247, 245, 240, 0.32) 0%, rgba(247, 245, 240, 0.45) 45%, rgba(247, 245, 240, 0.55) 100%);
    pointer-events-none;
}

/* 2.1 Text Readability & Ambient Glow for Open Elements */
.text-halo-clarity {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95), 0 0 14px rgba(247, 245, 240, 0.9);
}

.hero-ambient-glow {
    position: relative;
}

.hero-ambient-glow::before {
    content: '';
    position: absolute;
    inset: -20px -25px;
    background: radial-gradient(ellipse at 35% 40%, rgba(255, 255, 255, 0.65) 0%, rgba(247, 245, 240, 0.45) 55%, transparent 85%);
    filter: blur(20px);
    z-index: -1;
    pointer-events-none;
    border-radius: 2rem;
}

/* 3. Hero Visual - Showcase Foto Asli Mas Hakim & Floating Service Pills */
.hero-owner-frame {
    position: relative;
    border-radius: 1.75rem;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(229, 224, 216, 0.85);
    box-shadow: 0 20px 45px -10px rgba(28, 25, 23, 0.12), 0 4px 12px -2px rgba(28, 25, 23, 0.05);
}

.hero-owner-frame:hover {
    border-color: #DA6E33;
    box-shadow: 0 25px 50px -10px rgba(218, 110, 51, 0.18);
}

.hero-owner-img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-owner-frame:hover .hero-owner-img {
    transform: scale(1.04);
}

.orbital-canvas {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbital-ring {
    position: absolute;
    border-radius: 9999px;
    border: 1px solid rgba(218, 110, 51, 0.18);
    pointer-events-none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbital-ring-1 {
    width: 220px;
    height: 220px;
}

.orbital-ring-2 {
    width: 350px;
    height: 350px;
    border-color: rgba(218, 110, 51, 0.24);
}

.orbital-ring-3 {
    width: 480px;
    height: 480px;
    border-color: rgba(218, 110, 51, 0.14);
}

.orbital-node {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: #DA6E33;
    box-shadow: 0 0 8px rgba(218, 110, 51, 0.6);
}

/* Floating Service Pills with Crisp White Surface & Warm Shadows */
.floating-service-pill {
    background-color: #FFFFFF;
    border: 1px solid #E5E0D8;
    box-shadow: 0 10px 25px -4px rgba(28, 25, 23, 0.08), 0 2px 6px -1px rgba(28, 25, 23, 0.04);
    color: #18181B;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-service-pill:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: #DA6E33;
    box-shadow: 0 16px 32px -6px rgba(218, 110, 51, 0.22);
}

/* Micro-floating animations */
@keyframes pill-float-1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

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

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

.float-anim-1 {
    animation: pill-float-1 3.8s ease-in-out infinite;
}

.float-anim-2 {
    animation: pill-float-2 4.4s ease-in-out infinite 0.6s;
}

.float-anim-3 {
    animation: pill-float-3 5.0s ease-in-out infinite 1.2s;
}

/* 4. Kartu Solid Luxury Alabaster dengan Nuansa Frosted Glass Halus */
.card-solid {
    background-color: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(229, 224, 216, 0.80);
    box-shadow: 0 10px 30px -5px rgba(28, 25, 23, 0.05), 0 2px 6px -2px rgba(28, 25, 23, 0.02);
    color: #18181B;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-solid:hover {
    background-color: rgba(255, 255, 255, 0.88);
    border-color: #DA6E33;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -8px rgba(218, 110, 51, 0.14);
}

/* 5. Kartu Katalog Foto Gunung dengan Zoom Animasi */
.mountain-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid rgba(229, 224, 216, 0.80);
    background-color: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px -4px rgba(28, 25, 23, 0.06);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mountain-card:hover {
    transform: translateY(-6px);
    border-color: #DA6E33;
    box-shadow: 0 20px 40px -10px rgba(218, 110, 51, 0.22);
}

.mountain-card-img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
}

.mountain-card:hover .mountain-card-img {
    transform: scale(1.12);
}

/* 6. Overlay pada Foto Katalog */
.mountain-card-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(24, 24, 27, 0.48);
    transition: background-color 0.4s ease;
}

.mountain-card:hover .mountain-card-overlay {
    background-color: rgba(24, 24, 27, 0.35);
}

/* 7. Animasi Interaktif: Spring Click */
.spring-click {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.spring-click:active {
    transform: scale(0.96) !important;
}

/* 7.1 WhatsApp Brand Button Official Green */
.btn-whatsapp {
    background-color: #25D366 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px -2px rgba(37, 211, 102, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    text-shadow: none !important;
}

.btn-whatsapp:hover {
    background-color: #20ba5a !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px -3px rgba(37, 211, 102, 0.55) !important;
    transform: translateY(-1px);
}

.btn-whatsapp:active {
    background-color: #1ea952 !important;
    transform: scale(0.96) !important;
}

/* 8. Animasi Radar Pulse Solid Terracotta */
.radar-beacon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.radar-beacon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background-color: #DA6E33;
    opacity: 0.8;
    animation: radarPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes radarPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.9;
    }
    70% {
        transform: scale(2.8);
        opacity: 0;
    }
    100% {
        transform: scale(3.0);
        opacity: 0;
    }
}

/* 9. Animasi Pop Price Real-Time */
.price-pop {
    animation: pricePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pricePop {
    0% { transform: scale(0.92); opacity: 0.4; }
    60% { transform: scale(1.06); }
    100% { transform: scale(1); opacity: 1; }
}

/* 10. Utilitas Sembunyikan Scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Header Navbar Solid Opaque (Anti-Transparan di Layar HP) */
header nav {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(229, 224, 216, 0.95) !important;
    box-shadow: 0 10px 30px -5px rgba(28, 25, 23, 0.08) !important;
}

#sticky-bottom-bar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(229, 224, 216, 0.95) !important;
    box-shadow: 0 12px 36px -4px rgba(28, 25, 23, 0.16) !important;
}

/* 11. SOP Bento Card Styling Solid, Rapih & Elegan */
.sop-card {
    background-color: #FFFFFF !important;
    border: 1.5px solid rgba(229, 224, 216, 0.95) !important;
    border-radius: 1.25rem;
    padding: 1.15rem 1.25rem;
    box-shadow: 0 4px 16px -2px rgba(28, 25, 23, 0.05), 0 1px 3px 0 rgba(28, 25, 23, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sop-card:hover {
    background-color: #FFFFFF !important;
    border-color: #DA6E33 !important;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -8px rgba(218, 110, 51, 0.16) !important;
}

.sop-card:hover .sop-icon-wrap {
    transform: scale(1.1) rotate(6deg);
}

.sop-icon-wrap {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 12. Custom Dropdown Item Hover */
.custom-dropdown-item {
    transition: all 0.2s ease;
}

.custom-dropdown-item:hover {
    background-color: #FAF5EE;
    border-color: #DA6E33;
}

/* 13. Mobile Responsive Viewport Background */
@media (max-width: 768px) {
    .persistent-bg {
        background-position: 58% top;
    }
}

/* 10. Booking Terms & Confirmation Modal Animation */
.modal-backdrop-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modal-card-open {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
}

@keyframes modalShakeWarning {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.shake-warning {
    animation: modalShakeWarning 0.38s ease-in-out;
}

/* 14. Luxury Footer Card Polish */
footer .card-solid {
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

footer .card-solid:hover {
    border-color: rgba(218, 110, 51, 0.35);
    box-shadow: 0 24px 48px -12px rgba(28, 25, 23, 0.09);
}

/* 15. Dual-Track Infinite Kinetic Marquee for Customer Moments */
@keyframes marqueeScrollLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes marqueeScrollRight {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

.marquee-mask {
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.marquee-track-left {
    display: flex;
    width: max-content;
    animation: marqueeScrollLeft 42s linear infinite;
    will-change: transform;
}

.marquee-track-right {
    display: flex;
    width: max-content;
    animation: marqueeScrollRight 42s linear infinite;
    will-change: transform;
}

.marquee-wrapper:hover .marquee-track-left,
.marquee-wrapper:hover .marquee-track-right {
    animation-play-state: paused;
}

.customer-card-glow {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.customer-card-glow:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 36px -10px rgba(28, 25, 23, 0.16);
    border-color: rgba(218, 110, 51, 0.7);
}

/* 16. Customer Lightbox Modal Animation */
.lightbox-backdrop-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.lightbox-card-open {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* 17. Staggered Opening Animations (Initial Page Load Entrance) */
@keyframes navSlideDown {
    0% {
        transform: translateY(-120%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes heroFadeUp {
    0% {
        transform: translateY(32px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes heroVisualIn {
    0% {
        transform: translateY(40px) scale(0.94);
        opacity: 0;
        filter: blur(8px);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

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

@keyframes shimmerSweep {
    0% {
        transform: translateX(-150%) skewX(-20deg);
    }
    20%, 100% {
        transform: translateX(250%) skewX(-20deg);
    }
}

/* Staggered entrance timing classes */
.anim-nav-in {
    animation: navSlideDown 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.hero-anim-badge {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.hero-anim-title {
    animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.hero-anim-desc {
    animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.hero-anim-cta {
    animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

.hero-anim-metrics {
    animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.85s both;
}

.hero-anim-visual {
    animation: heroVisualIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

.anim-float-subtle {
    animation: floatGentle 4.5s ease-in-out infinite;
}

/* 18. Shimmer Light Reflection Effect for Primary CTAs */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    transform: translateX(-150%) skewX(-20deg);
    animation: shimmerSweep 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

/* 19. Scroll-Driven Reveal System (IntersectionObserver Powered) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Stagger Delays for child cards or columns */
.reveal-stagger-1 {
    transition-delay: 0.1s;
}

.reveal-stagger-2 {
    transition-delay: 0.2s;
}

.reveal-stagger-3 {
    transition-delay: 0.3s;
}

.reveal-stagger-4 {
    transition-delay: 0.4s;
}

/* 20. Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .persistent-bg,
    .anim-nav-in,
    .hero-anim-badge,
    .hero-anim-title,
    .hero-anim-desc,
    .hero-anim-cta,
    .hero-anim-metrics,
    .hero-anim-visual,
    .reveal-on-scroll,
    .anim-float-subtle {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        transition: none !important;
    }

    .btn-shimmer::after {
        display: none !important;
    }
}