/**
 * GSAP Elementor Widgets — frontend styles.
 *
 * @package GSAP_Elementor_Widgets
 */

/* -----------------------------------------------------------------
 * 1. Animated Heading
 * --------------------------------------------------------------- */
.gsap-ew-animated-heading {
        margin: 0;
        will-change: opacity, transform;
}

.gsap-ew-animated-heading .gsap-ew-heading-link {
        color: inherit;
        text-decoration: none;
}

.gsap-ew-animated-heading .gsap-ew-char {
        display: inline-block;
        white-space: pre;
        will-change: opacity, transform;
}

.gsap-ew-typewriter {
        white-space: pre-wrap;
}

.gsap-ew-typewriter::after {
        content: "";
        display: inline-block;
        width: 2px;
        height: 1em;
        margin-left: 2px;
        background: currentColor;
        vertical-align: text-bottom;
        animation: gsap-ew-caret 0.8s steps(1) infinite;
}

@keyframes gsap-ew-caret {
        0%,
        50% {
                opacity: 1;
        }
        51%,
        100% {
                opacity: 0;
        }
}

/* -----------------------------------------------------------------
 * 2. Scroll Counter
 * --------------------------------------------------------------- */
.gsap-ew-counter {
        display: block;
        line-height: 1.1;
}

.gsap-ew-counter-prefix,
.gsap-ew-counter-suffix,
.gsap-ew-counter-number {
        display: inline-block;
        vertical-align: baseline;
        font-weight: 700;
}

.gsap-ew-counter-number {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
}

/* -----------------------------------------------------------------
 * 3. Parallax Section
 * --------------------------------------------------------------- */
.gsap-ew-parallax {
        position: relative;
        overflow: hidden;
        width: 100%;
        display: flex;
}

.gsap-ew-parallax-bg {
        position: absolute;
        top: -20%;
        left: -20%;
        width: 140%;
        height: 140%;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        will-change: transform;
        z-index: 1;
}

.gsap-ew-parallax-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
}

.gsap-ew-parallax-inner {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 40px;
        box-sizing: border-box;
        will-change: transform;
}

.gsap-ew-parallax-content {
        max-width: 720px;
}

.gsap-ew-parallax-heading {
        margin: 0 0 0.5em;
        color: inherit;
}

.gsap-ew-parallax-desc {
        margin: 0;
        color: inherit;
}

/* -----------------------------------------------------------------
 * 4. Staggered Card Grid
 * --------------------------------------------------------------- */
.gsap-ew-grid-wrapper {
        width: 100%;
}

.gsap-ew-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
}

.gsap-ew-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        will-change: opacity, transform;
}

.gsap-ew-card-image {
        width: 100%;
        overflow: hidden;
        line-height: 0;
}

.gsap-ew-card-image img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        transition: transform 0.4s ease;
}

.gsap-ew-card:hover .gsap-ew-card-image img {
        transform: scale(1.05);
}

.gsap-ew-card-body {
        padding: 24px;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
}

.gsap-ew-card-subtitle {
        font-size: 0.8125rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #8a8aa0;
        margin-bottom: 6px;
}

.gsap-ew-card-title {
        margin: 0 0 10px;
        font-size: 1.25rem;
        line-height: 1.3;
}

.gsap-ew-card-desc {
        margin: 0 0 18px;
        color: #55556a;
        line-height: 1.6;
        flex: 1 1 auto;
}

.gsap-ew-card-button {
        align-self: flex-start;
        display: inline-block;
        padding: 10px 22px;
        background: #6c47ff;
        color: #fff;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9375rem;
        transition: opacity 0.25s ease, transform 0.25s ease;
}

.gsap-ew-card-button:hover {
        opacity: 0.9;
        transform: translateY(-2px);
}

/* -----------------------------------------------------------------
 * 5. Timeline Reveal
 * --------------------------------------------------------------- */
.gsap-ew-timeline {
        --gsap-ew-line-color: #d0d0e0;
        --gsap-ew-line-style: solid;
        --gsap-ew-dot-color: #6c47ff;
        width: 100%;
}

/* Vertical layout */
.gsap-ew-timeline--vertical .gsap-ew-timeline-track {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 40px;
}

.gsap-ew-timeline--vertical .gsap-ew-timeline-track::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-left: 3px var(--gsap-ew-line-style) var(--gsap-ew-line-color);
}

.gsap-ew-timeline--vertical .gsap-ew-timeline-item {
        position: relative;
        width: 50%;
        box-sizing: border-box;
        will-change: opacity, transform;
}

.gsap-ew-timeline--vertical .gsap-ew-timeline-item--left {
        left: 0;
        padding-right: 48px;
        text-align: right;
}

.gsap-ew-timeline--vertical .gsap-ew-timeline-item--right {
        left: 50%;
        padding-left: 48px;
        text-align: left;
}

.gsap-ew-timeline--vertical .gsap-ew-timeline-marker {
        position: absolute;
        top: 4px;
}

.gsap-ew-timeline--vertical .gsap-ew-timeline-item--left .gsap-ew-timeline-marker {
        right: -22px;
}

.gsap-ew-timeline--vertical .gsap-ew-timeline-item--right .gsap-ew-timeline-marker {
        left: -22px;
}

/* Horizontal layout */
.gsap-ew-timeline--horizontal .gsap-ew-timeline-track {
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 32px;
        overflow-x: auto;
        padding-top: 60px;
}

.gsap-ew-timeline--horizontal .gsap-ew-timeline-track::before {
        content: "";
        position: absolute;
        top: 22px;
        left: 0;
        right: 0;
        border-top: 3px var(--gsap-ew-line-style) var(--gsap-ew-line-color);
}

.gsap-ew-timeline--horizontal .gsap-ew-timeline-item {
        position: relative;
        flex: 1 0 220px;
        min-width: 220px;
        text-align: center;
        will-change: opacity, transform;
}

.gsap-ew-timeline--horizontal .gsap-ew-timeline-marker {
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
}

/* Shared marker / dot */
.gsap-ew-timeline-dot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--gsap-ew-dot-color);
        box-shadow: 0 0 0 4px rgba(108, 71, 255, 0.15);
}

.gsap-ew-timeline-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        color: #fff;
}

.gsap-ew-timeline-icon svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
}

.gsap-ew-timeline-content {
        background: transparent;
}

.gsap-ew-timeline-label {
        font-size: 0.8125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #6c47ff;
        margin-bottom: 4px;
}

.gsap-ew-timeline-title {
        margin: 0 0 8px;
        font-size: 1.25rem;
        line-height: 1.3;
}

.gsap-ew-timeline-desc {
        margin: 0;
        color: #55556a;
        line-height: 1.6;
}

/* -----------------------------------------------------------------
 * 6. Animated Text
 * --------------------------------------------------------------- */
.gsap-ew-animated-text {
        margin: 0;
        will-change: opacity, transform, filter;
}

.gsap-ew-animated-text p {
        margin: 0 0 1em;
}

.gsap-ew-animated-text p:last-child {
        margin-bottom: 0;
}

.gsap-ew-animated-text .gsap-ew-word,
.gsap-ew-animated-text .gsap-ew-line,
.gsap-ew-animated-text .gsap-ew-char {
        will-change: opacity, transform;
}

/* -----------------------------------------------------------------
 * 7. 3D Icon Box
 * --------------------------------------------------------------- */
.gsap-ew-iconbox-3d {
        perspective: 800px;
        width: 100%;
}

.gsap-ew-iconbox-inner {
        display: block;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        text-decoration: none;
        color: inherit;
        will-change: opacity, transform;
}

.gsap-ew-iconbox-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
        border-radius: 50%;
        line-height: 1;
}

.gsap-ew-iconbox-icon svg {
        width: 34px;
        height: 34px;
}

.gsap-ew-iconbox-title {
        margin: 0 0 10px;
        line-height: 1.3;
}

.gsap-ew-iconbox-desc {
        margin: 0;
        line-height: 1.6;
        color: #55556a;
}

/* -----------------------------------------------------------------
 * 8. Reveal on Scroll
 * --------------------------------------------------------------- */
.gsap-ew-reveal {
        width: 100%;
}

.gsap-ew-reveal-clip {
        position: relative;
        display: block;
        line-height: 0;
}

.gsap-ew-reveal-media {
        display: block;
        max-width: 100%;
        height: auto;
        will-change: transform, clip-path, opacity, filter;
}

.gsap-ew-reveal-text {
        margin: 0;
        line-height: 1.3;
        will-change: transform, clip-path, opacity, filter;
}

/* -----------------------------------------------------------------
 * 9. SVG Animator
 * --------------------------------------------------------------- */
.gsap-ew-svg {
        display: flex;
        width: 100%;
}

.gsap-ew-svg svg {
        display: block;
        max-width: 100%;
        overflow: visible;
}

/* -----------------------------------------------------------------
 * 10. Hero to Bento
 * --------------------------------------------------------------- */
.gsap-ew-herobento {
        width: 100%;
}

.gsap-ew-herobento-stage {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
        overflow: hidden;
}

.gsap-ew-herobento-grid {
        position: relative;
        display: grid;
        grid-auto-rows: 1fr;
        width: 90vw;
        max-width: 1200px;
        height: 82vh;
        margin: 0 auto;
}

/* Hero cell */
.gsap-ew-herobento-hero {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 14px;
        min-height: 0;
        color: #fff;
}

.gsap-ew-herobento-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        object-fit: cover;
}

.gsap-ew-herobento-video {
        object-fit: cover;
}

/* YouTube / Vimeo background embed: scale a 16:9 iframe so it fully covers
   the hero area (like object-fit: cover) with no letterbox bars, and let
   clicks pass through so it behaves like a background. */
.gsap-ew-herobento-embed {
        overflow: hidden;
        pointer-events: none;
}

.gsap-ew-herobento-embed iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 56.25vw; /* 16:9 based on width */
        min-width: 177.78vh; /* 16:9 based on height */
        min-height: 100vh;
        transform: translate(-50%, -50%);
        border: 0;
}

.gsap-ew-herobento-overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.45);
}

.gsap-ew-herobento-content {
        position: relative;
        z-index: 2;
        padding: 6% 7%;
        max-width: 640px;
        text-align: center;
        will-change: transform;
}

.gsap-ew-herobento-heading {
        margin: 0 0 0.4em;
        font-size: 2.6rem;
        line-height: 1.1;
        color: #fff;
}

.gsap-ew-herobento-subheading {
        margin: 0 0 1.2em;
        font-size: 1.1rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.85);
}

.gsap-ew-herobento-btn {
        display: inline-block;
        padding: 0.7em 1.6em;
        background-color: #fff;
        color: #1e1e2f;
        font-weight: 600;
        text-decoration: none;
        border-radius: 6px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gsap-ew-herobento-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Bento cards */
.gsap-ew-herobento-item {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: #f4f4f8;
        border-radius: 14px;
        min-height: 0;
}

.gsap-ew-herobento-item-media {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
}

.gsap-ew-herobento-item-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
}

/* Colour tint placed over a card image (both layouts). */
.gsap-ew-herobento-item-overlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
}

.gsap-ew-herobento-item-body {
        padding: 16px 18px;
}

.gsap-ew-herobento-item-title {
        margin: 0 0 0.35em;
        font-size: 1.05rem;
        color: #1e1e2f;
}

.gsap-ew-herobento-item-text {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.45;
        color: #5a5a6e;
}

/* Card button (per-card, optional). */
.gsap-ew-herobento-item-btn {
        display: inline-block;
        margin-top: 14px;
        padding: 9px 18px;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
        background-color: #1e1e2f;
        color: #fff;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gsap-ew-herobento-item-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* -----------------------------------------------------------------
 * Bento card — "Image Fills Card" (cover) layout
 * The image covers the whole card; the title / text / button sit
 * centred on top of it, above the overlay.
 * --------------------------------------------------------------- */
.gsap-ew-herobento-item--cover {
        position: relative;
}

.gsap-ew-herobento-item--cover .gsap-ew-herobento-item-media {
        position: absolute;
        inset: 0;
        flex: none;
}

.gsap-ew-herobento-item--cover .gsap-ew-herobento-item-body {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        padding: 24px;
}

/* Smart default text colour for cover cards: white so it reads against a
   photo. A colour chosen in the Card Style tab overrides this (its selector
   includes the wrapper ID and so wins on specificity). */
.gsap-ew-herobento-item--cover .gsap-ew-herobento-item-title {
        color: #fff;
}

.gsap-ew-herobento-item--cover .gsap-ew-herobento-item-text {
        color: rgba(255, 255, 255, 0.9);
}

/* -----------------------------------------------------------------
 * Responsive
 * --------------------------------------------------------------- */
@media (max-width: 1024px) {
        .gsap-ew-grid {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 767px) {
        .gsap-ew-grid {
                grid-template-columns: 1fr;
        }

        /* Collapse vertical timeline to a single left-aligned rail on mobile. */
        .gsap-ew-timeline--vertical .gsap-ew-timeline-track::before {
                left: 22px;
        }

        .gsap-ew-timeline--vertical .gsap-ew-timeline-item,
        .gsap-ew-timeline--vertical .gsap-ew-timeline-item--left,
        .gsap-ew-timeline--vertical .gsap-ew-timeline-item--right {
                width: 100%;
                left: 0;
                text-align: left;
                padding-left: 60px;
                padding-right: 0;
        }

        .gsap-ew-timeline--vertical .gsap-ew-timeline-item--left .gsap-ew-timeline-marker,
        .gsap-ew-timeline--vertical .gsap-ew-timeline-item--right .gsap-ew-timeline-marker {
                left: 0;
                right: auto;
        }

        /* Hero-to-Bento on phones: the pinned, fixed-height "shrink into grid"
           effect is disabled in JS on mobile, so here we let the whole section
           flow as a natural vertical stack. The stage and grid drop their fixed
           viewport height, rows size to their content, and the hero + each card
           get a real, readable height (no more squashed letterbox cards with
           clipped titles/text). */
        .gsap-ew-herobento-stage {
                display: block !important;
                height: auto !important;
                min-height: 0 !important;
                overflow: visible !important;
                padding: 24px 0 !important;
        }

        .gsap-ew-herobento-grid {
                grid-template-columns: 1fr !important;
                grid-auto-rows: auto !important;
                height: auto !important;
                width: 90vw;
        }

        .gsap-ew-herobento-hero {
                grid-column: 1 / -1 !important;
                grid-row: auto !important;
                min-height: 60vh;
        }

        .gsap-ew-herobento-heading {
                font-size: 1.8rem;
        }

        /* Cards now grow to fit their content: a properly-sized image on top and
           the title/text fully visible below. The image gets a sensible default
           height, which you can override per-device with the "Card Image Height"
           control in the Card Style tab. */
        .gsap-ew-herobento-item {
                min-height: 0;
        }

        .gsap-ew-herobento-item-media {
                flex: 0 0 auto;
                min-height: 200px;
        }

        .gsap-ew-herobento-item-body {
                flex: 0 0 auto;
        }

        /* "Image Fills Card" cards: the image is absolutely positioned, so give the
           card itself a real height on mobile and let the text overlay fill it. */
        .gsap-ew-herobento-item--cover {
                min-height: 320px;
        }

        .gsap-ew-herobento-item--cover .gsap-ew-herobento-item-media {
                min-height: 0;
        }

        .gsap-ew-herobento-item--cover .gsap-ew-herobento-item-body {
                min-height: 320px;
        }
}



/* =================================================================
 * Motion Path
 * ============================================================== */
.gsap-ew-motionpath {
        position: relative;
        width: 100%;
        height: 400px;
        overflow: visible;
}

/* The SVG overlays the whole stage and holds the (optionally visible) path.
 * preserveAspectRatio="none" makes it stretch to fill the stage so the object
 * travels across the full width/height available. */
.gsap-ew-motionpath-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
}

/* The path is invisible by default; the "Show the path line" toggle adds the
 * .gsap-ew-motionpath--show-path class which paints it. */
.gsap-ew-motionpath-path {
        fill: none;
        stroke: none;
}

.gsap-ew-motionpath--show-path .gsap-ew-motionpath-path {
        stroke: rgba(108, 71, 255, 0.35);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
}

.gsap-ew-motionpath--line-dashed .gsap-ew-motionpath-path {
        stroke-dasharray: 10 12;
}

.gsap-ew-motionpath--line-dotted .gsap-ew-motionpath-path {
        stroke-dasharray: 1 10;
}

/* The moving object. GSAP positions it via a transform, aligned to the path,
 * so its own top/left simply start at the stage origin. */
.gsap-ew-motionpath-object {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        will-change: transform;
        z-index: 2;
}

.gsap-ew-motionpath-object img,
.gsap-ew-motionpath-object svg {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
}

.gsap-ew-motionpath-object i {
        display: block;
}