/*
Theme Name: Smart Reader
Theme URI: https://smartreader.id
Author: Smart Reader Team
Author URI: https://smartreader.id
Description: Custom Modern Tailwind CSS theme for Smart Reader with smooth scroll and page animations.
Version: 1.2
Text Domain: smartreader
*/

/* Smooth Scroll Global */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Page Entry Fade & Gentle Float Animation */
body {
    animation: pageFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pageFadeIn {
    from {
        opacity: 0.85;
    }
    to {
        opacity: 1;
    }
}

/* Scroll Reveal Base Classes (Fail-Safe: Always visible by default) */
.scroll-reveal,
.scroll-reveal-left,
.scroll-reveal-right,
.scroll-reveal-scale {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Progressive enhancement: only hide pending elements if JS is actively observing */
html.sr-ready .scroll-reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(20px);
}
html.sr-ready .scroll-reveal-left:not(.is-visible) {
    opacity: 0;
    transform: translateX(-20px);
}
html.sr-ready .scroll-reveal-right:not(.is-visible) {
    opacity: 0;
    transform: translateX(20px);
}
html.sr-ready .scroll-reveal-scale:not(.is-visible) {
    opacity: 0;
    transform: scale(0.96);
}

/* Triggered State */
.scroll-reveal.is-visible,
.scroll-reveal-left.is-visible,
.scroll-reveal-right.is-visible,
.scroll-reveal-scale.is-visible,
html.sr-ready .scroll-reveal.is-visible,
html.sr-ready .scroll-reveal-left.is-visible,
html.sr-ready .scroll-reveal-right.is-visible,
html.sr-ready .scroll-reveal-scale.is-visible {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

/* Stagger Delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* Gentle hover transitions for all cards & buttons */
.card-hover-effect {
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card-hover-effect:hover {
    transform: translateY(-6px);
}

/* Global smooth micro zoom for buttons */
a[class*="rounded-full"][class*="px-"][class*="py-"]:not(.no-zoom):not(.metode-dot):not(.hidden),
button[class*="rounded-full"][class*="px-"][class*="py-"]:not(.no-zoom):not(.metode-dot):not(.hidden),
.btn-zoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease !important;
    will-change: transform;
}

@media (max-width: 1023px) {
    .header-cta-desktop {
        display: none !important;
    }
}
a[class*="rounded-full"][class*="px-"][class*="py-"]:not(.no-zoom):not(.metode-dot):hover,
button[class*="rounded-full"][class*="px-"][class*="py-"]:not(.no-zoom):not(.metode-dot):hover,
.btn-zoom:hover {
    transform: scale(1.05) !important;
}
a[class*="rounded-full"][class*="px-"][class*="py-"]:not(.no-zoom):not(.metode-dot):active,
button[class*="rounded-full"][class*="px-"][class*="py-"]:not(.no-zoom):not(.metode-dot):active,
.btn-zoom:active {
    transform: scale(0.96) !important;
}

/* Header dynamic scroll elevation */
header.scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
}

/* Custom Auto-Hiding Scrollbar: Muncul hanya ketika scrolling, hilang ketika idle */
html {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}
html.is-scrolling {
    scrollbar-color: rgba(242, 110, 34, 0.75) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 9999px;
    transition: background-color 0.3s ease;
}
html.is-scrolling::-webkit-scrollbar-thumb,
body.is-scrolling::-webkit-scrollbar-thumb {
    background: rgba(242, 110, 34, 0.75);
}
html.is-scrolling::-webkit-scrollbar-thumb:hover,
body.is-scrolling::-webkit-scrollbar-thumb:hover {
    background: #d85710;
}

/* CTA Spacing: Max 80px Desktop, 56px iPad, 40px Mobile */
.sr-cta-section {
    padding-top: 40px !important;
    padding-bottom: 48px;
}
@media (min-width: 768px) {
    .sr-cta-section {
        padding-top: 56px !important;
        padding-bottom: 64px;
    }
}
@media (min-width: 1024px) {
    .sr-cta-section {
        padding-top: 80px !important;
        padding-bottom: 80px;
    }
}

/* Hide scrollbar utility for mobile pills & sliders */
.no-scrollbar::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar:horizontal,
.no-scrollbar::-webkit-scrollbar:vertical,
.no-scrollbar *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}
.no-scrollbar::-webkit-scrollbar-thumb,
.no-scrollbar::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
}
.no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

@media (max-width: 1024px) {
    ::-webkit-scrollbar,
    ::-webkit-scrollbar:horizontal,
    ::-webkit-scrollbar:vertical {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
    ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-track {
        display: none !important;
    }
    body, html, * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
}

/* ========================================================
   Seamless Crossfade Page Transition (Fade-In / Fade-Out)
   ======================================================== */
.sr-page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: #FAF8F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s ease;
    will-change: opacity;
}

/* Crossfade: Activated only during navigation exit or initial load */
.sr-page-loader.is-fading-in,
.sr-page-loader.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.sr-page-loader.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.sr-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    animation: srFadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sr-loader-pulse {
    animation: srPulseLogo 1.6s ease-in-out infinite alternate;
}

@keyframes srPulseLogo {
    0% {
        transform: scale(0.96);
        opacity: 0.85;
    }
    100% {
        transform: scale(1.04);
        opacity: 1;
        filter: drop-shadow(0 8px 16px rgba(242, 110, 34, 0.18));
    }
}

/* Subtle top progress bar during transition */
.sr-loader-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #F26E22, #F8A538, #1499AB);
    animation: srLoaderProgress 0.8s ease-in-out infinite alternate;
}

@keyframes srLoaderProgress {
    0% { transform: scaleX(0.1); transform-origin: left; }
    50% { transform: scaleX(0.7); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: left; }
}

/* ========================================================
   Body Crossfade & Fade Up (Slide & Fade) Animation System
   ======================================================== */
body {
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Halaman lama memudar halus saat berpindah link */
body.is-page-exiting {
    opacity: 0;
}

/* Halaman baru perlahan muncul dari transparan */
body.is-page-entering {
    animation: srPageCrossfadeIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes srPageCrossfadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Fade Up (Slide & Fade) Keyframe: Bergeser dari bawah ke atas sambil memudar */
@keyframes srFadeUp {
    0% {
        opacity: 0;
        transform: translateY(28px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered Fade Up untuk Elemen Teks & Hero saat Halaman Baru Muncul */
body.is-page-entering .sr-fade-up-1,
main.is-pjax-entering .sr-fade-up-1,
.page-view.active.is-visible .sr-fade-up-1,
body.is-page-entering .sr-hero-enter-1,
main.is-pjax-entering .sr-hero-enter-1,
.page-view.active.is-visible .sr-hero-enter-1 {
    animation: srFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both !important;
}

body.is-page-entering .sr-fade-up-2,
main.is-pjax-entering .sr-fade-up-2,
.page-view.active.is-visible .sr-fade-up-2,
body.is-page-entering .sr-hero-enter-2,
main.is-pjax-entering .sr-hero-enter-2,
.page-view.active.is-visible .sr-hero-enter-2 {
    animation: srFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both !important;
}

body.is-page-entering .sr-fade-up-3,
main.is-pjax-entering .sr-fade-up-3,
.page-view.active.is-visible .sr-fade-up-3,
body.is-page-entering .sr-hero-enter-3,
main.is-pjax-entering .sr-hero-enter-3,
.page-view.active.is-visible .sr-hero-enter-3 {
    animation: srFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both !important;
}

body.is-page-entering .sr-fade-up-4,
main.is-pjax-entering .sr-fade-up-4,
.page-view.active.is-visible .sr-fade-up-4,
body.is-page-entering .sr-hero-enter-4,
main.is-pjax-entering .sr-hero-enter-4,
.page-view.active.is-visible .sr-hero-enter-4 {
    animation: srFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both !important;
}

body.is-page-entering .sr-fade-up-5,
main.is-pjax-entering .sr-fade-up-5,
.page-view.active.is-visible .sr-fade-up-5,
body.is-page-entering .sr-hero-enter-5,
main.is-pjax-entering .sr-hero-enter-5,
.page-view.active.is-visible .sr-hero-enter-5 {
    animation: srFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both !important;
}

/* Seamless PJAX Container */
main {
    transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}
main.is-pjax-exiting {
    opacity: 0 !important;
}
main.is-pjax-entering {
    animation: srPageCrossfadeIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ========================================================
   Smooth Scrolling & Anti-Polosan Scroll Reveal
   ======================================================== */
html {
    scroll-behavior: smooth;
}

html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Smooth Scroll Reveal (Anti-Polosan) */
.sr-scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Stagger Delays for child cards */
.sr-delay-1 { transition-delay: 80ms; }
.sr-delay-2 { transition-delay: 160ms; }
.sr-delay-3 { transition-delay: 240ms; }
.sr-delay-4 { transition-delay: 320ms; }
.sr-delay-5 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .sr-page-loader,
    .sr-page-loader.is-fading-in,
    .sr-page-loader.is-active,
    body,
    .sr-scroll-reveal,
    .sr-fade-up-1,
    .sr-fade-up-2,
    .sr-fade-up-3,
    .sr-fade-up-4,
    .sr-fade-up-5,
    .sr-hero-enter-1,
    .sr-hero-enter-2,
    .sr-hero-enter-3,
    .sr-hero-enter-4,
    .sr-hero-enter-5 {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ========================================================
   Lozad.js Smooth Lazy Image Fade-in
   ======================================================== */
.lozad {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.lozad.is-loaded {
    opacity: 1;
}

/* ========================================================
   AOS (Animate On Scroll) Optimization
   ======================================================== */
html, body {
    overflow-x: hidden;
}

[data-aos] {
    pointer-events: auto !important;
}