/* =====================================================
   KARNET — HOME PAGE DYNAMIC EFFECTS
   ===================================================== */

/* ---- Keyframes ---- */

/* Blob drifts are small — blobs stay near their corner, never drift to center */
@keyframes blobDrift1 {
    0%, 100% { transform: translate(0px,  0px);  }
    33%       { transform: translate(-18px, 14px); }
    66%       { transform: translate(12px, -10px); }
}
@keyframes blobDrift2 {
    0%, 100% { transform: translate(0px,  0px);  }
    33%       { transform: translate(16px, -12px); }
    66%       { transform: translate(-10px, 18px); }
}
@keyframes blobDrift3 {
    0%, 100% { transform: translate(0px,  0px);  }
    50%       { transform: translate(14px, 12px); }
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes lineGrow {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

@keyframes gradientFlow {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

@keyframes floatCard1 {
    0%, 100% { transform: rotate(1.5deg)  translateY(0px);  }
    50%       { transform: rotate(1.5deg)  translateY(-14px); }
}
@keyframes floatCard2 {
    0%, 100% { transform: rotate(-3deg)   translateY(0px);  }
    50%       { transform: rotate(-3deg)   translateY(-9px); }
}

@keyframes wobble1 {
    0%, 100% { transform: rotate(5deg)  translateY(0);  }
    30%       { transform: rotate(7.5deg) translateY(-3px); }
    60%       { transform: rotate(3deg)  translateY(2px); }
}
@keyframes wobble2 {
    0%, 100% { transform: rotate(-6deg) translateY(0);  }
    30%       { transform: rotate(-4deg) translateY(-2px); }
    60%       { transform: rotate(-8deg) translateY(3px); }
}

@keyframes sparkleAnim {
    0%   { opacity: 0; transform: translateY(0px)   scale(0)   rotate(0deg);   }
    15%  { opacity: 1; transform: translateY(-10px)  scale(1.3) rotate(40deg);  }
    80%  { opacity: 0.7; transform: translateY(-42px) scale(0.8) rotate(130deg); }
    100% { opacity: 0; transform: translateY(-62px)  scale(0)   rotate(190deg); }
}

@keyframes iconBounce {
    0%   { transform: scale(1)    rotate(0deg); }
    30%  { transform: scale(1.32) rotate(-9deg); }
    60%  { transform: scale(0.91) rotate(4deg);  }
    80%  { transform: scale(1.07) rotate(-2deg); }
    100% { transform: scale(1)    rotate(0deg); }
}

@keyframes shimmer {
    from { background-position: -200% center; }
    to   { background-position:  200% center; }
}

@keyframes bandGlow {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}


/* ================================================================
   HERO — ANIMATED BLOBS
   ================================================================ */

/* Card treatment: light gradient + border + radius, matching the holidays widget.
   No overflow:hidden — not needed since ::before uses inset gradients with no filter. */
.home-hero {
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, rgba(255, 240, 247, 0.7) 0%, rgba(255, 252, 242, 0.55) 100%);
    border: 1px solid rgba(217, 70, 125, 0.14);
    border-radius: 20px;
    padding-left: 48px;
    padding-right: 48px;
    box-shadow: 0 4px 32px rgba(217, 70, 125, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
    margin-bottom: 12px;
}

/* Pseudo-element gradient blobs — contained by definition (inset:0),
   no filter, no overflow, bords fondus dans le fond de page. */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 55% 50% at 100% 0%,   rgba(217, 70, 125, 0.16) 0%, transparent 70%),
        radial-gradient(ellipse 50% 45% at 0%   100%,  rgba(21, 164, 122, 0.13) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: heroBlobPulse 10s ease-in-out infinite;
}

@keyframes heroBlobPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.72; }
}

/* JS-injected blob divs no longer used — kept for JS safety */
.hero-blobs-wrapper { display: none; }
.hero-blob          { display: none; }

/* Ensure content stays above blobs */
.home-hero-copy,
.home-visual {
    position: relative;
    z-index: 1;
}


/* ================================================================
   HERO — TEXT REVEAL (staggered on load)
   ================================================================ */

.home-hero-copy > * {
    animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.home-hero-copy > *:nth-child(1) { animation-delay: 0.00s; }
.home-hero-copy > *:nth-child(2) { animation-delay: 0.10s; }
.home-hero-copy > *:nth-child(3) { animation-delay: 0.18s; }
.home-hero-copy > *:nth-child(4) { animation-delay: 0.27s; }
.home-hero-copy > *:nth-child(5) { animation-delay: 0.36s; }
.home-hero-copy > *:nth-child(6) { animation-delay: 0.45s; }


/* ================================================================
   HERO — ANIMATED GRADIENT H1
   ================================================================ */

.home-hero h1 {
    background: linear-gradient(
        120deg,
        #2b2130 0%,
        #8c1d4a 30%,
        #d9467d 52%,
        #8c1d4a 72%,
        #2b2130 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation:
        heroFadeUp  0.7s  cubic-bezier(0.16, 1, 0.3, 1) 0.10s both,
        gradientFlow 8s   ease-in-out 0.8s infinite;
}

/* Animated underline that grows left→right on load */
.home-hero h1::after {
    transform-origin: left center;
    animation: lineGrow 1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}


/* ================================================================
   HERO — FLOATING CARDS & STICKER WOBBLE
   ================================================================ */

.preview-main {
    animation:
        floatCard1 7s ease-in-out 1s infinite,
        heroFadeUp 0.8s ease 0.45s both;
}
.preview-side {
    animation:
        floatCard2 9.5s ease-in-out 2s infinite,
        heroFadeUp 0.8s ease 0.65s both;
}
.sticker-one {
    animation:
        wobble1 6.5s ease-in-out 2.5s infinite,
        heroFadeUp 0.7s ease 0.85s both;
}
.sticker-two {
    animation:
        wobble2 7.5s ease-in-out 3.2s infinite,
        heroFadeUp 0.7s ease 1.00s both;
}
.signal-one {
    animation: heroFadeUp 0.7s ease 0.72s both;
}
.signal-two {
    animation: heroFadeUp 0.7s ease 0.92s both;
}


/* Sparkles removed — caused parasitic dots outside hero area */


/* ================================================================
   STEP CARDS — HOVER LIFT & ICON BOUNCE
   ================================================================ */

.home-step {
    transition:
        transform    0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow   0.32s ease,
        border-color 0.25s ease;
}
.home-step:hover {
    transform:    translateY(-10px) scale(1.025);
    box-shadow:   0 30px 60px rgba(47, 35, 52, 0.18);
    border-color: #d9467d;
}

.home-step-icon {
    transition: background 0.3s ease, color 0.3s ease;
}
.home-step:hover .home-step-icon {
    background: #d9467d;
    color: #fff;
    animation: iconBounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}


/* ================================================================
   TAGS & PILLS — POP HOVER
   ================================================================ */

.home-tags span,
.home-idea-list span {
    transition:
        transform    0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow   0.22s ease,
        border-color 0.2s ease,
        background   0.2s ease;
}
.home-tags span:hover,
.home-idea-list span:hover {
    transform:    translateY(-5px) scale(1.07);
    box-shadow:   0 12px 32px rgba(217, 70, 125, 0.22);
    border-color: #d9467d;
    background:   #fff0f7;
}


/* ================================================================
   BUTTONS — SHIMMER ON HOVER
   ================================================================ */

.btn {
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.32) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.btn:hover::after {
    opacity: 1;
    animation: shimmer 0.7s linear;
}


/* ================================================================
   SCROLL-REVEAL CLASSES (added by JS via IntersectionObserver)
   ================================================================ */

.fx-reveal {
    opacity: 0;
    transform: translateY(46px);
    transition:
        opacity   0.72s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.fx-from-left {
    opacity: 0;
    transform: translateX(-38px);
    transition:
        opacity   0.72s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.fx-from-right {
    opacity: 0;
    transform: translateX(38px);
    transition:
        opacity   0.72s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.fx-pop {
    opacity: 0;
    transform: scale(0.75) translateY(14px);
    transition:
        opacity   0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Revealed state */
.fx-reveal.fx-visible,
.fx-from-left.fx-visible,
.fx-from-right.fx-visible {
    opacity: 1;
    transform: translate(0);
}
.fx-pop.fx-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Stagger delays */
.fx-stagger-1 { transition-delay: 0.04s; }
.fx-stagger-2 { transition-delay: 0.12s; }
.fx-stagger-3 { transition-delay: 0.20s; }
.fx-stagger-4 { transition-delay: 0.28s; }
.fx-stagger-5 { transition-delay: 0.36s; }
.fx-stagger-6 { transition-delay: 0.44s; }


/* ================================================================
   CALENDAR FEATURE BAND — GLOW BORDER + LIFT
   ================================================================ */

.home-feature-band {
    transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.3s ease;
}

.home-feature-band:hover {
    transform: translateY(-5px);
    border-color: #60a5fa;
    box-shadow: 0 20px 48px rgba(37, 99, 235, 0.16), 0 0 0 3px rgba(37, 99, 235, 0.10);
}


/* ================================================================
   CALENDAR EVENTS — SLIDE-IN STAGGER (via fx-visible)
   ================================================================ */

.cal-preview-event {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.cal-preview-event.fx-visible {
    opacity: 1;
    transform: translateX(0);
}
.cal-preview-event:nth-child(1) { transition-delay: 0.55s; }
.cal-preview-event:nth-child(2) { transition-delay: 0.75s; }


/* ================================================================
   REDUCED MOTION — accessibility
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .hero-blob,
    .hero-sparkle,
    .preview-main,
    .preview-side,
    .sticker-one,
    .sticker-two,
    .home-feature-band::before {
        animation: none !important;
    }

    .home-hero-copy > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .home-hero h1 {
        animation: none !important;
        -webkit-text-fill-color: #2b2130;
        background: none;
    }

    .home-hero h1::after {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .fx-reveal,
    .fx-from-left,
    .fx-from-right,
    .fx-pop,
    .cal-preview-event {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .home-step,
    .home-tags span,
    .home-idea-list span {
        transition: none !important;
    }
}