/* Ruhan's portfolio page. The 3D night desk is fixed behind everything; the page text rides over it.
   Layout rule (keep in step with WIDE_QUERY in camera-fit.js):
     wide screens   text column on the left, desk on the right
     everything else   desk at the top, text below */

/* ================= TOKENS ================= */
:root{
  --void:#0d0a08;      /* warm near-black, a dim room, not a cold screen */
  --paper:#f5efe6;     /* warm off-white, primary text */
  --ash:#c9bdac;       /* warm taupe, secondary text */
  --lamp:#f2a75a;      /* the one accent, desk-lamp amber */
  --lamp-soft:rgba(242,167,90,0.14);
  --hair:rgba(245,239,230,0.14);
  --shade:0 1px 2px rgba(0,0,0,0.85), 0 0 22px rgba(0,0,0,0.6);   /* keeps text readable over the scene, with no panel behind it */

  --space-1:0.25rem; --space-2:0.5rem; --space-3:1rem; --space-4:1.5rem;
  --space-5:2rem; --space-6:3rem; --space-7:4rem;
  --gutter:var(--space-4);
  --nav-h:77px;
  --col-left:clamp(1.25rem,6vw,6rem);
  --col-w:min(34rem, calc(40vw - var(--col-left) - 1rem));   /* text column on wide screens: always ends before the desk's stage (40% of the width) */
  --stage-bottom:56svh;                /* narrow screens: the desk fills the top of the screen down to here, text starts below */

  --dur-fast:150ms; --dur-base:250ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + var(--space-3))}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
html.is-loading, html.is-loading body{overflow:hidden}
body{
  background:var(--void); color:var(--paper);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:16px; line-height:1.55; overflow-x:hidden;
  pointer-events:none;   /* empty space lets clicks through to the scene; the things that need clicks switch it back on below */
}
h1,h2{font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--paper); letter-spacing:-0.01em;}
a{color:inherit}
.mono{font-family:'IBM Plex Mono',monospace}
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--lamp); color:var(--void);
  padding:var(--space-3) var(--space-4); font-weight:600; z-index:1000;
}
.skip-link:focus{ left:var(--space-3); top:var(--space-3); }
:focus-visible{ outline:2px solid var(--lamp); outline-offset:2px; }
section:focus{ outline:none }

/* things that must receive clicks (see body above) */
.site-nav, .hero-copy > *, .section-inner, .site-footer, .loader, .notice, .quality-toggle, .skip-link, #scene{ pointer-events:auto; }
#scene-fallback, .veil{ pointer-events:none; }

/* ================= LOADING SCREEN ================= */
/* Shown while the scene downloads and builds (main.js drives it). Hidden when JS is off. */
.loader{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
  background:
    radial-gradient(ellipse 60% 45% at 18% 82%, var(--lamp-soft) 0%, transparent 70%),
    var(--void);
  visibility:hidden; opacity:0;
  transition:opacity 600ms var(--ease-out), visibility 0s linear 600ms;
}
.is-loading .loader{ visibility:visible; opacity:1; transition:none; }
.loader-inner{ display:grid; gap:var(--space-3); width:min(18rem, 70vw); }
.loader-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.5rem; letter-spacing:-0.01em; }
.loader-label{ color:var(--ash); font-size:0.8125rem; letter-spacing:0.04em; }
.loader-bar{ position:relative; height:2px; background:var(--hair); overflow:hidden; }
.loader-bar span{
  position:absolute; inset:0; background:var(--lamp);
  transform-origin:left center; transform:scaleX(0.05);
  transition:transform 800ms var(--ease-out);
}
.loader-bar span::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:translateX(-100%); animation:loader-sheen 1.4s ease-in-out infinite;
}
@keyframes loader-sheen{ to{ transform:translateX(100%) } }

/* ================= 3D SCENE: fixed, behind the whole page ================= */
#scene, #scene-fallback{
  position:fixed; inset:0; width:100%; height:100svh; z-index:-2; display:block;
}
#scene-fallback{
  display:none;
  background:
    radial-gradient(1px 1px at 12% 20%, #fff 100%, transparent),
    radial-gradient(1px 1px at 26% 8%, #fff 100%, transparent),
    radial-gradient(1px 1px at 41% 30%, #fff 100%, transparent),
    radial-gradient(1px 1px at 63% 14%, #fff 100%, transparent),
    radial-gradient(1px 1px at 78% 24%, #fff 100%, transparent),
    radial-gradient(1px 1px at 88% 10%, #fff 100%, transparent),
    radial-gradient(ellipse 60% 45% at 18% 78%, var(--lamp-soft) 0%, transparent 70%),
    linear-gradient(180deg, #14100c 0%, var(--void) 55%);
}
body.no-3d #scene{ display:none }
body.no-3d #scene-fallback{ display:block }
/* Still picture shown when 3D is off: a real render of the scene, not a plain colour.
   scene-poster.webp is the desktop picture (make it with ?capture in a normal PC window).
   scene-poster-mobile.webp is the phone picture (?capture=mobile). If the desktop one isn't there yet,
   the phone picture is used on desktop too, so there is always a picture. */
#scene-fallback::before{
  content:''; position:absolute; inset:0;
  background:
    url('scene-poster.webp') center / cover no-repeat,
    url('scene-poster-mobile.webp') center top / cover no-repeat;
}
@media (max-aspect-ratio:1/1){
  #scene-fallback::before{ background:url('scene-poster-mobile.webp') center top / cover no-repeat; }
}

/* A light shade over the scene so text stays readable without a panel behind it.
   Wide screens: darker on the text side. Narrow screens: darker towards the bottom, where the text starts. */
.veil{
  position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(13,10,8,0.10) 0%, rgba(13,10,8,0.04) 30%, rgba(13,10,8,0.50) 66%, rgba(13,10,8,0.74) 100%);
}

/* ================= NAV ================= */
.site-nav{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-3) var(--space-4);
  background:rgba(13,10,8,0.74);   /* no blur: a blur over a live canvas is re-drawn every frame, which costs frame rate */
  border-bottom:1px solid var(--hair);
}
.brand{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; text-decoration:none; }
.nav-links{ display:flex; align-items:center; gap:var(--space-3); }
.nav-links a{ display:inline-flex; align-items:center; min-height:44px; padding:0 var(--space-2);
  text-decoration:none; color:var(--ash); font-size:0.92rem;
  transition:color var(--dur-fast) var(--ease-out); }
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--paper); }

/* ================= HERO ================= */
.hero{ position:relative; min-height:100svh; }
.hero-copy{
  position:relative; z-index:1; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  max-width:640px; padding:var(--stage-bottom) var(--space-4) var(--space-5);
  margin:0 auto; text-align:left;
  animation:heroIn 600ms var(--ease-out) both;
  pointer-events:none;      /* the box spans the screen; only its text and buttons take clicks */
}
.is-loading .hero-copy{ animation-play-state:paused; }   /* waits for the loading screen to leave */
@keyframes heroIn{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .hero-copy{ animation:none } }
.hero-copy h1{ font-size:clamp(2.1rem,6vw,3.8rem); line-height:1.08; }
.role{ margin-top:var(--space-3); color:var(--lamp); font-size:1.05rem; font-weight:500; }
.hero-body{ margin-top:var(--space-3); color:var(--ash); max-width:52ch; line-height:1.6; }
.hero-actions{ display:flex; gap:var(--space-3); margin-top:var(--space-5); flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 var(--space-5); font-size:0.95rem; text-decoration:none;
  border:1px solid transparent; text-shadow:none;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-primary{ background:var(--lamp); color:var(--void); font-weight:600; }
.btn-primary:hover, .btn-primary:focus-visible{ background:#ffbb70; }
.btn-ghost{ border-color:var(--hair); color:var(--paper); background:rgba(13,10,8,0.35); }
.btn-ghost:hover, .btn-ghost:focus-visible{ border-color:var(--lamp); color:var(--lamp); }

/* ================= CONTENT SECTIONS: no backgrounds, the scene shows through ================= */
main{ position:relative; z-index:1; }
main, .hero-copy, .site-footer{ text-shadow:var(--shade); }
section{ position:relative; padding:var(--space-3) var(--gutter); }
#about{ padding-top:var(--space-7); padding-bottom:var(--space-5); }
#skills{ padding-top:var(--space-5); padding-bottom:var(--space-6); }
#projects{ padding-top:var(--space-7); padding-bottom:var(--space-7); }
#services{ padding-top:var(--space-6); padding-bottom:var(--space-6); }
#contact{ padding-top:var(--space-6); padding-bottom:var(--space-7); }
.section-inner{ max-width:640px; margin:0 auto; padding:var(--space-4) 0; }
h2{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:var(--space-4); }
section + section{ border-top:1px solid var(--hair); }
.lede{ color:var(--ash); max-width:60ch; line-height:1.6; }
.lede + .lede{ margin-top:var(--space-3); }

/* skills: plain lists, no chip/pill UI */
.skill-groups{ display:grid; gap:var(--space-5); margin-top:var(--space-4); }
.skill-group h3{ font-size:0.95rem; font-weight:600; color:var(--paper); margin-bottom:var(--space-2); }
.skill-group ul{ list-style:none; color:var(--ash); }
.skill-group li{ padding:var(--space-1) 0; }
.skill-group li::before{ content:''; display:inline-block; width:5px; height:5px; margin-right:0.75em; border-radius:50%; background:var(--lamp); vertical-align:middle; }

/* projects: whole card is the link (one real link inside, stretched over the card) */
.project-list{ display:grid; gap:var(--space-4); }
.project-card{
  position:relative; display:grid; gap:var(--space-2);
  padding:var(--space-4); border:1px solid var(--hair); border-radius:6px;
  background:rgba(13,10,8,0.66);
  transition:border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.project-card:hover{ border-color:rgba(242,167,90,0.75); background:rgba(13,10,8,0.8); transform:translateY(-2px); }
.project-tag{ color:var(--ash); font-size:0.8125rem; letter-spacing:0.02em; }
.project-card h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.35rem; line-height:1.2; }
.card-link{ color:inherit; text-decoration:none; }
.card-link::after{ content:''; position:absolute; inset:0; border-radius:inherit; }
.card-link:focus-visible{ outline:none; }
.card-link:focus-visible::after{ outline:2px solid var(--lamp); outline-offset:3px; }
.project-card p{ color:var(--ash); max-width:58ch; line-height:1.6; }
.project-card .project-tag, .project-card .project-meta{ font-size:0.8125rem; }
.project-more{ display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-2); color:var(--lamp) !important; font-weight:500; }
.arrow{ display:inline-block; transition:transform var(--dur-base) var(--ease-out); }
.project-card:hover .arrow, .project-card:focus-within .arrow{ transform:translateX(4px); }

/* a card that is not a link yet: same box, no hover lift */
.project-card.is-soon{ background:rgba(13,10,8,0.5); }
.project-card.is-soon:hover{ border-color:var(--hair); background:rgba(13,10,8,0.5); transform:none; }

/* contact */
.contact-email{
  display:inline-block; margin-top:var(--space-3);
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.4rem; color:var(--lamp);
  text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.contact-email:hover, .contact-email:focus-visible{ border-color:var(--lamp); }

/* ================= FOOTER ================= */
.site-footer{
  position:relative; z-index:1; border-top:1px solid var(--hair);
  padding:var(--space-6) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}
.footer-inner{ max-width:640px; margin:0 auto; }
.footer-grid{ display:grid; gap:var(--space-5); }
.footer-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.15rem; }
.footer-line{ margin-top:var(--space-2); color:var(--ash); max-width:34ch; }
.footer-h{ margin-bottom:var(--space-1); color:var(--ash); font-size:0.8125rem; letter-spacing:0.04em; }
.footer-col ul{ list-style:none; }
.footer-col a{
  display:inline-flex; align-items:center; min-height:44px; text-decoration:none;
  border-bottom:1px solid transparent; transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover, .footer-col a:focus-visible{ color:var(--lamp); }
.footer-base{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-1) var(--space-5);
  margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--hair);
  color:var(--ash); font-size:0.75rem; line-height:1.7;
}
.footer-controls{ display:inline-flex; align-items:center; gap:var(--space-4); }
.to-top{ display:inline-flex; align-items:center; min-height:44px; color:var(--ash); text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:4px; }
.to-top:hover, .to-top:focus-visible{ color:var(--paper); text-decoration-color:var(--lamp); }
@media (min-width:700px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-6); } }

/* ================= 3D CONTROLS (main.js adds these) ================= */
.quality-toggle{
  position:fixed; left:var(--space-3); bottom:calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); z-index:90;
  min-height:44px; padding:0 var(--space-3);
  font:inherit; font-size:0.85rem; color:var(--ash); cursor:pointer;
  background:rgba(17,13,10,0.9); border:1px solid var(--hair);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.quality-toggle.is-in{ opacity:1; }
.quality-toggle:hover, .quality-toggle:focus-visible{ color:var(--paper); border-color:var(--lamp); }
.footer-link{
  display:inline-flex; align-items:center; min-height:44px; padding:0;
  font:inherit; color:var(--ash); cursor:pointer; text-shadow:inherit;
  background:none; border:0; text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:4px;
  transition:color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.footer-link:hover, .footer-link:focus-visible{ color:var(--paper); text-decoration-color:var(--lamp); }

/* The card shown when the scene is switched to a still picture: says what happened and why. */
.notice{
  position:fixed; right:var(--space-4); bottom:calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index:150;
  width:min(24rem, calc(100% - 2 * var(--space-4)));
  padding:var(--space-4); text-shadow:none;
  background:rgba(23,18,14,0.96); border:1px solid var(--hair); border-left:3px solid var(--lamp); border-radius:6px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,0.9);
  opacity:0; transform:translateY(12px);
  transition:opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.notice.is-in{ opacity:1; transform:none; }
.notice-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; color:var(--paper); }
.notice-body{ margin-top:var(--space-2); color:var(--ash); font-size:0.92rem; line-height:1.55; }
.notice-meta{ margin-top:var(--space-2); color:var(--ash); font-size:0.75rem; line-height:1.6; opacity:0.85; overflow-wrap:anywhere; }
.notice-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.notice-btn{
  min-height:44px; padding:0 var(--space-4); font:inherit; font-size:0.9rem; cursor:pointer;
  color:var(--paper); background:none; border:1px solid var(--hair);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.notice-btn:hover, .notice-btn:focus-visible{ border-color:var(--lamp); color:var(--lamp); }
.notice-btn-primary{ background:var(--lamp); border-color:var(--lamp); color:var(--void); font-weight:600; }
.notice-btn-primary:hover, .notice-btn-primary:focus-visible{ background:#ffbb70; border-color:#ffbb70; color:var(--void); }

/* ================= WIDE SCREENS: text on the left, desk on the right ================= */
@media (min-aspect-ratio:23/20) and (min-width:820px){
  :root{ --gutter:var(--col-left); }
  .veil{
    background:
      linear-gradient(90deg, rgba(13,10,8,0.74) 0%, rgba(13,10,8,0.52) 26%, rgba(13,10,8,0.12) 46%, rgba(13,10,8,0) 58%),
      radial-gradient(ellipse 95% 90% at 68% 52%, transparent 55%, rgba(0,0,0,0.34) 100%);
  }
  .hero-copy{ margin:0 0 0 var(--col-left); max-width:var(--col-w); padding:var(--space-4) 0 12vh; }
  .hero-copy h1{ font-size:clamp(2.1rem,4vw,3.8rem); }
  .section-inner{ margin:0 auto 0 0; max-width:var(--col-w); }
  .footer-inner{ margin:0 auto 0 0; max-width:42rem; }
}

/* small phones: tighter buttons so both fit on one row */
@media (max-width:480px){ .btn{ padding:0 var(--space-4); } }
/* three nav links plus the name must fit on a 320px screen */
@media (max-width:380px){ .nav-links{ gap:0; } .nav-links a{ padding:0 6px; } }

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion:reduce){
  .project-card, .arrow, .notice, .loader, .loader-bar span{ transition:none; }
  .project-card:hover{ transform:none; }
  .project-card:hover .arrow, .project-card:focus-within .arrow{ transform:none; }
  .notice{ transform:none; }
  .loader-bar span::after{ animation:none; }
}