/* ==========================================================
   ULTRA PERFORMANCE STYLE SHEET
   FLOATING NAVBAR EDITION
   ========================================================== */

/* -------------------------
   GLOBAL SCROLL SAFETY
--------------------------*/

html, body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* GPU hardening */
* {
    backface-visibility: hidden;
}

/* -------------------------
   FLOATING NAVBAR (SAFE)
--------------------------*/

/* Preserve your floating nav look + glass style
   without introducing scroll jank */

#navbar {
    position: fixed !important;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    top: 1rem;
    will-change: transform;

    /* Fake glass (fast) */
    background: rgba(28,28,28,0.78) !important;

    /* Very light blur is OK after GPU lock */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    /* Performance containment */
    contain: layout paint;

    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* -------------------------
   HERO BACKGROUND SAFE MODE
--------------------------*/

.hero-bg {
    background-image: url('images/hero-image.jpg');
    background-size: cover;
    background-position: center;

    /* Kill parallax repaint jank */
    background-attachment: scroll !important;

    transform: translateZ(0);
    will-change: transform;
}

/* -------------------------
   SCROLL REVEAL (GPU SAFE)
--------------------------*/

.reveal {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 0.5s ease-out,
                transform 0.5s ease-out;
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.delay-100 { transition-delay: 80ms }
.delay-200 { transition-delay: 120ms }
.delay-300 { transition-delay: 180ms }

/* -------------------------
   GLASS WIDGETS (SAFE)
--------------------------*/

.glass-widget {
    background: rgba(255,255,255,.18);

    /* Keep subtle blur only */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    contain: layout paint;
}

/* -------------------------
   BUTTON SHIMMER
--------------------------*/

.btn-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    left: -120%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.24),
        transparent
    );
    transition: transform 0.6s ease;
}

.btn-shimmer:hover::after {
    transform: translateX(220%);
}

/* -------------------------
   ANIMATED GRADIENT
--------------------------*/

.animate-gradient {
    background-size: 200% auto;
    animation: shine 5s linear infinite;
}

@keyframes shine {
    to { background-position: 200% center; }
}

/* -------------------------
   FLOATING BOOK BUTTON
--------------------------*/

.floating-book-btn {
    width: 70px;
    height: 70px;
    border-radius: 999px;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;

    animation: softpulse 4s ease-in-out infinite;

    /* GPU safety */
    transform: translate3d(0,0,0);
    will-change: transform, box-shadow;
}

/* Soft pulse */
@keyframes softpulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(230,138,72,.22);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 0 12px rgba(230,138,72,.42);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(230,138,72,.22);
    }
}

/* -------------------------
   ULTRA SCROLL FREEZE
--------------------------*/

body.is-scrolling * {
    animation-play-state: paused !important;
    transition-duration: 0ms !important;
}

/* -------------------------
   PROSE / MARKDOWN STYLES
--------------------------*/

.prose h3 {
    @apply font-serif text-2xl font-bold mt-8 mb-3 text-brand-orange;
}

.prose p {
    @apply text-base mb-4;
}

.prose ul {
    @apply list-none p-0 space-y-2 mb-4;
}

.prose ul li::before {
    content: "•";
    @apply text-brand-orange font-bold mr-2 inline-block;
}

/* ===========================================
   ✅ REAL iPHONE FIX — CHECK AVAILABILITY
=========================================== */

@media (max-width: 768px) {

    /* Keep widget visible inside hero */
    #book-now {
        position: absolute !important;
        bottom: 14vh !important;
        left: 0;
        width: 100%;
    }

    /* Improve card sizing for phones */
    #book-now .glass-widget {
        width: 95%;
        max-width: 380px;
        border-radius: 1.25rem;
        padding: 1rem;
    }
}

/* iPhone notch / safe area padding */

@supports(padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        #book-now {
            bottom: calc(14vh + env(safe-area-inset-bottom)) !important;
        }
    }
}