/* Custom styles that go beyond Tailwind utilities */

/* ── Brand color tokens (light / dark) ── */
:root {
    --brand-bg: #FAF6F1;
    --brand-bg-secondary: #F3EDE4;
    --brand-bg-tertiary: #EBE3D7;
    --brand-card: #FFFFFF;
    --brand-card-alt: #FFF8F0;
    --brand-text: #3D2E1F;
    --brand-text-secondary: #7A6555;
    --brand-text-muted: #A89681;
    --brand-border: #E2D6C8;
    --brand-border-light: #EFE7DC;
    --brand-lavender: #C9A4B8;
    --brand-lavender-soft: #E0C5D4;
    --brand-lavender-bg: #F5ECF0;
    --brand-green: #B5D8C6;
    --brand-green-soft: #D4ECDF;
    --brand-green-bg: #EFF8F3;
    --brand-blue: #B0C8D6;
    --brand-blue-bg: #EDF3F7;
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand-bg: #1A1612;
        --brand-bg-secondary: #231E19;
        --brand-bg-tertiary: #2D2620;
        --brand-card: #2A2420;
        --brand-card-alt: #322B25;
        --brand-text: #F0E8DE;
        --brand-text-secondary: #BBA992;
        --brand-text-muted: #8A7A68;
        --brand-border: #3D342B;
        --brand-border-light: #332B24;
        --brand-lavender: #C9A4B8;
        --brand-lavender-soft: #5E3F50;
        --brand-lavender-bg: #3D2833;
        --brand-green: #9DC8B3;
        --brand-green-soft: #344D40;
        --brand-green-bg: #22352B;
        --brand-blue: #B0C8D6;
        --brand-blue-bg: #242F34;
    }
}


/* Navbar pill – frosted glass */
.navbar-pill {
    background: rgba(235, 227, 215, 0.45);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border: 1px solid rgba(226, 214, 200, 0.35);
    box-shadow: 0 2px 12px rgba(61, 46, 31, 0.05);
}

@media (prefers-color-scheme: dark) {
    .navbar-pill {
        background: rgba(45, 38, 32, 0.45);
        border-color: rgba(61, 52, 43, 0.4);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }
}

/* Smooth hover transitions */
.nav-link {
    transition: color 0.2s ease;
}

/* CTA button hover effects */
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    transition: none;
}

.btn-primary:hover::after,
.btn-primary.shine::after {
    animation: btn-shine 0.6s ease-out;
}

@keyframes btn-shine {
    from { left: -100%; }
    to   { left: 150%; }
}

.btn-secondary {
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* Fade-in-up animation on page load */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    opacity: 0;
    animation: fade-in-up 0.7s ease-out forwards;
}

.fade-in-up-delay-1 {
    animation-delay: 0.1s;
}

.fade-in-up-delay-2 {
    animation-delay: 0.25s;
}

.fade-in-up-delay-3 {
    animation-delay: 0.4s;
}

.fade-in-up-delay-4 {
    animation-delay: 0.55s;
}

.fade-in-up-delay-5 {
    animation-delay: 0.7s;
}

/* Logo character flip on hover */
.logo-flip.spinning {
    animation: backflip 0.6s ease;
}

@keyframes backflip {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}

/* Offer tag – rotating border light point */
@property --offer-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.offer-tag-glow {
    position: relative;
    border-radius: 9999px;
    padding: 1px;
    overflow: hidden;
}

.offer-tag-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from var(--offer-angle),
        var(--brand-lavender-soft) 0deg,
        var(--brand-lavender-soft) 240deg,
        color-mix(in srgb, var(--brand-lavender) 40%, var(--brand-lavender-soft)) 300deg,
        var(--brand-lavender-soft) 360deg
    );
    animation: offer-border-spin 5s linear infinite;
}

/* Non-uniform angle keyframes: slow down on short curved ends,
   speed up on long straight edges for perceived constant speed */
@keyframes offer-border-spin {
    0%   { --offer-angle: 0deg; }
    20%  { --offer-angle: 80deg; }
    30%  { --offer-angle: 100deg; }
    70%  { --offer-angle: 260deg; }
    80%  { --offer-angle: 280deg; }
    100% { --offer-angle: 360deg; }
}

/* Hand-drawn highlighter effect */
.highlighter {
    position: relative;
    white-space: nowrap;
}

.highlighter::before {
    content: '';
    position: absolute;
    left: -0.2em;
    right: -0.15em;
    bottom: 0.1em;
    height: 0.4em;
    background: var(--brand-lavender-soft);
    opacity: 0.6;
    border-radius: 0.25em 0.5em 0.3em 0.15em;
    transform: rotate(-0.5deg) skewX(-6deg);
    z-index: -1;
}

/* Logo bar fade effect */
.logo-bar {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}