/* index-v1d — the pages around the Index: the slot machine (./slots), a
   project's page (./showcase), the Bulletin's column (./bulletin), the blobs
   (./blobs) and the orange bar (./footer); the About page has its own
   about/style.css. nav.js sets body[data-view] to index | project |
   bulletin | about | slots; the pages crossfade. */

/* ---- Pages ----------------------------------------------------------------- */

.view {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 360ms var(--ease-out), visibility 0s linear 360ms;
}
body[data-view="slots"] .slots,
body[data-view="project"] .showcase,
body[data-view="about"] .about {
  opacity: 1;
  visibility: visible;
  transition: opacity 360ms var(--ease-out), visibility 0s;
}
/* The Index (its stickers, peel layer, cards and globe) steps back — except
   under the Bulletin, which is the Index with its column — and for the blobs. */
.page { transition: opacity 360ms var(--ease-out), visibility 0s; }
body:not([data-view="index"]):not([data-view="bulletin"]) .page,
body:not([data-view="index"]):not([data-view="bulletin"]) .peel-layer,
body:not([data-view="index"]):not([data-view="bulletin"]) .globe,
body.is-blobs .page,
body.is-blobs .peel-layer,
body.is-blobs .globe {
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms var(--ease-out), visibility 0s linear 360ms;
}

/* ---- The slot machine (Figma: Slots / spin 2–8) ---------------------------- */

/* The Figma frame across the window, in Figma px, scaled by slots/main.js;
   as tall as the window, so the reels run top to bottom. */
.slots__machine {
  position: absolute;
  left: 0;
  top: 0;
  width: 1728px;
  transform-origin: 0 0;
}
.reel {
  position: absolute;
  top: 0;
  width: 576px;
  height: 100%;
  overflow: hidden; /* (Figma's reels clip: a big sticker stays in its own) */
}
.reel__strip {
  position: absolute;
  inset: 0;
}
.cell {
  position: absolute;
  left: 0;
  top: 0;
  width: 466.29px;
  height: 466.29px;
  cursor: pointer;
}
.slots.is-spinning .cell { cursor: default; }
.cell.is-active { z-index: 2; } /* its card over the cell below */
.cell__art {
  position: absolute;
  max-width: none;
  pointer-events: none;
  transition: scale 500ms var(--ease-out);
}
.cell.is-active .cell__art { scale: 1.02; }
.cell .card { position: absolute; }

/* The payline: the orange arrows at the window's edges, through the middle row. */
.slots__arrow {
  position: absolute;
  top: 50%;
  margin-top: -6px;
  width: 8px;
  height: 12px;
  z-index: 1;
}
.slots__arrow--l { left: 4px; }
.slots__arrow--r { right: 4px; scale: -1 1; }
.slots__filters { position: absolute; }

/* Three of a kind: the arrows flash and the row's stickers lift. */
.slots.is-jackpot .slots__arrow { animation: payline 280ms steps(1) infinite; }
@keyframes payline { 50% { opacity: 0; } }
.slots.is-jackpot .cell.is-win .cell__art {
  animation: jackpot 900ms var(--ease-out) both;
}
@keyframes jackpot {
  0% { scale: 1; }
  35% { scale: 1.08; }
  100% { scale: 1.04; }
}

/* ---- A project's page (Figma: Index / Showcase / …) ------------------------- */

.sc-stage {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: grab;
}
.sc-stage:active { cursor: grabbing; }
.sc-hero {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  filter: var(--outline);
  will-change: transform;
  pointer-events: none;
}

/* The rail: every project's silhouette, 24px from the left, down the middle
   (Figma: Object outlines / filled). This one in its colour. */
.sc-rail {
  position: absolute;
  left: 24px;
  top: 50%;
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  transform: translateY(calc(-50% - 24px)) scale(var(--rail-s, 1));
  transform-origin: 0 50%;
  z-index: 2;
}
.sc-mark {
  display: block;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background-color: #010103;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), scale 200ms var(--ease-out);
}
.sc-mark.is-current { background-color: var(--c); }
@media (hover: hover) {
  .sc-mark:hover { background-color: var(--c); scale: 1.1; }
}
.sc-mark:active { scale: 0.94; }
.sc-mark:focus-visible { outline: 2px solid #ff5b00; outline-offset: 4px; }

/* Its card, 22px from the right, down the middle. */
.sc-card {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 221px;
  height: 275px;
  margin-top: -137.5px;
  --cs: var(--card-s, 1);
  z-index: 2;
}
.sc-card .card { left: 0; top: 0; }

@media (max-width: 700px) {
  .sc-rail { display: none; }
  .sc-card { top: auto; bottom: 92px; right: 12px; margin-top: 0; }
}

/* ---- The Bulletin (Figma: Bulletin) ------------------------------------------------ */

/* The stickers glide aside (main.js setShift) as the column comes in. */
.page.is-shifting .board { transition: transform 650ms var(--ease-out); }

/* The column of notices down the right edge, 221px wide (scaled with the
   board, --bs), drifting down (bulletin/main.js moves the track). */
.bulletin {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(221px * var(--bs, 1));
  overflow: hidden;
  z-index: 6;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 600ms var(--ease-out), visibility 0s linear 600ms;
}
body[data-view="bulletin"] .bulletin {
  transform: none;
  visibility: visible;
  transition: transform 650ms var(--ease-out) 80ms, visibility 0s;
}
.bl-track {
  width: 221px;
  scale: var(--bs, 1);
  transform-origin: 0 0;
  will-change: transform;
}
.card.bl-card {
  position: relative;
  pointer-events: auto;
  border-radius: 0;
  transform: none;
}
.bl-card .card__bg { border-radius: 0; }

/* ---- The blobs (./blobs: squishy-matter_v3a's soft bodies) --------------------------- */

.blobs {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms var(--ease-out), visibility 0s linear 360ms;
}
body.is-blobs:is([data-view="index"], [data-view="bulletin"]) .blobs {
  opacity: 1;
  visibility: visible;
  transition: opacity 360ms var(--ease-out), visibility 0s;
}
/* (The engine's own canvas and loading line, from squishy-matter_v3a/style.css.) */
.blobs .stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.blobs .status {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  font: 400 12px/1.5 var(--mono);
  text-transform: uppercase;
  color: #8a8a8a;
  pointer-events: none;
}

/* ---- The orange bar (Figma: Frame 91) ----------------------------------------- */

.sns-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 20px;
  z-index: 15000; /* over every page, under the menu */
  pointer-events: none;
}
.sns-bar__inner {
  display: flex;
  align-items: center;
  gap: 103px;
  padding: 4px;
  border-radius: 4px;
  background: #ff5b00;
  color: #010103;
  font: 400 12px/1.5 var(--mono);
  text-transform: uppercase;
  pointer-events: auto;
}
.sns-bar__time {
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sns-bar__switch {
  all: unset;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.sns-bar__switch:focus-visible { outline: 1px solid #010103; outline-offset: 2px; }
.sns-bar__switch i {
  position: relative;
  width: 34px;
  height: 20px;
  border: 1px solid #010103;
  border-radius: 10px;
  box-sizing: border-box;
}
/* The knob: Figma's is at the left (cx 10, r 7); on, it slides right. */
.sns-bar__switch i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #010103;
  transition: translate 240ms var(--ease-out);
}
.sns-bar__switch[aria-checked="true"] i::after { translate: 14px 0; }
.sns-bar__switch:active i::after { scale: 0.9; }
.sns-bar__links { display: flex; gap: 8px; }
.sns-bar__links a { display: block; }
.sns-bar__links img { display: block; }

@media (max-width: 700px) {
  .sns-bar { padding: 12px; }
  .sns-bar__inner { gap: 20px; }
}
@media (max-width: 420px) {
  .sns-bar__time { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .view, .page { transition-duration: 0s !important; }
  .slots.is-jackpot .cell.is-win .cell__art { animation: none; }
}