/* =====================================================================
   shared.css — tokens, reset, icon system, header/breadcrumb chrome and
   buttons common to every page (index.html, case-study-wise.html,
   case-study-expedia.html). Page-specific layout (the mosaic board, the
   Wise/Expedia case-study sections) lives in each page's own <style>.
   ===================================================================== */

/* Lets same-origin navigations between these pages cross-fade natively in
   browsers that support the View Transitions API (Chromium-based as of
   this writing) — the "subtle transition when opening a page" the multi-
   page navigation asked for. Browsers without support just ignore this
   and get the plain per-page fade-in below instead. */
@view-transition{ navigation:auto; }

:root{
  --ground:#170a0b;
  --teal:#33a58e;
  --teal-photo:#2C8D79;
  --teal-btn:#1D6D5D;
  --plum:#2f1417;
  --olive:#a9b171;
  --olive-chip:#adb967;
  --cream:#e9feff;
  --ink:#170a0b;
  --ink2:#1c1c18;
  --bio-muted:#4b5e63;
  --accent:#ff6b36;
  --mint:#c5fbe5;
  --seg-track:#302828;
  --seg-border:#434240;
  --focus:#ffb27a;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  /* --header-h (set by shared.js from the header's real offsetHeight) now
     measures only the header's own painted box — topbar + crumbs + the 1px
     rule, no trailing margin — so its translucent/blurred background stops
     exactly at the rule line instead of bleeding past it. The 22px
     breathing room below the rule is added back here instead, so page
     content still clears the header by the same total distance as before. */
  padding-top:calc(var(--header-h, 69px) + 22px);
  background:var(--ground);
  color:var(--mint);
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2{ margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ================= Loading state (every page) =================
   A small glowing orb that wanders to a new random point inside its zone
   every ~1.2-1.6s (shared.js drives the randomness via the --ox/--oy custom
   properties; this file only reacts to them), trailed by three dimmer
   copies whose slower transition makes them visibly chase the lead orb —
   a cheap, canvas-free stand-in for a particle trail. Below it, the
   wordmark reuses the landing page's "Hi! I am Giulia" type (DM Sans 800)
   instead of a separate label style. Hides once shared.js's minimum-wait +
   fonts-ready promise resolves. */
#loader{
  position:fixed; inset:0; z-index:300;
  background:var(--ground);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:18px;
  transition:opacity .5s ease, visibility .5s ease;
}
#loader[data-hide="true"]{ opacity:0; visibility:hidden; pointer-events:none; }

.loader-orbit{ position:relative; width:min(70vw,640px); height:min(42vh,320px); flex:none; }
.loader-orb{
  position:absolute; top:50%; left:50%;
  width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border-radius:50%;
  background:var(--mint);
  transform:translate(var(--ox,0px), var(--oy,0px));
  transition:transform 1.15s cubic-bezier(.45,.05,.25,1);
  box-shadow:
    0 0 4px 1px var(--mint),
    0 0 10px 3px var(--teal);
}
.loader-orb.o2{ width:10px; height:10px; margin:-5px 0 0 -5px; opacity:.6; transition-duration:1.35s; box-shadow:0 0 3px 1px var(--mint), 0 0 7px 2px var(--teal); }
.loader-orb.o3{ width:8px;  height:8px;  margin:-4px 0 0 -4px; opacity:.4; transition-duration:1.55s; box-shadow:0 0 3px 1px var(--mint); }
.loader-orb.o4{ width:5px;  height:5px;  margin:-2.5px 0 0 -2.5px; opacity:.22; transition-duration:1.75s; box-shadow:none; }

.loader-mark{
  font-family:"DM Mono",monospace; font-weight:400;
  font-size:11px; line-height:1.05;
  color:var(--cream);
}

@media (prefers-reduced-motion:reduce){
  .loader-orb{ transition:none; }
  .loader-orb.o2,.loader-orb.o3,.loader-orb.o4{ display:none; }
}

/* ---- Icons — Lucide, inlined as SVG (24x24 source paths) ---- */
.ic{
  width:1em; height:1em; flex:none;
  display:inline-block; vertical-align:-.14em;
  stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.ic-fill{ fill:currentColor; stroke:none; }

/* ---- Page entrance: a subtle fade every page plays on load, the fallback
   (and, in supporting browsers, companion) to the cross-document view-
   transition above. Opacity-only on purpose — no transform/translateY here.
   A `transform` on body (even a momentary one mid-animation, regardless of
   fill-mode) makes body a new containing block for every position:fixed
   descendant it has — the site header, the loader, the hero card — which
   pins them to body's own (possibly page-length) box instead of the real
   viewport for as long as the animation is active. The loader in particular
   needs to be correctly centered from frame one, so transform is off the
   table here entirely. Reduced-motion gets an instant, un-animated show. */
body{
  animation:pageFadeIn .5s ease both;
}
@keyframes pageFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  body{ animation:none; }
}

/* ================= Top bar (every page) =================
   Fixed to the viewport with a translucent, blurred backdrop. Doubles as
   the site's back-navigation: the identity pill always links to the
   portfolio home, so it's never a dead end. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:40;
  background:rgba(23,10,11,.62);
  backdrop-filter:blur(2px) saturate(1.1);
  -webkit-backdrop-filter:blur(2px) saturate(1.1);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:22px clamp(16px,3.5vw,40px) 16px;
}
.identity-pill{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(201,221,214,.14);
  border:1px solid rgba(197,251,229,.13);
  padding:7px 16px;
  border-radius:100px;
  text-decoration:none;
}
.identity-pill .who{
  font-family:"DM Mono",monospace; font-weight:500; font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mint);
}
.identity-pill .what{
  font-family:"DM Mono",monospace; font-weight:300; font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mint);
}
.live-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(51,165,142,.55);
  flex:none;
}
@media (prefers-reduced-motion:no-preference){
  .live-dot{ animation:pulseDot 2.4s ease-in-out infinite; }
}
@keyframes pulseDot{
  0%,100%{ box-shadow:0 0 0 0 rgba(51,165,142,.5); }
  50%{ box-shadow:0 0 0 4px rgba(51,165,142,0); }
}

.seg{
  display:inline-flex; gap:4px;
  background:var(--seg-track);
  border:1px solid var(--seg-border);
  padding:4px; border-radius:100px;
}
.seg-opt{
  border:none; cursor:pointer;
  padding:5px 14px;
  border-radius:100px;
  font-family:"DM Mono",monospace; font-weight:500; font-size:10px;
  letter-spacing:.02em;
  background:transparent;
  color:rgba(197,251,229,.6);
}
.seg-opt[aria-pressed="true"]{ background:var(--ground); color:var(--mint); }
.seg-opt:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.seg-opt:hover:not([aria-pressed="true"]){ color:var(--mint); }

/* Back-to-portfolio control + breadcrumb row, shown on the case-study
   pages in place of the Canvas/List toggle. */
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none;
  font-family:"DM Mono",monospace; font-weight:500; font-size:10px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--mint);
  padding:7px 14px;
  border-radius:100px;
  border:1px solid rgba(197,251,229,.13);
  background:rgba(201,221,214,.14);
}
.back-link:hover{ background:rgba(201,221,214,.24); }
.back-link:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.back-link .ic{ width:13px; height:13px; stroke-width:2.5; }

.crumbs{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:0 clamp(16px,3.5vw,40px) 16px;
  font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.04em; text-transform:uppercase;
}
.crumbs a{ color:rgba(197,251,229,.65); text-decoration:none; }
.crumbs a:hover{ color:var(--mint); text-decoration:underline; text-underline-offset:2px; }
.crumbs .crumb-sep{ color:rgba(197,251,229,.35); }
.crumbs .crumb-current{ color:var(--mint); }

.rule{
  height:1px;
  margin:0 clamp(16px,3.5vw,40px) 0;
  background:linear-gradient(90deg, rgba(197,251,229,.35), rgba(197,251,229,.05));
}

/* ---- Buttons (hero CTAs + case-study CTAs share these) ---- */
.cta{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px;
  border-radius:100px;
  text-decoration:none;
  font-family:"DM Mono",monospace; font-weight:500; font-size:11px; letter-spacing:.02em;
  text-transform:uppercase;
  border:none; cursor:pointer;
}
.cta-explore{ background:#000; color:#fff; }
.cta-explore:hover{ background:#222; }
.cta-resume{ background:var(--teal-btn); color:#fff; }
.cta-resume:hover{ background:#175a4d; }
.cta:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cta .arrow{ width:1.1em; height:1.1em; stroke-width:2.5; }