/* ============================================================================
 * SCROLL HINT NOTIFICATION - MOBILE OPTIMIZED
 * ============================================================================
 * Mobile-optimized version with reliable animations.
 * ============================================================================ */

.scroll-hint-bar {
    /* Position fixed at bottom */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;

    /* High z-index to be above other elements */
    z-index: 999999 !important;

    /* Hidden by default */
    display: none;
    transform: translateY(100%);
    pointer-events: none;

    /* No padding/margin that extends beyond viewport */
    padding: 0 !important;
    margin: 0 !important;

    /* Prevent layout influence */
    max-height: 0;
    overflow: hidden;
}

/* Visible state with Apple-style bubble animation */
.scroll-hint-bar.visible {
    display: block !important;
    max-height: 100vh !important;
    overflow: visible !important;

    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;

    /* Apple-style elastic spring animation */
    animation: appleBubbleIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Exit state with Apple-style bubble out animation */
.scroll-hint-bar.exiting {
    display: block !important;
    max-height: 100vh !important;
    overflow: visible !important;

    pointer-events: none;

    /* Apple-style elastic spring out animation */
    animation: appleBubbleOut 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation-fill-mode: forwards;
}

/* Content pill exits - coordinated with container */
.scroll-hint-bar.exiting .hint-bar-content {
    animation: appleContentFadeOut 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

/* Icon shrinks and fades out - exits second */
.scroll-hint-bar.exiting .hint-icon {
    animation: appleIconPopOut 0.5s cubic-bezier(0.4, 0, 0.6, 1) 0.05s forwards;
}

/* Text content fades out - exits third */
.scroll-hint-bar.exiting .hint-content {
    animation: appleTextSlideDown 0.4s cubic-bezier(0.4, 0, 0.6, 1) 0.1s forwards;
}

/* CTA button exits first - scales down and fades */
.scroll-hint-bar.exiting .hint-cta {
    animation: appleButtonPopOut 0.4s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

/* After exit animation completes, set display: none */
.scroll-hint-bar.exiting.animation-complete {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

/* Inner container - NO margin or padding that extends viewport */
.hint-bar-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 20px; /* Equal padding all sides */
}

/* Content wrapper with glass morphism styling */
.hint-bar-content {
    /* Apple-style glass morphism */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);

    border-radius: 16px;
    padding: 16px 20px;

    /* Elevated shadow for depth */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(0, 0, 0, 0.04);

    /* Layout */
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;

    /* Stacking context for backdrop-filter */
    z-index: 1;
    isolation: isolate;

    /* Initial state for fade-in animation */
    opacity: 0;
    transform: scale(0.95);
}

/* When visible, content fades in with slight scale */
.scroll-hint-bar.visible .hint-bar-content {
    animation: appleContentFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* Icon with gradient and animations */
.hint-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    background: linear-gradient(135deg, #FF6B35 0%, #FF8554 100%);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    color: #fff;

    /* Pulse animation */
    animation: hintIconPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;

    /* Shadow for depth */
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3),
                0 2px 4px rgba(255, 107, 53, 0.2);

    position: relative;

    /* Initial state for entrance animation */
    opacity: 0;
    transform: scale(0.7);
}

/* Icon bounces in with parent */
.scroll-hint-bar.visible .hint-icon {
    animation: appleIconPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4) 0.15s forwards,
               hintIconPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) 0.8s infinite;
}

/* Pulse ring effect */
.hint-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255, 107, 53, 0.3);
    animation: hintRingPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Content area */
.hint-content {
    flex: 1;
    min-width: 0;

    /* Initial state for coordinated entrance */
    opacity: 0;
    transform: translateY(8px);
}

/* Text content slides up and fades in */
.scroll-hint-bar.visible .hint-content {
    animation: appleTextSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.hint-title {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #FF6B35;
    margin-bottom: 2px;
    line-height: 1.2;
}

.hint-message {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #2C4A62;
    line-height: 1.3;
}

/* CTA Button */
.hint-cta {
    padding: 10px 20px;
    background: #FF6B35;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;

    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

    /* Initial state for coordinated entrance */
    opacity: 0;
    transform: scale(0.85);
}

/* CTA button pops in last */
.scroll-hint-bar.visible .hint-cta {
    animation: appleButtonPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4) 0.25s forwards;
}

.hint-cta:active {
    transform: scale(0.95) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .scroll-hint-bar {
        /* CRITICAL: Ensure it shows on mobile with proper positioning */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;

        /* REMOVED: NO padding-bottom that could extend viewport */

        /* Ensure it doesn't get clipped or scrolled out of view */
        max-height: 100vh;
        overflow: visible;
    }

    /* Let the Apple-style animations work naturally */
    /* Animation timing remains: icon → content → cta with stagger */

    .hint-bar-inner {
        padding: 12px; /* Equal padding - NO extra bottom padding */
        margin: 0; /* NO margin at all */
    }

    .hint-bar-content {
        padding: 14px 16px;
        gap: 10px;
    }

    .hint-icon {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    .hint-title {
        font-size: 10px;
    }

    .hint-message {
        font-size: 14px;
    }

    .hint-cta {
        padding: 9px 18px;
        font-size: 13px;
    }
}

/* Very small mobile - KEEP horizontal layout */
@media (max-width: 480px) {
    .hint-bar-content {
        flex-wrap: nowrap; /* FIX: Explicitly prevent wrapping */
        gap: 10px;
        padding: 12px 14px;
    }

    .hint-icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .hint-content {
        flex: 1;
        min-width: 0; /* Allow text to shrink */
    }

    .hint-title {
        font-size: 9px;
    }

    .hint-message {
        font-size: 13px;
    }

    .hint-cta {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* Force show utility (for testing) */
.scroll-hint-bar.force-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* ========== ANIMATIONS - APPLE-STYLE ========== */

/* Apple-style bubble in animation
 * EXACT replication of Apple's notification bubble pattern
 * - Starts below viewport (translateY: 150px)
 * - Scales up from 0.92 to create "emerging" effect
 * - Overshoots slightly at 60% (translateY: -10px, scale: 1.02)
 * - Settles with micro-bounce at 80% (translateY: 2px)
 * - Rests perfectly at final position
 * - Opacity fades in smoothly from 0 to 1
 *
 * Timing: 0.7s with Apple's signature elastic easing
 * Easing: cubic-bezier(0.175, 0.885, 0.32, 1.275) - creates bounce
 */
@keyframes appleBubbleIn {
    0% {
        opacity: 0;
        transform: translateY(100%) scale(0.92); /* Changed from 150px to 100% */
    }
    60% {
        opacity: 1;
        transform: translateY(-10px) scale(1.02); /* Overshoot up - that Apple bounce! */
    }
    80% {
        transform: translateY(2px) scale(0.99); /* Settle bounce back */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1); /* Perfect rest position */
    }
}

/* Apple-style bubble out animation
 * EXACT inverse of the entry animation
 * - Starts at rest position
 * - Micro-lift at 20% (translateY: -4px)
 * - Small drop at 40% (translateY: 6px)
 * - Scales down to 0.92 as it exits
 * - Opacity fades out smoothly to 0
 * - Exits below viewport (translateY: 150px)
 *
 * Timing: 0.6s (slightly faster exit feels more polished)
 * Easing: cubic-bezier(0.68, -0.55, 0.265, 1.55) - inverse bounce
 */
@keyframes appleBubbleOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    20% {
        transform: translateY(-4px) scale(1.01); /* Tiny lift before exit */
    }
    40% {
        opacity: 1;
        transform: translateY(6px) scale(0.98); /* Small drop */
    }
    100% {
        opacity: 0;
        transform: translateY(100%) scale(0.92); /* Changed from 150px to 100% */
    }
}

/* Content blur pill fade-in
 * Fades in and scales up slightly - subtle and classy
 * Delay: 0.1s (starts right after container begins)
 * Duration: 0.5s - smooth and elegant
 * IMPORTANT: Includes translateZ(0) to maintain GPU acceleration for backdrop-filter
 */
@keyframes appleContentFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Icon pop-in animation
 * Bounces in with elastic scale - playful and delightful
 * Delay: 0.15s (slightly after content pill)
 * Duration: 0.6s with extra bounce
 */
@keyframes appleIconPopIn {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    60% {
        opacity: 1;
        transform: scale(1.1); /* Overshoot */
    }
    80% {
        transform: scale(0.95); /* Settle back */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* Rest */
    }
}

/* Text slide up animation
 * Slides up from below and fades in - elegant reveal
 * Delay: 0.2s (after icon starts)
 * Duration: 0.5s - smooth and readable
 */
@keyframes appleTextSlideUp {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button pop-in animation
 * Scales up with slight bounce - inviting interaction
 * Delay: 0.25s (enters last for cascading effect)
 * Duration: 0.5s with elastic bounce
 */
@keyframes appleButtonPopIn {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }
    60% {
        opacity: 1;
        transform: scale(1.05); /* Slight overshoot */
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(20px)) {
    .hint-bar-content {
        background: rgba(255, 255, 255, 0.95);
    }
}

/* Icon pulse animation */
@keyframes hintIconPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3),
                    0 2px 4px rgba(255, 107, 53, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4),
                    0 3px 6px rgba(255, 107, 53, 0.3);
    }
}

/* Ring pulse animation */
@keyframes hintRingPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* ========== EXIT ANIMATIONS - APPLE-STYLE (REVERSE ORDER) ========== */

/* Content pill fade-out animation
 * Inverse of appleContentFadeIn
 * Fades out and scales down - subtle and coordinated
 * Duration: 0.5s - smooth exit
 * IMPORTANT: Includes translateZ(0) to maintain GPU acceleration for backdrop-filter
 */
@keyframes appleContentFadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Icon pop-out animation
 * Inverse of appleIconPopIn
 * Shrinks and fades out with elastic feel
 * Delay: 0.05s (exits after CTA)
 * Duration: 0.5s with smooth exit
 */
@keyframes appleIconPopOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    40% {
        transform: scale(1.05); /* Tiny bounce up before exit */
    }
    100% {
        opacity: 0;
        transform: scale(0.7); /* Shrinks to match entry */
    }
}

/* Text slide down animation
 * Inverse of appleTextSlideUp
 * Slides down and fades out - elegant exit
 * Delay: 0.1s (exits after icon starts)
 * Duration: 0.4s - quick and smooth
 */
@keyframes appleTextSlideDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(8px); /* Slides down to match entry */
    }
}

/* Button pop-out animation
 * Inverse of appleButtonPopIn
 * Scales down and fades out - exits FIRST
 * No delay (leads the exit cascade)
 * Duration: 0.4s with smooth feel
 */
@keyframes appleButtonPopOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.85); /* Shrinks to match entry size */
    }
}