/* =====================================================================
   HERO.CSS — the homepage hero only (index.html)
   Loaded after styles.css, so rules here win over styles.css.

   The hero is the first screen of the homepage: the headline, the three
   big pixel icons (My Work, camera, About Me), the Scroll cue, and the
   six pieces of stationery around them.

   Good to know
   - The pixel art itself is drawn by assets/home.js.
   - The stationery is placed automatically by home.js, so the left/top
     values in this file are only where items start before it runs.
     To change WHERE they end up, edit TARGETS in home.js.
   - Sizes and tilts of the stationery (width, rotate) DO come from here.
   - Like styles.css, this file was adjusted in passes: later rules
     override earlier ones with the same selector.
   ===================================================================== */
#pixel-paper #main.pp-home {
  --art-size: clamp(210px, min(29vw, 38svh), 480px);
  box-sizing: border-box;
  min-height: calc(100svh - var(--hero-header, 84px));
  max-width: none;
  width: 100%;
  margin: 0;
  padding: clamp(16px, 3svh, 42px) 8vw max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 4svh, 56px);
}

#pixel-paper #main .pp-intro {
  padding: 0;
  display: grid;
  gap: clamp(12px, 2svh, 24px);
}

#pixel-paper #main .pp-intro h1 {
  margin: 0;
  line-height: 1.15;
}

#pixel-paper #main .pp-intro .pp-overline {
  margin: 0;
  font-size: clamp(12px, 1.15vw, 20px);
  line-height: 1.5;
}

#pixel-paper #main .pp-intro p {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 20px);
  line-height: 1.4;
}

#pixel-paper #main .pp-scene {
  width: 100%;
  max-width: 1800px;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(16px, 3svh, 40px) clamp(16px, 4vw, 80px);
}

#pixel-paper #main .pp-scene-note {
  position: static;
  grid-column: 1 / -1;
  font-size: clamp(16px, 1.25vw, 24px);
}

#pixel-paper #main .pp-object {
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.8px;
  margin: 0;
  padding: 0;
  translate: none;
}

#pixel-paper #main .pp-object .pp-sprite {
  width: var(--art-size);
  max-width: 100%;
  height: auto;
}

#pixel-paper #main .pp-camera .pp-sprite {
  width: calc(var(--art-size) * 1.08);
}

#pixel-paper #main .pp-note .pp-sprite {
  width: calc(var(--art-size) * .65);
}

#pixel-paper #main .pp-object-label {
  margin: 0;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.4;
}

#pixel-paper #main .pp-under {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  justify-content: center;
}

#pixel-paper #main .pp-restored-cue {
  position: static;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: auto;
  min-width: 64px;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  color: var(--blue);
  text-decoration: none;
  font: 400 clamp(22.5px, 1.2vw, 27px)/1.2 salted, Gabarito, sans-serif;
}

#pixel-paper #main .pp-restored-cue img {
  width: clamp(27.5px, 1.5vw, 34px);
  height: auto;
  aspect-ratio: 22 / 32;
  image-rendering: pixelated;
  animation: none;
}

/* =====================================================================
   STATIONERY: SIZES, TILTS AND STARTING SPOTS
   ===================================================================== */

/* Decorative stationery lives in the side gutters, away from the reading area. */
#pixel-paper #main > canvas {
  left: 1vw;
  right: auto;
}

#pixel-paper #main > .pp-ruler,
#pixel-paper #main > .pp-sd-card,
#pixel-paper #main > .pp-sticker {
  left: auto;
  right: 1vw;
}

@media (max-width: 767.98px) {
  #pixel-paper #main.pp-home {
    --art-size: clamp(96px, 13.8svh, 150px);
  }

  #pixel-paper #main .pp-under,
  #pixel-paper #main > canvas {
    display: none;
  }
}

@media (max-width: 767.98px) and (max-height: 740px) {
  #pixel-paper #main.pp-home {
    --art-size: 96px;
    justify-content: center;
  }

  #pixel-paper #main .pp-object {
    flex-direction: row;
    gap: 16px;
    justify-content: flex-start;
    width: min(100%, 290px);
    justify-self: center;
  }

  #pixel-paper #main .pp-object .pp-sprite {
    flex: 0 0 96px;
    width: 96px;
  }

  #pixel-paper #main .pp-note .pp-sprite {
    flex-basis: 64px;
    margin-inline: 16px;
  }

  #pixel-paper #main .pp-object-label {
    text-align: left;
  }

  #pixel-paper #main .pp-intro .pp-overline {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pixel-paper #main .pp-object:hover .pp-sprite {
    transform: none;
  }
}

/* Stationery arrangements: clear side gutters on desktop, top/bottom bands on mobile. */
#pixel-paper #main.pp-home {
  position: relative;
  padding-bottom: clamp(112px, 13svh, 160px);
}

#pixel-paper #main .pp-intro h1 {
  font-size: clamp(46.8px, min(6.76vw, 9.1svh), 114.4px);
}

#pixel-paper #main .pp-under {
  position: absolute;
  inset: auto 0 clamp(16px, 3svh, 40px);
}

#pixel-paper #main > canvas {
  display: block;
  position: absolute;
  max-width: none;
  bottom: auto;
  width: clamp(60px, 7.25vw, 140px);
}

#pixel-paper #main > .pp-paperclip {
  width: clamp(30px, 3vw, 54px);
  right: auto;
}

#pixel-paper #main > .pp-pencil {
  right: auto;
}

#pixel-paper #main > .pp-eraser {
  width: clamp(60px, 5.5vw, 100px);
  right: auto;
}

#pixel-paper #main > .pp-sd-card {
  width: clamp(64px, 5vw, 100px);
  left: auto;
}

#pixel-paper #main > .pp-ruler {
  left: auto;
}

#pixel-paper #main > .pp-sticker {
  width: clamp(60px, 4vw, 88px);
  left: auto;
}

@media (max-width: 1024px) and (min-width: 769px) {
  #pixel-paper #main.pp-home {
    padding-inline: 12vw;
  }

  #pixel-paper #main .pp-intro h1 {
    font-size: clamp(46.8px, 6vw, 70px);
  }
}

@media (max-width: 767.98px) {
  #pixel-paper #main > .pp-ruler {
    bottom: 3%;
  }

  #pixel-paper #main > .pp-eraser {
    bottom: 2%;
  }

  #pixel-paper #main > .pp-sticker {
    bottom: 1%;
  }
}

@media (max-width: 767.98px) and (max-height: 740px) {
  #pixel-paper #main .pp-scene {
    gap: 10px;
  }
}

/* Intentional stationery layout and mobile icon rail. */
#pixel-paper #main.pp-home {
  isolation: isolate;
}

/* Stationery sits above the hero content layers (z-index 2), otherwise the
   full-width scroll-cue row and the icon buttons cover it and block dragging. */
#pixel-paper #main > canvas[data-art] {
  z-index: 3;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

#pixel-paper #main > canvas[data-art].is-dragging {
  cursor: grabbing;
}

#pixel-paper #main .pp-intro,
#pixel-paper #main .pp-scene {
  position: relative;
  z-index: 2;
}

#pixel-paper #main .pp-under {
  z-index: 2;
}

#pixel-paper #main > .pp-paperclip {
  left: 2.5%;
  top: 10%;
  transform: rotate(18deg);
}

#pixel-paper #main > .pp-pencil {
  left: 1%;
  top: 42%;
  transform: rotate(-65deg);
}

#pixel-paper #main > .pp-eraser {
  left: 3%;
  top: 82%;
  transform: rotate(15deg);
}

#pixel-paper #main > .pp-sd-card {
  right: 2.5%;
  top: 9%;
  transform: rotate(-15deg);
}

#pixel-paper #main > .pp-ruler {
  right: 1%;
  top: 43%;
  transform: rotate(75deg);
}

#pixel-paper #main > .pp-sticker {
  right: 3%;
  top: 82%;
  transform: rotate(-12deg);
}

@media (max-width: 767.98px) {
  #pixel-paper #main.pp-home {
    min-height: calc(100svh - var(--hero-header, 84px));
    justify-content: flex-start;
    gap: clamp(8px, 1.5svh, 14px);
    padding: clamp(22px, 4svh, 34px) 12px max(20px, env(safe-area-inset-bottom));
  }

  #pixel-paper #main .pp-intro {
    gap: 8px;
  }

  #pixel-paper #main .pp-intro h1 {
    font-size: clamp(38px, 9vw, 54px);
    line-height: 1.08;
  }

  #pixel-paper #main .pp-intro h1 > span {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }

  #pixel-paper #main .pp-intro .pp-overline {
    display: block;
    font-size: 11px;
    line-height: 1.4;
  }

  #pixel-paper #main .pp-scene {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 252px);
    gap: clamp(2px, .8svh, 7px);
  }

  #pixel-paper #main .pp-scene-note {
    display: none;
  }

  #pixel-paper #main .pp-object {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    min-height: 104px;
    gap: 10px;
    text-align: left;
  }

  #pixel-paper #main .pp-object .pp-sprite,
  #pixel-paper #main .pp-camera .pp-sprite,
  #pixel-paper #main .pp-note .pp-sprite {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    max-width: none;
  }

  #pixel-paper #main .pp-object .pp-sprite > canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
  }

  #pixel-paper #main .pp-object-label {
    text-align: left;
  }

  #pixel-paper #main .pp-under,
  #pixel-paper #main > .pp-paperclip,
  #pixel-paper #main > .pp-pencil,
  #pixel-paper #main > .pp-eraser,
  #pixel-paper #main > .pp-sd-card,
  #pixel-paper #main > .pp-ruler,
  #pixel-paper #main > .pp-sticker {
    display: block;
  }

  #pixel-paper #main .pp-under {
    display: none;
  }

  #pixel-paper #main > .pp-paperclip {
    right: auto;
    width: clamp(24px, 7vw, 30px);
    transform: rotate(18deg);
  }

  #pixel-paper #main > .pp-pencil {
    left: auto;
    width: clamp(56px, 14vw, 76px);
    transform: rotate(68deg);
  }

  #pixel-paper #main > .pp-sd-card {
    right: auto;
    transform: rotate(-15deg);
  }

  #pixel-paper #main > .pp-ruler {
    left: auto;
    width: clamp(64px, 17vw, 88px);
    transform: rotate(75deg);
  }

  #pixel-paper #main > .pp-eraser {
    right: auto;
    transform: rotate(15deg);
  }

  #pixel-paper #main > .pp-sticker {
    left: auto;
    transform: rotate(-12deg);
  }
}

@media (max-width: 767.98px) and (max-height: 740px) {
  #pixel-paper #main.pp-home {
    gap: 6px;
    padding-top: 16px;
  }

  #pixel-paper #main .pp-intro h1 {
    font-size: clamp(36px, 8vw, 48px);
  }

  #pixel-paper #main .pp-object,
  #pixel-paper #main .pp-object .pp-sprite,
  #pixel-paper #main .pp-camera .pp-sprite,
  #pixel-paper #main .pp-note .pp-sprite {
    min-height: 92px;
    height: 92px;
    flex-basis: 92px;
    width: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pixel-paper #main .pp-object .pp-sprite {
    transition: none;
  }

  #pixel-paper #main .pp-object:hover .pp-sprite,
  #pixel-paper #main .pp-object:focus-visible .pp-sprite {
    transform: none;
  }
}

/* =====================================================================
   PHONES AND TABLETS
   ===================================================================== */

/* A consistent mobile art frame, with stationery anchored to the icon rows. */
@media (max-width: 767.98px) {
  #pixel-paper #main.pp-home {
    --mobile-art: clamp(108px, 14svh, 120px);
    padding-top: 16px;
  }

  #pixel-paper #main .pp-intro .pp-overline {
    width: 100%;
    max-width: none;
    text-align: center;
    justify-self: center;
  }

  body.home-notes-draft #pixel-paper #main .pp-scene {
    width: calc(100% - 100px);
    max-width: 300px;
    row-gap: 12px;
  }

  body.home-notes-draft #pixel-paper #main .pp-object {
    width: 100%;
    height: auto;
    min-height: var(--mobile-art);
    gap: 12px;
  }

  #pixel-paper #main .pp-object .pp-sprite,
  #pixel-paper #main .pp-camera .pp-sprite,
  #pixel-paper #main .pp-note .pp-sprite {
    flex: 0 0 var(--mobile-art);
    width: var(--mobile-art);
    height: var(--mobile-art);
    min-height: 0;
    margin: 0;
  }

  #pixel-paper #main .pp-object .pp-sprite > canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #pixel-paper #main .pp-object-label {
    font-size: 14px;
  }

  #pixel-paper #main > canvas[data-art] {
    bottom: auto;
  }

  #pixel-paper #main > .pp-paperclip {
    left: 3%;
  }

  #pixel-paper #main > .pp-pencil {
    right: 1%;
  }

  #pixel-paper #main > .pp-sd-card {
    left: 0;
    width: 44px;
  }

  #pixel-paper #main > .pp-ruler {
    right: 0;
  }

  #pixel-paper #main > .pp-eraser {
    left: 1%;
    width: 44px;
  }

  #pixel-paper #main > .pp-sticker {
    right: 2%;
    width: 40px;
  }
}

/* Phone/tablet: illustrated sections stack with captions underneath. */
@media (max-width: 1024px) {
  #pixel-paper #main.pp-home {
    justify-content: flex-start;
    padding: 28px 16px 40px;
    gap: 28px;
  }

  #pixel-paper #main .pp-intro h1 {
    font-size: clamp(48px, 7.5vw, 76px);
    line-height: 1.12;
  }

  #pixel-paper #main .pp-intro h1 > span {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }

  #pixel-paper #main .pp-intro .pp-overline {
    display: block;
    width: 100%;
    max-width: none;
    text-align: center;
    font-size: clamp(11px, 1.7vw, 16px);
  }

  body.home-notes-draft #pixel-paper #main .pp-scene {
    grid-template-columns: 1fr;
    width: min(64%, 380px);
  }

  #pixel-paper #main .pp-scene-note {
    display: none;
  }

  body.home-notes-draft #pixel-paper #main .pp-object {
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 44px;
    gap: 8px;
    justify-content: center;
  }

  #pixel-paper #main .pp-object .pp-sprite,
  #pixel-paper #main .pp-camera .pp-sprite,
  #pixel-paper #main .pp-note .pp-sprite {
    flex: none;
    width: clamp(132px, 25vw, 200px);
    height: clamp(132px, 25vw, 200px);
    min-height: 0;
    margin: 0;
  }

  #pixel-paper #main .pp-object .pp-sprite > canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
  }

  #pixel-paper #main .pp-object-label {
    text-align: center;
    font-size: clamp(16px, 2vw, 20px);
  }

  #pixel-paper #main .pp-under {
    margin-top: 12px;
  }

  #pixel-paper #main > .pp-paperclip {
    left: 7%;
    right: auto;
    width: 30px;
    transform: rotate(-24deg);
  }

  #pixel-paper #main > .pp-pencil {
    left: auto;
    right: 3%;
    width: clamp(72px, 10vw, 112px);
    transform: rotate(56deg);
  }

  #pixel-paper #main > .pp-sd-card {
    left: 2%;
    right: auto;
    width: clamp(42px, 6vw, 62px);
    transform: rotate(22deg);
  }

  #pixel-paper #main > .pp-ruler {
    left: auto;
    right: 1%;
    width: clamp(80px, 12vw, 130px);
    transform: rotate(-68deg);
  }

  #pixel-paper #main > .pp-eraser {
    left: 3%;
    right: auto;
    width: 48px;
    transform: rotate(-17deg);
  }

  #pixel-paper #main > .pp-sticker {
    left: auto;
    right: 7%;
    width: 44px;
    transform: rotate(18deg);
  }
}

@media (min-width: 1024.01px) {
  #pixel-paper #main > .pp-paperclip {
    left: 4%;
    top: 17%;
    transform: rotate(-22deg);
  }

  #pixel-paper #main > .pp-pencil {
    left: .5%;
    top: 53%;
    transform: rotate(-58deg);
  }

  #pixel-paper #main > .pp-eraser {
    left: 12%;
    top: 86%;
    transform: rotate(-15deg);
  }

  #pixel-paper #main > .pp-sd-card {
    right: 3%;
    top: 31%;
    transform: rotate(21deg);
  }

  #pixel-paper #main > .pp-ruler {
    right: .5%;
    top: 64%;
    transform: rotate(68deg);
  }

  #pixel-paper #main > .pp-sticker {
    right: 18%;
    top: 88%;
    transform: rotate(16deg);
  }
}

/* Center the lettering on the note, below the tape
   (% of the note drawing, 48 x 58 canvas pixels). */
#pixel-paper #main .pp-note-text {
  left: 50%;
  top: 54%;
  width: 100%;
  /* scale(0.88) shrinks the lettering a touch so "CONTACT" fits the note */
  transform: translate(-50%, -50%) scale(0.88);
  text-align: center;
}

@media (max-width: 1024px) {
  #pixel-paper #main .pp-folders .pp-sprite {
    width: clamp(152px, 28.75vw, 230px);
  }

  #pixel-paper #main .pp-camera .pp-sprite {
    width: clamp(185px, 35vw, 280px);
  }

  #pixel-paper #main .pp-folders .pp-sprite > canvas,
  #pixel-paper #main .pp-camera .pp-sprite > canvas {
    height: auto;
    max-height: none;
  }

  #pixel-paper #main .pp-under {
    display: flex;
    position: static;
    justify-content: center;
    padding-top: 20px;
  }

  #pixel-paper #main.pp-home {
    padding-bottom: 36px;
  }
}

@media (max-width: 1024px) {
  body.home-notes-draft #pixel-paper #main .pp-scene {
    row-gap: 48px;
  }
}

/* Lift dragged stationery above the scene; GSAP owns scale and shadow. */
#pixel-paper #main > canvas[data-art].is-dragging {
  z-index: 5;
}

/* A little extra breathing room between the name and the descriptor line. */
#pixel-paper #main .pp-intro .pp-overline {
  margin-top: clamp(6px, .7vw, 12px);
}


/* =====================================================================
   THREE BIG ICONS: SAME SIZE AND LEVEL AT EVERY SCREEN SIZE
   Each icon has a box (.pp-sprite) whose size the rules above set for each
   screen size, and inside it the drawing plus its lettering (.pp-art).
   - The boxes in a row are always the same height (on desktop the folder
     and note stretch to match the camera, which sets the row height), so
     the layout, Scroll button and stationery stay where they were.
   - Every drawing is --icon-art (72%) of its box's height, centred, so all
     three are the same height and line up top and bottom. Each drawing's
     width follows its own shape (--art-ratio = width / height).
   To make all three icons bigger or smaller, change --icon-art.
   ===================================================================== */
#pixel-paper #main .pp-object {
  --icon-art: .72;
}

#pixel-paper #main .pp-folders { --art-ratio: calc(100 / 78); }
#pixel-paper #main .pp-camera  { --art-ratio: calc(74 / 54); }
#pixel-paper #main .pp-note    { --art-ratio: calc(48 / 58); }

#pixel-paper #main .pp-object .pp-sprite {
  position: relative;
  container-type: size;   /* lets .pp-art size itself from the box height */
}

#pixel-paper #main .pp-art {
  position: absolute;
  left: 50%;
  top: 50%;
  height: calc(100cqh * var(--icon-art));
  width: calc(100cqh * var(--icon-art) * var(--art-ratio));
  transform: translate(-50%, -50%);
  container-type: inline-size;   /* lettering sizes from the drawing width */
}

#pixel-paper #main .pp-art > canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  image-rendering: pixelated;
}

/* Desktop: icons sit side by side. The camera's box sets the row height
   (its original shape, 104 x 86); the folder and note boxes stretch to it. */
@media (min-width: 1024.01px) {
  #pixel-paper #main .pp-object {
    align-self: stretch;
  }

  #pixel-paper #main .pp-camera .pp-sprite {
    flex: none;
    aspect-ratio: 104 / 86;
  }

  #pixel-paper #main .pp-folders .pp-sprite,
  #pixel-paper #main .pp-note .pp-sprite {
    flex: 1 1 auto;
    min-height: 0;
  }
}