/* Developer portfolio page (DRAFT, local only). Same look as the other inner pages (site-v2): serif headings in white,
   mint eyebrows, .btn buttons, hairline lists and dark panels from styles.css. This file only adds what the page has extra:
   the portrait box, the tool strips, the project screens, the shelf and the contact card. No glow.
   Scoped to <body class="dev-page">. */
/* ---------- typography and text colours (Rati, 2026-10-17; this page first, then the new branding) ----------
   FiraGO for headings and text (one family draws both Georgian and Latin, 16 weights with italics; SIL Open Font
   License), Fira Code for code-like text (labels, counters, tags, tech strips; Georgian letters fall back to FiraGO).
   Letter spacing at the font's normal value (Rati: the first test was too tight). Colours: big headings in a flat silver
   gradient (no glow), smaller headings white, text light grey, small labels mint.
   The fonts themselves are self-hosted site-wide in styles.css ([BRAND-FONTS], 2026-10-17). */
html .dev-page, html[lang="ka"] .dev-page{
  --font-display:"FiraGO", system-ui, sans-serif;
  --font-body:"FiraGO", system-ui, sans-serif;
  --font-code:"Fira Code", "FiraGO", ui-monospace, Menlo, monospace;
  --dev-silver:linear-gradient(180deg, #f6f7fa 0%, #d6d9e0 48%, #8c94a3 100%);
  font-family:var(--font-body);
}
.dev-page h1, .dev-page h2, .dev-page h3, .dev-page h4{ letter-spacing:0 !important; }
/* big headings: heavy, silver */
.site-v2 .dev-hero h1{ font-weight:900; line-height:.98; }
html[lang="en"] .site-v2 .dev-hero h1{ text-transform:uppercase; }
.dev-page .dev-hero h1, .dev-page .cards-header h2, .dev-page .control-section h2, .dev-page #contact .hx-h2{ background:var(--dev-silver); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.06em; }
.dev-page .cards-header h2, .dev-page .control-section h2, .dev-page #contact .hx-h2{ font-weight:800; }
/* smaller headings white, text light grey */
.dev-page h3, .site-v2.dev-page .feature-text h3, .dev-page .dev-card-s h3{ font-weight:700; color:#fff; }
.dev-page .dev-hero-copy > p, .dev-page .dev-card p, .dev-page .cards-header p, .dev-page .feature-text p, .dev-page .dev-card-s p:last-child, .dev-page .hx-sub{ color:#c9ccd3; }
/* code-like text */
.dev-page .hx-eyebrow, .dev-page .dev-stack-label, .dev-page .dev-proj-num, .dev-page .dev-card-s-tag, .dev-page .dev-shelf-count, .dev-page .dev-track .pill{ font-family:var(--font-code); letter-spacing:.02em; }
.dev-page .hx-eyebrow, .dev-page .dev-card-s-tag, .dev-page .dev-proj-num{ color:var(--hx-mint); }

.dev-page .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- hero: split screen (Rati, 2026-10-17) ----------
   The page background's own characters take the photo's colours inside .dev-portrait (home-motion.js [FX-PORTRAIT]).
   Desktop: the text on the left (left-aligned, on clean background), the face on the right filling the full height, so
   nothing overlaps. Phones and narrow tablets: the face first, the text below it. */
.dev-hero{ position:relative; min-height:calc(100svh - 64px); display:flex; align-items:flex-end; justify-content:flex-start; overflow:hidden; padding-bottom:clamp(28px, 5vw, 64px); }
.site-v2 .dev-hero{ text-align:left; }
.site-v2 .dev-hero::after{ display:none; }   /* no hairline under this hero: the falling code fades out instead (Rati, 2026-10-17) */
/* 2026-10-18 (Rati): portrait centred, big text bottom left, no buttons */
.dev-hero-copy{ position:relative; z-index:1; width:auto; }
.site-v2 .dev-hero h1{ margin-left:0; margin-right:0; font-size:clamp(56px, 9vw, 140px); line-height:.95; margin-bottom:.22em; }
.dev-hero-copy > p{ font-size:clamp(20px, 2vw, 30px); line-height:1.3; white-space:nowrap; color:#fff; max-width:none; margin:0; }
.dev-hero-copy > p strong{ font-weight:800; color:#fff; }
.dev-hero-copy > p em{ font-style:italic; font-weight:400; color:#c9ccd3; }   /* screenshot style: bold part, then a lighter italic part on the same line (Rati, 2026-10-18) */
.dev-portrait{ position:absolute; z-index:0; left:50%; transform:translateX(-50%); bottom:0; width:min(70%, calc((100svh - 64px) * .8)); aspect-ratio:4 / 5; pointer-events:none;
  --fx-fade:.86; }   /* where the face starts fading out (fraction of the box height; read by home-motion.js): late here, so shirt and tie show */

@media (max-aspect-ratio: 4/5), (max-width: 860px){
  .dev-hero{ min-height:0; flex-direction:column; align-items:stretch; padding-bottom:0; }
  .site-v2 .dev-hero{ text-align:center; }
  .dev-hero-copy{ width:auto; }
  .site-v2 .dev-hero h1, .dev-hero-copy > p{ margin-left:auto; margin-right:auto; }
  .site-v2 .dev-hero h1{ font-size:clamp(46px, 13vw, 90px); }
  .dev-hero-copy > p{ font-size:clamp(17px, 4.6vw, 26px); max-width:none; white-space:normal; }
  /* the box is wider than the screen (sides cropped) so the face fills the width; its faded lower part tucks under the text */
  .dev-portrait{ position:relative; right:auto; bottom:auto; left:50%; transform:translateX(-50%); width:min(120vw, 76svh); flex:none; margin:-24px 0 calc(min(120vw, 76svh) * -0.22); --fx-fade:.72; --fx-bright:1.15; }
}

/* ---------- about ---------- */
.dev-about{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(24px, 5vw, 80px); align-items:start; }
.dev-about h2{ margin-bottom:0; }
.dev-card{ padding:clamp(24px, 3vw, 40px); border:1px solid var(--hx-line-strong); border-radius:var(--hx-r-xl); background:var(--hx-panel); box-shadow:var(--hx-edge); }
.dev-card p{ margin:0; font-size:clamp(16px, 1.35vw, 18px); line-height:1.7; color:var(--text); }
.dev-card .w{ opacity:.25; transition:opacity .25s ease; }
.dev-card .w.on{ opacity:1; }

.dev-stack{ margin-top:clamp(40px, 5vw, 64px); }
.dev-stack-label{ font-size:13px; font-weight:500; color:var(--text-faint); margin:0 0 14px !important; }
.dev-tracks{ display:grid; gap:10px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.dev-track{ display:flex; gap:10px; width:max-content; animation:dev-marquee 46s linear infinite; }
.dev-track.rev{ animation-direction:reverse; animation-duration:58s; }
.dev-track .pill{ flex:none; white-space:nowrap; }
@keyframes dev-marquee{ to{ transform:translateX(-50%); } }

/* ---------- selected work ---------- */
.dev-proj{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); gap:clamp(24px, 5vw, 72px); align-items:center; margin-top:clamp(48px, 7vw, 96px); }
.dev-proj.flip{ grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); }
.dev-proj.flip .dev-proj-copy{ order:2; }
.dev-proj-num{ font-size:13px; font-weight:500; color:var(--hx-mint); margin:0 0 12px !important; }
.dev-proj .feature-text p{ color:var(--text-dim); max-width:48ch; }
.dev-links{ margin-top:20px; flex-wrap:wrap; gap:6px 10px; }
.dev-links .btn svg{ margin-left:2px; }
.dev-shot{ perspective:1600px; }
.dev-frame{ border-radius:14px; overflow:hidden; border:1px solid var(--hx-line-strong); background:var(--hx-panel); box-shadow:var(--hx-edge); transform:rotateX(calc((1 - var(--p, 1)) * 18deg)) scale(calc(.94 + var(--p, 1) * .06)); transform-origin:50% 100%; }
.dev-frame img{ display:block; width:100%; height:auto; }
.dev-frame-bar{ display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-bottom:1px solid var(--hx-line); }
.dev-frame-bar i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.16); }
.dev-frame-bar span{ margin:0 auto; transform:translateX(-14px); font-size:11.5px; color:var(--text-faint); }

/* ---------- shelf: cards slide sideways while you scroll down (script sets the section height and --x) ---------- */
.dev-shelf{ position:relative; margin-top:var(--hx-space); }
.dev-shelf-pin{ position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; gap:clamp(20px, 4vh, 40px); padding-top:72px; box-sizing:border-box; overflow:hidden; }
.dev-shelf-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; width:100%; }
.dev-shelf-head .cards-header{ margin:0; }
.dev-shelf-head .cards-header h2{ margin-bottom:0; }
.dev-shelf-count{ margin:0; font:500 14px ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--text-faint); font-variant-numeric:tabular-nums; padding-bottom:.5em; white-space:nowrap; }
.dev-shelf-count span:first-child{ color:#fff; }
.dev-shelf-track{ display:flex; gap:16px; width:max-content; padding-inline:max(clamp(16px, 4vw, 32px), calc((100vw - 1136px) / 2)); transform:translate3d(var(--x, 0px), 0, 0); will-change:transform; }
.dev-card-s{ flex:none; width:clamp(260px, 28vw, 360px); padding:16px 16px 22px; border:1px solid var(--hx-line-strong); border-radius:var(--hx-r-lg); background:var(--hx-panel); box-shadow:var(--hx-edge); }
.dev-card-s-img, .dev-card-s-big{ aspect-ratio:16 / 10; border-radius:12px; overflow:hidden; border:1px solid var(--hx-line); margin:0 0 18px; background:#000; }
.dev-card-s-img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.dev-card-s-big{ display:grid; place-items:center; font-family:var(--font-display); font-size:clamp(48px, 5vw, 72px); color:var(--text-dim); }
.dev-card-s-tag{ margin:0 0 8px; font-size:13px; font-weight:500; color:var(--hx-mint); }
.dev-card-s h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(21px, 2vw, 26px); line-height:1.2; letter-spacing:-0.015em; margin:0 0 8px; color:#fff; }
html[lang="ka"] .dev-card-s h3{ line-height:1.35; letter-spacing:0; }
.dev-card-s p:last-child{ margin:0; color:var(--text-dim); font-size:15px; line-height:1.6; }
/* no script, or reduced motion: a normal sideways-scrolling row, no pinning */
.dev-shelf:not(.is-pinned) .dev-shelf-pin{ position:static; height:auto; padding-top:0; }
.dev-shelf:not(.is-pinned) .dev-shelf-track{ width:auto; overflow-x:auto; transform:none; scroll-snap-type:x proximity; padding-bottom:12px; }
.dev-shelf:not(.is-pinned) .dev-card-s{ scroll-snap-align:start; }


@media (max-width:900px){
  .dev-about, .dev-proj, .dev-proj.flip{ grid-template-columns:minmax(0, 1fr); }
  .dev-proj.flip .dev-proj-copy{ order:0; }
}
@media (prefers-reduced-motion: reduce){
  .dev-track{ animation:none; }
  .dev-card .w{ opacity:1; }
  .dev-frame{ transform:none; }
}