/* ---------------------------------------------------------------
   mattiamaffiotto.xyz — iPod classic (black) portfolio shell
   --------------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------
   custom pixel cursors
   scroll = default everywhere · arrow = inert areas of the screen
   hand   = anything clickable (screen rows, wheel buttons)
   The @2x variants keep the pixel edges crisp on retina; browsers
   that can't parse image-set() fall back to the plain 1x url.
   --------------------------------------------------------------- */

:root {
  --cursor-scroll: url("mouse/scroll-cursor.png") 6 19, auto;
  --cursor-arrow: url("mouse/pointer-cursor.png") 0 0, auto;
  --cursor-hand: url("mouse/hand-cursor.png") 8 0, pointer;
}

@supports (cursor: -webkit-image-set(url("mouse/scroll-cursor.png") 1x) 6 19, auto) {
  :root {
    --cursor-scroll: -webkit-image-set(url("mouse/scroll-cursor.png") 1x, url("mouse/scroll-cursor@2x.png") 2x) 6 19, auto;
    --cursor-arrow: -webkit-image-set(url("mouse/pointer-cursor.png") 1x, url("mouse/pointer-cursor@2x.png") 2x) 0 0, auto;
    --cursor-hand: -webkit-image-set(url("mouse/hand-cursor.png") 1x, url("mouse/hand-cursor@2x.png") 2x) 8 0, pointer;
  }
}

@supports (cursor: image-set(url("mouse/scroll-cursor.png") 1x) 6 19, auto) {
  :root {
    --cursor-scroll: image-set(url("mouse/scroll-cursor.png") 1x, url("mouse/scroll-cursor@2x.png") 2x) 6 19, auto;
    --cursor-arrow: image-set(url("mouse/pointer-cursor.png") 1x, url("mouse/pointer-cursor@2x.png") 2x) 0 0, auto;
    --cursor-hand: image-set(url("mouse/hand-cursor.png") 1x, url("mouse/hand-cursor@2x.png") 2x) 8 0, pointer;
  }
}

html,
body {
  height: 100%;
  /* inherited by everything that doesn't override it */
  cursor: var(--cursor-scroll);
}

body {
  background: #ffffff;
  color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* ---------- page background (admin-editable image/gif/video) ---------- */

.page-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #ffffff;
}

.page-background img,
.page-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- stage ---------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- device sizing ---------- */

.ipod {
  --ipod-h: min(78vh, 620px);
  --ipod-w: calc(var(--ipod-h) * 0.597);
  position: relative;
  width: var(--ipod-w);
  height: var(--ipod-h);
}

@media (max-width: 480px), (orientation: portrait) and (max-height: 780px) {
  .ipod {
    --ipod-h: min(90svh, calc(90vw / 0.597));
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  .ipod {
    --ipod-h: min(92svh, 92vh);
  }
}

/* ---------- chassis (matte black, hairline metal edge) ---------- */

.ipod-body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--ipod-w) * 0.08);
  background: linear-gradient(100deg, #3c3c3e 0%, #1c1c1e 6%, #0a0a0b 50%, #1c1c1e 94%, #3c3c3e 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.16),
    0 22px 44px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* ---------- screen ---------- */

.screen-frame {
  position: absolute;
  top: 8%;
  left: 9%;
  width: 82%;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--ipod-w) * 0.018);
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 3px rgba(0, 0, 0, 0.9);
  padding: 3%;
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--ipod-w) * 0.008);
  background: #e7e8e2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  cursor: var(--cursor-arrow);
}

/* status bar */

.status-bar {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: 13%;
  padding: 0 4%;
  background: linear-gradient(to bottom, #fafaf8 0%, #dcdfd6 45%, #c7cabf 55%, #eceee8 100%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: clamp(9px, calc(var(--ipod-w) * 0.036), 15px);
  font-weight: 600;
  color: #202119;
}

.status-spacer {
  grid-column: 1;
}

.status-title {
  grid-column: 2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* it is an h1 for semantics; the status bar sets the type it shows in */
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.battery {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1px;
}

.battery-body {
  display: block;
  width: 2.1em;
  height: 1em;
  border: 1px solid #202119;
  border-radius: 2px;
  padding: 1px;
}

.battery-fill {
  display: block;
  width: 80%;
  height: 100%;
  background: #202119;
  border-radius: 1px;
}

.battery-nub {
  width: 2px;
  height: 0.5em;
  background: #202119;
  border-radius: 0 1px 1px 0;
}

/* screen body / menu list */

.screen-body {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #e7e8e2;
}

.menu-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  background: #e7e8e2;
  transition: transform 200ms ease, opacity 200ms ease;
}

.menu-screen.enter-from-right {
  transform: translateX(100%);
}

.menu-screen.leave-to-right {
  transform: translateX(100%);
  opacity: 0;
}

.menu-list {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.menu-list-inner {
  transition: transform 160ms ease;
}

.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4%;
  font-size: clamp(9px, calc(var(--ipod-w) * 0.042), 17px);
  color: #1c1e18;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  cursor: var(--cursor-hand);
}

.menu-row .chevron {
  opacity: 0.55;
  font-size: 0.9em;
}

.menu-row.selected {
  background: linear-gradient(to bottom, #8fb4e0 0%, #4a8fd4 8%, #1d5fa8 92%, #1a55a0 100%);
  color: #fff;
  border-bottom-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.menu-row.selected .chevron {
  opacity: 0.9;
}

.menu-row:active:not(.selected) {
  background: rgba(0, 0, 0, 0.06);
}

.menu-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7362;
  font-size: clamp(9px, calc(var(--ipod-w) * 0.036), 15px);
  letter-spacing: 0.02em;
}

/* right-hand artwork pane — placeholder until real thumbnails exist */

.thumb-pane {
  flex: none;
  width: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  box-sizing: border-box;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.thumb-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 8%;
  background: linear-gradient(160deg, #f1f2ee 0%, #dadcd3 55%, #c5c8bd 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa093;
}

.thumb-placeholder svg {
  width: 46%;
  height: 46%;
}

.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* centered single-column layout (archive) */

.menu-screen--center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6%;
  padding: 6%;
  text-align: center;
}

/* scrollable text screens (about, gallery detail) */

.text-pane {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.text-pane-inner {
  padding: 6%;
  transition: transform 160ms ease;
}

.text-body {
  margin: 0;
  font-size: clamp(9px, calc(var(--ipod-w) * 0.036), 15px);
  line-height: 1.5;
  color: #1c1e18;
  white-space: pre-wrap;
}

.text-link-row {
  margin-top: 10%;
  font-size: clamp(9px, calc(var(--ipod-w) * 0.036), 15px);
  font-weight: 600;
  color: #1d5fa8;
  cursor: var(--cursor-hand);
}

/* archive — "under construction" */

.static-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8%;
}

.static-gif {
  max-width: 70%;
  max-height: 55%;
  border-radius: calc(var(--ipod-w) * 0.01);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.static-message {
  font-size: clamp(9px, calc(var(--ipod-w) * 0.036), 15px);
  color: #6b7362;
  letter-spacing: 0.02em;
}

/* contacts — link rows with an auto-detected platform icon */

.menu-row--link {
  justify-content: flex-start;
  gap: 4%;
}

.link-icon {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

.link-icon svg {
  width: 100%;
  height: 100%;
}

.menu-row--link .label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {

  .menu-screen,
  .menu-list-inner,
  .text-pane-inner {
    transition: none !important;
  }
}

/* ---------- click wheel ---------- */

.wheel-area {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
}

.clickwheel {
  position: relative;
  width: 76%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #48494d 0%, #2f3033 30%, #1a1b1d 72%, #0e0e10 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 3px 8px rgba(0, 0, 0, 0.5),
    inset 0 -2px 6px rgba(255, 255, 255, 0.03);
  touch-action: none;
}

.wheel-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.wheel-btn {
  position: absolute;
  border: 0;
  background: transparent;
  color: #7d7f84;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--cursor-hand);
  z-index: 1;
}

.wheel-btn svg {
  width: 42%;
  height: 42%;
}

.wheel-btn--menu {
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  height: 20%;
  font-size: clamp(8px, calc(var(--ipod-w) * 0.032), 13px);
  font-weight: 600;
  letter-spacing: 0.08em;
  align-items: flex-start;
  padding-top: 6%;
}

.wheel-btn--play {
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  height: 20%;
  align-items: flex-end;
  padding-bottom: 4%;
}

.wheel-btn--prev {
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: 22%;
  height: 44%;
  justify-content: flex-start;
  padding-left: 8%;
}

.wheel-btn--next {
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: 22%;
  height: 44%;
  justify-content: flex-end;
  padding-right: 8%;
}

.wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  height: 38%;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 38% 32%, #3a3b3f 0%, #232427 45%, #131315 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(255, 255, 255, 0.05);
  z-index: 2;
  cursor: var(--cursor-hand);
}

.clickwheel.active .wheel-center {
  filter: brightness(1.15);
}

.wheel-btn:active,
.wheel-center:active {
  filter: brightness(1.4);
}


/* ---------------------------------------------------------------
   works — year, multi-image detail, and the expanded screen
   --------------------------------------------------------------- */

/* the year sits to the left of the name while scrolling the list */

.row-year {
  flex: none;
  margin-right: 0.6em;
  font-size: 0.72em;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.menu-row.selected .row-year {
  opacity: 0.85;
}

/* Roomy rows — works only (screen.roomyRows). The whole name always shows:
   it wraps onto as many lines as it needs and the row grows with it. The
   home menu and the other lists keep their compact single-line rows. */

.menu-screen--roomy .menu-row {
  min-height: 2.3em;
  padding: 0.55em 4%;
  /* an em length, so it inherits as one and the smaller year still sits on
     the same first line as the name */
  line-height: 1.3em;
}

.menu-screen--roomy .menu-row .label {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.menu-screen--roomy .row-year,
.menu-screen--roomy .menu-row .chevron {
  align-self: flex-start;
}

/* the work's own year, above its description */

.detail-year {
  margin-bottom: 0.6em;
  font-size: clamp(8px, calc(var(--ipod-w) * 0.03), 13px);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #6b7362;
  font-variant-numeric: tabular-nums;
}

/* image pane — replaces the single thumbnail on a work's screen */

.detail-media {
  position: relative;
  flex: none;
  width: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  box-sizing: border-box;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.detail-media-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--cursor-hand);
}

/* arrows and counter only earn their place once the screen is big */

.detail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 13%;
  max-width: 40px;
  aspect-ratio: 1 / 1;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 20, 15, 0.55);
  color: #fff;
  cursor: var(--cursor-hand);
  z-index: 3;
}

.detail-arrow svg {
  width: 58%;
  height: 58%;
}

.detail-arrow--prev {
  left: 2.5%;
}

.detail-arrow--next {
  right: 2.5%;
}

.detail-counter {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  background: rgba(18, 20, 15, 0.55);
  color: #fff;
  font-size: clamp(9px, calc(var(--ipod-w) * 0.032), 13px);
  font-variant-numeric: tabular-nums;
  z-index: 3;
}

/* expand / collapse toggle, bottom-right of the screen */

.screen-zoom-btn {
  position: absolute;
  right: 3%;
  bottom: 3%;
  width: 12%;
  max-width: 38px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 24%;
  background: rgba(18, 20, 15, 0.5);
  color: #fff;
  cursor: var(--cursor-hand);
  z-index: 4;
}

.screen-zoom-btn svg {
  width: 62%;
  height: 62%;
}

.screen-zoom-btn:active,
.detail-arrow:active {
  background: rgba(18, 20, 15, 0.78);
}

/* ---------- expanded state ---------- */

.screen-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: rgba(8, 9, 7, 0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  cursor: var(--cursor-scroll);
}

body.screen-expanded .screen-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* JS pins top/left/width/height inline; these two classes only switch the
   frame out of the iPod body and turn the animation on */

.screen-frame--fixed {
  position: fixed;
  z-index: 10;
  aspect-ratio: auto;
  padding: 0.8%;
}

.screen-frame--animating {
  transition:
    top 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    left 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* with the screen this big the images are the point, so the description
   steps aside and the artwork goes full-bleed */

body.screen-expanded .text-pane {
  display: none;
}

body.screen-expanded .detail-media {
  flex: 1;
  width: 100%;
  padding: 0;
  border-left: 0;
  background: #101208;
}

body.screen-expanded .detail-media .thumb-img {
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

body.screen-expanded .detail-arrow,
body.screen-expanded .detail-counter {
  display: flex;
}

body.screen-expanded .detail-arrow,
body.screen-expanded .screen-zoom-btn {
  max-width: 48px;
}

@media (prefers-reduced-motion: reduce) {

  .screen-frame--animating,
  .screen-backdrop {
    transition: none !important;
  }
}