/* ========================================
   SunsetRide Bali - Main Stylesheet
   ======================================== */

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

/* Safe area for bottom nav */
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ========================================
   Navbar
   ======================================== */

/* Fallback solid state via class (backup kalau JS inline style gagal) */
.nav-solid {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* Logo & link base transition */
.nav-logo-color { transition: color 0.3s ease; }
.nav-link-item  { transition: color 0.2s ease, background-color 0.2s ease; }
.nav-divider    { transition: background-color 0.3s ease; }

/* ========================================
   Announcement Bar Marquee
   ======================================== */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}
.animate-marquee { animation: marquee 20s linear infinite; }

/* ========================================
   Line Clamp Utilities
   ======================================== */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ========================================
   Scroll Reveal Animation
   ======================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; }

/* ========================================
   Slideshow
   ======================================== */
.slide { will-change: opacity; }

/* ========================================
   Glassmorphism Card
   ======================================== */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ========================================
   Floating Background Shapes
   ======================================== */
.float-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
    animation: floatShape 8s ease-in-out infinite alternate;
}
@keyframes floatShape {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(20px, -30px) scale(1.1); }
}

/* ========================================
   Toast Notification
   ======================================== */
.toast {
    animation: toastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-out {
    animation: toastOut 0.3s ease forwards;
}
@keyframes toastOut {
    to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

/* ========================================
   Admin Custom Scrollbar
   ======================================== */
.admin-scroll::-webkit-scrollbar       { width: 6px; }
.admin-scroll::-webkit-scrollbar-track { background: transparent; }
.admin-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
.admin-scroll::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ========================================
   Blog Prose
   ======================================== */
.prose p      { margin-bottom: 1rem; line-height: 1.8; }
.prose h3     { margin-top: 2rem; }
.prose strong { color: #1F2937; }
.prose ul,
.prose ol     { padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li     { margin-bottom: 0.5rem; }
.prose a      { color: #8CC0EB; text-decoration: underline; }
.prose img    { border-radius: 1rem; margin: 1.5rem 0; }

/* ========================================
   Focus & Selection
   ======================================== */
*:focus-visible {
    outline: 2px solid #8CC0EB;
    outline-offset: 2px;
    border-radius: 4px;
}
::selection {
    background: #8CC0EB;
    color: white;
}

/* ========================================
   Loading Skeleton
   ======================================== */
.skeleton {
    background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
    border-radius: 0.75rem;
}
@keyframes skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========================================
   Print
   ======================================== */
@media print {
    nav, footer, .bottom-nav, #slideshow { display: none !important; }
    main { padding-top: 0 !important; }
}