/* Fixed bars: the case study header, the homepage top bar (index.html) and the footer share one
   height, a 90% page-colored background with a light blur of what scrolls behind, and a 1px rule
   across the full window. */
:root{
  --bar-h:64px;
  --bar-bg:color-mix(in srgb, var(--bg) 90%, transparent);
  --bar-blur:blur(12px);
}

/* Motion: one set of curves and timings for the whole site. */
:root{
  --ease-out:cubic-bezier(.2,.75,.25,1);   /* arriving: quick start, soft landing */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* travelling across the screen */
  --ease-in:cubic-bezier(.5,0,.75,0);      /* leaving */
  --dur-quick:0.2s;  /* exits, hovers */
  --dur-base:0.55s;  /* arrivals */
  --dur-slow:0.7s;   /* big moves, like the homepage sliding away */
  --stagger:80ms;    /* gap between items arriving in sequence */
  --enter-rise:10px; /* how far an arriving item travels up */
}

/* Title type: ARS Maquette Pro for page titles and card titles across the site. Labels, body and
   small text keep their fonts (IBM Plex Mono, DM Sans). Self-hosted from the licensed files. */
@font-face{
  font-family:'ARS Maquette Pro';
  src:url('fonts/ARSMaquettePro-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'ARS Maquette Pro';
  src:url('fonts/ARSMaquettePro-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
:root{--font-title:'ARS Maquette Pro','DM Sans',sans-serif;}

/* Enter pattern. Give an element .enter (and --i, its place in a sequence). It stays hidden until an
   ancestor gets .is-entered, then rises and fades in after --enter-wait plus its stagger. Leaving is
   quick and all at once. Uses `translate`, so it composes with any transform the element already has. */
.enter{
  opacity:0;
  translate:0 var(--enter-rise);
  visibility:hidden;
  transition:opacity var(--dur-quick) var(--ease-in), translate var(--dur-quick) var(--ease-in), visibility 0s linear var(--dur-quick);
}
.is-entered .enter{
  opacity:1;
  translate:none;
  visibility:visible;
  transition:opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out), visibility 0s;
  transition-delay:calc(var(--enter-wait, 0s) + var(--i, 0) * var(--stagger));
}
@media (prefers-reduced-motion: reduce){
  .enter, .is-entered .enter{translate:none;transition-duration:0.01s;transition-delay:0s;}
}

/* Case study header: previous / next project, same type as the homepage top bar. */
.site-header{
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:50;
  height:var(--bar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(60px, calc(50vw - 640px));
  background:var(--bar-bg);
  -webkit-backdrop-filter:var(--bar-blur);
  backdrop-filter:var(--bar-blur);
  border-bottom:1px solid var(--divider);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.06em;
  pointer-events:none;
  transition:background-color 0.35s ease, border-color 0.35s ease;
}
.site-header a{
  pointer-events:auto;
  color:var(--muted);
  text-decoration:none;
  transition:color 0.15s ease;
}
.site-header a:hover{color:var(--accent);}
.site-header{gap:18px;justify-content:flex-start;} /* Home + Previous stay left; Next is pushed right */
.site-header .nav-next{margin-left:auto;}
.site-header .nav-home{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-left:-6px; /* optical: line the house up with the page's left edge */
  border-radius:50%;
}
.site-header .nav-home svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.site-header a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* Fixed footer shared by every page: contacts on the left, theme toggle on the right.
   Matches the homepage's top bar (weather / coordinates) type and insets. */
.site-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:var(--bar-h);
  padding:0 max(60px, calc(50vw - 640px));
  background:var(--bar-bg);
  -webkit-backdrop-filter:var(--bar-blur);
  backdrop-filter:var(--bar-blur);
  border-top:1px solid var(--divider);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--muted);
  pointer-events:none;
  transition:background-color 0.35s ease, border-color 0.35s ease;
}
.site-footer > *{pointer-events:auto;}

.footer-contacts{
  display:flex;
  align-items:center;
  list-style:none;
}
.footer-contacts li + li::before{
  content:"\00b7";
  margin:0 8px;
}
.footer-contacts a{
  color:var(--muted);
  text-decoration:none;
  transition:color 0.15s ease;
}
.footer-contacts a:hover{color:var(--accent);}

.footer-controls{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Background terrain picker (homepage only), styled to match the theme toggle. */
.terrain-picker{
  display:flex;
  align-items:center;
  padding:2px;
  border-radius:999px;
  border:1px solid var(--divider);
  transition:border-color 0.35s ease;
}
.terrain-picker button{
  height:28px;
  padding:0 11px;
  border:none;
  border-radius:999px;
  background:transparent;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--muted);
  cursor:pointer;
  transition:color 0.2s ease, background-color 0.2s ease;
}
.terrain-picker button:hover{color:var(--strong);}
.terrain-picker button[aria-pressed="true"]{
  color:var(--accent);
  background:var(--glass-indicator);
}
.terrain-picker button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.theme-toggle{
  position:relative;
  display:flex;
  align-items:center;
  padding:2px;
  border-radius:999px;
  border:1px solid var(--divider);
  transition:border-color 0.35s ease;
}
.theme-toggle .indicator{
  position:absolute;
  top:2px;
  left:2px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--glass-indicator);
  transition:transform 0.3s cubic-bezier(.4,0,.2,1), background-color 0.35s ease;
}
:root[data-theme="light"] .theme-toggle .indicator{transform:translateX(28px);}
.theme-toggle button{
  position:relative;
  z-index:1;
  width:28px;
  height:28px;
  border:none;
  background:transparent;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:pointer;
  transition:color 0.35s ease;
}
.theme-toggle button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
:root:not([data-theme="light"]) .theme-toggle .moon-btn{color:var(--accent);}
:root[data-theme="light"] .theme-toggle .sun-btn{color:var(--accent);}

.site-footer a:focus-visible, .site-footer button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (max-width:860px){
  :root{--bar-h:56px;}
  .site-header{padding:0 28px;font-size:10px;}
  .site-footer{padding:12px 28px;font-size:10px;flex-wrap:wrap-reverse;gap:10px;}
  .terrain-picker button{padding:0 8px;font-size:10px;}
}