/* ==========================================================================
   AIRDROP · Home - immersive hero on desktop  (October 16, 2026)

   The phone hero's look (assets/css/home-immersive.css) brought to the
   desktop layout (≥901px). The active slide's artwork no longer sits in a
   framed card: it fills the rounded main panel from its very top, under the
   top bar and the artist stories (which sit on one frosted glass sheet), down
   to the hero copy, and fades into the page colour above the quick-nav.
   The copy lines up with the shelves: title, bold date line, description and
   a frosted-glass button with an arrow. Slide controls (pause, previous,
   next, dots) form one small glass group at the far end.

   Switched on by `body.sp-imm-d`, which pages/discover.php adds when
   $homeImmersiveHeroDesktop is true. Set it to false and the desktop hero is
   exactly the previous design again. Phones and tablets are not touched.

   The slides reach up by --imm-above (distance from the top of #spMain to
   the hero, measured by assets/js/home-immersive.js).
   ========================================================================== */

/* The date line is only shown where an immersive hero styles it. */
.sp-nhero__date { display: none; }

@media (min-width: 901px) {
  /* ── Top bar: transparent over the glass until the page scrolls ── */
  body.sp-imm-d .sp-topbar:not(.is-stuck) .sp-circ { background: rgba(255,255,255,.10); }
  body.sp-imm-d .sp-topbar:not(.is-stuck) .sp-circ:hover { background: rgba(255,255,255,.18); }
  body.sp-imm-d .sp-topbar:not(.is-stuck) .sp-search {
    background: rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  }
  body.sp-imm-d .sp-topbar:not(.is-stuck) .sp-search:hover {
    background: rgba(255,255,255,.15);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  }
  body.sp-imm-d .sp-topbar:not(.is-stuck) .sp-search svg,
  body.sp-imm-d .sp-topbar:not(.is-stuck) .sp-search__ph { color: rgba(255,255,255,.80); }
  body.sp-imm-d .sp-topbar.is-stuck { background: rgba(18,18,18,.96); }

  /* ── Hero: from a framed card to a full-bleed scene ── */
  body.sp-imm-d .sp-nhero {
    --imm-above: 230px;             /* fallback until the script measures */
    --imm-bleed: 24px;              /* .sp-content's side gutter */
    z-index: 1;
    margin: 4px 0 10px;
    /* A fixed height (not vh) so the one-line title keeps the same ~50px
       distance from the story names on every screen height; the copy is
       anchored to the bottom, so a taller hero would only push it down. */
    height: 308px;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    isolation: isolate;
  }
  body.sp-imm-d .sp-nhero__slide {
    top: calc(-1 * var(--imm-above));
    inset-inline: calc(-1 * var(--imm-bleed));
    background-color: var(--sp-bg);
    overflow: hidden;               /* keeps the slow zoom inside the scene */
    /* Cross-fade without a dark dip: the outgoing slide stays fully opaque
       underneath while the incoming one fades in on top, then drops out. */
    z-index: 0;
    transition: opacity 0s linear .7s, visibility 0s linear .7s;
  }
  body.sp-imm-d .sp-nhero__slide.is-active {
    z-index: 1;
    transition: opacity .7s ease, visibility 0s;
  }

  /* The artwork moves to its own layer so it can zoom in slowly while the
     slide is showing (the phone pans sideways; a wide frame zooms instead). */
  body.sp-imm-d .sp-nhero__slide.has-image { background-image: none; }
  body.sp-imm-d .sp-nhero__slide.has-image::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: var(--nhero-image) 50% 38% / cover no-repeat;
    transform: scale(1); transform-origin: 50% 40%;
    /* Leaving: hold the zoom until the slide has faded out, then reset. */
    transition: transform 0s linear .7s;
  }
  body.sp-imm-d .sp-nhero.is-panning .sp-nhero__slide.has-image.is-active::after {
    transform: scale(1.06);
    transition: transform 7.7s linear;
  }
  @media (prefers-reduced-motion: reduce) {
    body.sp-imm-d .sp-nhero__slide.has-image::after,
    body.sp-imm-d .sp-nhero.is-panning .sp-nhero__slide.has-image.is-active::after { transform: none; transition: none; }
  }

  /* Scrims: a long fade at the bottom that ends in the exact page colour so
     the quick-nav below sits on one continuous surface (listed first, so it
     paints over the others and leaves no seam), a light veil at the top for
     the bar, and a soft shade on the copy side. */
  body.sp-imm-d .sp-nhero__slide::before {
    background:
      linear-gradient(0deg,
        var(--sp-bg) 0,
        rgba(18,18,18,.95) 34px,
        rgba(18,18,18,.82) 120px,
        rgba(18,18,18,.56) 220px,
        rgba(18,18,18,.22) 320px,
        rgba(18,18,18,0) 430px),
      linear-gradient(180deg, rgba(10,10,16,.55) 0, rgba(10,10,16,.22) 110px, rgba(10,10,16,0) 260px),
      linear-gradient(270deg, rgba(10,10,14,.58) 0, rgba(10,10,14,.28) 34%, rgba(10,10,14,0) 62%);
  }
  html[dir="ltr"] body.sp-imm-d .sp-nhero__slide::before {
    background:
      linear-gradient(0deg,
        var(--sp-bg) 0,
        rgba(18,18,18,.95) 34px,
        rgba(18,18,18,.82) 120px,
        rgba(18,18,18,.56) 220px,
        rgba(18,18,18,.22) 320px,
        rgba(18,18,18,0) 430px),
      linear-gradient(180deg, rgba(10,10,16,.55) 0, rgba(10,10,16,.22) 110px, rgba(10,10,16,0) 260px),
      linear-gradient(90deg, rgba(10,10,14,.58) 0, rgba(10,10,14,.28) 34%, rgba(10,10,14,0) 62%);
  }

  /* ── Artist stories on one frosted glass sheet, from the top of the panel
     to just under the names; the slide title below stays sharp. ── */
  body.sp-imm-d .sp-shelf[data-hot-artists] {
    position: relative; z-index: 2;
    margin: 0 calc(-1 * var(--imm-bleed, 24px));
    padding: 6px 24px 0;
  }
  body.sp-imm-d .sp-shelf[data-hot-artists]::before {
    content: ""; position: absolute; z-index: -1;
    inset: -400px 0 -16px;
    background: rgba(10,12,20,.30);
    -webkit-backdrop-filter: blur(22px) saturate(1.05);
    backdrop-filter: blur(22px) saturate(1.05);
    -webkit-mask-image: linear-gradient(180deg,
      #000 0, #000 calc(100% - 150px),
      rgba(0,0,0,.90) calc(100% - 115px),
      rgba(0,0,0,.66) calc(100% - 80px),
      rgba(0,0,0,.32) calc(100% - 45px),
      rgba(0,0,0,.08) calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(180deg,
      #000 0, #000 calc(100% - 150px),
      rgba(0,0,0,.90) calc(100% - 115px),
      rgba(0,0,0,.66) calc(100% - 80px),
      rgba(0,0,0,.32) calc(100% - 45px),
      rgba(0,0,0,.08) calc(100% - 18px), transparent 100%);
    pointer-events: none;
  }
  /* A soft fade where the rail runs on (the arrows stay unmasked). */
  body.sp-imm-d .sp-shelf[data-hot-artists] .sp-stories {
    padding: 8px 4px 14px; padding-inline-end: 40px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
    mask-image: linear-gradient(90deg, transparent, #000 40px);
  }
  html[dir="ltr"] body.sp-imm-d .sp-shelf[data-hot-artists] .sp-stories {
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 40px);
    mask-image: linear-gradient(270deg, transparent, #000 40px);
  }
  body.sp-imm-d .sp-shelf[data-hot-artists] .sp-rail__nav {
    background: rgba(18,18,24,.55); border-color: rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  /* Rings: a hairline with a clear gap around the portrait. Artists playing
     today get a brighter line and a bold "היום" tag on darker glass, edged
     with the same white line. */
  body.sp-imm-d .sp-shelf[data-hot-artists] .sp-story__ring {
    background: none; padding: 0;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.30);
  }
  body.sp-imm-d .sp-shelf[data-hot-artists] .sp-story__ring--live { box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.92); }
  body.sp-imm-d .sp-shelf[data-hot-artists] .sp-story__img {
    border: 4.75px solid transparent;
    background-clip: padding-box;
  }
  body.sp-imm-d .sp-shelf[data-hot-artists] .sp-story__ring--live .sp-story__img { border-width: 5.25px; }
  body.sp-imm-d .sp-shelf[data-hot-artists] .sp-story__live {
    display: inline-flex; align-items: center;
    bottom: -6px; padding: 1px 9px;
    font-size: 11px; font-weight: 800; letter-spacing: 0; line-height: 1.45;
    border: 2.5px solid rgba(255,255,255,.92);
    background: rgba(14,14,20,.62); color: #fff;
    -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: none;
  }
  body.sp-imm-d .sp-shelf[data-hot-artists] .sp-story__count { border-color: rgba(14,14,18,.40); }
  body.sp-imm-d .sp-shelf[data-hot-artists] .sp-story__name { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45); }

  /* ── Hero copy, aligned with the shelves: no eyebrow pills; the title (up
     to two lines), a bold date line, the description, then the button. ── */
  body.sp-imm-d .sp-nhero__body {
    /* The copy lives inside the slide, which bleeds --imm-bleed past the
       content edge, so the inset adds it back: the copy lines up with the
       shelf titles. The controls only share the button's row, so the text
       may run above them. */
    inset-inline-start: calc(var(--imm-bleed) + 4px);
    inset-inline-end: calc(var(--imm-bleed) + 24px);
    bottom: 54px;
    max-width: none;                /* the title's own limit below decides */
  }
  body.sp-imm-d .sp-nhero__pills { display: none; }
  /* One line, never wrapped, at most 60% of the hero's width (the body is
     28px narrower than the hero, hence the calc). When a title is longer,
     home-immersive.js shrinks its font-size until it fits; the ellipsis is
     only a fallback without the script. */
  body.sp-imm-d .sp-nhero__title {
    font-size: clamp(32px, 3.4vw, 50px); line-height: 1.12;
    display: block; -webkit-line-clamp: unset;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: calc((100% + 28px) * .6);
  }
  body.sp-imm-d.sp .sp-nhero__title { margin-bottom: 8px; }
  body.sp-imm-d .sp-nhero__date {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    font-size: 18px; font-weight: 700; line-height: 1.35;
    color: rgba(255,255,255,.92);
  }
  body.sp-imm-d.sp .sp-nhero__date { margin: 0 0 12px; }
  /* "היום" / "מחר" / "בעוד 4 ימים": a frosted tag */
  body.sp-imm-d .sp-nhero__soon {
    padding: 2px 11px; border-radius: var(--sp-pill);
    font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap;
    background: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  }
  body.sp-imm-d.sp .sp-nhero__desc {
    max-width: 600px; margin-bottom: 22px;
    font-size: 16px; color: rgba(255,255,255,.84);
  }

  /* CTA: a borderless frosted-glass key with a plain forward arrow in place
     of the magic-wand icon. */
  body.sp-imm-d .sp-nhero__btn {
    height: 52px; padding: 0 30px; gap: 10px;
    background: rgba(255,255,255,.14); color: #fff;
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: none;
    transition: background .15s ease, transform .12s ease;
  }
  body.sp-imm-d .sp-nhero__btn:hover { filter: none; transform: none; background: rgba(255,255,255,.22); }
  body.sp-imm-d .sp-nhero__btn:active { transform: scale(.98); }
  body.sp-imm-d .sp-nhero__btn svg { display: none; }
  body.sp-imm-d .sp-nhero__btn::after {
    content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  html[dir="ltr"] body.sp-imm-d .sp-nhero__btn::after { transform: scaleX(-1); }

  /* ── Slide controls: one quiet glass group at the far end, level with the
     button - pause, previous, next. No dots on desktop.
     Physical sides on purpose, so the arrows always point where they go. ── */
  body.sp-imm-d .sp-nhero__autoplay-toggle,
  body.sp-imm-d .sp-nhero__arrow {
    top: auto; bottom: 62px; transform: none;
    width: 38px; height: 38px;
    background: rgba(255,255,255,.12) !important; color: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    opacity: 1;
    transition: background .15s ease;
  }
  body.sp-imm-d .sp-nhero__autoplay-toggle:hover,
  body.sp-imm-d .sp-nhero__arrow:hover { background: rgba(255,255,255,.22) !important; transform: none; }
  body.sp-imm-d .sp-nhero__arrow svg { width: 20px; height: 20px; }
  body.sp-imm-d .sp-nhero__autoplay-toggle { inset-inline: auto; left: 4px; }
  body.sp-imm-d .sp-nhero__arrow--prev { inset-inline: auto; left: 50px; }
  body.sp-imm-d .sp-nhero__arrow--next { inset-inline: auto; left: 96px; }
  body.sp-imm-d .sp-nhero__dots { display: none; }
  html[dir="ltr"] body.sp-imm-d .sp-nhero__autoplay-toggle { left: auto; right: 4px; }
  html[dir="ltr"] body.sp-imm-d .sp-nhero__arrow--next { left: auto; right: 50px; }
  html[dir="ltr"] body.sp-imm-d .sp-nhero__arrow--prev { left: auto; right: 96px; }
}