/* ==========================================================================
   IMABEATDUHPARTY — BASE
   Font loading, reset, typography, focus, page-transition behaviour.
   ========================================================================== */

/* ---- Self-hosted type ---------------------------------------------------
   Jost is a variable font: one 26KB file covers every weight from
   Thin to Black, so there is only ever a single font request.            */
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Reset ------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--pink) var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Locked while the mobile menu is open */
body.is-menu-open { overflow: hidden; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul, ol { list-style: none; padding: 0; }

a {
  color: inherit;
  text-decoration: none;
}

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection {
  background: var(--pink);
  color: var(--ink);
}

/* ---- Focus --------------------------------------------------------------
   Light blue reads clearly against both the black UI and the pink
   artwork, so it is the one focus colour used site-wide.                 */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Skip link ----------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--pink);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-small);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- Layout helpers ------------------------------------------------------ */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Jumping to an anchor must not park the heading behind the fixed header */
section[id],
[id]:target {
  scroll-margin-block-start: calc(var(--header-h) + var(--sp-5));
}

.measure { max-width: var(--measure); }

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

/* ---- Shared type styles -------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--pink-light);
}
.eyebrow::before {
  content: "";
  width: clamp(1.5rem, 4vw, 2.75rem);
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--pink), transparent);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.display--mega {
  font-size: var(--t-mega);
  letter-spacing: var(--track-mega);
}

.section-title {
  font-size: var(--t-h2);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.lede {
  font-size: var(--t-lede);
  color: var(--fg-muted);
  line-height: 1.5;
}

.text-pink { color: var(--pink); }
.text-blue { color: var(--blue); }

/* Pink text with a soft neon bloom, used sparingly on artwork */
.text-glow {
  color: var(--pink);
  text-shadow: 0 0 24px rgb(255 47 146 / 0.55), 0 0 60px rgb(255 47 146 / 0.3);
}

/* ==========================================================================
   PAGE TRANSITIONS
   Browsers with cross-document View Transitions (Chrome, Edge, Safari)
   cross-fade between pages natively. Everywhere else, site.js adds the
   `no-vt` class and these keyframes provide the same feel manually.
   ========================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out var(--dur-page) var(--ease-in-out) both;
}
::view-transition-new(root) {
  animation: vt-in var(--dur-page) var(--ease-in-out) both;
}

@keyframes vt-out {
  to { opacity: 0; transform: scale(0.995); }
}
@keyframes vt-in {
  from { opacity: 0; transform: scale(1.006); }
}

/* The header is a persistent element: it holds still while pages swap */
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: var(--dur-page); }

/* --- Fallback for browsers without cross-document View Transitions --- */
.no-vt main {
  animation: page-in var(--dur-page) var(--ease-out) both;
}
.no-vt.is-leaving main {
  animation: page-out var(--dur-fast) var(--ease-in-out) both;
}

@keyframes page-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes page-out {
  to { opacity: 0; transform: translate3d(0, -8px, 0); }
}

/* ==========================================================================
   SCROLL REVEAL
   Elements marked data-reveal start hidden and ease in once they enter
   the viewport. If JavaScript never runs, they simply stay visible.
   ========================================================================== */
[data-reveal] {
  opacity: 1;
}
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .no-vt main,
  .no-vt.is-leaving main { animation: none; }
}