/* Portfolio case-study experience v1
 * Navigation, unified rounded chapters, ambient depth, progressive scroll reveals.
 * Deliberately retains per-project surface/accent tokens and existing UI transitions.
 */
:root { --case-nav-h: 76px; --case-motion-ease: cubic-bezier(.16,1,.3,1); }
.jiz-project-nav {
  position: sticky; top: 0; z-index: 980;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) auto;
  align-items: center; gap: clamp(10px,2vw,28px);
  width: calc(100% - 2 * var(--panel-gap,12px));
  min-height: var(--case-nav-h); box-sizing: border-box;
  margin: var(--panel-gap,12px) var(--panel-gap,12px) 0;
  padding: 9px clamp(14px,2.5vw,34px);
  border: 1px solid rgba(217,221,227,.13);
  border-radius: var(--panel-r,18px);
  background: rgba(11,13,16,.91); color: #F7F8FA;
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
  box-shadow: 0 16px 50px -31px rgba(0,0,0,.85);
}
.jiz-project-nav :is(a,button) { min-height: 44px; }
.jiz-project-nav a { text-decoration: none; }
.jiz-project-nav__brand {
  display:flex; align-items:center; gap:11px;
  color:#F7F8FA; font-size:clamp(.77rem,1.05vw,.91rem); font-weight:650;
}
.jiz-project-nav__mark {
  display:grid;place-items:center; flex:none; width:36px;height:36px;
  border:1px solid rgba(198,242,58,.55); border-radius:10px;
  color:#C6F23A; font:700 .84rem/1 var(--font-mono,monospace);letter-spacing:-.04em;
}
.jiz-project-nav__current {
  display:flex;flex-direction:column;gap:4px;align-items:center;min-width:0;text-align:center;
}
.jiz-project-nav__type {
  color:#C6F23A;font:500 .61rem/1.2 var(--font-mono,monospace);letter-spacing:.14em;
}
.jiz-project-nav__name {
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#D9DDE3;font-size:clamp(.76rem,1.05vw,.92rem);font-weight:600;
}
.jiz-project-nav__actions { display:flex;align-items:center;gap:8px;justify-content:flex-end; }
.jiz-project-nav__work {
  display:inline-flex;align-items:center;padding:0 12px;white-space:nowrap;
  color:#D9DDE3;font-size:.84rem;
}
.jiz-project-nav__exit {
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:0 15px;border:1px solid rgba(198,242,58,.4);border-radius:999px;
  background:rgba(198,242,58,.045);color:#C6F23A!important;
  font:600 .82rem/1.2 var(--font-body,Arial,sans-serif);
  white-space:nowrap;cursor:pointer;
  transition:background 200ms ease,border-color 200ms ease;
}
.jiz-project-nav :is(a,button):focus-visible {outline:2px solid #C6F23A;outline-offset:3px}
.jiz-project-nav__exit:hover {background:rgba(198,242,58,.13);border-color:#C6F23A}
.jiz-project-nav__brand:hover,.jiz-project-nav__work:hover {color:#C6F23A}
.jiz-cs-overlay > .jiz-project-nav {
  position:sticky;top:8px;z-index:100; margin-bottom:0;
}
.jiz-cs-overlay .jiz-cs .jiz-cs-wrap { padding-top:var(--panel-gap,12px); }
.jiz-cs .jiz-chapter { scroll-margin-top: calc(var(--case-nav-h) + 28px); }
:is(.jiz-cs,.tfs,.jiz-btb-detail) .jiz-chapter {
  border-radius:var(--panel-r,20px);
}
/* Case study panels get surface-aware, non-obscuring shadows. No opaque ::before
   overlays: embedded media, interactive components and text remain unaffected. */
:is(.jiz-cs,.tfs,.jiz-btb-detail) .jiz-chapter[data-cs-motion] {
  --case-glow: var(--chapter-accent,#C6F23A);
  box-shadow:
    0 26px 66px -46px rgba(0,0,0,.65),
    0 36px 100px -76px color-mix(in srgb,var(--case-glow) 54%,transparent),
    0 0 44px -44px color-mix(in srgb,var(--case-glow) 32%,transparent);
  transition:
    translate 1050ms var(--case-motion-ease),
    scale 1080ms var(--case-motion-ease),
    opacity 800ms ease,
    box-shadow 1100ms ease;
}
html[data-case-choreo="on"] :is(.jiz-cs,.tfs,.jiz-btb-detail) .jiz-chapter[data-cs-motion="pending"] {
  translate: 0 clamp(35px,5vw,70px);
  scale: .988;
  opacity: .83;
  box-shadow:0 8px 20px -20px rgba(0,0,0,.4);
}
html[data-case-choreo="on"] :is(.jiz-cs,.tfs,.jiz-btb-detail) .jiz-chapter[data-cs-motion="entered"] {
  translate: 0 0; scale:1; opacity:1;
}
/* Typography is independently observed, not gated by the parent animation.
   Limit the effect to introductory copy so lists, evidence and controls stay usable. */
:is(.jiz-cs,.tfs,.jiz-btb-detail) [data-cs-ink] {
  transition:
    translate 950ms var(--case-motion-ease) var(--case-stagger,0ms),
    opacity 830ms ease var(--case-stagger,0ms),
    filter 850ms ease var(--case-stagger,0ms);
}
html[data-case-choreo="on"] :is(.jiz-cs,.tfs,.jiz-btb-detail) [data-cs-ink="pending"] {
  translate:0 var(--case-rise,38px);
  opacity:.06;
  filter:blur(4px);
}
html[data-case-choreo="on"] :is(.jiz-cs,.tfs,.jiz-btb-detail) [data-cs-ink="entered"] {
  translate:0 0;opacity:1;filter:none;
}
:is(.jiz-cs,.tfs,.jiz-btb-detail) [data-cs-ink-role="title"] { --case-rise:58px; }
:is(.jiz-cs,.tfs,.jiz-btb-detail) [data-cs-ink-role="eyebrow"] { --case-rise:20px; }
@media(max-width:800px) {
  :root { --case-nav-h:66px; }
  .jiz-project-nav { grid-template-columns:minmax(0,1fr) auto;min-height:var(--case-nav-h); }
  .jiz-project-nav__current { display:none; }
}
@media(max-width:480px) {
  .jiz-project-nav { padding:8px 10px;gap:6px; }
  .jiz-project-nav__brandname,.jiz-project-nav__work { display:none; }
  .jiz-project-nav__mark { height:34px;width:34px; }
  .jiz-project-nav__exit { padding:0 12px;font-size:.78rem; }
  html[data-case-choreo="on"] :is(.jiz-cs,.tfs,.jiz-btb-detail) .jiz-chapter[data-cs-motion="pending"] {
    translate:0 26px;opacity:.92;scale:.995;
  }
  html[data-case-choreo="on"] :is(.jiz-cs,.tfs,.jiz-btb-detail) [data-cs-ink="pending"] { filter:blur(1px); }
}
@media(prefers-reduced-motion:reduce) {
  :is(.jiz-cs,.tfs,.jiz-btb-detail) :is(.jiz-chapter[data-cs-motion],[data-cs-ink]) {
    translate:none!important;scale:1!important;opacity:1!important;filter:none!important;transition:none!important;
  }
}
html[data-jz-motion-paused="true"] :is(.jiz-cs,.tfs,.jiz-btb-detail) :is(.jiz-chapter[data-cs-motion],[data-cs-ink]) {
  translate:none!important;scale:1!important;opacity:1!important;filter:none!important;transition:none!important;
}
@media print {
  .jiz-project-nav {display:none!important}
  :is(.jiz-cs,.tfs,.jiz-btb-detail) :is(.jiz-chapter[data-cs-motion],[data-cs-ink]) {
    translate:none!important;scale:1!important;opacity:1!important;filter:none!important;box-shadow:none!important;
  }
}

/* Continuous reading position across shared, flagship and overlay case studies. */
.jiz-project-nav::after {
  content:"";position:absolute;left:clamp(12px,2vw,30px);right:clamp(12px,2vw,30px);
  bottom:-1px;height:2px;pointer-events:none;border-radius:3px;
  background:linear-gradient(90deg,#C6F23A,#64E1FF);
  transform:scaleX(var(--project-read-progress,0));transform-origin:left;
  transition:transform 100ms linear;
}
@media(prefers-reduced-motion:reduce){.jiz-project-nav::after{transition:none}}
/* Only one progress indicator per case-study presentation. */
.jiz-cs:has(.jiz-cs-progress) .jiz-cs-progress{display:none}

.jiz-project-nav__motion{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;color:#D9DDE3;background:transparent;border:1px solid transparent;border-radius:999px;font:500 .76rem/1.2 var(--font-body,Arial,sans-serif);cursor:pointer;white-space:nowrap}
.jiz-project-nav__motion:hover,.jiz-project-nav__motion[aria-pressed="true"]{color:#C6F23A;border-color:rgba(198,242,58,.3)}
@media(max-width:480px){.jiz-project-nav__motion{font-size:.7rem;padding-inline:7px}}


/* Real identity mark in every case-study navigation variant. */
.jiz-project-nav__logo{display:block;flex:none;object-fit:contain;width:40px;height:40px;filter:none}
@media(max-width:480px){.jiz-project-nav__logo{width:36px;height:36px}}


/* Unified case study chrome — one location-aware navigation, no duplicate
   All Work links in independent prototypes, and a cinematic first scene. */
.jiz-project-nav{
  border-radius:clamp(20px,2.2vw,34px);
  background:rgba(10,13,16,.96);
}
.jiz-project-nav__actions{gap:clamp(9px,1vw,16px)}
.jiz-project-nav__current{align-items:flex-start;text-align:left}
.jiz-project-nav__brandname{white-space:nowrap}
.jiz-project-nav__exit{min-height:44px}
.jiz-cs-overlay > footer.jiz-footer{
  margin:clamp(15px,2vw,28px);
  border-radius:var(--panel-r,28px);
  position:relative;
  z-index:1;
}
.tfs[data-case-study="the-first-sentence"] .tfs-hero--immersive{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(24px,3vw,42px);
  border-radius:clamp(18px,2.4vw,30px);
  background:#0B0D10;
  aspect-ratio:16/8.2;
  display:flex;align-items:flex-end;
}
.tfs[data-case-study="the-first-sentence"] .tfs-hero--immersive > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 43%;border-radius:0;
  transform:scale(1.085);
  transform-origin:50% 43%;
  filter:saturate(.92) contrast(1.035);
}
.tfs[data-case-study="the-first-sentence"] .tfs-hero--immersive::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,9,12,.83),rgba(5,9,12,.49) 43%,transparent 83%),
             linear-gradient(0deg,rgba(5,9,12,.77),transparent 62%);
  z-index:1;
}
.tfs[data-case-study="the-first-sentence"] .tfs-hero--immersive .tfs-hero__statement{
  position:relative;z-index:2;max-width:21ch;
  margin:clamp(22px,4vw,66px);
  color:#F7F8FA!important;font:650 clamp(1.55rem,3.1vw,3.6rem)/1.14 var(--font-display,Arial,sans-serif);
  letter-spacing:-.036em;text-shadow:0 3px 22px rgba(0,0,0,.45);
}
.tfs[data-case-study="the-first-sentence"] .tfs-hero--immersive figcaption{
  position:absolute;z-index:3;left:clamp(20px,4vw,64px);bottom:12px;
  margin:0;color:rgba(247,248,250,.78);font-size:.7rem;
}
@media(max-width:700px){
 .tfs[data-case-study="the-first-sentence"] .tfs-hero--immersive{aspect-ratio:4/5;min-height:380px}
 .tfs[data-case-study="the-first-sentence"] .tfs-hero--immersive > img{
   object-position:57% 45%;transform:scale(1.12)
 }
 .tfs[data-case-study="the-first-sentence"] .tfs-hero--immersive::after{
   background:linear-gradient(0deg,rgba(5,9,12,.91),rgba(5,9,12,.28) 67%,transparent 90%)
 }
 .tfs[data-case-study="the-first-sentence"] .tfs-hero--immersive .tfs-hero__statement{
   align-self:flex-end;margin:24px 22px 60px;font-size:clamp(1.75rem,7vw,2.9rem)
 }
 .tfs[data-case-study="the-first-sentence"] .tfs-hero--immersive figcaption{
   left:22px;bottom:10px;right:22px
 }
}
@media(prefers-reduced-motion:reduce){
 .tfs[data-case-study="the-first-sentence"] .tfs-hero--immersive > img{transition:none}
}