/**
 * Front Page Specific CSS for Okoboji Theme
 * Styles for glass tile effects, infinite scroller, bubble animations, and front page hero sections
 */

/* ================================================
 * GLASS TILE EFFECTS AND ANIMATIONS
 * ================================================ */





/* ================================================
 * INFINITE SCROLLER STYLES
 * ================================================ */

/* Infinite scroller styles */
.scroller {
    overflow: hidden;
    position: relative;
    /* Tighter fade on mobile for better card visibility */
    -webkit-mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
    mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
    /* Enhanced browser compatibility */
    -webkit-mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.scroller-inner {
    display: flex;
    gap: 0.5rem; /* 8px mobile */
    width: max-content;
    flex-wrap: nowrap;
}

@media (min-width: 640px) {
    .scroller-inner {
        gap: 1rem; /* 16px tablet+ */
    }
}

@media (min-width: 1024px) {
    .scroller-inner {
        gap: 1.5rem; /* 24px desktop+ */
    }
}

/* Responsive fade distances for better visibility */
@media (min-width: 640px) {
    .scroller {
        /* More gradual fade on larger screens */
        -webkit-mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
        mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
        mask-image: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
    }
}

@media (min-width: 1024px) {
    .scroller {
        /* Full fade effect on desktop */
        -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
        mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
        mask-image: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    }
}


/* ================================================
 * BUBBLE ANIMATIONS AND EFFECTS
 * ================================================ */

/* Custom glass color - white with transparency - admin compatible */
body.rough-beige-wall .content-panel .glass-custom,
body.rough-beige-wall #panel-1 .glass-custom,
body.rough-beige-wall .glass-custom,
html body.admin-bar .glass-custom,
html body .glass-custom,
.content-panel .glass-custom,
#panel-1 .glass-custom,
.glass-custom {
    background: none;
    border: 2px solid rgb(0, 0, 0);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Explicit neutral hover states for glass custom elements */
.glass-custom:hover {
    background: rgba(107, 114, 128, 0.1);
    border-color: rgb(0, 0, 0);
    transform: none;
    box-shadow: none;
    color: inherit;
}

.glass-custom button:hover {
    background: rgba(107, 114, 128, 0.2);
    border-color: rgb(0, 0, 0);
    color: inherit;
    transform: none;
}



/* Panel 3 scroller cards - white glass state - admin compatible */
body.rough-beige-wall .content-panel .scroller-card,
body.rough-beige-wall #panel-3 .scroller-card,
body.rough-beige-wall .scroller-card,
html body.admin-bar .scroller-card,
html body .scroller-card,
.content-panel .scroller-card,
#panel-3 .scroller-card,
.scroller .scroller-card,
.scroller-card {
    background: none;
    border: 2px solid rgb(0, 0, 0);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}


/* Bubble styling - white glass color with admin bar compatibility */
body.rough-beige-wall #panel-1 #bubble-container .bubble,
body.rough-beige-wall .content-panel #bubble-container .bubble,
body.rough-beige-wall #bubble-container .bubble,
body.rough-beige-wall .bubble,
body #bubble-container .bubble,
body.admin-bar #bubble-container .bubble,
#panel-1 #bubble-container .bubble,
.content-panel #bubble-container .bubble,
#bubble-container .bubble,
.bubble {
    background: none;
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    overflow: hidden;
    cursor: pointer;
}


/* ================================================
 * FRONT PAGE LOAD ANIMATION STATES
 * ================================================ */

/* Ensure no lag - all elements visible immediately - high specificity */
body.rough-beige-wall #glass-tile,
#glass-tile {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}

body.rough-beige-wall .hero-title,
body.rough-beige-wall .hero-subtitle,
body.rough-beige-wall .hero-button,
.hero-title,
.hero-subtitle,
.hero-button {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Ensure all elements are visible */
.panel-load-hidden,
.hero-content-hidden,
.bubble-hidden {
    opacity: 1;
    transform: none;
    visibility: visible;
}

/* ================================================
 * MAIN GLASS TILE CONTAINER STYLES
 * ================================================ */


/* ================================================
 * CONSISTENT BUTTON AND HEADING STYLING
 * ================================================ */

/* Force all buttons to have brown, bold text */
button, .button, input[type="submit"], input[type="button"] {
    color: #5D4037 ;
    font-weight: bold ;
}

/* Force all headings to be brown and bold */
h1, h2, h3, h4, h5, h6 {
    color: #5D4037 ;
    font-weight: bold ;
}

/* ================================================
 * ENHANCED RED GLOW EFFECTS
 * ================================================ */

/* Enhanced red glow effect for front page special elements */
.shadow-red-glow {
    box-shadow: 0 0 20px 7px rgba(239, 68, 68, 0.5), 0 0 40px 15px rgba(239, 68, 68, 0.3);
}

/* ================================================
 * BUTTON SIZE OVERRIDES - FORCE WIDER BUTTONS
 * ================================================ */

/* Panel 2 and 3 Button Width Override - High specificity solution */
body.rough-beige-wall #flagship-btn,
body.rough-beige-wall #benefits-btn,
#flagship-btn, 
#benefits-btn {
    /* Fix box-sizing to allow padding to increase total width */
    box-sizing: content-box;
    
    /* Increased padding for 80% wider buttons */
    padding-left: 4rem;
    padding-right: 4rem;
    
    /* Minimum width for consistency */
    min-width: 300px;
    
    /* Ensure proper display for width calculations */
    display: inline-block;
}