/* Home scroll scene (desktop >= 768px): hero + location + specialties intro share one pinned
   film scrubbed by the scroll (assets/js/home-scroll.js, inc/home-scroll.php).
   Everything below applies only after home-scroll.js adds .is-on, so without JS, with reduced
   motion and on mobile the three sections stay in normal flow exactly as before.
   Motion uses the individual `translate` property so it composes with any transform
   or `rotate` that other layers (emblem spin, button states) put on the same elements.
   Scroll-driven values come from custom properties written by the script:
   --hs-t / --hs-o (per section copy), --hs-shade (per shade). */
.glilot-home-scroll__canvas,
.glilot-home-scroll__shade { display: none; }

@media (min-width: 768px) {
  .glilot-home-scroll.is-on {
    position: relative;
    height: 590vh;                       /* fallback; the script sets (scene length + 1) x viewport height */
  }
  .glilot-home-scroll.is-on .glilot-home-scroll__stage {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #fff;                    /* the hero/location section background colour */
  }
  .glilot-home-scroll.is-on .glilot-home-scroll__canvas {
    display: block;
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .glilot-home-scroll.is-on .glilot-home-scroll__shade {
    display: block;
    position: absolute;
    z-index: 5;
    inset: 0;
    opacity: var(--hs-shade, 0);
    pointer-events: none;
  }
  /* The location section's own treatment (.glilot-home-location__media::after), over the film. */
  .glilot-home-scroll.is-on .glilot-home-scroll__shade--location {
    background-image: linear-gradient(-89.999999deg, rgb(255 255 255 / 50%) 0.20353%, rgb(255 255 255 / 0%) 55.417%);
  }
  /* Specialties intro. Default (.is-shade-light): the location treatment, for a film that ends on
     the mirrored office (plain wall behind the copy). .is-shade-strong (set from the frame manifest,
     scripts/home-scroll-frames.mjs measures the end frame) when the copy sits over the window/doctor. */
  .glilot-home-scroll.is-on .glilot-home-scroll__shade--intro {
    background-image: linear-gradient(-89.999999deg, rgb(255 255 255 / 50%) 0.20353%, rgb(255 255 255 / 0%) 55.417%);
  }
  .glilot-home-scroll.is-on.is-shade-strong .glilot-home-scroll__shade--intro {
    background-image: linear-gradient(-89.999999deg, rgb(255 255 255 / 78%) 0%, rgb(255 255 255 / 62%) 24%, rgb(255 255 255 / 0%) 48%);
  }

  /* The three sections stack inside the pinned stage; each keeps its own box and copy geometry. */
  .glilot-home-scroll.is-on .glilot-home-hero,
  .glilot-home-scroll.is-on .glilot-home-location,
  .glilot-home-scroll.is-on .glilot-home-specialties-intro {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    background: transparent;
    pointer-events: none;
  }
  .glilot-home-scroll.is-on [data-hs-live] > *,
  .glilot-home-scroll.is-on [data-hs-live] .glilot-home-specialties-intro__copy { pointer-events: auto; }

  /* Scroll 0 = the Figma hero: the static photo fills the hero box (100vw x 47.916667vw) and the
     top of the location section shows under it, as on the static page. The film starts there:
     frame 0 is drawn exactly on its region of the photo (heroCrop), then frame and photo grow
     together to cover the stage over the first scroll (home-scroll.js sets the photo box inline);
     the photo and the location peek are hidden once the film covers. */
  .glilot-home-scroll.is-on .glilot-home-hero__background {
    z-index: 2;
    max-width: none;
  }
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__background { display: none; }
  .glilot-home-scroll.is-on .glilot-home-location__media {
    z-index: 1;
    height: 47.916667vw;
    translate: 0 47.916667vw;
    visibility: hidden;
  }
  .glilot-home-scroll.is-on.is-peek .glilot-home-location__media { visibility: visible; }

  /* Copy layers rise and fade with the scroll. */
  .glilot-home-scroll.is-on .glilot-home-hero > :not(:has(> .glilot-home-hero__background)),
  .glilot-home-scroll.is-on .glilot-home-location > :not(.glilot-home-location__media),
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__copy {
    z-index: 6;
    translate: var(--hs-t, none);    /* none at rest, so text rasterises exactly as before */
    opacity: var(--hs-o, 0);
  }
  .glilot-home-scroll.is-on .glilot-home-hero { --hs-o: 1; }
  .glilot-home-scroll.is-on.is-peek .glilot-home-location__mark {
    z-index: 1;
    translate: 0 47.916667vw;
    opacity: 1;
  }


  /* Hand-over to the next section (home-scroll.js): it overlaps the scene's last viewport
     (margin-top -100vh, set by the script) above the pinned stage. Until the scene ends it is
     see-through and its sticky copy hidden, so the stage shows the office, the fade to white and
     the copy gliding into place; from the scene's end the section's own sticky block (same CM text,
     same position) takes over. It is the layer the film fades into:
     its first-view cards are held at their final viewport place by --hs-cards-t and enter with a
     time-based reveal (home-scroll.js) while downward scrolling is held, before the page moves on. */
  .glilot-home-scroll.is-on + .glilot-home-specialties {
    z-index: 7;
  }
  .glilot-home-scroll.is-on + .glilot-home-specialties.is-hs-before {
    overflow: visible;               /* the held cards sit above the section's still-rising top edge */
    background: transparent;
    pointer-events: none;
  }
  /* The stage copy stands in for the sticky text until the scene ends. The CTA has no stand-in:
     once revealed (its own late reveal, site-motion.js) it shows through the white, in place. */
  .glilot-home-scroll.is-on + .glilot-home-specialties.is-hs-before .glilot-home-specialties__pin > :not(.glilot-home-specialties__cta) {
    visibility: hidden;
  }
  .glilot-home-scroll.is-on + .glilot-home-specialties.is-hs-before .glilot-home-specialties__cta[data-motion-in] {
    opacity: var(--hs-white, 0);
  }
  .glilot-home-scroll.is-on + .glilot-home-specialties .glilot-home-specialties__cards,
  .glilot-home-scroll.is-on + .glilot-home-specialties .glilot-home-specialties__intro {
    translate: var(--hs-cards-t, none);
  }
  /* The section ignores the pointer while the film still covers it, but its cards take clicks as
     soon as they show (entering or shown: data-hs-cards, home-scroll.js), during the hold too. */
  .glilot-home-scroll.is-on + .glilot-home-specialties.is-hs-before .glilot-home-specialties__cards > * {
    pointer-events: none;
  }
  .glilot-home-scroll.is-on + .glilot-home-specialties.is-hs-before[data-hs-cards] .glilot-home-specialties__cards > * {
    pointer-events: auto;
  }
  .glilot-home-scroll.is-on + .glilot-home-specialties.is-hs-before[data-hs-cards] .glilot-home-specialties__cta[data-motion-in],
  .glilot-home-scroll.is-on + .glilot-home-specialties.is-hs-before[data-hs-cta] .glilot-home-specialties__cta[data-motion-in] {
    pointer-events: auto;
  }
}

/* ==========================================================================
   Phones (< 768px), .is-on.is-phone from home-scroll.js (motion allowed, JS on).
   Portrait frame set whose crop follows the subject. The hero copy scrolls up off the film;
   over the lobby the white panel (Figma 16661:727, radius 100 top-left) opens from the bottom
   with the location copy (LP reveal: 1.05 s power3.out, 26px rise, 0.09 s stagger); over the
   office the copy switches to "תחומי רפואה" (Figma 16660:361-363 offsets inside the panel);
   then the stage scrolls away and the specialty cards follow right under that paragraph.
   ========================================================================== */
@media (max-width: 767px) {
  .glilot-home-scroll.is-on {
    position: relative;
  }
  .glilot-home-scroll.is-on .glilot-home-scroll__stage {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    height: 100lvh;                    /* the large viewport, so the stage still fills when the URL bar hides */
    overflow: hidden;
    background: #fff;
  }
  .glilot-home-scroll.is-on .glilot-home-scroll__canvas {
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .glilot-home-scroll.is-on .glilot-home-hero,
  .glilot-home-scroll.is-on .glilot-home-location,
  .glilot-home-scroll.is-on .glilot-home-specialties-intro {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    background: transparent;
    pointer-events: none;
  }
  .glilot-home-scroll.is-on [data-hs-live] > * { pointer-events: auto; }

  /* Hero: the mobile photo stands in until frame 0 is drawn; the copy rides up with the scroll. */
  .glilot-home-scroll.is-on .glilot-home-hero__background { z-index: 0; max-width: none; } /* under the film; hidden by the script once the film covers */
  .glilot-home-scroll.is-on .glilot-home-hero > :not(:has(> .glilot-home-hero__background)) {
    z-index: 6;
    translate: var(--hs-t, none);
    opacity: var(--hs-o, 1);
  }

  /* Location: the panel lands at --hs-panel-top (the Figma place, or higher so the CTA clears the
     contact bar) and runs to the stage bottom. Closed = below the stage. */
  .glilot-home-scroll.is-on .glilot-home-location { top: var(--hs-loc-shift, 0px); }
  .glilot-home-scroll.is-on .glilot-home-location__media { display: none; }
  .glilot-home-scroll.is-on .glilot-home-location::before {
    z-index: 4;
    height: calc(100vh - var(--hs-panel-top, 91.282051vw) + 2px);
    height: calc(100lvh - var(--hs-panel-top, 91.282051vw) + 2px);
    translate: 0 calc(100lvh - var(--hs-panel-top, 91.282051vw) + 4px);
    transition: translate 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  .glilot-home-scroll.is-on.is-panel .glilot-home-location::before {
    translate: 0 0;
    transition: translate 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .glilot-home-scroll.is-on .glilot-home-location__title,
  .glilot-home-scroll.is-on .glilot-home-location__body,
  .glilot-home-scroll.is-on .glilot-home-location__cta--mobile,
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__title,
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__subtitle,
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__body {
    z-index: 5;
    opacity: 0;
    translate: 0 6.666667vw;           /* 26px @390 */
    transition: opacity 0.3s ease-out, translate 0.3s ease-out;
  }
  .glilot-home-scroll.is-on.is-panel:not(.is-switch) .glilot-home-location__title,
  .glilot-home-scroll.is-on.is-panel:not(.is-switch) .glilot-home-location__body,
  .glilot-home-scroll.is-on.is-panel:not(.is-switch) .glilot-home-location__cta--mobile,
  .glilot-home-scroll.is-on.is-panel.is-switch .glilot-home-specialties-intro__title,
  .glilot-home-scroll.is-on.is-panel.is-switch .glilot-home-specialties-intro__subtitle,
  .glilot-home-scroll.is-on.is-panel.is-switch .glilot-home-specialties-intro__body {
    opacity: 1;
    translate: 0 0;
    transition: opacity 1.05s cubic-bezier(0.215, 0.61, 0.355, 1) var(--hs-delay, 0s), translate 1.05s cubic-bezier(0.215, 0.61, 0.355, 1) var(--hs-delay, 0s);
  }
  .glilot-home-scroll.is-on .glilot-home-location__title { --hs-delay: 0.45s; }
  .glilot-home-scroll.is-on .glilot-home-location__body { --hs-delay: 0.54s; }
  .glilot-home-scroll.is-on .glilot-home-location__cta--mobile { --hs-delay: 0.63s; }
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__title { --hs-delay: 0.2s; }
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__subtitle { --hs-delay: 0.29s; }
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__body { --hs-delay: 0.38s; }
  .glilot-home-scroll.is-on.is-panel:not(.is-switch) .glilot-home-location__cta--mobile { pointer-events: auto; }

  /* "תחומי רפואה" copy (one CM source with the cards section) inside the same panel. */
  .glilot-home-scroll.is-on .glilot-home-specialties-intro {
    display: block;
    top: var(--hs-panel-top, 91.282051vw);
    width: 100vw;
    height: 0;
  }
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__background { display: none; }
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__copy { inset: 0 auto auto 0; width: 100vw; }
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__title {
    /* 16660:361: 20 below the panel top, 333 x 36; Bold 36 / 100%; #537b88 */
    top: 5.128205vw; right: 4.871795vw; width: 85.384615vw;
    color: var(--glilot-text-accent); font-size: 9.230769vw; font-weight: 700; line-height: 1;
  }
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__subtitle {
    /* 16660:362: +57, 303 x 31; Medium 24 / 130% */
    top: 14.615385vw; right: 4.871795vw; width: 77.692308vw;
    font-size: 6.153846vw; font-weight: 500; line-height: 1.3;
  }
  .glilot-home-scroll.is-on .glilot-home-specialties-intro__body {
    /* 16660:363: +107, 352 x 83; Regular 16 / 135% */
    top: 27.435897vw; right: 4.871795vw; width: 90.25641vw; height: 21.282051vw;
    font-size: 4.102564vw; font-weight: 400; line-height: 1.35;
  }

  /* Cards section: its photo, panel and heading are already on the stage (same CM copy), so it
     starts right under the paragraph (margin-top from the script); cards and the closing CTA keep
     the Figma gap 16660:363 -> 16662:802 (40px), i.e. everything moves up by 122.051282vw. */
  .glilot-home-scroll.is-on + .glilot-home-specialties {
    z-index: 7;
    height: 443.846154vw;              /* 565.897436 - 122.051282 */
    background: #fff;
  }
  .glilot-home-scroll.is-on + .glilot-home-specialties::before,
  .glilot-home-scroll.is-on + .glilot-home-specialties .glilot-home-specialties__m-background { display: none; }
  .glilot-home-scroll.is-on + .glilot-home-specialties .glilot-home-specialties__pin > :not(.glilot-home-specialties__cta) { visibility: hidden; }
  .glilot-home-scroll.is-on + .glilot-home-specialties .glilot-home-specialties__cards { top: 10.25641vw; }
  .glilot-home-scroll.is-on + .glilot-home-specialties .glilot-home-specialties__cta { top: 412.820513vw; }
}