/* ============================================================
   PORTFOLIO DESIGN SYSTEM — shared styles
   Linked by portfolio.html (.page-landing) and
   shortlist_project.html (.page-projects).
   Art assets live in /asset_final.
   ============================================================ */

:root {
  /* ---- color palette ---- */
  --c-paper:      #FFFDF6;  /* projects page paper            */
  --c-paper-warm: #FFFAF2;  /* landing page paper             */
  --c-sand:       #F6EEE1;  /* pending placeholder stripe     */
  --c-ink:        #1a1a1a;  /* hard outlines / borders        */

  --c-blue:     #668BD1;  /* programming / project titles     */
  --c-teal:     #53BCBC;  /* design + art                     */
  --c-orange:   #DA5022;  /* data analysis                    */
  --c-red:      #C95D5C;  /* primary red: links, captions     */
  --c-red-ink:  #BC3838;  /* red outline strokes              */
  --c-red-deep: #BC5353;  /* intro / nav red text             */
  --c-pink:     #D89C9C;  /* muted pink: descriptions         */
  --c-pink-lt:  #F2C2C1;  /* footstep trail                   */

  /* ---- type families ---- */
  --font-display: 'Instrument Sans', sans-serif; /* big headings              */
  --font-body:    'Tilt Neon', sans-serif;       /* descriptions, captions, UI */
  --font-ui:      'Inter', sans-serif;           /* projects nav               */

  /* ---- type scale ----
     sizes are cqw (1cqw = 1% of the local container width) so type scales
     with its container; pair each size with its tracking. */
  --fs-display: 6.35cqw;  --ls-display: 0.571cqw;  /* project title   */
  --fs-body:    2.12cqw;  --ls-body:    0.190cqw;  /* description      */
  --fs-action:  2.65cqw;  --ls-action:  0.238cqw;  /* "More Projects"  */
  --fs-nav:     1.98cqw;                            /* nav item         */
  --fs-caption: 1.59cqw;                            /* footer caption   */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
}
body.page-landing  { background: var(--c-paper-warm); }
body.page-projects { background: var(--c-paper); }

/* ============================================================
   TEXT DESIGN SYSTEM
   Each `.t-*` class is one role: it sets family + size + tracking
   + casing only. Position/color are applied separately so the
   roles stay reusable across pages.
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  line-height: 0.9;
  text-transform: capitalize;
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: 1.1;
  text-transform: capitalize;
}
.t-action {
  font-family: var(--font-body);
  font-size: var(--fs-action);
  letter-spacing: var(--ls-action);
  text-transform: capitalize;
}
.t-nav {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-nav);
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
}

/* ---- shared element behaviors ---- */
.abs  { position: absolute; margin: 0; }
.link { text-decoration: none; color: inherit; transition: opacity 0.25s ease; }
.link:hover { opacity: 0.6; }

/* ============================================================
   LANDING PAGE  (portfolio.html)
   ============================================================ */
section[data-screen-label] { position: relative; }

#landing {
  height: 100vh;
  overflow: hidden;
}

/* footstep trail layer (landing + footer only) */
.footsteps {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.footstep {
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
  animation: footfade var(--fade, 4s) linear forwards;
}
.footstep svg { display: block; overflow: visible; }
@keyframes footfade {
  0%   { opacity: 0.85; }
  60%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* fixed-aspect poster (1460x950, like the mockup) scaled to fit the viewport */
.stage {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1470 / 890;
  width: min(100vw, calc(100vh * 1460 / 950));
  user-select: none;
  container-type: size;
}

.icon { position: absolute; }

/* the artwork that casts a cursor-driven shadow — crisp, hard-edged */
.casts {
  display: block;
  width: 100%;
  will-change: filter;
  filter: drop-shadow(0px 28px 0 rgba(0,0,0,0.25));
}

/* ---------- placeholder for sections pending Figma re-attach ---------- */
.pending {
  min-height: 70vh;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    -45deg,
    var(--c-paper-warm) 0px, var(--c-paper-warm) 26px,
    var(--c-sand) 26px, var(--c-sand) 28px
  );
  border-top: 2px solid var(--c-ink);
}
.pending p {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  color: #8a7f70;
  background: var(--c-paper-warm);
  border: 1.5px dashed #c9bca9;
  padding: 14px 22px;
  text-align: center;
  line-height: 1.7;
}

#tweaks-root { position: fixed; z-index: 1000; }

.icon svg { display: block; width: 100%; height: auto; }

/* hover-revealed labels */
.label {
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  white-space: nowrap;
  font-size: 2.2cqw;
  letter-spacing: 0.04em;
}
.icon:hover .label { opacity: 1; }

/* ---------- placement (percentages of the stage) ---------- */

#icon-cursor { left: 11%;  top: 12%;  width: 22%; }
#icon-cursor .label {
  left: 25%; top: -5%;
  color: var(--c-blue);
  transform: rotate(43deg);
  transform-origin: left center;
}

#icon-bulb { left: 41%; top: 8%; width: 28%; }
#icon-bulb .bulb-art { position: relative; }
#icon-bulb .bulb-lines {
  position: absolute;
  left: 3.2%; top: 2.2%;
  width: 93.5%;
}
#icon-bulb .label {
  left: 12%; top: -13%;
  width: 80%;
  height: auto;
}

#icon-pencil { left: 55%; top: 31%; width: 36%; }
#icon-pencil .label {
  left: 40%; top: 30%;
  color: var(--c-teal);
  transform: rotate(-42deg);
  transform-origin: left bottom;
}

.doodle { position: absolute; pointer-events: none; }
/* extracted doodles render as <img>; keep them filling their container */
.doodle img { display: block; width: 100%; height: auto; }
#doodle-phone  { left: 76.5%; top: 8%; width: 17%; }
#doodle-sprite { left: 30%;   top: 12%;  width: 7.5%; }
#ello-world { left: 29%;   top: 1.5%;  width: 15%; }
#social-avatars{ left: 69%; top: 1.5%; width: 15%; }
#doodle-camera { left: 76.5%; top: 64%;  width: 19%; }
#linked-in {left: 65%; top: 2.5%; width: 15%; }
#github {left: 65%; top: 2.5%; width: 15%; }

/* each icon group is its own button: re-enable clicks (the .doodle wrapper
   sets pointer-events:none) and add hover feedback */
#social-avatars .sa-bg { display: block; width: 100%; height: auto; }
#social-avatars .social-link {
  position: absolute;
  display: block;
  pointer-events: auto;          /* re-enable clicks (the .doodle wrapper disables them) */
  cursor: pointer;
  transition: opacity 0.25s ease;
}
#social-avatars .social-link img { display: block; width: 100%; height: 100%; }
#social-avatars .social-link:hover { opacity: 0.6; }

#hi-there { position: absolute; left: 8%; top: 65%; width: 22%; }
#hi-there img, #hi-there svg { display: block; width: 100%; height: auto; }

#intro {
  position: absolute;
  left: 8.4%; top: 78%;
  width: 36%;
  color: var(--c-red-deep);
  font-size: 1.64cqw;
  letter-spacing: 0.09em;
  line-height: 1.45;
}

/* ============================================================
   PROJECTS PAGE  (shortlist_project.html)
   fixed-aspect design board (1512 x 1978, the Figma frame) scaled to the
   viewport width; children are positioned in % so they scale with it.
   ============================================================ */
.board {
  position: relative;
  width: min(100vw, 1512px);
  margin: 0 auto;
  aspect-ratio: 1512 / 1978;
  overflow: hidden;
  container-type: inline-size;
}

/* line-art pieces */
.art {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* component colors / minor layout */
.title   { color: var(--c-blue); white-space: nowrap; }
#title-pogoh { white-space: normal; width: 46.4%; line-height: 0.8; }
.desc    { color: var(--c-pink); word-wrap: break-word; }
.more    { color: var(--c-red); white-space: nowrap; }
.nav     { color: var(--c-red-deep); top: 3.08%; white-space: nowrap; }
.caption { color: var(--c-red); white-space: nowrap; }

/* clickable social icons in the "wanna talk?" bubble */
.social { position: absolute; display: block; transition: opacity 0.25s ease; }
.social:hover { opacity: 0.6; }
.social img { display: block; width: 100%; height: 100%; }

/* ============================================================
   ABOUT PAGE  (about.html)
   same fixed-aspect design board, sized to the "about" frame
   (1512 x 1769); children positioned in % so they scale with it.
   ============================================================ */
body.page-about { background: var(--c-paper); }
.board-about { aspect-ratio: 1512 / 1769; }

/* nav items are real links on this page */
.nav-link { color: var(--c-red-deep); white-space: nowrap; }

/* "Hi there! / I hope you like my website." (Tilt Neon, board-relative) */
#about-greeting {
  color: var(--c-red-deep);
  font-family: var(--font-body);
  font-size: 1.587cqw;      /* 24px on the 1512-wide board */
  letter-spacing: 0.143cqw; /* 2.16px tracking              */
  line-height: 1.3;
}
#about-greeting p { margin: 0; }

/* gentle, slow floating bob for the about clouds — staggered so they
   drift out of sync. translate is in cqw so the amplitude scales with
   the board. */
@keyframes cloud-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.9cqw); }
}
.cloud-bob { animation: cloud-bob 7s ease-in-out infinite; will-change: transform; }
#about-cloud1 { animation-duration: 7s;   animation-delay: 0s; }
#about-cloud2 { animation-duration: 5.5s; animation-delay: -2s; }
#about-cloud3 { animation-duration: 6.5s; animation-delay: -1s; }
#about-cloud4 { animation-duration: 8s;   animation-delay: -3.5s; }

@media (prefers-reduced-motion: reduce) {
  .cloud-bob { animation: none; }
}

/* ============================================================
   PROJECTS (EXPANDED) PAGE  (project.html)
   tall fixed-aspect board (1512 x 3488, the "expanded out
   sections" frame) scaled to viewport width; children in %.
   ============================================================ */
body.page-project { background: #FFFCF6; }
.board-project { aspect-ratio: 1512 / 3488; }

/* project descriptions (gray, capitalized body type) */
.proj-desc {
  color: #656565;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  text-transform: capitalize;
  line-height: 1.1;
}

/* skill-tag pills */
.tag-row { display: flex; align-items: center; gap: 1.26cqw; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4cqw 0.4cqw;
  border-radius: 0.66cqw;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  text-transform: capitalize;
  white-space: nowrap;
  line-height: normal;
}
.tag-blue   { color: var(--c-blue);   background: rgba(102, 139, 209, 0.26); }
.tag-orange { color: var(--c-orange); background: rgba(217, 80, 34, 0.26); }
.tag-teal   { color: var(--c-teal);   background: rgba(83, 188, 188, 0.26); }

/* ============================================================
   STACK "ACCESS" PAGES  (programming.html / data-science.html /
   design.html) — full-screen category overlays. Fixed-aspect
   board (1512 x 982) scaled to viewport width; children in %.
   The three doodles (cursor / bulb / pencil) are the same art
   re-placed and re-rotated on each page.
   ============================================================ */
body.page-access { background: var(--c-paper); }
.board-access { aspect-ratio: 1512 / 982; }

/* close ("x out") button, top-left */
.x-out { position: absolute; display: block; transition: opacity 0.25s ease; }
.x-out:hover { opacity: 0.7; }
.x-out img { display: block; width: 100%; height: 100%; }

/* doodle: the art is unrotated; a wrapper centers it on a point (so the
   rotation pivots about the art centre). Only the page's hero doodle
   (`.is-hero`) casts a shadow — the secondary doodles do not. */
.access-doodle {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.access-doodle img { display: block; width: 100%; height: auto; transform-origin: center; }
.access-doodle.is-hero { filter: drop-shadow(0.5cqw 0.7cqw 0.12cqw rgba(0, 0, 0, 0.22)); }

/* per-page hand-lettered title */
.access-title { position: absolute; display: block; height: auto; }

/* project entries ("RecFac") */
.access-proj {
  position: absolute;
  margin: 0;
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 4.23cqw;         /* 64px on the 1512-wide board */
  letter-spacing: 0.381cqw;   /* 5.76px tracking             */
  color: #656565;
  text-transform: capitalize;
  white-space: nowrap;
}
/* hover hint line */
.access-hint {
  position: absolute;
  margin: 0;
  font-family: var(--font-body);
  font-size: 2.12cqw;         /* 32px */
  letter-spacing: 0.19cqw;    /* 2.88px tracking */
  color: #656565;
  text-transform: capitalize;
  white-space: nowrap;
}