/* Stardust · motion layer
   Sits on top of the original theme. Never restyles type or copy.
   Everything under html.sdm only runs with JS on and motion allowed.
   Longhand properties only (no shorthands with var()). */

/* Eventos cards: the theme already ships .sd-format__img; keep the volt word readable on photos. */
.sd-format__img { object-position: 50% 40%; }
.sd-format__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 58%);
  pointer-events: none;
}
.sd-format__word { position: relative; z-index: 1; }

/* Hero pin: the four original panels part like the isotype blocks. */
html.sdm .sd-hero {
  position: sticky;
  top: var(--sdm-hdr, 0px);
  z-index: 41;
  height: calc(100svh - var(--sdm-hdr, 0px));
  overflow: hidden;
  background-color: transparent;
}
html.sdm .sd-quad { height: 100%; grid-template-rows: 1fr 1fr; grid-auto-rows: auto; }
html.sdm .sd-quad__panel { will-change: transform; }

/* The travelling stage: one fixed element, one video. */
.sdm-stage {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 40;
  overflow: hidden;
  background-color: var(--ink);
  pointer-events: none;
  visibility: hidden;
}
.sdm-stage__src { position: absolute; width: 2px; height: 2px; opacity: 0; }
.sdm-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sdm-stage__veil { position: absolute; inset: 0; background-color: var(--ivory); }
.sdm-stage__scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 58%);
}

/* Journey layer (journey.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html.sdj .sd-format__img,
html.sdj .sd-quad__media,
html.sdj .sd-release__img,
html.sdj .sd-raw__media img,
html.sdj .sd-model__media img { transform-origin: 50% 50%; will-change: transform; }
.sdj-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Browser surfaces in the brand's own colors */
::selection { background-color: var(--volt); color: var(--ink); }
html { scrollbar-color: var(--line-dark) var(--ink); }
html { scroll-padding-top: var(--sdj-hdr, 72px); }