/* ==========================================================================
   index-demo.css  —  DEMO-ONLY performance overrides
   Loaded LAST on kandivali/index-demo.html so these rules win the cascade.
   Nothing here is shared with any other page, and NONE of this touches the
   scroll / video / slide choreography — it only reduces GPU/memory cost so the
   page stops crashing. All animations & functionality stay exactly the same.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. will-change blow-up (the #1 mobile crash cause)
   index.css sets `will-change: transform, opacity` on EVERY descendant of
   EVERY .timeline-container .swiper-slide. That promotes hundreds of elements
   to their own GPU layers and blows up mobile memory. Reset the blanket hint;
   the slide transforms still animate fine (will-change is only a hint).
   -------------------------------------------------------------------------- */
.timeline-container .swiper-slide * {
    will-change: auto;
}

/* --------------------------------------------------------------------------
   2. CardSlider (stacking slides) — make the scale-scrub smooth.
   Each .CardSlider is a sticky, full-viewport card whose `scale` is scrubbed
   on every scroll frame. Promote ONLY the card itself to its own GPU layer so
   the transform is composited (cheap) instead of repainting the card's heavy
   contents each frame. This changes nothing about the animation — it just
   makes the same scale tween render smoothly.
   -------------------------------------------------------------------------- */
.CardSlider {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   3. Fix split-text FOUC on the STACKING slides only (the "text flashes then
   jumps into the wave"). Splitting.js wraps each title into .char spans and
   adds a `splitting` class; before it runs the raw text shows fully, then
   snaps into the animated state. Hide only the #nextSection stacking-slide
   titles until Splitting has processed them (visibility keeps layout, no
   reflow), then reveal.
   NOTE: the hero video-slider titles are deliberately EXCLUDED — their chars
   are already hidden by `overflow:hidden` + `translateY(100%)` and revealed by
   the per-slide JS animation, so hiding them here would stop that text from
   ever appearing.
   -------------------------------------------------------------------------- */
#nextSection .title-text[data-splitting],
#nextSection .animation-text[data-splitting] {
    visibility: hidden;
}

#nextSection .title-text.splitting,
#nextSection .animation-text.splitting {
    visibility: visible;
}

/* --------------------------------------------------------------------------
   4. Map section — isolate the map's rendering so scrolling past it stays
   smooth. `contain` stops the map's tile/marker repaints from invalidating
   the rest of the page, and the layer hint keeps it on its own compositor
   layer. No behaviour change.
   -------------------------------------------------------------------------- */
#map {
    contain: layout paint;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   5. Idle heavy media inside OFF-SCREEN stacking cards (toggled by JS observer
   via .cns-card-idle). Stops GIFs/images inside a far-away card from decoding
   and repainting during scroll, which is the main remaining cost on this page.
   The card itself stays laid out (sticky stacking unaffected); only its media
   stops rendering while it's hundreds of px away from the viewport.
   -------------------------------------------------------------------------- */
.CardSlider.cns-card-idle img[src$=".gif"] {
    content-visibility: hidden;
}

/* --------------------------------------------------------------------------
   6. Mobile-only paint / memory relief (no animation removed)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Runtime blur filters are among the most GPU-expensive effects on mobile.
       mumbai.css blurs inactive slider items continuously — disable only the
       blur on phones; the sliders keep working, just without the blur tint. */
    .swiper-slides,
    .owl-carousel.vertical-carousel .owl-item {
        filter: none !important;
    }

    /* The many animated GIFs decode continuously even while off-screen.
       content-visibility lets the browser skip rendering work for off-screen
       GIF tiles, cutting steady CPU/GPU load. Scoped to the mumbai GIFs via
       their src so nothing shared is affected. */
    img[src*="assets/images/mumbai/"][src$=".gif"],
    img[src*="assets/animated-circle-icon/"][src$=".gif"],
    img[src*="assets/animated-inner-icon/"][src$=".gif"] {
        content-visibility: auto;
        contain-intrinsic-size: 100px 100px;
    }
}

/* --------------------------------------------------------------------------
   7. Skip rendering stacking cards that are fully covered by a later pinned
   card (class toggled by the scroll script in index-demo.html). They are
   underneath an opaque card, so nothing visible changes; the browser just
   stops repainting their GIFs/images every frame. The card box itself keeps
   its size, so the sticky stacking and GSAP scale are unaffected.
   -------------------------------------------------------------------------- */
.CardSlider.cns-card-covered > * {
    content-visibility: hidden;
}

/* --------------------------------------------------------------------------
   8. Card headings: hide each letter until its slide-up animation runs.
   index.css sets `.title-text span { overflow: unset }`, so a letter waiting
   at translateY(100%) was visible one line lower, overlapping the content
   below, and then jumped into place. The slideUp keyframes already fade
   opacity 0 -> 1 and keep the end state (`forwards`), so letters appear as
   they slide in.
   -------------------------------------------------------------------------- */
#nextSection .CardSlider .animation-text .char {
    opacity: 0;
}