/*
 * style.css
 * High-Level, Animated CSS for The Cake Box
 */

/* ------------------- */
/* 1. Global & Variables */
/* ------------------- */
:root {
    --primary-color: #ff75a0;
    --secondary-color: #89cff0;
    --accent-color: #ffd700;
    --background-color: #fffbff;
    --text-color: #4a4a4a;
    --heading-font: 'Playfair Display', serif;
    --body-font: 'Poppins', sans-serif;
    --light-pastel: #fdf0f5;
    --border-radius: 1rem;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.15);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--body-font);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.7;
    overflow-x: hidden;
    cursor: none;
}
main {
    padding-top: 90px; /* Offset for fixed navbar */
}
h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--heading-font); font-weight: 700; }
.section-title { font-size: 2.8rem; margin-bottom: 1.5rem; font-weight: 900; }
.text-gradient {
    background: linear-gradient(45deg, var(--primary-color), #ff9ec4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ------------------- */
/* 2. Keyframe Animations */
/* ------------------- */
@keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-25px) rotate(7deg); } 100% { transform: translateY(0px) rotate(0deg); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes star-glow { 0%, 100% { color: #f9d71c; text-shadow: 0 0 5px #f9d71c; } 50% { color: #ffeb3b; text-shadow: 0 0 20px #ffeb3b; } }
@keyframes backgroundPan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes aurora {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes letter-reveal {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}


/* ------------------- */
/* 3. Reusable Components & Helpers */
/* ------------------- */
.reveal { opacity: 0; transform: translateY(60px); transition: opacity 0.8s ease-out, transform 1s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: opacity, transform; }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: 0.1s; } .reveal:nth-child(3) { transition-delay: 0.2s; }

/* Custom Cursor */
.cursor, .cursor-follower { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; display: none; }
@media (pointer: fine) { .cursor, .cursor-follower { display: block; } }
.cursor { width: 8px; height: 8px; background-color: var(--primary-color); border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-follower { width: 40px; height: 40px; border: 1px solid var(--primary-color); border-radius: 50%; transform: translate(-50%, -50%); transition: transform 0.2s ease-out, background-color 0.2s; }
body:has(a:hover, button:hover) .cursor-follower { transform: translate(-50%, -50%) scale(1.5); background-color: rgba(255, 117, 160, 0.2); }

/* Buttons */
.btn { border-radius: 50px; padding: 12px 30px; font-weight: 600; transition: all 0.3s ease; border: none; position: relative; overflow: hidden; will-change: transform; }
.magnetic-button { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn-primary { background: linear-gradient(45deg, var(--primary-color), #ff9ec4); color: white; }
.btn-primary:hover, .btn-primary:focus { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(255, 117, 160, 0.4); color: white; }
.btn-secondary { background-color: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); }
.btn-secondary:hover, .btn-secondary:focus { background-color: var(--primary-color); color: #fff; transform: translateY(-3px); }


/* ------------------- */
/* 4. Section Specific Styling */
/* ------------------- */
/* Navbar Shrink Effect */
.navbar {
    background-color: transparent !important;
    transition: all 0.4s ease-out;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.navbar.navbar-scrolled {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}
.navbar-brand { font-size: 1.8rem; color: var(--primary-color) !important; }
.nav-link { font-weight: 600; transition: color 0.3s; position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width 0.3s ease-out; }
.nav-link:hover, .nav-link.active { color: var(--primary-color) !important; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Hero Section */
.hero-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fce3ec, #fde4e4, #e8f5ff); background-size: 400% 400%; animation: backgroundPan 15s ease infinite; position: relative; overflow: hidden; padding: 2rem; }
.hero-title {
    font-size: clamp(2.5rem, 10vw, 5.5rem);
    font-weight: 900;
    margin-bottom: 0.5rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.hero-title .char {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    animation: letter-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-tagline { font-size: clamp(1rem, 4vw, 1.5rem); color: #555; margin-bottom: 2rem; animation: reveal 1s 0.8s backwards; }
.cta-buttons { animation: reveal 1s 1s backwards; }
.floating-element-1, .floating-element-2, .floating-element-3 { position: absolute; font-size: clamp(2rem, 5vw, 4rem); opacity: 0.3; animation: float 8s ease-in-out infinite; }
.floating-element-1 { top: 15%; left: 10%; animation-delay: 0s; } .floating-element-2 { bottom: 20%; right: 15%; animation-duration: 12s; } .floating-element-3 { top: 50%; right: 5%; animation-duration: 10s; animation-delay: 2s; }

/* About Section */
#about { padding-top: 120px; padding-bottom: 120px; }
.about-image { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.about-image:hover { transform: scale(1.05); box-shadow: var(--shadow-hover); }
.decorative-swirl {
    position: absolute;
    top: -50px;
    left: -100px;
    width: 300px;
    z-index: -1;
    pointer-events: none;
}
.decorative-swirl path {
    stroke-dasharray: 1000; /* Approximate path length */
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease-in-out;
}
.decorative-swirl.active path {
    stroke-dashoffset: 0;
}

/* Menu Section - 3D Tilt Cards */
.product-card {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: var(--shadow);
    transition: all 0.3s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}
.product-card:hover {
    box-shadow: var(--shadow-hover);
}
.product-card img { border-radius: var(--border-radius) var(--border-radius) 0 0; height: 250px; object-fit: cover; }
.product-card .card-title { color: var(--primary-color); }

/* Promo Section - Aurora BG */
.aurora-bg {
    background: linear-gradient(125deg, #ff75a0, #89cff0, #fdf0f5, #ff9ec4);
    background-size: 400% 400%;
    animation: aurora 15s ease infinite;
}
.promo-container { padding: 4rem; color: #fff; background-color: rgba(0,0,0,0.1); backdrop-filter: blur(5px); border-radius: var(--border-radius); }
.promo-title { font-size: clamp(2rem, 6vw, 3.5rem); text-shadow: 2px 2px 10px rgba(0,0,0,0.1); } .promo-text { font-size: 1.2rem; }

/* Testimonials Section */
.testimonial-card { background: white; padding: 2.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow); border-top: 5px solid var(--primary-color); position: relative; margin: 1rem; min-height: 280px; display: flex; flex-direction: column; justify-content: center; }
.testimonial-card .bi-quote { position: absolute; top: 1rem; left: 1rem; font-size: 3rem; color: var(--primary-color); opacity: 0.1; }
.testimonial-author { display: flex; align-items: center; margin-top: 1.5rem; } .testimonial-author img { width: 60px; height: 60px; border-radius: 50%; margin-right: 1rem; }
.stars { animation: star-glow 2s infinite; font-size: 1.2rem; }
#testimonialCarousel .carousel-indicators button { width: 12px; height: 12px; border-radius: 50%; background-color: var(--secondary-color); border: none; margin: 0 8px; }
#testimonialCarousel .carousel-indicators .active { background-color: var(--primary-color); }

/* Contact Section */
.form-control { border-radius: 10px; padding: 1.1rem; transition: all 0.3s ease; background-color: #f7f7f7; border: 2px solid transparent; }
.form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(255, 117, 160, 0.25); background-color: #fff; }
.map-placeholder { border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow); }
.map-placeholder iframe { filter: grayscale(1); transition: filter 0.5s ease; }
.map-placeholder iframe:hover { filter: grayscale(0); }

/* WhatsApp & Footer */
.whatsapp-cta { position: fixed; bottom: 25px; right: 25px; background-color: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); z-index: 1000; animation: pulse 2.5s infinite 2s; transition: transform 0.3s ease; }
.whatsapp-cta:hover { transform: scale(1.1) rotate(10deg); color: white; }
.footer { background-color: #2c2c2c; } .footer a { text-decoration: none; transition: color 0.3s ease; } .footer a:hover { color: var(--primary-color) !important; }
.social-icons .social-icon { color: white; font-size: 1.5rem; margin: 0 0.75rem; transition: transform 0.3s ease, color 0.3s ease; display: inline-block; }
.social-icons .social-icon:hover { transform: translateY(-5px) scale(1.1); color: var(--primary-color); }

/* Media Queries */
@media (max-width: 992px) {
    .decorative-swirl { display: none; }
    main { padding-top: 70px; }
}
@media (max-width: 768px) {
    .section-title { font-size: 2.2rem; }
    .testimonial-card { min-height: auto; padding: 2rem; }
}