@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) + 8px);
    --radius-3xl: calc(var(--radius) + 12px);

    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-primary-glow: var(--primary-glow);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-party-pink: var(--party-pink);
    --color-party-yellow: var(--party-yellow);
    --color-party-cyan: var(--party-cyan);
    --color-party-lime: var(--party-lime);
    --color-party-orange: var(--party-orange);

    --font-display: "Fredoka", "Poppins", ui-sans-serif, system-ui, sans-serif;
    --font-sans: "Poppins", ui-sans-serif, system-ui, sans-serif;
}

:root {
    --radius: 1rem;
    --background: oklch(0.99 0.01 300);
    --foreground: oklch(0.2 0.08 300);

    --card: oklch(1 0 0);
    --card-foreground: oklch(0.2 0.08 300);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.2 0.08 300);

    /* Deep royal purple brand */
    --primary: oklch(0.42 0.22 300);
    --primary-foreground: oklch(0.99 0.01 300);
    --primary-glow: oklch(0.65 0.25 310);

    --secondary: oklch(0.95 0.04 310);
    --secondary-foreground: oklch(0.3 0.15 300);

    --muted: oklch(0.96 0.02 310);
    --muted-foreground: oklch(0.5 0.05 300);

    --accent: oklch(0.7 0.24 340);
    --accent-foreground: oklch(0.99 0 0);

    --destructive: oklch(0.6 0.24 25);
    --destructive-foreground: oklch(0.99 0 0);

    --border: oklch(0.92 0.03 310);
    --input: oklch(0.92 0.03 310);
    --ring: oklch(0.55 0.22 305);

    /* Celebration accent colors */
    --party-pink: oklch(0.7 0.24 350);
    --party-yellow: oklch(0.88 0.19 95);
    --party-cyan: oklch(0.78 0.14 200);
    --party-lime: oklch(0.85 0.2 140);
    --party-orange: oklch(0.75 0.2 45);

    --gradient-hero: linear-gradient(135deg, oklch(0.42 0.22 300) 0%, oklch(0.55 0.25 320) 50%, oklch(0.65 0.25 340) 100%);
    --gradient-party: linear-gradient(90deg, var(--party-pink), var(--primary-glow), var(--party-cyan));
    --shadow-party: 0 20px 60px -20px color-mix(in oklab, var(--primary) 45%, transparent);
    --shadow-glow: 0 0 40px color-mix(in oklab, var(--primary-glow) 55%, transparent);
    --text-shade: 0 2px 12px rgba(20, 6, 40, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6);
}

@layer base {
    * {
        border-color: var(--color-border);
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--color-background);
        color: var(--color-foreground);
        font-family: var(--font-sans);
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-display);
        letter-spacing: -0.01em;
    }
}

@utility text-shade {
    text-shadow: var(--text-shade);
}

@utility gradient-hero {
    background: var(--gradient-hero);
}

@utility gradient-party {
    background: var(--gradient-party);
}

@utility shadow-party {
    box-shadow: var(--shadow-party);
}

@utility shadow-glow {
    box-shadow: var(--shadow-glow);
}

/* ================= Celebration animations ================= */

@keyframes float-up {
    0% {
        transform: translateY(110vh) translateX(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-20vh) translateX(var(--drift, 40px)) rotate(15deg);
        opacity: 0;
    }
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0.4;
    }
}

@keyframes wiggle {

    0%,
    100% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(4deg);
    }
}

@keyframes bounce-soft {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pop-in {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    60% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes sparkle {

    0%,
    100% {
        transform: scale(0.4);
        opacity: 0.3;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slide-fade {
    0% {
        opacity: 0;
        transform: scale(1.06);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@utility animate-float-up {
    animation: float-up linear infinite;
}

@utility animate-confetti {
    animation: confetti-fall linear infinite;
}

@utility animate-wiggle {
    animation: wiggle 1.6s ease-in-out infinite;
}

@utility animate-bounce-soft {
    animation: bounce-soft 2.2s ease-in-out infinite;
}

@utility animate-pop-in {
    animation: pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@utility animate-marquee {
    animation: marquee 40s linear infinite;
}

@utility animate-sparkle {
    animation: sparkle 2s ease-in-out infinite;
}

@utility animate-slide-fade {
    animation: slide-fade 0.9s ease-out both;
}

/* slide fade + subtle scale */
.animate-slide-fade {
    animation: slideFade 6s ease-in-out infinite alternate;
}

@keyframes slideFade {
    0% {
        transform: scale(1.02);
        opacity: 0.95;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* pop-in for content */
.animate-pop-in {
    animation: .6s cubic-bezier(.34, 1.56, .64, 1) both popIn;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(.6);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* wiggle for party popper */
.animate-wiggle {
    animation: wiggle 1.2s ease-in-out infinite;
}

@keyframes wiggle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(10deg);
    }

    75% {
        transform: rotate(-10deg);
    }
}

/* balloons float-up */
.animate-float-up {
    animation: floatUp linear infinite;
}

@keyframes floatUp{0%{opacity:0;transform:translateY(110vh)translate(0)rotate(0)}10%{opacity:1}90%{opacity:1}to{transform:translateY(-20vh) translateX(var(--drift,40px)) rotate(15deg);opacity:0}}

.animate-confetti {
    animation: confettiFall linear infinite;
    will-change: transform;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(120vh) rotate(720deg) scale(0.6);
        opacity: 0.3;
    }
}

.dot-transition {
    transition: all 0.25s ease;
}

@media (max-width: 640px) {
    .hero-title {
        font-size: 2.25rem;
    }
}

.text-shadow-dark {
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.text-shadow-light {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.eyebrow-shadow {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.transition-transform {
    transition: transform 0.2s ease;
}

.transition {
    transition: all 0.2s ease;
}

.bg-white\/95 {
    background-color: rgba(255, 255, 255, 0.95);
}

.hover\:bg-white:hover {
    background-color: #ffffff;
}

.bg-white\/15 {
    background-color: rgba(255, 255, 255, 0.15);
}

.bg-white\/50 {
    background-color: rgba(255, 255, 255, 0.5);
}

.hover\:bg-white\/80:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.pointer-events-none {
    pointer-events: none;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.z-10 {
    z-index: 10;
}

.z-\[5\] {
    z-index: 5;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.inset-y-0 {
    top: 0;
    bottom: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.bottom-6 {
    bottom: 1.5rem;
}

.top-full {
    top: 100%;
}

.h-full {
    height: 100%;
}

.h-\[70vh\] {
    height: 70vh;
}

.h-3\.5 {
    height: 0.875rem;
}

.h-4 {
    height: 1rem;
}

.h-2\.5 {
    height: 0.625rem;
}

.min-h-\[520px\] {
    min-height: 520px;
}

.w-full {
    width: 100%;
}

.w-3\.5 {
    width: 0.875rem;
}

.w-4 {
    width: 1rem;
}

.w-2\.5 {
    width: 0.625rem;
}

.w-10 {
    width: 2.5rem;
}

.w-px {
    width: 1px;
}

.max-w-7xl {
    max-width: 80rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-xl {
    max-width: 36rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mb-0 {
    margin-bottom: 0;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.inline-block {
    display: inline-block;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.object-cover {
    object-fit: cover;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.font-black {
    font-weight: 900;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-base {
    font-size: 1rem;
}

.text-4xl {
    font-size: 2.25rem;
}

.text-white {
    color: #ffffff;
}

.text-accent-foreground {
    color: var(--accent-foreground);
}

.text-primary {
    color: var(--primary);
}

.uppercase {
    text-transform: uppercase;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.leading-\[1\.05\] {
    line-height: 1.05;
}

@media (min-width: 640px) {
    .sm\:w-3\/4 {
        width: 75%;
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .sm\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .sm\:text-5xl {
        font-size: 3rem;
    }

    .sm\:text-lg {
        font-size: 1.125rem;
    }
}

@media (min-width: 768px) {
    .md\:text-6xl {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .lg\:w-2\/3 {
        width: 66.666667%;
    }
}


/* Confetti styles */
.animate-confetti {
    animation: confettiFall linear infinite;
    will-change: transform;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(120vh) rotate(720deg) scale(0.6);
        opacity: 0.3;
    }
}

/* Balloon styles */


/* Stagger animation delays for cards */
.delay-0 {
    animation-delay: 0ms;
}

.delay-60 {
    animation-delay: 60ms;
}

.delay-120 {
    animation-delay: 120ms;
}

.delay-180 {
    animation-delay: 180ms;
}

.delay-240 {
    animation-delay: 240ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-360 {
    animation-delay: 360ms;
}

.delay-420 {
    animation-delay: 420ms;
}

.delay-480 {
    animation-delay: 480ms;
}

.delay-540 {
    animation-delay: 540ms;
}

.animate-sparkle {
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle{0%,to{opacity:.3;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}

.animate-confetti {
    animation: confettiFall linear infinite;
    will-change: transform;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(120vh) rotate(720deg) scale(0.6);
        opacity: 0.3;
    }
}