/* ========================================================
   LA STICKERCISA - Custom Stylesheet
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Epilogue:ital,wght@0,400;0,600;0,700;0,900;1,700&family=Kalam:wght@700&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

:root {
    --brand-purple: #ad51ff;
    --brand-purple-hover: #9638eb;
    --brand-accent: #ad51ff;
    --brand-accent-hover: #9638eb;
    --brand-yellow: #ad51ff;
    --brand-yellow-hover: #9638eb;
    --brand-blue: #0099FF;
    --brand-blue-hover: #0084DE;
    --brand-dark: #111111;
    --brand-black: #0A0A0A;
    --brand-gray: #F4F4F6;
    --font-heading: 'Dela Gothic One', sans-serif;
    --font-subheading: 'Epilogue', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-handwriting: 'Kalam', cursive;
}

body {
    font-family: var(--font-body);
    color: #111111;
    background-color: #FAFAFB;
    overflow-x: hidden;
}

.font-heading {
    font-family: var(--font-heading);
}

.font-subheading {
    font-family: var(--font-subheading);
}

.font-handwriting {
    font-family: var(--font-handwriting);
}

/* ----------------------------------------------------
   HERO & INTERACTIVE STICKERS CANVAS
   ---------------------------------------------------- */
.interactive-stickers {
    position: relative;
    width: 100%;
    min-height: 560px;
    height: 72svh;
    max-height: 780px;
    background: radial-gradient(circle at 50% 30%, #FFFFFF 0%, #EDF2F7 100%);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

@media (max-width: 768px) {
    .interactive-stickers {
        min-height: 480px;
        height: 65svh;
    }
}

.interactive-stickers__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    touch-action: none;
    cursor: default;
}

/* Hero Content Layer (Above canvas) */
.interactive-stickers__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    pointer-events: none; /* Let clicks pass through to stickers where empty */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
    padding-inline: 1rem;
    text-align: center;
}

/* Allow interaction on headings and buttons specifically */
.interactive-stickers__content > * {
    pointer-events: auto;
}

/* Special Word Underline Effect (Just like StickerBros!) */
.special-word {
    position: relative;
    display: inline-block;
    color: #FFFFFF;
    white-space: nowrap;
    padding: 0 4px;
    -webkit-text-stroke: 12px var(--brand-purple);
    paint-order: stroke fill;
}



/* Paper Border divider */
.paper-border-container {
    position: relative;
    width: 100%;
    height: 48px;
    overflow: hidden;
    z-index: 25;
    margin-top: -24px;
}

.paper-border-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

/* ----------------------------------------------------
   CLIENT / LOGOS MARQUEE
   ---------------------------------------------------- */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-track {
    display: flex;
    width: 200%;
    animation: marquee 28s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

/* ----------------------------------------------------
   PRODUCT CARDS & HOVER EFFECTS
   ---------------------------------------------------- */
.sticker-card {
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticker-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
}

.sticker-card .card-img-wrapper {
    overflow: hidden;
}

.sticker-card:hover .card-img {
    transform: scale(1.06);
}

.card-img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------
   BUTTON STYLES & ACCENTS
   ---------------------------------------------------- */
.btn-primary {
    background-color: var(--brand-purple);
    color: #FFFFFF;
    font-family: var(--font-heading);
    letter-spacing: 0.04em;
    font-size: 15px;
    padding: 16px 36px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 18px rgba(173, 81, 255, 0.45);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--brand-purple-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(173, 81, 255, 0.7);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-dark {
    background-color: #111111;
    color: #FFFFFF;
    font-family: var(--font-subheading);
    font-weight: 700;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-dark:hover {
    background-color: #262626;
    transform: translateY(-2px);
}

.btn-pill-sample {
    background-color: #111111;
    color: #FFFFFF;
    border: 1.5px solid #FFFFFF;
    font-family: var(--font-subheading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 8px 20px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
}

.btn-pill-sample:hover {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #FFFFFF;
    transform: scale(1.04);
}

/* Wiggle animation for shake button */
@keyframes wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.animate-wiggle {
    animation: wiggle 0.4s ease infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #F1F1F1;
}
::-webkit-scrollbar-thumb {
    background: #C4C4C4;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #999999;
}



/* Peel Animation */
@keyframes peelStickerOff {
    0% {
        transform: perspective(2000px) rotate3d(1, -1, 0, 0deg);
        box-shadow: 0 0 0 rgba(0,0,0,0);
        opacity: 1;
    }
    30% {
        transform: perspective(2000px) rotate3d(1, -1.2, 0.2, 35deg) translate3d(-2%, -2%, 300px);
        box-shadow: -30px 50px 80px rgba(0,0,0,0.6);
        opacity: 1;
    }
    100% {
        transform: perspective(2000px) rotate3d(1, -2.5, 0.5, 160deg) translate3d(-150%, -150%, 1200px);
        box-shadow: -100px 200px 150px rgba(0,0,0,0.2);
        opacity: 0;
    }
}

.peeling-out {
    animation: peelStickerOff 1.6s ease-in-out forwards;
    pointer-events: none;
    background: linear-gradient(135deg, #FAFAFB 60%, #e0e0e0 100%) !important;
}