/*
Theme Name: GeneratePress Child
Theme URI: 
Description: Custom child theme for GeneratePress - Cuero's Christmas in the Park
Author: 
Author URI: 
Template: generatepress
Version: 1.0.0
*/

/* ==========================================================================
   CUSTOM STYLES (extracted from HTML)
   ========================================================================== */

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    background-color: #fffdf5;
}

/* Subtle Cream Wood Texture */
.bg-wood-panel {
    background-color: #fffdf5;
    background-image: repeating-linear-gradient(
        to right,
        transparent,
        transparent 150px,
        rgba(0,0,0,0.02) 150px,
        rgba(0,0,0,0.02) 152px
    );
}

/* Kraft Paper Texture */
.bg-kraft {
    background-color: #f0e6d2;
    background-image: url("https://www.transparenttextures.com/patterns/paper-fibers.png");
}

/* Candy Cane Striped Border Effect */
.candy-stripe-border {
    border: 4px solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(45deg, #99111c, #99111c 10px, #ffffff 10px, #ffffff 20px) border-box;
}

/* ==========================================================================
   SCROLL REVEAL ANIMATION - Safe Version
   ========================================================================== */

/* Content visible by default (safe fallback) */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Only hide elements if JavaScript is confirmed working */
.js-enabled .reveal:not(.active) {
    opacity: 0;
    transform: translateY(40px);
}

.js-enabled .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   FALLING SNOW ANIMATION (Hero)
   ========================================================================== */

.snow-layer {
    position: absolute;
    top: -100%; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(4px 4px at 100px 50px, #fff, transparent),
        radial-gradient(6px 6px at 200px 150px, #fff, transparent),
        radial-gradient(3px 3px at 300px 250px, #fff, transparent),
        radial-gradient(4px 4px at 400px 350px, #fff, transparent),
        radial-gradient(6px 6px at 500px 100px, #fff, transparent),
        radial-gradient(3px 3px at 600px 200px, #fff, transparent),
        radial-gradient(4px 4px at 700px 300px, #fff, transparent),
        radial-gradient(5px 5px at 800px 400px, #fff, transparent);
    background-size: 800px 800px;
    animation: snow 10s linear infinite;
    opacity: 0.6;
    pointer-events: none;
}

.snow-layer:nth-child(2) {
    background-image: 
        radial-gradient(4px 4px at 50px 100px, #fff, transparent),
        radial-gradient(5px 5px at 150px 200px, #fff, transparent),
        radial-gradient(3px 3px at 250px 300px, #fff, transparent);
    animation: snow 15s linear infinite;
    opacity: 0.4;
}

@keyframes snow {
    0% { transform: translateY(0); }
    100% { transform: translateY(800px); }
}

/* ==========================================================================
   FLOATING BADGE ANIMATION
   ========================================================================== */

.float-badge {
    animation: float 6s ease-in-out infinite;
}

.float-badge:nth-child(even) {
    animation: float 7.5s ease-in-out infinite reverse;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* ==========================================================================
   CUSTOM ACCORDION (FAQ)
   ========================================================================== */

details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

/* ==========================================================================
   WAVY SVG DIVIDER UTILITY
   ========================================================================== */

.svg-rope path {
    d: path("M0,5 Q2.5,0 5,5 T10,5 T15,5 T20,5 T25,5 T30,5 T35,5 T40,5 T45,5 T50,5 T55,5 T60,5 T65,5 T70,5 T75,5 T80,5 T85,5 T90,5 T95,5 T100,5");
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}