/* Desk stage — layout zones from mockups/DesktopMockup-1920x1040-v1.png
   Prop shadows: filter drop-shadow (alpha-shaped), not box-shadow. */

:root {
  --desk-shadow: drop-shadow(2px 4px 6px rgba(40, 30, 20, 0.32));
  --desk-shadow-soft: drop-shadow(1px 2px 3px rgba(40, 30, 20, 0.22));
  --font-hand: "Over the Rainbow", "Segoe Print", "Comic Sans MS", cursive;
  --font-marker: "Permanent Marker", "Segoe Print", "Comic Sans MS", cursive;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Shared with the identity modal. Film window of slide-mount.png (50% film). */
  --slide-window-left: 25.9%;
  --slide-window-top: 22.1%;
  --slide-window-width: 48.4%;
  --slide-window-height: 55.7%;
  --slide-window-right: calc(100% - var(--slide-window-left) - var(--slide-window-width));
  --slide-window-bottom: calc(100% - var(--slide-window-top) - var(--slide-window-height));
  --slide-film-lift: rgba(255, 255, 255, 0.75);
  --ipad-screen-left: 5.62%;
  --ipad-screen-top: 10.5%;
  --ipad-screen-width: 87.36%;
  --ipad-screen-height: 78.99%;
  --ipad-wallpaper: url("../img/desk/IP-WP-SpacePapercut-DARK-UPSIZED.jpg");
  /* Locked desk picture (mock 1920×1040). Nudge these, not per-prop %. */
  --desk-art-w: 1920;
  --desk-art-h: 1040;
  /* Phone portrait picture (mock 440×956 CSS / iPhone 17 Pro Max @3x). */
  --desk-phone-w: 440;
  --desk-phone-h: 956;
}

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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  background: #2a2218;
  color: #1a1a1a;
}

.skip-links {
  position: absolute;
  left: 0.5rem;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transform: translateY(-120%);
}

.skip-links:focus-within {
  transform: none;
  top: 0.5rem;
}

.skip-link {
  padding: 0.5rem 1rem;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
}

.skip-link:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Full-viewport desk surface — single large texture (not tiled) */
.desk {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: #c4a574;
  background-image: url("../img/desk/wood-desk-4k.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  /* Cover fills viewport at every breakpoint; may crop edges, never tiles */
  background-size: cover;
}

/* Tall / phone: still cover; bias slightly toward top of desk surface */
@media (max-width: 720px) {
  .desk {
    background-position: center top;
  }
}

/* Ultrawide: keep cover so grain fills without letterboxing */
@media (min-aspect-ratio: 21/9) {
  .desk {
    background-size: cover;
    background-position: center center;
  }
}

/* Prop containing block. Below 1024px it is the viewport (phone later).
   Desktop: real 1920/1040 box sized to COVER the window — not transform:scale().
   Flip with data-fit="contain" on #desk if cover crops too hard. */
.desk-stage {
  position: absolute;
  inset: 0;
  overflow: visible;
  container-type: inline-size;
  container-name: desk-stage;
}

@media (min-width: 1024px) {
  /* Real box centered with left/top — no translate(). A transform would
     leave the layout box at top:50%/left:50%, so focusing the iPad or
     notepad (bottom of the stage) scrolls the page and hides the top. */
  .desk-stage {
    inset: auto;
    --stage-w: max(100vw, calc(100dvh * var(--desk-art-w) / var(--desk-art-h)));
    --stage-h: calc(var(--stage-w) * var(--desk-art-h) / var(--desk-art-w));
    width: var(--stage-w);
    height: var(--stage-h);
    left: calc((100% - var(--stage-w)) / 2);
    top: calc((100% - var(--stage-h)) / 2);
  }

  .desk[data-fit="contain"] .desk-stage {
    --stage-w: min(100vw, calc(100dvh * var(--desk-art-w) / var(--desk-art-h)));
  }
}

/* Generic prop shell */
.prop {
  position: absolute;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.prop img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: var(--desk-shadow);
}

.prop--interactive {
  cursor: pointer;
}

.prop--interactive:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 4px;
  border-radius: 4px;
}

.prop--interactive:hover img {
  filter: var(--desk-shadow) brightness(1.03);
}

/* ---- Placement zones — match mockups/DesktopMockup-1920x1040-v1.png
   Containing block is .desk-stage (viewport below 1024px; locked 1920/1040 on desktop).
   Position/size in % of the stage; rotate in deg.
   Negative top/left/right/bottom intentionally crop props off-stage (mock style). ---- */

/* Plant — top-left; leaves hang off left/top edge */
.prop--succulent {
  top: -18%;
  left: -10%;
  width: 25%;
  z-index: 4;
  transform: rotate(0deg);
}

/* Business card fan — upper center-left; mock fan opens left/up */
.prop--cards {
  top: -4%; /* prior -1%, up 3% */
  left: 14%; /* prior 12%, right 2% */
  width: 28%;
  height: 28%;
  z-index: 6;
  transform: rotate(5deg); /* +5° CW on whole stack */
}

.card-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.card-stack .card {
  position: absolute;
  width: 56%;
  left: 24%;
  top: 14%;
}

.card-stack .card img {
  filter: var(--desk-shadow-soft);
}

/* Under-cards — wider fan, stronger desk-life skew (mock) */
.card-stack .card:nth-child(1) {
  transform: rotate(-28deg) translate(-32%, 14%);
  z-index: 1;
}

.card-stack .card:nth-child(2) {
  transform: rotate(-18deg) translate(-18%, 8%);
  z-index: 2;
}

.card-stack .card:nth-child(3) {
  transform: rotate(-10deg) translate(-8%, 3%);
  z-index: 3;
}

/* Top card = only hit target — mock top card is clearly tilted */
.card-stack .card--top {
  transform: rotate(-16deg) translate(0, 0);
  z-index: 4;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  width: 56%;
  left: 24%;
  top: 14%;
}

.card-stack .card--top img {
  filter: var(--desk-shadow);
}

.card-stack .card--top:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 4px;
}

/* Sticky — snug right of fan; mock has clear clockwise tilt */
.prop--sticky {
  top: 4%;
  right: 47%;
  width: 12%;
  z-index: 0; /* below keyboard (z-index: 1) */
  transform: rotate(11deg);
}

.prop--sticky .sticky-face {
  position: relative;
}

.prop--sticky .sticky-text {
  position: absolute;
  inset: 15% 10% 12% 10%;
  padding-left: 0.4em;
  font-family: var(--font-hand);
  font-size: max(0.7rem, 1.2cqw);
  line-height: 1.22;
  color: #1a2744;
  overflow: hidden;
  pointer-events: none;
  text-align: left;
}

.prop--sticky .sticky-text strong {
  display: block;
  font-weight: 400; /* script face — size carries the title */
  font-size: 1.55em;
  margin-bottom: 0.2em;
  letter-spacing: 0.02em;
}

.prop--sticky .sticky-text ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Keyboard — huge, ~10° CW from flat; hangs ~-50% off top + right (mock crop).
   Lowest prop z so it sits just above the desktop surface. */
.prop--keyboard {
  top: -55%;
  right: -60%;
  width: 117.3%; /* prior 123.5% × 0.95 */
  z-index: 1;
  transform: rotate(18deg);
  pointer-events: none;
}

.prop--keyboard img {
  filter: var(--desk-shadow-soft);
}

/* Pen — open wood mid-right; diagonal cap UL → nib LR toward notepad.
   Asset has nib on LEFT of PNG → ~198–205°. Dropped ~12% for keyboard room. */
.prop--pen {
  top: 35%;
  right: 5%;
  width: 35%;
  z-index: 10;
  transform: rotate(210deg);
  transform-origin: center center;
}

/* Slide pile zone — roomy center so mounts can overlap and hang */
.prop--slides {
  top: 22%;
  left: 16%;
  width: 60%;
  height: 66%;
  z-index: 5;
  pointer-events: auto;
  touch-action: none;
  overflow: visible;
}

.slide-pile {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 16.5%;
  aspect-ratio: 1909 / 1920;
  margin: 0;
  border: none;
  background: transparent;
  padding: 0;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  filter: var(--desk-shadow-soft);
  line-height: 0;
  will-change: transform;
}

.slide.is-dragging,
.slide.is-held,
.slide:active {
  cursor: grabbing;
}

.slide__mount {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* 25% white lift sits behind the mount so the 50% film reads lighter */
.slide__back {
  position: absolute;
  z-index: 0;
  left: var(--slide-window-left);
  top: var(--slide-window-top);
  right: var(--slide-window-right);
  bottom: var(--slide-window-bottom);
  background: var(--slide-film-lift);
  pointer-events: none;
}

/* Logo sits in the mount window, centered; film shows through transparent marks */
.slide__window {
  position: absolute;
  z-index: 2;
  left: var(--slide-window-left);
  top: var(--slide-window-top);
  right: var(--slide-window-right);
  bottom: var(--slide-window-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

.slide__logo {
  display: block;
  width: 88%;
  height: 88%;
  object-fit: contain;
  object-position: center center;
  box-sizing: border-box;
  background: transparent;
  pointer-events: none;
}

.slide:focus-visible {
  outline: 2px solid #2b6cb0;
  outline-offset: 2px;
}

/* Reduced-motion / Matter missing — CSS scatter */
.slide-pile--static .slide:nth-child(1)  { left: 8%;  top: 14%; }
.slide-pile--static .slide:nth-child(2)  { left: 26%; top: 4%; }
.slide-pile--static .slide:nth-child(3)  { left: 46%; top: 10%; }
.slide-pile--static .slide:nth-child(4)  { left: 14%; top: 32%; }
.slide-pile--static .slide:nth-child(5)  { left: 34%; top: 28%; }
.slide-pile--static .slide:nth-child(6)  { left: 54%; top: 24%; }
.slide-pile--static .slide:nth-child(7)  { left: 24%; top: 50%; }
.slide-pile--static .slide:nth-child(8)  { left: 46%; top: 48%; }
.slide-pile--static .slide:nth-child(9)  { left: 62%; top: 38%; }
.slide-pile--static .slide:nth-child(10) { left: 6%;  top: 44%; }
.slide-pile--static .slide:nth-child(11) { left: 68%; top: 14%; }
.slide-pile--static .slide:nth-child(12) { left: 36%; top: 36%; }
.slide-pile--static .slide:nth-child(13) { left: 20%; top: 22%; }
.slide-pile--static .slide:nth-child(14) { left: 52%; top: 46%; }
.slide-pile--static .slide:nth-child(15) { left: 30%; top: 58%; }
.slide-pile--static .slide:nth-child(16) { left: 58%; top: 8%; }
.slide-pile--static .slide:nth-child(17) { left: 12%; top: 40%; }

/* iPad Mini — large; left + bottom hang outside viewport (mock crop) */
.prop--ipad {
  bottom: -15%;
  left: -8%;
  width: 28%;
  z-index: 9;
  transform: rotate(-10deg);
  container-type: inline-size;
  container-name: ipad-prop;
}

.prop--ipad .ipad-prop__wallpaper,
.prop--ipad .ipad-prop__home {
  position: absolute;
  z-index: 1;
  left: var(--ipad-screen-left);
  top: var(--ipad-screen-top);
  width: var(--ipad-screen-width);
  height: var(--ipad-screen-height);
  pointer-events: none;
  overflow: hidden;
  border-radius: 1.15%;
}

.prop--ipad .ipad-prop__wallpaper {
  background: var(--ipad-wallpaper) center / cover no-repeat;
}

.prop--ipad .ipad-prop__home {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3.2%;
  box-sizing: border-box;
  padding: 3.6% 4%;
}

.prop--ipad .ipad-prop__widget {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 1.5cqi 2.1cqi;
  overflow: hidden;
  border: 0.28cqi solid #fff;
  border-radius: 2.2cqi;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 5.4cqi;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: right;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  background-color: #2a3348;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 1px 3px rgba(10, 16, 32, 0.18);
}

.prop--ipad .ipad-prop__widget--top {
  background-position: center top;
}

.prop--ipad .ipad-prop__widget::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to left,
    rgba(8, 12, 24, 0.48) 0%,
    rgba(8, 12, 24, 0.12) 42%,
    transparent 70%
  );
}

.prop--ipad .ipad-prop__widget-label {
  position: relative;
  z-index: 1;
}

.prop--ipad img {
  position: relative;
  z-index: 0;
}

/* Notepad — bottom-right; bottom/right hang off like mock */
.prop--notepad {
  bottom: -25%;
  right: -2%;
  width: 25%;
  z-index: 8;
  transform: rotate(12deg);
}

.prop--notepad .notepad-face {
  position: relative;
}

.prop--notepad .notepad-text {
  position: absolute;
  left: 16%;
  right: 10%;
  top: 14%;
  bottom: 8%;
  padding-left: 6%; /* clear red margin line, tracks pad width */
  font-family: var(--font-hand);
  font-size: max(0.95rem, 1.8cqw); /* tracks the stage; no rem ceiling */
  line-height: 1.35;
  color: #243052;
  text-align: left;
  overflow: hidden;
  pointer-events: none;
}

.prop--notepad .notepad-text p {
  margin: 0;
}

.prop--notepad .notepad-quote {
  display: block;
  margin-bottom: 0; /* gap owned by author padding */
}

/* Script fonts have tight visual leading — use rem padding, not em margin */
.prop--notepad .notepad-author {
  display: block;
  margin-top: 0;
  padding-top: 0.7em;
  font-size: 0.92em;
  opacity: 0.88;
}

/* Same bottom pill as the old v0 badge; now the Don't Panic link */
.desk-badge {
  position: fixed;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.desk-badge:hover,
.desk-badge:focus-visible {
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
}

.desk-badge:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Reduced motion: keep layout, drop hover brighten is fine */
@media (prefers-reduced-motion: reduce) {
  .prop--interactive:hover img {
    filter: var(--desk-shadow);
  }
}

/* Phone portrait — zones from mockups/iPhone17ProMax-Mockup-v1.png.
   Stage is the visible Safari box (inset 0). A 440/956 cover double-crops
   under chrome and ate the keyboard in pass 2. One map. Succulent off. */
@media (max-width: 720px) and (orientation: portrait) {
  .desk-stage {
    inset: 0;
  }

  .prop--succulent {
    display: none;
  }

  /* Keyboard along the top; command row as the front of the crop */
  .prop--keyboard {
    top: -14%;
    right: -20%;
    left: auto;
    width: 122%;
    transform: rotate(10deg);
  }

  /* Card fan, upper left, on the wood (not on the keys) */
  .prop--cards {
    top: 8%;
    left: -6%;
    width: 58%;
    height: 24%;
    transform: rotate(5deg);
  }

  /* Sticky under the keys, room for three teaser lines */
  .prop--sticky {
    top: 17%;
    right: 5%;
    left: auto;
    width: 26%;
    z-index: 3;
    transform: rotate(8deg);
  }

  .prop--sticky .sticky-text {
    font-size: max(0.84rem, 3.6cqw);
  }

  /* Compact center pile */
  .prop--slides {
    top: 34%;
    left: 7%;
    width: 84%;
    height: 33%;
  }

  .slide {
    width: 20%;
  }

  /* iPad hangs off bottom-left */
  .prop--ipad {
    bottom: -16%;
    left: -14%;
    width: 48%;
    transform: rotate(-10deg);
  }

  /* Pen in the wood between iPad and notepad. PNG nib is LEFT;
     CSS +deg is clockwise with y-down, so -92° = nib down, slight left tilt. */
  .prop--pen {
    top: 55%;
    right: auto;
    left: 59%;
    width: 59%;
    transform: rotate(-92deg);
  }

  /* Notepad hangs off bottom-right */
  .prop--notepad {
    bottom: -10%;
    right: -10%;
    width: 44%;
    transform: rotate(10deg);
  }

  .prop--notepad .notepad-text {
    font-size: max(1.02rem, 4.6cqw);
  }

  .desk-badge {
    bottom: max(0.6rem, env(safe-area-inset-bottom, 0px));
  }
}