/* ============================================================
   Selected Identities — DESKTOP ONLY (min-width 769px)

   Ported from the "Selected Identities" section of
   vishal-portfolio.bvishal994.workers.dev (its section 3, "work"), at
   Vishal's request, 2026-09-26. It replaces Brand Identities (.s2) on
   desktop; the phone keeps .s2.

   The title with its arrow, then three case cards stacked like a deck:
   each pins --peek below the one before, and the earlier ones stay on as
   strips along the top, smaller, blurred and veiled, with their names sharp
   on top. Like the reference this is not an artboard: px from its 1440 comp
   and svh, with the reference's own stacked layout at 1100px and below.

   Changes from the reference: the heading is Brand Identities' own, not
   "Selected Identities" with its arrow; every rule is scoped under .sid; the ground,
   the title and the veil follow the theme (--c-bg / --c-ink) where the
   reference was literal white; the right half plays this site's films
   (initSectionVideos) instead of stills; the CTAs link to the case pages.
   js/identities.js drives --near/--far/--lab where the browser cannot tie
   them to the scroll.
   ============================================================ */

.sid { display: none; }

@media (min-width: 769px) {

  .s2 { display: none; }

  .sid {
    display: block;
    position: relative;
    padding: 30px 14px 80px;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* The heading is Brand Identities' own (.s2__heading in css/style.css),
     kept at Vishal's request: PP Editorial New Ultralight Italic 82/82,
     centred, 106.5 design px below the section top (.s2's 76.5, lowered
     30 at Vishal's request), then the subtitle line
     below it, all scaled by --k like the artboard sections around it. */
  .sid { padding-top: calc(106.5px * var(--k)); }

  .sid__title {
    margin: 0;
    font-family: 'PP Editorial New', Georgia, serif;
    font-style: italic;
    font-weight: 200;
    font-size: calc(82px * var(--k));
    line-height: 1;
    text-align: center;
    color: var(--c-ink);
    white-space: nowrap;
  }

  /* One line under the heading (Vishal, 2026-09-26): Helvetica Neue 14/19,
     uppercase, at 75% of the ink, as the reference sets its captions. 18
     design px under the heading, then 48.5 to the content. */
  .sid__sub {
    margin: calc(18px * var(--k)) 0 0;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.004em;
    text-align: center;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--c-ink) 75%, transparent);
  }

  /* The deck: each card pins 44px (--peek) below the one before. A card is
     the comp's 882px, or the window less its margins and those strips; on a
     tall window the deck is centred. */
  .sid__cases {
    --peek: 44px;
    --case-h: min(882px, calc(100svh - 28px - 2 * var(--peek)));
    --case-top: max(14px, calc((100svh - var(--case-h) - 2 * var(--peek)) / 2));
    margin-top: calc(48.5px * var(--k));
    timeline-scope: --case-2, --case-3;
  }

  .sid .case {
    position: sticky;
    top: var(--case-top);
    height: var(--case-h);
  }

  .sid .case:nth-child(2) {
    top: calc(var(--case-top) + var(--peek));
    view-timeline-name: --case-2;
  }

  .sid .case:nth-child(3) {
    top: calc(var(--case-top) + 2 * var(--peek));
    view-timeline-name: --case-3;
  }

  /* Each later card lets the one before rest a moment before it arrives. */
  .sid .case + .case { margin-top: 22svh; }

  /* A pinned card only stays pinned while its container goes on; without
     this the deck closed up the moment it was complete. */
  .sid__rest { height: 30svh; }

  /* Two layers carry the stack: --near follows the next card's arrival,
     --far the one after. Each arrival takes the card back a step: 95%,
     blurred 4px, veiled 30% toward the ground. One plain animation per
     layer, so the compositor can run them. */
  .sid .case__far,
  .sid .case__near {
    position: relative;
    height: 100%;
    transform-origin: 50% 0;
  }

  .sid .case__near {
    transform: scale(calc(1 - 0.05 * var(--near, 0)));
    filter: blur(calc(4px * var(--near, 0)));
  }

  .sid .case__far {
    transform: scale(calc(1 - 0.05 * var(--far, 0)));
    filter: blur(calc(4px * var(--far, 0)));
  }

  /* A veil, not transparency: faded by opacity, an earlier card showed
     through a later one as a ghost. */
  .sid .case__near::after,
  .sid .case__far::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 10px;
    background: var(--c-bg);
    pointer-events: none;
  }

  .sid .case__near::after { opacity: calc(0.3 * var(--near, 0)); }
  .sid .case__far::after { opacity: calc(0.3 * var(--far, 0)); }

  .sid .case:nth-child(1) .case__near,
  .sid .case:nth-child(1) .case__far,
  .sid .case:nth-child(2) .case__near { will-change: transform, filter; }

  .sid .case__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    color: #fff;
  }

  /* A covered card's name, centred in its strip, outside the two layers so
     neither the blur nor the veil reaches it. */
  .sid .case__label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--peek);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    opacity: var(--lab, 0);
    pointer-events: none;
  }

  @supports (animation-timeline: view()) and (timeline-scope: --a) {
    .sid .case__near,
    .sid .case__far {
      transform: none;
      filter: none;
    }

    .sid .case__near::after,
    .sid .case__far::after,
    .sid .case__label { opacity: 0; }

    .sid .case:nth-child(1) .case__near,
    .sid .case:nth-child(1) .case__far,
    .sid .case:nth-child(2) .case__near {
      animation: sid-back linear both;
      animation-range: entry 0% entry 100%;
    }
    .sid .case:nth-child(1) .case__near { animation-timeline: --case-2; }
    .sid .case:nth-child(1) .case__far { animation-timeline: --case-3; }
    .sid .case:nth-child(2) .case__near { animation-timeline: --case-3; }

    .sid .case:nth-child(1) .case__near::after,
    .sid .case:nth-child(1) .case__far::after,
    .sid .case:nth-child(2) .case__near::after {
      animation: sid-fade linear both;
      animation-range: entry 0% entry 100%;
    }
    .sid .case:nth-child(1) .case__near::after { animation-timeline: --case-2; }
    .sid .case:nth-child(1) .case__far::after { animation-timeline: --case-3; }
    .sid .case:nth-child(2) .case__near::after { animation-timeline: --case-3; }

    .sid .case:nth-child(1) .case__label,
    .sid .case:nth-child(2) .case__label {
      animation: sid-label linear both;
      animation-range: entry 40% entry 100%;
    }
    .sid .case:nth-child(1) .case__label { animation-timeline: --case-2; }
    .sid .case:nth-child(2) .case__label { animation-timeline: --case-3; }
  }

  /* The left half: the photograph, dimmed by its opacity over the black. */
  .sid .case__info {
    position: relative;
    overflow: hidden;
  }

  .sid .case__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--bg-opacity, 0.35);
  }

  /* Placed from the comp, from the card's top-left corner. Across the width
     the left edge is a fraction of the 706px half (75px). */
  .sid .case__info > :not(.case__bg) {
    position: absolute;
    left: 10.623%;
    z-index: 1;
    margin: 0;
  }

  /* The svg's viewBox starts 1px outside the ink. */
  .sid .case__name {
    top: 87px;
    left: calc(10.623% - 1px);
    width: var(--name-w);
    line-height: 0;
  }

  .sid .case__name svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .sid .case__tags,
  .sid .case__text,
  .sid .case__cta {
    font-size: 12.6px;
    text-transform: uppercase;
    color: #fff;
  }

  .sid .case__tags,
  .sid .case__cta { letter-spacing: -0.065em; }

  .sid .case__tags {
    top: 234.5px;
    right: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 11.5px;
    padding: 0;
    list-style: none;
  }

  /* The comp pads each tag unevenly: 14.5px before the label, 17.5 after. */
  .sid .case__tags li {
    height: 24px;
    padding: 1px 17.5px 0 14.5px;
    border: 1px solid #fff;
    border-radius: 12px;
    line-height: 20px;
    white-space: nowrap;
  }

  /* The copy hangs from the bottom, so its last line sits at the same height
     on every card however many lines come before it. */
  .sid .case__text {
    bottom: var(--text-bottom, 181px);
    width: min(560px, calc(100% - 100px));
    line-height: 19px;
    letter-spacing: -0.019em;
  }

  .sid .case__text p { margin: 0 0 19px; }
  .sid .case__text p:last-child { margin-bottom: 0; }

  .sid .case__cta {
    bottom: 86.5px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 36.5px;
    padding: 0 7.3px 0 15px;
    border: 1px solid #fff;
    border-radius: 18.25px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
  }

  .sid .case__cta-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    transition: background 0.3s ease, color 0.3s ease;
  }

  .sid .case__cta-icon svg { width: 11px; height: auto; }

  .sid .case__cta:hover,
  .sid .case__cta:focus-visible {
    background: #fff;
    color: #000;
  }

  .sid .case__cta:hover .case__cta-icon,
  .sid .case__cta:focus-visible .case__cta-icon {
    background: #000;
    color: #fff;
  }

  .sid .case__cta:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.7);
    outline-offset: 4px;
  }

  /* The right half: the project's film, cropped to fill. */
  .sid .case__media { position: relative; background: #000; }

  .sid .case__media img,
  .sid .case__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@keyframes sid-back { to { transform: scale(0.95); filter: blur(4px); } }
@keyframes sid-fade { to { opacity: 0.3; } }
@keyframes sid-label { to { opacity: 1; } }

@media (min-width: 769px) and (max-width: 1439px) {
  .sid .case__text br { display: none; }
}

/* Below this a card would be taller than the screen, so they stop stacking:
   plain cards one after another, the project above its film. */
@media (min-width: 769px) and (max-width: 1100px) {
  .sid { padding: calc(106.5px * var(--k)) 24px 40px; }

  .sid .case { position: relative; height: auto; }
  .sid .case:nth-child(n) { top: auto; }

  .sid .case:nth-child(n) .case__near,
  .sid .case:nth-child(n) .case__far {
    height: auto;
    transform: none;
    filter: none;
    opacity: 1;
    animation: none;
    will-change: auto;
  }

  .sid .case__card { grid-template-columns: 1fr; height: auto; }

  .sid .case__label,
  .sid__rest,
  .sid .case__near::after,
  .sid .case__far::after { display: none; }

  .sid .case + .case { margin-top: 24px; }

  .sid .case__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 48px 32px 40px;
  }

  .sid .case__info > :not(.case__bg) {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }

  .sid .case__name { width: min(var(--name-px), 100%); }
  .sid .case__info > .case__tags { margin-top: 22px; }
  .sid .case__info > .case__text { width: auto; max-width: 560px; margin-top: 40px; }
  .sid .case__info > .case__cta { margin-top: 32px; }

  .sid .case__media { aspect-ratio: 4 / 3; }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .sid .case:nth-child(n) .case__near,
  .sid .case:nth-child(n) .case__far,
  .sid .case:nth-child(n) .case__label,
  .sid .case:nth-child(n) .case__near::after,
  .sid .case:nth-child(n) .case__far::after { animation: none; }

  .sid .case__near::after,
  .sid .case__far::after { opacity: 0; }

  .sid .case:nth-child(n) .case__near,
  .sid .case:nth-child(n) .case__far {
    transform: none;
    filter: none;
    opacity: 1;
  }
}