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

   The phone event hero (event-immersive.css) brought to the desktop layout
   (≥901px), the same way the home hero was (home-immersive-desktop.css):
   the event artwork no longer sits in a framed card - it fills the rounded
   main panel from its very top, under the top bar (with a frosted veil behind
   it), and fades into the page colour where the content starts. The square
   side poster becomes the phone's round poster with a hairline ring and a
   zoom key, and the lineup artists pop out of it (event-v2.js). Share is the
   phone's frosted-glass key.

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

   --ev2-imm-above = the top bar's height, measured in event-v2.js.
   ========================================================================== */

@media (min-width: 901px) {
  /* ── Top bar: transparent over the artwork until the page scrolls ── */
  body.ev2-imm-d .sp-topbar:not(.is-stuck) .sp-circ { background: rgba(255,255,255,.10); }
  body.ev2-imm-d .sp-topbar:not(.is-stuck) .sp-circ:hover { background: rgba(255,255,255,.18); }
  body.ev2-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.ev2-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.ev2-imm-d .sp-topbar:not(.is-stuck) .sp-search svg,
  body.ev2-imm-d .sp-topbar:not(.is-stuck) .sp-search__ph { color: rgba(255,255,255,.80); }
  body.ev2-imm-d .sp-topbar.is-stuck { background: rgba(18,18,18,.96); }

  /* ── Hero: from a framed card to a full-bleed scene ── */
  body.ev2-imm-d .ev2-hero {
    --above: var(--ev2-imm-above, 58px);
    --art: clamp(210px, 18vw, 280px);
    /* up under the top bar, out to the panel edges (.sp-content's 24px gutter);
       the inline padding brings the copy back to the content column (+4px,
       like the home shelves and .ev2-layout) */
    margin: calc(-1 * var(--above)) -24px 0;
    padding: calc(var(--above) + 28px) 28px 42px;
    height: auto; min-height: clamp(430px, 56vh, 530px); max-height: none;
    border-radius: 0; box-shadow: none; overflow: hidden;
    align-items: flex-end;
  }
  /* the artwork stops 2px short of the edge, so it can't show as a faint line
     under the fade on fractional pixel heights */
  body.ev2-imm-d .ev2-hero__image { bottom: 2px; background-position: 50% 30%; transform: none; filter: none; }

  /* Scrims: a long fade at the bottom into the exact page colour (listed
     first, so nothing paints over it and there is no seam), a dark veil at
     the top for the bar, and a soft shade on the copy side. */
  body.ev2-imm-d .ev2-hero__scrim {
    background:
      linear-gradient(0deg,
        var(--sp-bg, #121212) 0, var(--sp-bg, #121212) 3px,
        rgba(18,18,18,.95) 44px,
        rgba(18,18,18,.82) 22%,
        rgba(18,18,18,.55) 40%,
        rgba(18,18,18,.2) 58%,
        rgba(18,18,18,0) 74%),
      linear-gradient(180deg, rgba(10,10,16,.6) 0, rgba(10,10,16,.28) calc(var(--above) + 40px), rgba(10,10,16,0) calc(var(--above) + 170px)),
      linear-gradient(270deg, rgba(10,10,14,.6) 0, rgba(10,10,14,.28) 36%, rgba(10,10,14,0) 64%);
  }
  html[dir="ltr"] body.ev2-imm-d .ev2-hero__scrim {
    background:
      linear-gradient(0deg,
        var(--sp-bg, #121212) 0, var(--sp-bg, #121212) 3px,
        rgba(18,18,18,.95) 44px,
        rgba(18,18,18,.82) 22%,
        rgba(18,18,18,.55) 40%,
        rgba(18,18,18,.2) 58%,
        rgba(18,18,18,0) 74%),
      linear-gradient(180deg, rgba(10,10,16,.6) 0, rgba(10,10,16,.28) calc(var(--above) + 40px), rgba(10,10,16,0) calc(var(--above) + 170px)),
      linear-gradient(90deg, rgba(10,10,14,.6) 0, rgba(10,10,14,.28) 36%, rgba(10,10,14,0) 64%);
  }
  /* Frosted veil behind the top bar, fading out below it (blur and tint are
     masked together, so there is no hard edge). */
  body.ev2-imm-d .ev2-hero::before {
    content: ""; position: absolute; z-index: -1; inset: 0 0 auto;
    height: calc(var(--above) + 110px);
    background: rgba(10, 12, 20, .26);
    -webkit-backdrop-filter: blur(22px) saturate(1.05); backdrop-filter: blur(22px) saturate(1.05);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--above), rgba(0,0,0,.6) calc(var(--above) + 44px), transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 var(--above), rgba(0,0,0,.6) calc(var(--above) + 44px), transparent 100%);
    pointer-events: none;
  }

  /* ── Round poster at the far end, centred in the space under the bar:
     a hairline ring with a clear gap (like the artist stories) and a small
     white zoom key. Positioned with margins, not a transform, so the artist
     bubbles (event-v2.js reads offsetTop) start from its real centre. ── */
  body.ev2-imm-d .ev2-hero__art {
    position: absolute; z-index: 1;
    top: calc(50% + var(--above) / 2); left: clamp(48px, 7vw, 120px); right: auto;
    width: var(--art); height: var(--art); aspect-ratio: 1;
    margin-top: calc(var(--art) / -2);
    transform: none; padding: 0;
    border: 6px solid transparent; border-radius: 50%;
    background: none; background-clip: padding-box;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 0 40px 6px rgba(0, 0, 0, .16), 0 16px 34px rgba(0, 0, 0, .28);
    overflow: visible; cursor: zoom-in;
    animation: ev2-art-in-d .9s cubic-bezier(.34, 1.4, .64, 1) .1s both;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  html[dir="ltr"] body.ev2-imm-d .ev2-hero__art { left: auto; right: clamp(48px, 7vw, 120px); }
  body.ev2-imm-d .ev2-hero__art:hover { transform: scale(1.03); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 0 40px 6px rgba(0, 0, 0, .16), 0 20px 40px rgba(0, 0, 0, .34); }
  body.ev2-imm-d .ev2-hero__art:active { transform: scale(.97); }
  body.ev2-imm-d .ev2-hero__art img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
  body.ev2-imm-d .ev2-hero__art span {
    position: absolute; inset: auto auto 6px 6px; z-index: 1;
    width: 38px; height: 38px; padding: 0; border-radius: 50%;
    background: #fff; opacity: 1; font-size: 0; color: transparent;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  }
  body.ev2-imm-d .ev2-hero__art span::before {
    content: ""; position: absolute; inset: 9px; background: #15131c;
    -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'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8.5v5M8.5 11h5'/%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'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  @keyframes ev2-art-in-d { from { opacity: 0; transform: scale(.7) translateY(10px); } to { opacity: 1; transform: none; } }

  /* Lineup artists popping out from behind the round poster (event-v2.js) */
  body.ev2-imm-d .ev2-orbit { position: absolute; z-index: 0; width: 0; height: 0; }
  body.ev2-imm-d .ev2-bub {
    --s: 60px; position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2);
    width: var(--s); height: var(--s); display: block; border-radius: 50%;
    text-decoration: none; will-change: transform, opacity;
  }
  body.ev2-imm-d .ev2-bub__img {
    display: block; width: 100%; height: 100%; border-radius: 50%;
    background: #2a2838 center/cover no-repeat;
    box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.4);
  }
  body.ev2-imm-d .ev2-bub__name {
    position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
    max-width: 120px; padding: 2px 9px; border-radius: 999px;
    background: rgba(14,14,20,.6); color: #fff;
    -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
    font-size: 11.5px; font-weight: 700; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ── Copy: aligned with the content column, clear of the poster ── */
  body.ev2-imm-d .ev2-hero__content {
    max-width: min(720px, calc(100% - var(--art) - clamp(48px, 7vw, 120px) - 56px));
    padding: 0;
  }
  /* two lines at most (event-v2.js shrinks long titles first; this clamp is the safety net) */
  body.ev2-imm-d .ev2-hero h1 {
    font-size: clamp(34px, 3.6vw, 54px); line-height: 1.08;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.ev2-imm-d .ev2-hero .ev2-lead { margin-top: 8px; font-size: 17px; color: rgba(255,255,255,.86); }
  body.ev2-imm-d .ev2-hero .ev2-meta { margin-top: 18px; }
  /* tags: the phone's dark glass */
  body.ev2-imm-d .ev2-hero .ev2-meta span {
    padding: 8px 12px; border-radius: 10px;
    border: 0; background: rgba(9,9,11,.55); color: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  }
  body.ev2-imm-d .ev2-hero__actions { margin-top: 24px; gap: 12px; }
  body.ev2-imm-d .ev2-hero__actions .ev2-buy { min-height: 56px; padding-inline: 24px; gap: 18px; font-size: 16px; }
  body.ev2-imm-d .ev2-hero__actions .ev2-buy .ev2-buy__price strong { font-size: 16px; }
  /* Share: bold, borderless frosted glass, as tall as the buy button */
  body.ev2-imm-d .ev2-hero .ev2-hero__share {
    display: inline-flex; align-items: center; gap: 8px;
    height: 56px; padding: 0 22px;
    border: 0; box-shadow: none; font-weight: 700; font-size: 15px;
    background: rgba(255, 255, 255, .14); color: #fff;
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    transition: background .15s ease;
  }
  body.ev2-imm-d .ev2-hero .ev2-hero__share:hover { background: rgba(255, 255, 255, .22); }
  body.ev2-imm-d .ev2-hero .ev2-hero__share svg { width: 17px; height: 17px; }
  body.ev2-imm-d .ev2-hero .ev2-hero__share span { font-size: 15px; font-weight: 700; margin: 0; }

  /* the content starts right where the artwork fades out */
  body.ev2-imm-d .ev2-layout { padding-top: 18px; }
}

/* Narrow desktop windows: no room for the poster beside the copy - the copy
   takes the full width (the poster is still in the side buy box below). */
@media (min-width: 901px) and (max-width: 1179px) {
  body.ev2-imm-d .ev2-hero__art, body.ev2-imm-d .ev2-orbit { display: none; }
  body.ev2-imm-d .ev2-hero__content { max-width: min(720px, 100%); }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  body.ev2-imm-d .ev2-hero__art { animation: none; }
}