html { scroll-behavior: smooth; }

/* --- HappiLoop-ish curved sections --- */
.wave-top {
    clip-path: path('M0,60 C220,0 420,0 640,60 C860,120 1060,120 1280,60 L1280,0 L0,0 Z');
}
.wave-bottom {
    clip-path: path('M0,0 C220,60 420,60 640,0 C860,-60 1060,-60 1280,0 L1280,160 L0,160 Z');
}

/* --- Hero title tilt --- */
.tilt {
    transform: rotate(-6deg);
    transform-origin: left center;
}

/* --- Soft blobs --- */
.blob { filter: blur(48px); opacity: .55; }

/* --- Little float for mascots --- */
@keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }
.floaty { animation: floaty 6s ease-in-out infinite; }
.floaty2 { animation: floaty 8s ease-in-out infinite; }

/* --- Sticker ring --- */
.sticker { box-shadow: 0 18px 60px rgba(0,0,0,.35); }

/* --- Marquee ribbon --- */
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.marquee { animation: marquee 18s linear infinite; }

/* Accessibility helpers */
.focus-ring:focus { outline: 3px solid rgba(163,230,53,.75); outline-offset: 3px; }

.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.2s ease;
}

.card-inner {
    transform-style: preserve-3d;
}

.card-depth {
    transform: translateZ(40px);
}

.card-depth-small {
    transform: translateZ(20px);
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #2b0f57;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

/* Default thumb */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Firefox */
.slider::-moz-range-thumb {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Value 1 */
.slider.level-1::-webkit-slider-thumb {
    background: #65a30d;
}

.slider.level-1::-moz-range-thumb {
    background: #65a30d;
}

/* Value 2 */
.slider.level-2::-webkit-slider-thumb {
    background: #c026d3;
    transform: scale(1.1);
}

.slider.level-2::-moz-range-thumb {
    background: #c026d3;
    transform: scale(1.1);
}

/* Value 3 */
.slider.level-3::-webkit-slider-thumb {
    background: #0891b2;
    transform: scale(1.2);
}

.slider.level-3::-moz-range-thumb {
    background: #0891b2;
    transform: scale(1.2);
}