/* ============================================================
   Sugar Cloud — hyper-cute sub-variant of Pastel Sparkle
   Candy shop / mochi energy: chunky rounded type, marshmallow
   cards, floating sweets, squishy buttons, heart-burst clicks.
   Loaded AFTER style.css; overrides via body.theme-sugar.
   ============================================================ */

body.theme-sugar {
    --bg-color: linear-gradient(160deg, #FFE3F1 0%, #FFF3E0 35%, #E0FFF4 68%, #E8E4FF 100%);
    --bg-pattern: none;
    --card-bg: #FFFDFB;
    --card-border: 5px solid #FFD0E8;
    --card-border-style: solid;
    --card-border-width: 5px;
    --card-shadow: 0 14px 0 rgba(255, 170, 213, 0.35);
    --text-main: #8A5474;
    --text-accent: #F06CB4;
    --gold-accent: linear-gradient(135deg, #FF8ECF, #FFB86B);
    --btn-primary: linear-gradient(180deg, #FFA3DA, #FF77C5);
    --btn-primary-text: #FFFFFF;
    --btn-secondary: #FFF0F8;
    --btn-secondary-border: 3px solid #FFC1E3;
    --font-headings: 'Baloo 2', 'Quicksand', sans-serif;
    --font-sans: 'Baloo 2', 'Quicksand', sans-serif;
    --border-radius-card: 48px;
    --border-radius-btn: 999px;
    --btn-transform: scale(1.08) rotate(-1.5deg);
    --glass-blur: none;
    --sparkle-display: none;
    --heading-letter-spacing: 0px;
    --heading-transform: none;
    background-attachment: fixed;
}

body.theme-sugar .logo {
    font-style: normal;
    font-weight: 800;
}

body.theme-sugar .subtitle {
    letter-spacing: 2px;
    font-weight: 700;
}

body.theme-sugar section h2::after {
    content: '♡';
    font-size: 1.6rem;
    opacity: 0.8;
}

/* Buttons: squishy, no shouting */
body.theme-sugar .btn {
    text-transform: none;
    letter-spacing: 0.5px;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 15px 34px;
}

body.theme-sugar .btn:active {
    transform: scale(0.92);
}

/* Cards get a jelly wobble on hover */
body.theme-sugar .service-card {
    background: #FFF6FB;
    border: 3px solid #FFE0F0;
    box-shadow: 0 8px 0 rgba(255, 170, 213, 0.25);
}

body.theme-sugar .service-card:hover {
    animation: sugar-wobble 0.6s ease both;
    background: #FFFFFF;
}

@keyframes sugar-wobble {
    0%   { transform: scale(1) rotate(0deg); }
    30%  { transform: scale(1.05) rotate(-2deg); }
    60%  { transform: scale(1.03) rotate(2deg); }
    100% { transform: scale(1.04) rotate(0deg); }
}

.service-emoji {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 18px;
    animation: sugar-bob 3s ease-in-out infinite;
}

.service-card:nth-child(2) .service-emoji { animation-delay: 0.4s; }
.service-card:nth-child(3) .service-emoji { animation-delay: 0.8s; }

/* Hero blob replaces the circle placeholder */
.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.hero-blob {
    width: 300px;
    height: 290px;
    background: linear-gradient(160deg, #FFD6EC, #FFE9F5 60%, #E5F6FF);
    border: 6px solid #FFFFFF;
    border-radius: 53% 47% 52% 48% / 55% 51% 49% 45%;
    box-shadow: 0 16px 0 rgba(255, 170, 213, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: sugar-blob 8s ease-in-out infinite;
}

@keyframes sugar-blob {
    0%, 100% { border-radius: 53% 47% 52% 48% / 55% 51% 49% 45%; }
    50%      { border-radius: 46% 54% 45% 55% / 48% 55% 45% 52%; }
}

.hero-blob-face {
    font-size: 2rem;
    color: #D45E9E;
    font-weight: 700;
}

.hero-blob-label {
    font-size: 0.85rem;
    color: var(--text-accent);
    opacity: 0.7;
}

/* Rotated sticker badges */
.sticker {
    position: absolute;
    background: #FFF275;
    color: #B0578D;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 8px 18px;
    border-radius: 999px;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 0 rgba(176, 87, 141, 0.25);
    pointer-events: none;
}

.sticker-1 {
    top: 6%;
    right: 4%;
    transform: rotate(10deg);
    animation: sugar-bob 3.5s ease-in-out infinite;
}

.sticker-2 {
    bottom: 4%;
    left: 6%;
    background: #C9F7E5;
    color: #3E9B7A;
    transform: rotate(-8deg);
    animation: sugar-bob 4s ease-in-out 0.6s infinite;
}

@keyframes sugar-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}

/* Floating candy layer */
.sugar-floaties {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.sugar-floaties span {
    position: absolute;
    font-size: 1.8rem;
    opacity: 0.55;
    animation: sugar-float 12s ease-in-out infinite;
}

.sugar-floaties span:nth-child(1)  { left: 4%;  top: 12%; animation-delay: 0s; }
.sugar-floaties span:nth-child(2)  { left: 90%; top: 8%;  animation-delay: -2s; font-size: 2.2rem; }
.sugar-floaties span:nth-child(3)  { left: 12%; top: 45%; animation-delay: -4s; }
.sugar-floaties span:nth-child(4)  { left: 85%; top: 38%; animation-delay: -6s; font-size: 1.4rem; }
.sugar-floaties span:nth-child(5)  { left: 6%;  top: 74%; animation-delay: -8s; font-size: 2.1rem; }
.sugar-floaties span:nth-child(6)  { left: 92%; top: 68%; animation-delay: -10s; }
.sugar-floaties span:nth-child(7)  { left: 45%; top: 6%;  animation-delay: -3s; font-size: 1.5rem; }
.sugar-floaties span:nth-child(8)  { left: 30%; top: 88%; animation-delay: -5s; }
.sugar-floaties span:nth-child(9)  { left: 70%; top: 90%; animation-delay: -7s; font-size: 1.4rem; }
.sugar-floaties span:nth-child(10) { left: 55%; top: 55%; animation-delay: -9s; font-size: 1.3rem; }

@keyframes sugar-float {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-26px) rotate(8deg); }
}

/* Heart burst on click */
.heart-pop {
    position: fixed;
    font-size: 1.5rem;
    pointer-events: none;
    z-index: 2000;
    transform: translate(-50%, -50%);
    animation: heart-pop 0.9s ease-out forwards;
}

@keyframes heart-pop {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
    60%  { opacity: 1; transform: translate(-50%, -140%) scale(1.2) rotate(12deg); }
    100% { opacity: 0; transform: translate(-50%, -220%) scale(0.9) rotate(-8deg); }
}

/* Forms: rounder, friendlier */
body.theme-sugar input,
body.theme-sugar textarea {
    border-radius: 24px;
    background: #FFF8FC;
}

@media (max-width: 768px) {
    .sugar-floaties span { font-size: 1.3rem; }
    .hero-blob { width: 240px; height: 232px; }
}