/* Classly project page. Styles for projects/classley/case-study.html only.
   Standalone on purpose: the demo (classley.html) and Ruhan's portfolio don't share this file.
   Concept: the page is the monitor at the night desk. Warm dark room, one lamp-amber accent,
   mono type for anything that would be on a screen.
   Brightness: the base is a lifted warm brown (not near-black) and the lamp glows behind the monitor, because
   near-black reads as flat and dim on most PC screens. Secondary text is lighter to match. */

/* ================= TOKENS ================= */
:root{
  --void:#1a1410;
  --paper:#f7f1e8;
  --ash:#d2c6b5;
  --lamp:#f2a75a;
  --lamp-hover:#f7b874;
  --bezel:#2a2018;
  --hair:rgba(245,239,230,0.18);
  --wash:rgba(245,239,230,0.06);

  --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);
  --measure:1120px;
  --radius:4px;

  --dur-fast:150ms; --dur-base:250ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}
@media (min-width:900px){ :root{ --gutter:var(--space-6); } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--space-7); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--void); color:var(--paper);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:1rem; line-height:1.55; overflow-x:hidden;
}
h1,h2,h3{ font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; color:var(--paper); }
a{ color:inherit; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }
::selection{ background:var(--lamp); color:var(--void); }
:focus-visible{ outline:2px solid var(--lamp); outline-offset:3px; }

.skip-link{
  position:absolute; left:-999px; top:auto; z-index:1000;
  background:var(--lamp); color:var(--void); font-weight:600;
  padding:var(--space-3) var(--space-4);
}
.skip-link:focus{ left:var(--space-3); top:var(--space-3); }

/* Same night sky and lamp light as the 3D portfolio, without loading the scene */
.backdrop{
  position:fixed; inset:0; z-index:-1;
  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 55% 45% at 74% 24%, rgba(242,167,90,0.17) 0%, transparent 72%),
    radial-gradient(ellipse 60% 45% at 10% 100%, rgba(242,167,90,0.12) 0%, transparent 70%),
    linear-gradient(180deg, #251c15 0%, var(--void) 55%, #150f0c 100%);
}

/* ================= NAV ================= */
nav{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-2) var(--gutter);
  background:var(--void); border-bottom:1px solid var(--hair);   /* solid: text scrolling underneath must not show through */
}
.brand{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; font-size:1.05rem;
  color:var(--paper); text-decoration:none;
}
.nav-link{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--ash); font-size:0.95rem; text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.nav-link:hover, .nav-link:focus-visible{ color:var(--paper); }

/* ================= LAYOUT ================= */
main > section, footer{ width:min(100% - 2 * var(--gutter), var(--measure)); margin-inline:auto; }

.label{
  display:flex; align-items:center; gap:var(--space-2);
  color:var(--ash); font-size:0.8125rem; letter-spacing:0.04em;
}
.note{ color:var(--ash); font-size:0.8125rem; line-height:1.6; max-width:44ch; }

.btn{
  display:inline-flex; align-items:center; min-height:48px; padding:0 var(--space-5);
  background:var(--lamp); color:var(--void); font-weight:600; text-decoration:none;
  border-radius:var(--radius);
  transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover{ background:var(--lamp-hover); }
.btn:active{ transform:translateY(1px); }

/* ================= HERO ================= */
.hero{
  display:grid; gap:var(--space-6); align-items:center;
  padding-top:calc(var(--space-7) + var(--space-6)); padding-bottom:var(--space-7);
}
.hero h1{
  font-size:clamp(3.5rem, 11vw, 7.5rem); line-height:0.92; letter-spacing:-0.035em;
  margin-top:var(--space-3);
}
.hero .lede{ margin-top:var(--space-4); font-size:1.25rem; line-height:1.5; max-width:30ch; }
.hero-action{ margin-top:var(--space-5); }
.hero-action .note{ margin-top:var(--space-3); }

/* The monitor. The screen lists the demo's real sections. */
.monitor{ width:100%; max-width:34rem; justify-self:end; }
.monitor-bezel{
  padding:var(--space-2); background:var(--bezel);
  border:1px solid var(--hair); border-radius:var(--radius);
  box-shadow:0 32px 64px -32px rgba(0,0,0,0.8), 0 0 100px -24px rgba(242,167,90,0.22);   /* lamp light on the desk */
}
.monitor-screen{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:var(--space-5) var(--space-4); border-radius:2px; overflow:hidden;
  background:linear-gradient(180deg, #221810 0%, #17110c 100%); box-shadow:inset 0 0 70px rgba(242,167,90,0.09);
  font-size:0.8125rem; line-height:1.9; color:var(--ash);
}
.monitor-screen::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(245,239,230,0.03) 0 1px, transparent 1px 3px);
}
.screen-title{ color:var(--paper); margin-bottom:var(--space-3); }
.screen-title span{ color:var(--lamp); }
.screen-menu{ list-style:none; }
.screen-menu li{ display:flex; gap:var(--space-3); }
.screen-menu li span{ color:var(--lamp); }
.screen-prompt{ margin-top:var(--space-3); color:var(--paper); }
.monitor-neck{ width:3rem; height:var(--space-4); margin-inline:auto; background:var(--bezel); border-inline:1px solid var(--hair); }
.monitor-base{ width:9rem; height:var(--space-2); margin-inline:auto; background:var(--bezel); border:1px solid var(--hair); border-radius:var(--radius); }

@media (min-width:900px){
  .hero{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--space-7); padding-top:calc(var(--space-7) * 2); }
  .monitor-screen{ min-height:20rem; padding:var(--space-5); }
}

/* ================= FACTS ================= */
.facts{ display:grid; gap:var(--space-4); }
.facts div{ border-top:1px solid var(--hair); padding-top:var(--space-3); }
.facts dt{ color:var(--ash); font-size:0.8125rem; letter-spacing:0.04em; }
.facts dd{ margin-top:var(--space-1); }
@media (min-width:640px){ .facts{ grid-template-columns:repeat(2, 1fr); gap:var(--space-5); } }
@media (min-width:900px){ .facts{ grid-template-columns:repeat(4, 1fr); } }

/* ================= WHAT IT DOES ================= */
.what{ padding-top:var(--space-7); padding-bottom:var(--space-6); }
h2{ font-size:clamp(1.75rem, 4vw, 2.5rem); line-height:1.1; letter-spacing:-0.02em; }
.spec{ margin-top:var(--space-5); border-top:1px solid var(--hair); }
.spec-row{ display:grid; gap:var(--space-2); padding:var(--space-4) 0; border-bottom:1px solid var(--hair); }
.spec-row h3{ font-size:1.25rem; line-height:1.2; letter-spacing:-0.01em; }
.spec-row p{ color:var(--ash); max-width:60ch; }
@media (min-width:900px){
  .spec-row{ grid-template-columns:5fr 7fr; gap:var(--space-6); padding:var(--space-5) 0; }
}
.shot{ margin-top:var(--space-5); }
.shot img{ display:block; width:100%; height:auto; border:1px solid var(--hair); border-radius:var(--radius); }
.shot figcaption{ margin-top:var(--space-2); color:var(--ash); font-size:0.8125rem; }

/* ================= TRY IT ================= */
.try{
  display:grid; gap:var(--space-5); margin-block:var(--space-6);
  padding:var(--space-5) var(--space-4);
  background:var(--wash); border:1px solid var(--hair); border-radius:var(--radius);
}
.try .lede{ margin-top:var(--space-2); color:var(--ash); max-width:34ch; }
.steps{ margin-top:var(--space-4); padding-left:var(--space-4); color:var(--paper); }
.steps li{ padding:var(--space-1) 0 var(--space-1) var(--space-1); max-width:52ch; }
.steps li::marker{ color:var(--lamp); font-family:'IBM Plex Mono',ui-monospace,monospace; }
.try-action .note{ margin-top:var(--space-3); }
@media (min-width:900px){
  .try{ grid-template-columns:7fr 5fr; gap:var(--space-6); align-items:end; padding:var(--space-6); }
}

/* ================= NOTES ================= */
.notes{ display:grid; gap:var(--space-5); padding-top:var(--space-6); padding-bottom:var(--space-7); }
.notes h2{ font-size:1.5rem; }
.notes p{ margin-top:var(--space-2); color:var(--ash); max-width:46ch; }
@media (min-width:900px){ .notes{ grid-template-columns:repeat(2, 1fr); gap:var(--space-7); } }

/* ================= FOOTER ================= */
footer{ padding:var(--space-5) 0 var(--space-6); border-top:1px solid var(--hair); color:var(--ash); font-size:0.8125rem; }
footer a{ text-decoration:none; border-bottom:1px solid var(--hair); transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
footer a:hover, footer a:focus-visible{ color:var(--paper); border-bottom-color:var(--lamp); }

/* ================= ENTRANCE (once, on load) ================= */
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *, .monitor{ animation:rise 400ms var(--ease-out) backwards; }
  .hero-copy > :nth-child(2){ animation-delay:40ms; }
  .hero-copy > :nth-child(3){ animation-delay:80ms; }
  .hero-copy > :nth-child(4){ animation-delay:120ms; }
  .monitor{ animation-delay:120ms; }
}
@keyframes rise{ from{ opacity:0; transform:translateY(8px); } }

/* ================= SCREEN-BOOT TRANSITION =================
   Plays when a [data-boot] button is pressed (js/case-study.js), then the demo opens.
   boot-full: the ~0.7s power-on. transform and opacity only, no flashing.
   boot-fade: a plain 0.25s fade to the same screen colour, for visitors whose system asks for reduced motion
              (the design rule is to swap movement for a fade, not to drop the feedback). */
.boot{ position:fixed; inset:0; z-index:500; visibility:hidden; pointer-events:none; }
.is-booting .boot{ visibility:visible; pointer-events:auto; }
.boot-panel{
  position:absolute; inset:0; opacity:0; transform:scaleY(0.004);
  background:
    repeating-linear-gradient(to bottom, rgba(245,239,230,0.045) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 80% 60% at 50% 50%, #4a3318 0%, #2a1d10 60%, #1a120a 100%);
}
.boot-line{
  position:absolute; inset-inline:0; top:50%; height:3px; margin-top:-1px;
  background:var(--lamp); box-shadow:0 0 28px 4px rgba(242,167,90,0.55);
  opacity:0; transform:scaleX(0.15);
}
.boot-text{
  position:absolute; inset:0; margin:0; display:grid; place-items:center;
  color:var(--lamp); font-size:1.125rem; opacity:0;
  text-shadow:0 0 14px rgba(242,167,90,0.45);
}
.boot-full .boot-line{ animation:boot-line-in 200ms var(--ease-out) forwards, boot-line-out 180ms 320ms ease-in forwards; }
.boot-full .boot-panel{ animation:boot-panel 340ms 180ms cubic-bezier(0.65,0,0.35,1) forwards; }
.boot-full .boot-text{ animation:boot-text 160ms 480ms var(--ease-out) forwards; }
.boot-fade .boot-panel{ transform:none; animation:boot-fade 220ms ease-out forwards; }
.boot-fade .boot-text{ animation:boot-text 120ms 120ms ease-out forwards; }
@keyframes boot-line-in{ from{ opacity:0; transform:scaleX(0.15); } to{ opacity:1; transform:scaleX(1); } }
@keyframes boot-line-out{ from{ opacity:1; } to{ opacity:0; } }
@keyframes boot-panel{ from{ opacity:1; transform:scaleY(0.004); } to{ opacity:1; transform:scaleY(1); } }
@keyframes boot-text{ from{ opacity:0; } to{ opacity:1; } }
@keyframes boot-fade{ from{ opacity:0; } to{ opacity:1; } }