/* Parallel × Milkinside × Morningside principles, adapted to AI Room */

:root {
  --studio-cobalt-deep:color-mix(in srgb,var(--studio-ink) 78%,var(--studio-blue));
  --studio-cobalt-mid:color-mix(in srgb,var(--studio-blue) 72%,#8ea9ff);
  --studio-ice:color-mix(in srgb,var(--studio-white) 78%,var(--studio-blue));
  --studio-violet:color-mix(in srgb,var(--studio-blue) 72%,#6f86c7);
  --studio-layer-shadow:0 -28px 80px rgb(3 6 15 / .22);
}

/* Color depth lives inside the type instead of in extra decorative cards. */
.hero .blue-word,
.control-story-heading h2 span,
.scatter-sticky>h2 span,
.process-rooms-heading h2 span,
.about-story-head h2 span {
  color:var(--studio-blue);
  background:linear-gradient(112deg,#315cff 4%,#6f8cff 48%,#e7edff 96%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero,
.control-story,
.process-rooms-story {
  background-color:var(--studio-ink);
  background-image:
    radial-gradient(circle at 76% 34%,rgb(54 92 255 / .2),transparent 34%),
    radial-gradient(circle at 38% 110%,rgb(35 98 188 / .15),transparent 42%),
    linear-gradient(135deg,#090a0e,var(--studio-cobalt-deep));
}

/* One signature stack: each chapter arrives as a new physical plane. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference) {
  .control-story,
  .scatter-story,
  .services,
  .project-gallery,
  .process-rooms-story {
    position:relative;
    overflow:clip;
    border-radius:clamp(44px,4vw,72px) clamp(44px,4vw,72px) 0 0;
    box-shadow:var(--studio-layer-shadow);
  }

  .control-story {z-index:2;margin-top:-4svh}
  .scatter-story {z-index:3;margin-top:-7svh}
  .services {
    z-index:4;
    margin-top:-6svh;
    padding-top:clamp(104px,10vw,160px);
    background:var(--studio-white)}
  .project-gallery {z-index:5}
  .process-rooms-story {z-index:6;margin-top:-5svh}
}

/* Key projects become visual objects instead of a text index with one remote preview. */
.project-gallery>.case-heading {padding-top:clamp(74px,7vw,112px)}

.project-gallery .case-heading-note {
  margin:clamp(28px,3vw,44px) 0 clamp(48px,5vw,74px) auto;
}

.case-field[data-live-index] {
  display:block;
  padding-bottom:var(--studio-section);
}

.case-field[data-live-index] .case-field-line {
  margin-bottom:clamp(26px,3vw,46px);
}

.case-showcase {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(18px,2vw,30px);
}

.case-field[data-live-index]>.case-live-preview,
.case-field[data-live-index]>.gallery-panel {
  display:none!important;
}

.case-showcase-card {
  --case-pointer-x:50%;
  --case-pointer-y:42%;
  grid-column:span 3;
  display:block;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--studio-ink);
  text-align:left;
}

.case-showcase-card-featured {grid-column:span 6}

.case-showcase-media {
  position:relative;
  display:grid;
  height:clamp(260px,24vw,360px);
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  border-radius:clamp(24px,2.4vw,38px);
  background:
    radial-gradient(circle at 70% 24%,var(--case-light,rgb(255 255 255 / .2)),transparent 31%),
    linear-gradient(145deg,var(--case-a,#17234c),var(--case-b,#08090d));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),0 24px 60px rgb(7 12 28 / .14);
}

.case-showcase-card-featured .case-showcase-media {
  height:clamp(400px,38vw,570px);
}

.case-showcase-media::before {
  content:'';
  position:absolute;
  z-index:0;
  inset:9%;
  border:1px solid rgb(255 255 255 / .14);
  border-radius:inherit;
  transform:perspective(900px) rotateX(3deg) rotateY(-4deg);
}

.case-showcase-media::after {
  content:'';
  position:absolute;
  z-index:2;
  inset:0;
  background:rgb(5 8 16 / .18);
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms var(--ease-swift);
}

.case-showcase-media img {
  position:relative;
  z-index:1;
  display:block;
  width:88%;
  height:82%;
  object-fit:contain;
  filter:saturate(.94) contrast(1.03) drop-shadow(0 28px 36px rgb(0 0 0 / .28));
  transform:scale(.98) rotate(-1.5deg);
  transition:none;
}

.case-showcase-media img.case-portrait {
  width:auto;
  max-width:78%;
  height:88%;
  border-radius:clamp(14px,1.5vw,24px);
  transform:scale(.98) rotate(2deg);
}

.case-showcase-card:hover .case-showcase-media img,
.case-showcase-card:focus-visible .case-showcase-media img {
  opacity:1;
  filter:saturate(.94) contrast(1.03) drop-shadow(0 28px 36px rgb(0 0 0 / .28));
}

.case-showcase-card:hover .case-showcase-media::after,
.case-showcase-card:focus-visible .case-showcase-media::after {
  opacity:1;
}

.case-view-cursor {
  position:absolute;
  z-index:3;
  top:var(--case-pointer-y);
  left:var(--case-pointer-x);
  display:grid;
  width:clamp(92px,8vw,126px);
  aspect-ratio:1;
  place-items:center;
  border:1px solid rgb(255 255 255 / .22);
  border-radius:50%;
  background:rgb(9 11 17 / .72);
  color:var(--studio-white);
  font-size:11px;
  font-weight:650;
  letter-spacing:.09em;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.7);
  transition:opacity 180ms var(--ease-swift),transform 420ms var(--ease-reveal);
}

.case-showcase-card:hover .case-view-cursor,
.case-showcase-card:focus-visible .case-view-cursor {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.case-showcase-card:focus-visible {
  outline:3px solid var(--studio-blue);
  outline-offset:7px;
  border-radius:clamp(24px,2.4vw,38px);
}

.case-showcase-copy {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:16px 2px 4px;
}

.case-showcase-copy strong {
  font-size:clamp(23px,2.2vw,36px);
  font-weight:590;
  line-height:.96;
  letter-spacing:-.055em;
}

.case-showcase-copy>span {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}

.case-showcase-copy i {
  padding:7px 10px;
  border-radius:999px;
  background:var(--studio-paper);
  color:var(--studio-muted);
  font-size:9px;
  font-style:normal;
  letter-spacing:.04em;
  white-space:nowrap;
}

.case-tone-cobalt {--case-a:#244ddd;--case-b:#070a14;--case-light:rgb(115 151 255 / .44)}
.case-tone-ink {--case-a:#282a31;--case-b:#050608;--case-light:rgb(255 255 255 / .2)}
.case-tone-violet {--case-a:#465fa8;--case-b:#0d1735;--case-light:rgb(186 207 255 / .34)}
.case-tone-ice {--case-a:#d9e3ff;--case-b:#6f89d8;--case-light:rgb(255 255 255 / .68)}
.case-tone-blue {--case-a:#3560ff;--case-b:#07112f;--case-light:rgb(123 164 255 / .54)}
.case-tone-acid {--case-a:#748dd2;--case-b:#10192e;--case-light:rgb(224 235 255 / .48)}

/* Full-screen project reader. Native dialog keeps focus and keyboard behavior correct. */
#case-dialog {
  width:100vw;
  max-width:none;
  height:100vh;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:0;
  overflow:hidden;
  border-radius:0;
  background:#0a0b0e;
  color:var(--studio-white);
  opacity:0;
  transform:translateY(18px) scale(.992);
  transition:opacity 300ms var(--ease-swift),transform 620ms var(--ease-reveal),overlay 300ms allow-discrete,display 300ms allow-discrete;
}

#case-dialog[open] {
  opacity:1;
  transform:none;
}

@starting-style {
  #case-dialog[open] {
    opacity:0;
    transform:translateY(24px) scale(.988);
  }
}

#case-dialog::backdrop {
  background:rgb(4 5 8 / .82);
  opacity:0;
  backdrop-filter:none;
  transition:opacity 300ms var(--ease-swift),overlay 300ms allow-discrete,display 300ms allow-discrete;
}

#case-dialog[open]::backdrop {opacity:1}

@starting-style {
  #case-dialog[open]::backdrop {opacity:0}
}

.case-dialog-shell {
  display:grid;
  grid-template-columns:clamp(190px,19vw,300px) minmax(0,1fr);
  height:100%;
}

.case-dialog-nav {
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  padding:clamp(28px,3vw,48px);
  border-right:1px solid rgb(255 255 255 / .1);
}

.case-dialog-nav>span {
  flex:0 0 auto;
  margin-bottom:clamp(28px,4vh,54px);
  font-size:clamp(18px,1.8vw,27px);
  font-weight:680;
  line-height:.78;
  letter-spacing:-.05em;
}

.case-dialog-nav-list {
  display:grid;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgb(255 255 255 / .24) transparent;
  padding:0 12px 22px 0;
}
.case-dialog-nav-list::-webkit-scrollbar {width:4px}
.case-dialog-nav-list::-webkit-scrollbar-thumb {border-radius:4px;background:rgb(255 255 255 / .24)}

.case-dialog-nav button {
  padding:7px 0;
  border:0;
  background:none;
  color:rgb(255 255 255 / .28);
  font-size:clamp(15px,1.35vw,21px);
  text-align:left;
  transition:color 180ms var(--ease-swift),transform 320ms var(--ease-reveal);
}

.case-dialog-nav button:hover,
.case-dialog-nav button:focus-visible,
.case-dialog-nav button.is-active {
  color:var(--studio-white);
  transform:translateX(5px);
}

.case-dialog-nav button:focus-visible {outline:2px solid var(--studio-blue);outline-offset:4px}

.case-dialog-main {
  min-width:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:clamp(26px,3.5vw,56px) clamp(24px,5vw,84px) clamp(64px,8vw,120px);
}

#case-dialog .dialog-top {
  position:sticky;
  z-index:4;
  top:0;
  padding-bottom:28px;
  background:linear-gradient(#0a0b0e 68%,transparent);
}

#case-dialog .dialog-top .eyebrow {color:rgb(255 255 255 / .42)}

#case-dialog .close-button {
  border-color:rgb(255 255 255 / .14);
  background:rgb(255 255 255 / .06);
  color:var(--studio-white);
}

#case-dialog .close-button:hover {background:rgb(255 255 255 / .14)}

#case-dialog h2 {
  max-width:1050px;
  margin:clamp(24px,4vw,62px) 0 clamp(38px,5vw,78px);
  font-size:clamp(48px,6.7vw,108px);
  font-weight:590;
  line-height:.87;
  letter-spacing:-.075em;
}

#case-content {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,36px);
  max-width:1160px;
}

#case-content>.case-image,
#case-content>.case-proof-grid,
#case-content>.case-video,
#case-content>.case-source-link,
#case-content>.case-extra-image {
  grid-column:1/-1;
}

#case-content>.case-image {
  width:100%;
  max-height:74vh;
  margin:0 0 clamp(18px,3vw,40px);
  object-fit:contain;
  border:1px solid rgb(255 255 255 / .1);
  border-radius:clamp(20px,2.4vw,38px);
  background:radial-gradient(circle at 50% 30%,rgb(62 96 255 / .22),transparent 50%),#11131a;
}

#case-dialog[data-project="art"] #case-content>.case-image,
#case-dialog[data-project="workshop"] #case-content>.case-image {
  width:min(100%,460px);
  justify-self:center;
}

.case-story-block {
  min-height:220px;
  padding:clamp(22px,2.4vw,38px);
  border-top:1px solid rgb(255 255 255 / .14);
  background:linear-gradient(135deg,rgb(255 255 255 / .045),transparent 72%);
}

#case-dialog .case-subtitle {
  margin:0 0 clamp(34px,4vw,72px);
  color:rgb(255 255 255 / .38);
  font-size:10px;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#case-dialog .case-paragraph {
  margin:0;
  color:var(--studio-white);
  font-size:clamp(19px,2vw,30px);
  line-height:1.15;
  letter-spacing:-.035em;
}

#case-dialog .case-story-outcome {
  grid-column:1/-1;
  min-height:0;
  background:linear-gradient(105deg,rgb(54 94 255 / .34),rgb(54 94 255 / .05));
}

#case-dialog .case-details-list {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  color:rgb(255 255 255 / .72);
  list-style:none;
}

#case-dialog .case-details-list li {
  margin:0;
  padding:18px;
  border:1px solid rgb(255 255 255 / .1);
  border-radius:16px;
}

#case-dialog .case-proof img {border-color:rgb(255 255 255 / .12)}
#case-dialog .case-proof figcaption {color:rgb(255 255 255 / .48)}
#case-dialog #case-contact {margin-top:clamp(36px,5vw,72px)}

@media(max-width:1100px) {
  .case-showcase-card {grid-column:span 6}
  .case-showcase-card-featured .case-showcase-media,
  .case-showcase-media {height:clamp(320px,42vw,470px)}
  .case-showcase-copy {display:block}
  .case-showcase-copy>span {justify-content:flex-start;margin-top:12px}
  .case-dialog-shell {grid-template-columns:170px minmax(0,1fr)}
  .case-dialog-nav {padding:28px 20px}
}

@media(max-width:767px) {
  .hero .blue-word,
  .control-story-heading h2 span,
  .scatter-sticky>h2 span,
  .process-rooms-heading h2 span,
  .about-story-head h2 span {
    background:none;
    -webkit-text-fill-color:currentColor;
    color:var(--studio-blue);
  }

  .case-showcase {grid-template-columns:minmax(0,1fr);gap:30px}
  .case-showcase-card,
  .case-showcase-card-featured {grid-column:1}
  .case-showcase-card-featured .case-showcase-media,
  .case-showcase-media {height:clamp(260px,83vw,350px);border-radius:24px}
  .case-showcase-copy strong {font-size:27px}
  .case-view-cursor {display:none}
  .case-showcase-card:hover .case-showcase-media img,
  .case-showcase-card:focus-visible .case-showcase-media img {opacity:1;filter:saturate(.94) contrast(1.03) drop-shadow(0 20px 28px rgb(0 0 0 / .22));transform:scale(1) rotate(0)}

  .case-dialog-shell {display:block;height:100%}
  .case-dialog-nav {display:none}
  .case-dialog-main {height:100%;padding:18px 18px 72px}
  #case-dialog .dialog-top {top:0;margin:0;padding:0 0 24px}
  #case-dialog h2 {margin:28px 0 44px;font-size:clamp(43px,13vw,62px)}
  #case-content {grid-template-columns:minmax(0,1fr);gap:14px}
  #case-content>* {grid-column:1!important}
  .case-story-block {min-height:0;padding:24px 0;background:none}
  #case-dialog .case-subtitle {margin-bottom:24px}
  #case-dialog .case-paragraph {font-size:20px;line-height:1.22}
  #case-dialog .case-details-list {grid-template-columns:minmax(0,1fr)}
}

@media(prefers-reduced-motion:reduce) {
  .case-showcase-media img,
  .case-view-cursor,
  #case-dialog,
  #case-dialog::backdrop {transition:none}
  .case-view-cursor {display:none}
}