/*
Theme Name: Sunbeam Sprouts Nursery & Preschool
Theme URI: https://example.com/sunbeam-sprouts
Author: Sunbeam Sprouts Creative Studio
Author URI: https://example.com
Description: A custom interactive 2D/3D Animated Nursery & Preschool WordPress Theme featuring a Three.js 3D Toy Wonder-Box, CSS 3D Flip Classroom Cards, Interactive Sensory Playground (Musical Xylophone, Color Alchemy Lab, Finger-Paint Canvas), Daily Rhythm Timeline, and a Parent-Trusted Security & Live Camera Hub.
Version: 2.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: sunbeam-sprouts
*/

:root {
    --cream: #FFFDF7;
    --sun: #FFB703;
    --coral: #FF6B6B;
    --mint: #06D6A0;
    --sky: #118AB2;
    --navy: #073B4C;
    --lavender: #9B5DE5;
}

body {
    background-color: var(--cream);
    color: var(--navy);
    font-family: 'Quicksand', sans-serif;
    overflow-x: hidden;
    margin: 0;
}

h1, h2, h3, h4, .font-display {
    font-family: 'Fredoka', sans-serif;
}

/* 2D Floating Animations */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(3deg); }
}
@keyframes floatReverse {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(12px) rotate(-4deg); }
}
.float-slow { animation: floatSlow 5s ease-in-out infinite; }
.float-reverse { animation: floatReverse 6s ease-in-out infinite; }

/* 3D Perspective Flip Cards */
.perspective-1000 { perspective: 1000px; }
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1.75rem;
}
.flip-card-back {
    transform: rotateY(180deg);
}

/* Toy Button Push Effect */
.btn-toy {
    box-shadow: 0 6px 0 #073B4C;
    transition: all 0.15s ease;
}
.btn-toy:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #073B4C;
}
.btn-toy:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #073B4C;
}