/* ale/az/ri — portfolio styles */
:root {
  --paper: #F2F0EB;
  --ink: #161616;
  --lime: #A6C63F;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --s: 1; /* stage scale, set by main.js */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--paper);
  /* dot-grid paper; main.js swaps in a hand-noised canvas version */
  background-image: radial-gradient(rgba(22,22,22,.16) 1px, transparent 1.4px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.defs { position: absolute; width: 0; height: 0; }

/* paper grain over everything */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 50;
  opacity: .13; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .09  0 0 0 0 .09  0 0 0 0 .09  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- home: fixed 1440×1024 stage, scaled to fit ---------- */
.home { overflow: hidden; height: 100vh; height: 100dvh; }
.viewport { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }
.stage {
  position: absolute; left: 50%; top: 50%;
  width: 1440px; height: 1024px;
  transform: translate(-50%, -50%) scale(var(--s));
  transform-origin: 50% 50%;
}

/* Figma geometry: x/y = top-left of the unrotated box, rotation about that corner.
   Figma rotation is counter-clockwise, CSS is clockwise, hence the minus. */
.stage > [style*="--x"] {
  position: absolute;
  left: calc(var(--x) * 1px); top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  transform-origin: 0 0;
  transform: rotate(calc(var(--r) * -1deg));
}

.sticker, .signature, .folder img { filter: url(#bleed); user-select: none; -webkit-user-drag: none; }
.sticker { object-fit: contain; pointer-events: none; }

.photo { position: absolute; inset: 0; width: 1440px; height: 1024px; pointer-events: none; filter: url(#bleed); }

/* path + links */
.path, .links {
  position: absolute; font-family: var(--mono); font-size: 14px; letter-spacing: .01em;
  filter: url(#spray-soft);
}
.path { left: 53px; top: 51px; }
.links { right: 60px; top: 51px; display: flex; gap: 8px; }
.path a, .links a { text-decoration: none; background: linear-gradient(var(--lime), var(--lime)) 0 88% / 0 38% no-repeat; transition: background-size .18s steps(3); }
.path a:hover, .links a:hover, .path a:focus-visible, .links a:focus-visible { background-size: 100% 38%; outline: none; }
.path span { opacity: .55; }
.path .here { opacity: 1; }

/* signature: ink settles on load */
.signature { object-fit: contain; animation: settle 1.4s cubic-bezier(.2,.7,.2,1) both .2s; }
@keyframes settle {
  0%   { opacity: 0; filter: url(#bleed) blur(9px); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: url(#bleed) blur(0); }
}

/* folders */
.folder { display: block; text-decoration: none; outline: none; }
.folder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.folder .f-open { visibility: hidden; }
.folder .f-icon {
  inset: auto; left: 50%; top: 58%; width: 26%; height: 34%;
  transform: translate(-50%, -50%);
}
.f-label {
  position: absolute; left: 50%; top: 90%; transform: translateX(-50%);
  margin-top: 6px; white-space: nowrap;
  font-family: var(--mono); font-size: 16px; font-weight: 500;
  padding: 0 4px;
  background: linear-gradient(var(--lime), var(--lime)) 0 85% / 0 42% no-repeat;
}
/* hard stop-motion cut: no transitions on the swap */
.folder:hover, .folder:focus-visible { z-index: 40; }
.folder:hover .f-closed, .folder:focus-visible .f-closed { visibility: hidden; }
.folder:hover .f-open,   .folder:focus-visible .f-open   { visibility: visible; }
.folder:hover .f-icon,   .folder:focus-visible .f-icon   { top: 66%; }
.folder:hover .f-label,  .folder:focus-visible .f-label  { background-size: 100% 42%; }

/* ---------- phone / narrow: stack instead of scaling ---------- */
@media (max-width: 820px), (max-aspect-ratio: 3/4) {
  .home { overflow: auto; height: auto; }
  .viewport { height: auto; overflow: visible; }
  .stage {
    position: relative; left: auto; top: auto; transform: none;
    width: 100%; height: auto; padding: 72px 16px 40px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px 16px; justify-items: center;
  }
  .stage > [style*="--x"] { position: relative; left: auto; top: auto; }
  .path { left: 16px; top: 20px; }
  .links { left: 16px; right: 16px; top: 44px; font-size: 13px; flex-wrap: wrap; }
  .photo {
    position: relative; inset: auto; grid-column: 1 / -1; order: -2;
    width: min(100%, 420px); height: auto; margin: 16px 0 0;
  }
  .folder[data-name=design] { order: -1; }
  .folder[data-name=code] { order: 0; }
  .folder[data-name=film] { order: 1; }
  .folder[data-name=music] { order: 2; }
  .folder[data-name=artwork] { order: 3; }
  .folder[data-name=about] { order: 4; }
  .home { overflow-x: hidden; }
  .folder { width: min(42vw, 190px) !important; height: calc(min(42vw, 190px) * .725) !important; }
  .signature { order: 10; grid-column: 1 / -1; width: 150px !important; height: 150px !important; transform: none !important; }
  .sticker { display: none; }
  .sticker:nth-of-type(2), .sticker:nth-of-type(3) { display: block; position: absolute !important; width: 72px !important; height: 72px !important; z-index: 2; }
  .sticker:nth-of-type(2) { left: 8px !important; top: 90px !important; }
  .sticker:nth-of-type(3) { right: 8px; left: auto !important; top: 320px !important; }
}

/* ---------- folder pages ---------- */
.page { min-height: 100vh; padding: 48px 53px 96px; }
.page .path, .page .links { position: absolute; }
.page-title {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(64px, 13vw, 200px); line-height: .9; letter-spacing: -.03em;
  margin: 110px 0 12px; filter: url(#spray);
}
.page-intro { font-family: var(--mono); font-size: 15px; max-width: 46ch; margin: 0 0 72px; }
.projects { display: grid; gap: 96px; }
.project { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: 32px; align-items: start; }
.shot {
  aspect-ratio: 16 / 10; background: #fff; border: 2px solid var(--ink);
  box-shadow: 0 0 0 10px #fff, 0 6px 18px rgba(0,0,0,.08);
  display: grid; place-items: center; font-family: var(--mono); font-size: 13px; opacity: .9;
  transform: rotate(var(--t, -1deg));
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project h2 { font-size: 22px; margin: 18px 0 4px; }
.project .meta { font-family: var(--mono); font-size: 13px; opacity: .7; margin: 0; }
.notes { display: grid; gap: 22px; padding-top: 18px; }
.note {
  background: var(--lime); color: var(--ink); padding: 16px; width: 200px; min-height: 140px;
  font-size: 15px; line-height: 1.3;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  transform: rotate(var(--t, 2deg));
  position: relative;
}
.note::after { /* grain on the note */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.back { position: fixed; right: 40px; bottom: 32px; width: 110px; filter: url(#bleed); z-index: 10; }
.back img { width: 100%; display: block; }
@media (max-width: 820px) {
  .page { padding: 32px 16px 120px; }
  .page .links { top: 44px; left: 16px; right: 16px; }
  .page-title { margin-top: 90px; }
  .project { grid-template-columns: 1fr; }
  .notes { grid-auto-flow: column; overflow-x: auto; padding-bottom: 8px; }
  .back { right: 16px; bottom: 16px; width: 80px; }
}

/* motion off */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* design label sits above its folder so the photo doesn't cover it */
.folder[data-name=design] .f-label { top: auto; bottom: 94%; margin: 0 0 4px; }
@media (max-width: 820px), (max-aspect-ratio: 3/4) {
  .folder[data-name=design] .f-label { top: 90%; bottom: auto; margin-top: 6px; }
}