/* ─────────────────────────────────────────────────────────────
   GS Animations — scroll splatter reveals + letter-by-letter titles
   Used by all language versions. No deps.
   ───────────────────────────────────────────────────────────── */

/* Respect users who asked their OS for less motion */
@media (prefers-reduced-motion: reduce) {
    .gs-reveal,
    .gs-split,
    .gs-char {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .gs-reveal.gs-splat::before,
    .gs-reveal.gs-splat::after,
    .gs-split.gs-streak::after { display: none !important; }
}

/* ── Generic reveal: fade + slide + un-blur + un-scale ── */
.gs-reveal {
    opacity: 0;
    transform: translateY(38px) scale(0.97);
    filter: blur(6px);
    transition:
        opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}
.gs-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* ── Splat variant: a paintball-drip accent that hits on reveal ── */
.gs-reveal.gs-splat {
    position: relative;
}
/* The drip line */
.gs-reveal.gs-splat::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -14px;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, #e43d4e, rgba(228, 61, 78, 0.35));
    border-radius: 0 0 2px 2px;
    box-shadow: 0 0 8px rgba(228, 61, 78, 0.7);
    transform: translateX(-50%);
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}
.gs-reveal.gs-splat.is-visible::before {
    height: 22px;
    opacity: 1;
    transition-delay: 0.15s;
}
/* The splatter dot that blooms then fades */
.gs-reveal.gs-splat::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 0;
    height: 0;
    background: radial-gradient(circle,
        rgba(228, 61, 78, 0.85) 0%,
        rgba(228, 61, 78, 0.5) 35%,
        rgba(228, 61, 78, 0.15) 65%,
        transparent 80%);
    border-radius: 50%;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition:
        width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.7s ease-out;
}
.gs-reveal.gs-splat.is-visible::after {
    width: 40px;
    height: 40px;
    opacity: 0;
    /* bloom-then-fade: grow on delay, fade starts at the end */
    transition:
        width 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.45s,
        height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.45s,
        opacity 0.65s ease-out 0.4s;
    /* trick: bloom to ~1 then settle to 0 via mid-opacity path */
    animation: gs-splat-bloom 0.9s ease-out 0.45s forwards;
}
@keyframes gs-splat-bloom {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Stagger children so rows cascade instead of popping ── */
.gs-stagger > .gs-reveal:nth-child(1) { transition-delay: 0s, 0s, 0s; }
.gs-stagger > .gs-reveal:nth-child(2) { transition-delay: 0.12s, 0.12s, 0.12s; }
.gs-stagger > .gs-reveal:nth-child(3) { transition-delay: 0.24s, 0.24s, 0.24s; }
.gs-stagger > .gs-reveal:nth-child(4) { transition-delay: 0.36s, 0.36s, 0.36s; }
.gs-stagger > .gs-reveal:nth-child(5) { transition-delay: 0.48s, 0.48s, 0.48s; }
.gs-stagger > .gs-reveal:nth-child(6) { transition-delay: 0.60s, 0.60s, 0.60s; }

/* ── Letter-by-letter title reveal ── */
.gs-split {
    display: inline-block;
    position: relative;
}
.gs-split .gs-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(85%) rotate(-7deg);
    transition:
        opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.7s cubic-bezier(0.34, 1.5, 0.55, 1);
    transform-origin: 50% 80%;
    will-change: transform, opacity;
}
.gs-split.is-visible .gs-char {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

/* ── Red paint streak swipe behind hero-ish titles ── */
.gs-split.gs-streak::after {
    content: "";
    position: absolute;
    left: -3%;
    bottom: 6%;
    width: 0;
    height: 22%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(228, 61, 78, 0.35) 20%,
        rgba(228, 61, 78, 0.8) 50%,
        rgba(228, 61, 78, 0.35) 80%,
        transparent 100%);
    transform: skewX(-10deg);
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
    border-radius: 3px;
    filter: blur(6px);
    z-index: -1;
    pointer-events: none;
}
.gs-split.gs-streak.is-visible::after { width: 108%; }

/* ── Hard pass: never touch slider titles ── */
.tp-banner .gs-split .gs-char {
    opacity: 1 !important;
    transform: none !important;
}
.tp-banner .gs-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* ─────────────────────────────────────────────────────────────
   GS Gallery — polished hover + paint-themed lightbox
   ───────────────────────────────────────────────────────────── */
.singleGal { position: relative; overflow: hidden; }
.singleGal a.popUp {
    display: block;
    position: relative;
    cursor: zoom-in;
    text-decoration: none;
    overflow: hidden;
}
.singleGal a.popUp .galImg { overflow: hidden; }
.singleGal a.popUp .galImg img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.singleGal:hover a.popUp .galImg img {
    transform: scale(1.07);
}

/* Hover overlay with zoom icon — override legacy .galHover (top:50%; translateY(-50%)) */
.singleGal .galHover.gs-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    text-align: center;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    visibility: visible !important;
    background: linear-gradient(135deg,
        rgba(38, 35, 48, 0.55) 0%,
        rgba(228, 61, 78, 0.35) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.singleGal:hover .galHover.gs-overlay { opacity: 1; }
.galHover.gs-overlay i {
    font-size: 22px;
    color: #fff;
    background: rgba(228, 61, 78, 0.92);
    border: 2px solid rgba(255, 255, 255, 0.25);
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform: scale(0.7) rotate(-15deg);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 10px 30px rgba(228, 61, 78, 0.4);
}
.singleGal:hover .galHover.gs-overlay i {
    transform: scale(1) rotate(0);
}

/* ── Magnific Popup — paint-themed skin ── */
.mfp-gs.mfp-bg {
    background: #161319;
    opacity: 0;
    transition: opacity 0.32s ease-out;
}
.mfp-gs.mfp-bg.mfp-ready { opacity: 0.94; }
.mfp-gs.mfp-bg.mfp-removing { opacity: 0; }

.mfp-gs .mfp-container { padding: 40px 60px; }

.mfp-gs .mfp-figure::after {
    box-shadow: 0 0 0 1px rgba(228, 61, 78, 0.25),
                0 20px 60px rgba(0, 0, 0, 0.8);
    background: #0a0a0a;
}

/* Counter — bigger, cleaner, bottom-center */
.mfp-gs .mfp-counter {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: -34px;
    top: auto;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(228, 61, 78, 0.18);
    border: 1px solid rgba(228, 61, 78, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Arrows — custom paint style */
.mfp-gs .mfp-arrow {
    width: 56px;
    height: 56px;
    margin-top: -28px;
    opacity: 0.7;
    transition: opacity 0.25s, transform 0.25s;
}
.mfp-gs .mfp-arrow:hover {
    opacity: 1;
    transform: scale(1.08);
}
.mfp-gs .mfp-arrow::before,
.mfp-gs .mfp-arrow::after,
.mfp-gs .mfp-arrow .mfp-b,
.mfp-gs .mfp-arrow .mfp-a { display: none; }
.mfp-gs .mfp-arrow .mfp-arrow-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(228, 61, 78, 0.2);
    border: 2px solid rgba(228, 61, 78, 0.7);
    transform: translate(-50%, -50%);
    transition: background 0.25s, border-color 0.25s;
    /* Let the <button> receive the click so MFP sees mfp-arrow-left/right on e.target */
    pointer-events: none;
}
.mfp-gs .mfp-arrow:hover .mfp-arrow-icon {
    background: rgba(228, 61, 78, 0.9);
    border-color: #fff;
}
.mfp-gs .mfp-arrow-left .mfp-arrow-icon::after,
.mfp-gs .mfp-arrow-right .mfp-arrow-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.mfp-gs .mfp-arrow-left .mfp-arrow-icon::after {
    transform: translate(-30%, -50%) rotate(-135deg);
}
.mfp-gs .mfp-arrow-right .mfp-arrow-icon::after {
    transform: translate(-70%, -50%) rotate(45deg);
}

/* Close button */
.mfp-gs .mfp-close {
    color: #fff;
    font-size: 32px;
    opacity: 0.85;
    width: 48px;
    height: 48px;
    line-height: 48px;
    transition: opacity 0.2s, transform 0.3s;
}
.mfp-gs .mfp-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* Fade animation for the image itself */
.mfp-fade.mfp-wrap .mfp-content { transition: opacity 0.3s ease-out; }
.mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; }
.mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; }

/* Mobile tweaks */
@media (max-width: 767px) {
    .mfp-gs .mfp-container { padding: 20px 8px; }
    .mfp-gs .mfp-arrow { width: 44px; height: 44px; margin-top: -22px; }
    .mfp-gs .mfp-arrow .mfp-arrow-icon { width: 34px; height: 34px; }
    .mfp-gs .mfp-counter { bottom: -30px; font-size: 12px; }
    .galHover.gs-overlay i { width: 50px; height: 50px; font-size: 18px; }
}