/* Tokens from the Figma file */
:root {
  --bg: #fafafa;
  --black: #000000;
  --dark-grey: #4e4e4e;
  --mid-grey: #bababa;
  --chartreuse: #dcce48;
  --muted: rgba(0, 0, 0, 0.2);

  --edge: 40px;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--black);
  font-family: var(--font);
  font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--chartreuse);
  outline-offset: 4px;
}

/* ---------- Fixed chrome ---------- */
.logo {
  position: fixed;
  top: var(--edge);
  z-index: 20;
  display: block;
}
.logo--meyris {
  left: var(--edge);
  width: 101px;
  height: auto;
  mix-blend-mode: difference;
}
.logo--newsroom {
  right: var(--edge);
  width: 145.67px;
  height: auto;
}

.year {
  position: fixed;
  right: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 38px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 500;
}
.year__label {
  margin: 0;
  font-size: 10px;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  color: var(--dark-grey);
}
.year__value {
  margin: 0;
  font-size: 16px;
  line-height: 1.04;
  letter-spacing: -0.64px;
  color: var(--mid-grey);
  white-space: nowrap;
}

.copyright {
  position: fixed;
  right: var(--edge);
  bottom: 24px;
  margin: 0;
  z-index: 20;
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--mid-grey);
}

/* ---------- Event filter ---------- */
.filter {
  position: fixed;
  left: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 121px;
  font-weight: 500;
}
.filter__label {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  color: var(--dark-grey);
}
.filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filter__list button {
  display: block;
  font-size: 16px;
  line-height: 1.04;
  letter-spacing: -0.64px;
  color: var(--muted);
  transition: color 0.35s ease;
  white-space: nowrap;
}
.filter__list button:hover { color: rgba(0, 0, 0, 0.45); }
.filter__list button.is-active { color: var(--black); }

.filter__marker {
  position: absolute;
  left: -16px;
  top: 0;
  width: 8px;
  height: 8px;
  background: var(--chartreuse);
  opacity: 0;
  visibility: hidden;
}

/* ---------- Stage ---------- */
.viewport {
  position: fixed;
  inset: 0;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: 50% 50%;
}

.group {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: auto;
}

/* Card layers:
   .card          → position/size per state (left/top/width/height)
   .card__parallax → mouse parallax (x/y)
   .card__float    → idle drift (x/y/rotation)
   .card__zoom     → hover scale                                           */
.card {
  position: absolute;
  display: block;
  pointer-events: auto;
  will-change: left, top, width, height, opacity;
}
.card:focus-visible { outline: none; }
.card:focus-visible .card__zoom {
  outline: 2px solid var(--chartreuse);
  outline-offset: 4px;
}

.card__parallax,
.card__float,
.card__zoom {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform;
}

.card__zoom {
  overflow: hidden;
  border-radius: var(--r, 16px);
  transform-origin: 50% 50%;
}
.card__zoom img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
/* crops copied from Figma image fills */
.card__zoom img.is-cropped {
  inset: auto;
  object-fit: fill;
}

.card__caption {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 100%;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.64px;
  color: var(--black);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Event description ---------- */
.story {
  position: absolute;
  width: 386px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 250;
}
.story h2 {
  margin: 0 0 13px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.48px;
  white-space: nowrap;
}
.story p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.64px;
}

/* Logos, inlined from Logos/*.svg. White parts use a difference blend (as in Figma),
   set on each fixed layer so it mixes with the page behind it. */
.brand { position: fixed; top: var(--edge); z-index: 20; line-height: 0; pointer-events: none; }
.brand svg { display: block; width: 100%; height: auto; }
.brand--meyris { left: var(--edge); width: 101px; }
.brand--newsroom { right: var(--edge); width: 146px; }
.brand--blend { mix-blend-mode: difference; }

/* Mission line, top centre */
.mission {
  position: fixed;
  top: var(--edge);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  white-space: nowrap;
}
.mission__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: -0.12px;
  text-transform: uppercase;
  color: var(--mid-grey);
}
.mission__text {
  margin: 0;
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: var(--black);
}
@media (max-width: 860px) { .mission { display: none; } }

/* Overview hover veil: sits between the hovered image and the rest */
.veil {
  position: absolute;
  inset: -2000px;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 200;
}

/* ================= Mobile (Figma "Prototype (Mobile)", 402×874) ================= */
.m-frame { display: none; }
body.is-mobile {
  background: #fff;
  /* stop the page itself from scrolling/shifting on mobile browsers */
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html:has(body.is-mobile) { overflow: hidden; overscroll-behavior: none; }
.is-mobile .viewport,
.is-mobile .brand,
.is-mobile .mission,
.is-mobile .filter,
.is-mobile .year,
.is-mobile .copyright { display: none !important; }
/* Fills the screen width; height follows the visible screen (set in gallery.js) */
.is-mobile .m-frame {
  display: block;
  position: fixed;
  left: 50%;
  top: var(--m-top, 0px);      /* follows the visible area (visualViewport) */
  width: 402px;
  height: var(--m-h, 874px);
  transform: translateX(-50%) scale(var(--m-scale, 1));
  transform-origin: 50% 0;
  background: #fff;
  overflow: hidden;
}
/* gallery: desktop overview layout at 59.83%, scrolled sideways */
.m-gallery {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--gal-top, 242px);
  height: calc(488px * var(--g, 1));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-gallery::-webkit-scrollbar { display: none; }
.m-track { position: relative; width: calc(882px * var(--g, 1)); height: calc(488px * var(--g, 1)); overflow: hidden; }
.is-mobile .stage {
  left: 0;
  top: 0;
  /* desktop overview × 0.5983, images start 10px below the gallery top */
  transform: translate(calc(-156.2px * var(--g, 1)), calc(-103.1px * var(--g, 1))) scale(calc(0.5983 * var(--g, 1)));
  transform-origin: 0 0;
}
.is-mobile .veil,
.is-mobile .story,
.is-mobile .card__caption { display: none; }

.m-pill {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
.m-header {
  position: absolute;
  left: 20px;
  top: var(--hdr-top, 16px);
  width: 362px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}
.m-back { display: block; line-height: 0; color: var(--black); }
.m-logo { line-height: 0; }
.m-logo svg { display: block; width: 217px; height: auto; }

.m-mission {
  position: absolute;          /* all blocks share one grid cell: height = tallest block */
  left: 20px;
  top: var(--mis-top, 110px);
  width: 362px;
  display: grid;
  pointer-events: none;
}
.m-mission__block {
  grid-area: 1 / 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
.m-mission__block.is-active { opacity: 1; visibility: visible; }
.m-mission__block--event { align-items: flex-start; text-align: left; }
.m-mission__label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.12px;
  text-transform: uppercase;
  color: var(--mid-grey);
}
.m-mission__text {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.96px;
  color: var(--black);
}
.m-mission__body {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.48px;
  color: var(--black);
}

.m-selector {
  position: absolute;
  left: 50%;
  bottom: var(--sel-bottom, 80px);
  transform: translateX(-50%);
  z-index: 6;
}
.m-selector__toggle {
  display: block;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}
.m-selector.is-open .m-selector__toggle { display: none; }
.m-selector__panel {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m-selector__panel[hidden] { display: none; }
.m-selector__label {
  margin: 0;
  font-size: 8px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  color: var(--mid-grey);
}
.m-selector__row { display: flex; align-items: center; gap: 8px; }
.m-selector__events { display: flex; align-items: center; gap: 16px; }
.m-selector__row button {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}
.m-sep { width: 1px; height: 12px; background: var(--black); }
.m-copyright {
  position: absolute;
  left: 50%;
  bottom: var(--copy-bottom, 24px);
  transform: translateX(-50%);
  margin: 0;
  font-size: 8px;
  letter-spacing: -0.08px;
  line-height: normal;
  color: var(--mid-grey);
  white-space: nowrap;
}