/* =========================================================================
   SpicyToon — Design Upgrade Layer ("חיות ושיגעון")
   Loaded AFTER style.css / layout.css. Purely additive.
   - Does NOT touch the logo.
   - Does NOT change fonts (Hebrew Ploni Yad etc. stay as-is).
   - Only adds motion, glow, hover energy and life.
   Remove the <link> to this file to fully revert.

   Respects prefers-reduced-motion (accessibility).
   ========================================================================= */

:root {
    --st-red: #af262a;
    --st-red-hot: #e8402f;
    --st-yellow: #e5c900;
    --st-yellow-bright: #ffd21e;
}

/* ------------------------------------------------------------------ *
 * 0. ENGLISH FONT = Myriad Pro (Latin only), Hebrew stays Ploni Yad
 *
 * We register Myriad Pro under a dedicated family name, scoped with
 * unicode-range to Latin characters, digits and common punctuation.
 * By listing it FIRST in the font stack (before Ploni Yad), the browser
 * uses Myriad Pro for any Latin/English glyphs and falls back to
 * Ploni Yad for Hebrew — even inside mixed Hebrew+English text.
 * The Hebrew block (U+0590–U+05FF) is deliberately excluded.
 * ------------------------------------------------------------------ */
@font-face {
    font-family: 'Myriad Pro Latin';
    src: url('../fonts/MyriadPro-Regular.woff2') format('woff2'),
         url('../fonts/MyriadPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* Basic Latin + Latin-1 + Latin Extended-A/B + punctuation + digits */
    unicode-range: U+0000-024F, U+2000-206F, U+2070-209F, U+20A0-20BF;
}

/* Apply the English-first stack across the site. Hebrew glyphs are not
   covered by Myriad Pro Latin, so they render in Ploni Yad automatically. */
html body,
h1, h2, h3, h4, h5, h6,
p, a, span, strong, em, li, label, button, input, textarea,
.bttn,
.gallery-inner .nav-tabs .nav-link,
#title-div,
.fancybox-caption,
.fancybox-caption__body {
    font-family: 'Myriad Pro Latin', 'Ploni Yad v2 AAA' !important;
}

/* ------------------------------------------------------------------ *
 * 1. HERO / BANNER — living, breathing background
 * ------------------------------------------------------------------ */

.banner-container {
    background: linear-gradient(135deg, #7a1216 0%, var(--st-red) 45%, var(--st-red-hot) 100%);
    background-size: 200% 200%;
    animation: st-hero-shift 12s ease-in-out infinite;
    overflow: hidden;
}

@keyframes st-hero-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* floating spice blobs behind hero content */
.banner-container::before,
.banner-container::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
    opacity: 0.35;
    z-index: 0;
}

.banner-container::before {
    width: 260px;
    height: 260px;
    background: radial-gradient(circle at 30% 30%, var(--st-yellow-bright), transparent 70%);
    top: -60px;
    right: -40px;
    animation: st-float-a 9s ease-in-out infinite;
}

.banner-container::after {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at 70% 70%, #ffffff55, transparent 70%);
    bottom: -120px;
    left: -60px;
    animation: st-float-b 11s ease-in-out infinite;
}

@keyframes st-float-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-30px, 40px) scale(1.15); }
}

@keyframes st-float-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, -30px) scale(1.1); }
}

/* keep hero content above the blobs */
.banner-content { z-index: 2; }

/* punchy entrance for the headline + arrow */
.banner-inner h1 {
    animation: st-pop-in 0.9s cubic-bezier(0.16, 1.3, 0.4, 1) both;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.25);
}

.banner-inner .down-arrw {
    animation: st-bounce 1.8s ease-in-out infinite;
    display: inline-block;
}

@keyframes st-pop-in {
    0%   { opacity: 0; transform: translateY(28px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes st-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(10px); }
}

/* ------------------------------------------------------------------ *
 * 2. GALLERY TABS — bold, springy pills
 * ------------------------------------------------------------------ */

.gallery-inner .nav-tabs .nav-link {
    transition: transform 0.25s cubic-bezier(0.16, 1.3, 0.4, 1),
                background-color 0.25s ease,
                color 0.25s ease,
                box-shadow 0.25s ease;
    border-radius: 999px !important;
    padding: 7px 20px !important;
    font-weight: 700;
}

.gallery-inner .nav-tabs .nav-link:hover {
    transform: translateY(-3px) rotate(-1.5deg) scale(1.06);
    background: var(--st-yellow) !important;
    color: #1a1a1a !important;
    box-shadow: 0 8px 18px rgba(229, 201, 0, 0.4);
}

.gallery-inner .nav-tabs .nav-link.active {
    background: var(--st-red) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(175, 38, 42, 0.45);
    animation: st-tab-wiggle 0.5s ease;
}

@keyframes st-tab-wiggle {
    0%   { transform: scale(0.92) rotate(0deg); }
    40%  { transform: scale(1.08) rotate(2deg); }
    70%  { transform: scale(0.98) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ------------------------------------------------------------------ *
 * 3. VIDEO CARDS — the crazy part
 * ------------------------------------------------------------------ */

.tab-content .slick-slide > div div {
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.35s cubic-bezier(0.16, 1.2, 0.4, 1),
                box-shadow 0.35s ease;
}

/* the clickable image container */
.tab-content .image-container {
    border-radius: 14px;
    overflow: hidden;
}

.tab-content .image-container img {
    border-radius: 14px;
}

/* wild hover: lift, tilt, zoom, neon glow */
.tab-content .slick-slide > div div:hover {
    transform: translateY(-10px) rotate(-1.5deg) scale(1.04);
    box-shadow: 0 22px 44px rgba(175, 38, 42, 0.45),
                0 0 0 3px var(--st-yellow);
    z-index: 5;
}

.tab-content .image-container:hover img {
    transform: scale(1.12);
}

/* pulsing, energetic play button */
.playbtn {
    transition: transform 0.3s cubic-bezier(0.16, 1.4, 0.4, 1), filter 0.3s ease;
    animation: st-play-pulse 2s ease-in-out infinite;
    z-index: 4;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

@keyframes st-play-pulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50%      { transform: translateY(-50%) scale(1.12); }
}

.tab-content .slick-slide > div div:hover .playbtn {
    transform: translateY(-50%) scale(1.35) rotate(8deg);
    filter: drop-shadow(0 0 14px var(--st-yellow-bright));
}

/* ------------------------------------------------------------------ *
 * 4. CTA BUTTON — hot and alive
 * ------------------------------------------------------------------ */

.bttn {
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--st-yellow) 0%, var(--st-yellow-bright) 100%);
    box-shadow: 0 8px 20px rgba(229, 201, 0, 0.4);
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.bttn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--st-red) 0%, var(--st-red-hot) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.bttn:hover {
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 12px 28px rgba(175, 38, 42, 0.5);
    color: #fff !important;
}

.bttn:hover::before { opacity: 1; }

/* ------------------------------------------------------------------ *
 * 5. SERVICE / OFFER cards — add life on hover
 * ------------------------------------------------------------------ */

.single-service {
    transition: transform 0.35s cubic-bezier(0.16, 1.2, 0.4, 1);
}

.single-service:hover {
    transform: translateY(-8px) scale(1.03);
}

.single-service .icon {
    transition: transform 0.4s cubic-bezier(0.16, 1.4, 0.4, 1);
}

.single-service:hover .icon {
    transform: rotate(-8deg) scale(1.15);
}

.offer-inner ul li {
    transition: transform 0.3s ease;
}

.offer-inner ul li:hover {
    transform: translateX(-6px) scale(1.05);
}

.offer-inner ul li:hover span {
    color: var(--st-red);
    transition: color 0.3s ease;
}

/* client logos: subtle grayscale-to-color pop */
.logo-inner ul li img {
    transition: transform 0.35s ease, filter 0.35s ease;
    filter: grayscale(35%);
}

.logo-inner ul li img:hover {
    transform: scale(1.12) rotate(-2deg);
    filter: grayscale(0%);
}

/* ------------------------------------------------------------------ *
 * 6. CONTACT INPUTS — focus energy
 * ------------------------------------------------------------------ */

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-bottom-color: var(--st-red) !important;
    box-shadow: 0 6px 14px -8px rgba(175, 38, 42, 0.5) !important;
}

/* ------------------------------------------------------------------ *
 * 7. SCROLL REVEAL — elements fly in as you scroll (driven by JS)
 * ------------------------------------------------------------------ */

.st-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1.1, 0.3, 1);
    will-change: opacity, transform;
}

.st-reveal.st-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------------------------------------ *
 * 8. FLOATING PARTICLES layer (created by JS in the hero)
 * ------------------------------------------------------------------ */

.st-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.st-particle {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--st-yellow-bright), var(--st-yellow));
    opacity: 0.6;
    animation: st-rise linear infinite;
}

@keyframes st-rise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    10%  { opacity: 0.7; }
    90%  { opacity: 0.7; }
    100% { transform: translateY(-560px) scale(0.4); opacity: 0; }
}

/* ------------------------------------------------------------------ *
 * Accessibility: honor reduced-motion preference
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .banner-container,
    .banner-container::before,
    .banner-container::after,
    .banner-inner h1,
    .banner-inner .down-arrw,
    .playbtn,
    .st-particle {
        animation: none !important;
    }
    .st-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------------ *
 * 9. FLOATING WHATSAPP BUTTON — spicy & alive
 * ------------------------------------------------------------------ */

.st-whatsapp-float {
    position: fixed;
    bottom: 26px;
    left: 26px;                 /* RTL site: keep it on the left */
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(18, 140, 126, 0.45);
    z-index: 999999;
    transition: transform 0.3s cubic-bezier(0.16, 1.4, 0.4, 1),
                box-shadow 0.3s ease;
    animation: st-wa-bob 2.6s ease-in-out infinite;
}

.st-whatsapp-float:hover {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 12px 30px rgba(18, 140, 126, 0.6);
}

.st-whatsapp-float svg { display: block; }

/* the expanding "call me" pulse ring */
.st-whatsapp-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    z-index: -1;
    animation: st-wa-ping 2.2s ease-out infinite;
}

@keyframes st-wa-ping {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(1.9); opacity: 0; }
}

@keyframes st-wa-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ------------------------------------------------------------------ *
 * 10. SPICY IDENTITY — heat glow & floating embers
 * ------------------------------------------------------------------ */

/* warm ember tint layered over the hero for a "hot" feel */
.banner-container {
    box-shadow: inset 0 -60px 90px -40px rgba(255, 120, 20, 0.35);
}

/* the JS ember particles: glowing hot specks that drift up */
.st-ember {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff3b0, #ff8a1e 55%, #e8402f 100%);
    box-shadow: 0 0 8px 2px rgba(255, 138, 30, 0.7);
    pointer-events: none;
    opacity: 0;
    animation: st-ember-rise linear infinite;
}

@keyframes st-ember-rise {
    0%   { transform: translateY(0) scale(1);   opacity: 0; }
    12%  { opacity: 0.9; }
    88%  { opacity: 0.9; }
    100% { transform: translateY(-460px) translateX(24px) scale(0.3); opacity: 0; }
}

/* a hot flicker on the CTA to reinforce "spicy" */
.bttn {
    box-shadow: 0 8px 20px rgba(229, 201, 0, 0.4),
                0 0 0 rgba(255, 138, 30, 0);
    animation: st-heat-flicker 3.2s ease-in-out infinite;
}

@keyframes st-heat-flicker {
    0%, 100% { box-shadow: 0 8px 20px rgba(229, 201, 0, 0.4), 0 0 0 rgba(255, 138, 30, 0); }
    50%      { box-shadow: 0 8px 22px rgba(229, 201, 0, 0.5), 0 0 24px rgba(255, 138, 30, 0.45); }
}

/* gallery heading gets a subtle hot underline accent */
.gallery-inner .nav-tabs {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .st-whatsapp-float,
    .st-whatsapp-pulse,
    .st-ember,
    .bttn {
        animation: none !important;
    }
}

/* ------------------------------------------------------------------ *
 * 11. RESPONSIVE — mobile & tablet tuning for the upgrade layer
 * ------------------------------------------------------------------ */

/* Tablet and below */
@media only screen and (max-width: 991px) {
    .st-whatsapp-float {
        width: 54px;
        height: 54px;
        bottom: 20px;
        left: 18px;
    }
    .st-whatsapp-float svg {
        width: 30px;
        height: 30px;
    }
}

/* Phones */
@media only screen and (max-width: 767px) {
    .st-whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 16px;
        left: 14px;
    }
    .st-whatsapp-float svg {
        width: 28px;
        height: 28px;
    }

    /* soften the hover glow so it doesn't overpower small screens */
    .tab-content .slick-slide > div div:hover {
        transform: translateY(-6px) scale(1.03);
        box-shadow: 0 14px 26px rgba(175, 38, 42, 0.4),
                    0 0 0 2px var(--st-yellow);
    }

    /* hero blobs a bit smaller so they don't spill awkwardly */
    .banner-container::before { width: 170px; height: 170px; }
    .banner-container::after  { width: 220px; height: 220px; }
}

/* Very small phones: keep the WhatsApp button clear of the accessibility widget */
@media only screen and (max-width: 400px) {
    .st-whatsapp-float {
        width: 48px;
        height: 48px;
        bottom: 14px;
        left: 12px;
    }
}

/* ------------------------------------------------------------------ *
 * 12. TOUCH DEVICES — disable hover-only motion that can "stick"
 * On touch screens there is no real hover, so a tapped card could
 * freeze mid-transform. We neutralise hover transforms there while
 * keeping the always-on animations (pulse, embers, bob).
 * ------------------------------------------------------------------ */
@media (hover: none) {
    .tab-content .slick-slide > div div:hover {
        transform: none;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    }
    .tab-content .image-container:hover img { transform: none; }
    .tab-content .slick-slide > div div:hover .playbtn {
        transform: translateY(-50%) scale(1);
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
    }
    .gallery-inner .nav-tabs .nav-link:hover {
        transform: none;
        background: transparent !important;
        color: #000 !important;
        box-shadow: none;
    }
    .gallery-inner .nav-tabs .nav-link.active:hover {
        background: var(--st-red) !important;
        color: #fff !important;
    }
    .single-service:hover,
    .single-service:hover .icon,
    .offer-inner ul li:hover,
    .logo-inner ul li img:hover {
        transform: none;
    }
    .bttn:hover { transform: none !important; }
}

/* ------------------------------------------------------------------ *
 * 13. VIDEO TITLE FONT — match the site's Hebrew font everywhere
 * The video title shows in two places:
 *   1. #title-div      (floating title above the player)
 *   2. .fancybox-caption (caption inside the lightbox)
 * Both must use the site font (Ploni Yad) so Hebrew renders correctly.
 * The base CSS forces #title-div to 'Myriad Pro' (a Latin font), which
 * breaks Hebrew — we override it here.
 * ------------------------------------------------------------------ */
#title-div,
.fancybox-caption,
.fancybox-caption__body,
.fancybox-caption a,
.fancybox-caption span {
    /* English -> Myriad Pro, Hebrew -> Ploni Yad (same stack as section 0) */
    font-family: 'Myriad Pro Latin', 'Ploni Yad v2 AAA' !important;
}

/* ------------------------------------------------------------------ *
 * 14. "אהבתם? בואו נעשה כזה" CTA under the video title
 * Separate line, smaller font, no chat icon.
 * ------------------------------------------------------------------ */
.st-video-cta {
    display: block;             /* its own line under the title */
    margin: 6px auto 0;
    width: fit-content;
    font-size: 15px;            /* smaller than the title */
    line-height: 1.2;
    color: #fff;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    padding: 5px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(18, 140, 126, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.st-video-cta:hover,
.st-video-cta:focus {
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(18, 140, 126, 0.55);
}

/* ==================================================================== *
 * 15. LOGO MARQUEE — clean, self-contained CSS scroller
 *
 * Markup (no <ul>, so none of the old .logo-inner ul / slick rules apply):
 *   .st-logos > .st-logos__row > 2x .st-logos__track (identical) > .st-logos__item > img
 *
 * .st-logos__row is a flex row holding two identical tracks. It scrolls
 * by exactly one track width (-50% of the row) and repeats. Because the
 * second track is a pixel copy of the first, the wrap is invisible:
 * seamless loop, always full edge-to-edge, at any screen width.
 * Hover pauses it exactly in place (CSS animation) with no jump.
 * ==================================================================== */

.st-logos {
    width: 100%;
    overflow: hidden;
    direction: ltr;              /* stable animation axis */
}

.st-logos__row {
    display: flex;
    width: max-content;          /* fit both tracks */
    animation: st-logos-scroll 30s linear infinite;
}

.st-logos:hover .st-logos__row {
    animation-play-state: paused;   /* pause in place on hover */
}

.st-logos__track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.st-logos__item {
    flex: 0 0 auto;
    padding: 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-logos__item img {
    display: block;
    max-height: 100px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
}

/* hover on a single logo: quick wiggle, then settle enlarged */
.st-logos__item img:hover {
    animation: st-logo-wiggle 0.5s ease both;
}

@keyframes st-logo-wiggle {
    0%   { transform: scale(1)    rotate(0deg); }
    15%  { transform: scale(1.14) rotate(-6deg); }
    30%  { transform: scale(1.14) rotate(5deg); }
    45%  { transform: scale(1.13) rotate(-4deg); }
    60%  { transform: scale(1.12) rotate(3deg); }
    75%  { transform: scale(1.12) rotate(-2deg); }
    100% { transform: scale(1.12) rotate(0deg); }
}

@keyframes st-logos-scroll {
    /* two identical tracks => one track == 50% of the row.
       Start shifted one track left and glide to 0 => travels RIGHTWARD,
       new logos entering from the left (RTL-friendly). Seamless wrap. */
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .st-logos__row { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
    .st-logos__track:nth-child(2) { display: none; }
    .st-logos__track { flex-wrap: wrap; justify-content: center; }
    .st-logos__item img:hover { animation: none; transform: scale(1.08); }
}

@media only screen and (max-width: 767px) {
    .st-logos__row { animation-duration: 24s; }
    .st-logos__item { padding: 0 26px; }
    .st-logos__item img { max-height: 70px; max-width: 130px; }
}

/* ------------------------------------------------------------------ *
 * 16. MAIN LOGO — dramatic entrance, then gentle endless float
 * Two chained animations: a springy pop-in that runs once on load,
 * followed (after ~0.9s) by a soft continuous float.
 * ------------------------------------------------------------------ */
.banner-inner .logo img {
    animation:
        st-logo-in 0.9s cubic-bezier(0.16, 1.4, 0.3, 1) both,
        st-logo-float 4s ease-in-out 1s infinite;
    transform-origin: center;
}

@keyframes st-logo-in {
    0%   { opacity: 0; transform: scale(0.4) translateY(-40px) rotate(-8deg); }
    60%  { opacity: 1; transform: scale(1.08) translateY(0) rotate(3deg); }
    80%  { transform: scale(0.97) rotate(-2deg); }
    100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
}

@keyframes st-logo-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-9px) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .banner-inner .logo img { animation: none; }
}