/* ============================================
   3D Prints by Us - Global Styles
   Design: Pastel Candy + Gamified Cartoon
   Target: 10-12 year olds
   ============================================ */

/* --- CSS Variables --- */
:root {
    /* Pastel Candy Base */
    --candy-pink: #FFB7B2;
    --candy-mint: #B5EAD7;
    --candy-blue: #C7CEEA;
    --candy-yellow: #FFFFD1;
    --candy-bg: #FFF9F9;
    --text-dark: #4A4A4A;
    --text-light: #888888;

    /* Game Achievement Colors */
    --gold: #FFD700;
    --silver: #C0C0C0;
    --bronze: #CD7F32;
    --diamond: #B9F3FC;

    /* Status Colors */
    --status-pending: #F59E0B;
    --status-printing: #3B82F6;
    --status-ready: #10B981;
    --status-completed: #8B5CF6;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

/* --- Base --- */
html { scroll-behavior: smooth; }
body { background-color: var(--candy-bg); color: var(--text-dark); }

/* Prevent horizontal overflow only on mobile */
@media (max-width: 768px) {
    html, body { overflow-x: clip; }
}

/* --- Nav active tab --- */
.nav-tab.active {
    background: rgba(255, 183, 178, 0.15);
    color: #FFB7B2;
    font-weight: 700;
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--candy-pink); border-radius: 10px; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Mobile Input Fix (prevent iOS zoom) --- */
input, textarea, select { font-size: 16px !important; }

/* --- Animations --- */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
.float-animation { animation: float 3s ease-in-out infinite; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.shimmer {
    background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-size: 1000px 100%;
    animation: shimmer 2s linear infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.25); }
}

@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(250, 204, 21, 0); }
}

@keyframes glassShimmer {
    0%, 100% { box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); }
    50% { box-shadow: 0 8px 32px 0 rgba(255, 183, 178, 0.2); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes unboxing {
    0% { transform: scale(0.8) rotateX(-90deg); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1) rotateX(0deg); opacity: 1; }
}

@keyframes achievementPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.8); }
    70% { box-shadow: 0 0 0 20px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Loader --- */
.loader {
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid var(--candy-pink);
    border-right: 3px solid var(--candy-blue);
    border-bottom: 3px solid var(--candy-mint);
    width: 24px; height: 24px;
    animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    display: inline-block;
}

/* --- Scroll Reveal --- */
/* Fallback: if JS doesn't load within 3s, show content anyway */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    animation: fallback-reveal 0s 3s forwards;
}
@keyframes fallback-reveal {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: none;
}

/* --- Phase 2: Enhanced Visual Design --- */

/* Animated gradient background for hero */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.gradient-bg-animated {
    background: linear-gradient(-45deg, #FFF9F9, #FFE8E5, #E8F4FD, #E8F8EE, #FFF9F9);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Floating decorative shapes */
@keyframes floatSlow {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(8px, -20px) rotate(5deg); }
    50% { transform: translate(-6px, -30px) rotate(-3deg); }
    75% { transform: translate(10px, -12px) rotate(4deg); }
}
@keyframes floatMedium {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    30% { transform: translate(-10px, -25px) rotate(8deg) scale(1.05); }
    60% { transform: translate(12px, -18px) rotate(-5deg) scale(0.98); }
}
@keyframes floatFast {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(6px, -15px) rotate(-8deg); }
    50% { transform: translate(-8px, -22px) rotate(6deg); }
    80% { transform: translate(10px, -8px) rotate(8deg); }
}
.float-slow { animation: floatSlow 7s ease-in-out infinite; }
.float-medium { animation: floatMedium 5s ease-in-out infinite; }
.float-fast { animation: floatFast 4s ease-in-out infinite; }

/* Hero floaters are now JS-driven (physics bounce) — no CSS keyframes needed */

/* Sparkle effect */
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
}
.sparkle { animation: sparkle 2s ease-in-out infinite; }
.sparkle-delay-1 { animation-delay: 0.3s; }
.sparkle-delay-2 { animation-delay: 0.7s; }
.sparkle-delay-3 { animation-delay: 1.1s; }

/* Blob decorations */
.blob {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    position: absolute;
    pointer-events: none;
    opacity: 0.15;
    filter: blur(40px);
}
@keyframes blobMorph {
    0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
    50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
    75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
}
.blob-animated { animation: blobMorph 8s ease-in-out infinite; }

/* Step connector lines */
.step-connector {
    position: relative;
}
.step-connector::after {
    content: '';
    position: absolute;
    top: 32px;
    left: calc(50% + 40px);
    width: calc(100% - 80px);
    height: 3px;
    background: linear-gradient(90deg, var(--candy-pink), var(--candy-blue), var(--candy-mint));
    border-radius: 999px;
    opacity: 0.4;
}
.step-connector:last-child::after { display: none; }

/* Number badge for steps */
.step-number {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--candy-pink), #ff8a80);
    color: white;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255, 138, 128, 0.4);
    z-index: 2;
}

/* Wiggle animation for interactive elements */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}
.hover-wiggle:hover { animation: wiggle 0.5s ease-in-out; }

/* Rainbow border animation */
@keyframes rainbowBorder {
    0% { border-color: var(--candy-pink); }
    33% { border-color: var(--candy-blue); }
    66% { border-color: var(--candy-mint); }
    100% { border-color: var(--candy-pink); }
}
.rainbow-border { animation: rainbowBorder 4s ease infinite; }

/* Typing/reveal text effect */
@keyframes typeReveal {
    from { width: 0; }
    to { width: 100%; }
}

/* Glow effect */
.glow-pink { box-shadow: 0 0 20px rgba(255, 183, 178, 0.4), 0 0 40px rgba(255, 183, 178, 0.1); }
.glow-mint { box-shadow: 0 0 20px rgba(181, 234, 215, 0.4), 0 0 40px rgba(181, 234, 215, 0.1); }
.glow-blue { box-shadow: 0 0 20px rgba(199, 206, 234, 0.4), 0 0 40px rgba(199, 206, 234, 0.1); }

/* Sticky nav with glassmorphism */
.nav-glass {
    background: rgba(255, 249, 249, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 183, 178, 0.15);
    transition: all 0.3s ease;
}
.nav-glass.scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

/* Section divider wave */
.wave-divider {
    position: relative;
    overflow: hidden;
}
.wave-divider::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q300 0 600 20 Q900 40 1200 20 L1200 40 L0 40Z' fill='%23FFF9F9'/%3E%3C/svg%3E") repeat-x;
    background-size: 1200px 40px;
}

/* Confetti pattern background */
.confetti-pattern {
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 183, 178, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(181, 234, 215, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(199, 206, 234, 0.05) 0%, transparent 50%);
}

/* Stagger animation for child elements */
.stagger-children > *:nth-child(1) { animation-delay: 0s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.5s; }