.case-page { --case-copy:#8b8c87; }
.case-page.light { --case-copy:#555650; }

.case-hero { position:relative; height:48rem; overflow:hidden; isolation:isolate; }
.case-title {
  position:absolute; z-index:2; left:var(--side); top:12.5rem; margin:0;
  font-family:"Roboto Local","Roboto Condensed",Roboto,sans-serif; font-variation-settings:"wdth" 75,"wght" 800; font-stretch:condensed;
  font-size:354px; line-height:1.25; letter-spacing:-.02em; font-weight:800;
}
.case-object { position:absolute; max-width:none; pointer-events:none; object-fit:contain; will-change:transform; }
.case-circle { z-index:1; left:20%; top:9.6rem; width:400px; animation:case-float-a 9s ease-in-out infinite; }
.case-drop { z-index:3; left:14%; top:4.3rem; width:289px; height:300px; animation:case-float-b 8s ease-in-out infinite; }
.case-blob { z-index:4; left:45%; top:24rem; width:220px; animation:case-float-c 7s ease-in-out infinite; }
.case-gear { z-index:4; right:12.6%; top:11rem; width:336px; animation:case-float-d 11s ease-in-out infinite; }
@keyframes case-float-a { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(5px,-8px,0)} }
@keyframes case-float-b { 0%,100%{transform:translate3d(0,0,0) rotate(0)} 50%{transform:translate3d(-4px,7px,0) rotate(2deg)} }
@keyframes case-float-c { 0%,100%{transform:translate3d(0,0,0) rotate(-1deg)} 50%{transform:translate3d(7px,-6px,0) rotate(2deg)} }
@keyframes case-float-d { 0%,100%{transform:translate3d(0,0,0) rotate(-2deg)} 50%{transform:translate3d(-6px,8px,0) rotate(1.5deg)} }

.case-layout { display:grid; grid-template-columns:minmax(15rem,1fr) minmax(0,984px); align-items:start; padding-bottom:12.5rem; }
.case-index { position:sticky; top:7.25rem; align-self:start; padding-top:.25rem; display:flex; flex-direction:column; align-items:flex-start; gap:1.55rem; color:var(--case-copy); font-size:.875rem; line-height:1.25; font-weight:300; }
.case-index a { position:relative; transition:color .3s var(--ease); }
.case-index a:hover,.case-index a.is-current { color:var(--text); }
.case-index a.is-current { padding-left:1.35rem; }
.case-index a.is-current::before { content:""; position:absolute; left:0; top:50%; width:.45rem; height:.45rem; border-radius:50%; transform:translateY(-50%); background:currentColor; }
.case-content { width:100%; display:flex; flex-direction:column; }
.case-project { scroll-margin-top:7.25rem; }
.case-project#copita { order:1; }
.case-project#papina-dacha { order:2; }
.case-project#alekseevsky { order:3; }
.case-project#brandbook { order:4; }
.case-project#logofolio { order:5; }
.case-project#digital-content { order:6; }
.case-project + .case-project { margin-top:7.8125rem; padding-top:7.8125rem; border-top:1px solid var(--line); }
.case-meta { display:grid; grid-template-columns:335px 1fr; align-items:start; margin-bottom:6.25rem; }
.case-meta h2 { margin:0; font-size:2rem; line-height:1.25; letter-spacing:.02em; font-weight:400; }
.case-meta p,.case-copy { margin:0; color:#f2f1ed; font-size:1.5rem; line-height:1.3; letter-spacing:0; font-weight:300; }
.case-page.light .case-meta p,.case-page.light .case-copy { color:#101010; }
.case-media { margin:0; }
.case-media-wide { width:100%; }
.case-media img,.case-collage img,.case-collage video { display:block; width:100%; height:auto; object-fit:cover; }
.case-copy { width:649px; margin:6.25rem 0 0 auto; }
.case-media + .case-copy { margin-top:6.25rem; }
.case-copy + .case-media,.case-copy + .case-collage { margin-top:6.25rem; }
.case-collage + .case-copy { margin-top:6.25rem; }
.case-collage { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; align-items:stretch; }
.case-img-reveal { display:block; min-width:0; }
.case-img-reveal img { height:100%; }
.case-collage-pin > .case-img-reveal { height:100%; }
.case-collage-pin > div { display:grid; grid-template-rows:1fr 1fr; gap:.5rem; min-height:0; }
.case-collage-pin > div .case-img-reveal { height:100%; min-height:0; }
.case-collage-two .case-img-reveal { height:100%; }
.case-final { margin-top:3.125rem; }
.case-stack { margin-top:3.125rem; }
.case-collage-brandbook { align-items:stretch; }
.case-collage-brandbook > .brandbook-shirt { aspect-ratio:483/631; }
.case-collage-brandbook > div { display:grid; grid-template-rows:1fr 1fr; gap:.5rem; min-height:0; }
.case-collage-brandbook > div .case-img-reveal { height:100%; min-height:0; }
.case-collage-brandbook img,.case-collage-brandbook video { width:100%; height:100%; object-fit:cover; }
.brandbook-video { background:#f2f2f2; }
.digital-row { align-items:stretch; }
.digital-row .case-img-reveal { min-height:0; background:#090909; }
.digital-row video { display:block; width:100%; height:100%; object-fit:cover; }
.case-rise { position:relative; overflow:hidden; isolation:isolate; }
.case-rise::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:var(--bg); transform:translate3d(0,0,0); transition:transform 1.15s cubic-bezier(.77,0,.18,1); will-change:transform; }
.case-rise.is-visible::after { transform:translate3d(0,-101%,0); }
.case-line .line-mask { display:block; overflow:hidden; }
.case-line .line-mask > span { display:block; transform:translate3d(0,112%,0); transition:transform 1s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--line-index,0) * 60ms); }
.case-line .line-mask.is-paragraph-gap { height:1.3em; overflow:visible; }
.case-line .line-mask.is-paragraph-gap > span { display:none; }
.case-line.is-visible .line-mask > span { transform:none; }
.case-page .contact { padding-top:12.5rem; }

@media (max-width:1100px) {
  .case-hero { height:42rem; }
  .case-title { top:13rem; font-size:min(354px,24.58vw); }
  .case-circle { left:18%; top:11rem; width:28vw; }
  .case-drop { left:10%; top:7rem; width:20vw; height:auto; }
  .case-blob { left:46%; top:22rem; width:16vw; }
  .case-gear { right:8%; top:14rem; width:24vw; }
  .case-layout { grid-template-columns:1fr; }
  .case-index { position:static; margin-bottom:4rem; flex-direction:row; flex-wrap:wrap; gap:1rem 2rem; }
  .case-content { max-width:984px; margin-inline:auto; }
}

@media (max-width:820px) {
  .case-hero { height:34rem; }
  .case-title { top:14rem; font-size:20vw; }
  .case-circle { top:10.8rem; width:30vw; }
  .case-drop { top:8rem; width:23vw; }
  .case-blob { top:19.5rem; width:16vw; }
  .case-gear { top:13.8rem; width:27vw; }
  .case-layout { padding-bottom:8rem; }
  .case-meta { grid-template-columns:1fr; gap:1.5rem; }
  .case-copy { width:75%; }
  .case-page .contact { padding-top:8rem; }
}

@media (max-width:520px) {
  .case-layout { display:block; padding-bottom:4rem; }
  .case-index { position:static; display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin:0 0 5rem; padding:1.25rem 0 0; color:var(--case-copy); font-size:12px; line-height:1.25; letter-spacing:0; }
  .case-index::before { content:"ПРОЕКТЫ"; grid-column:1 / -1; margin-bottom:.35rem; color:var(--text); font-size:16px; line-height:1.25; letter-spacing:.04em; font-weight:400; }
  .case-index a,.case-index a.is-current { min-height:32px; padding:.42rem .5rem; border:1px solid var(--line); border-radius:999px; display:flex; align-items:center; justify-content:center; text-align:center; color:#f2f1ed; }
  .case-index a.is-current { color:#fff; }
  .case-page.light .case-index a { color:#4e504b; }
  .case-page.light .case-index a.is-current { color:#101010; }
  .case-index a.is-current::before { display:none; }
  .case-page:not(.logofolio-page) .case-project:not(:first-child) { display:none; }
  .case-page:not(.logofolio-page):has(.case-project:target) .case-project { display:none; }
  .case-page:not(.logofolio-page):has(.case-project:target) .case-project:target { display:block; }
  .case-project + .case-project { margin-top:0; padding-top:0; border-top:0; }
  .case-meta { display:block; margin-bottom:2rem; }
  .case-meta h2 { margin-bottom:.35rem; font-size:25px; line-height:1.25; letter-spacing:.04em; font-weight:400; }
  .case-meta p { font-size:16px; line-height:1.42; letter-spacing:0; font-weight:300; text-wrap:pretty; }
  .case-copy { width:100%; }
  .case-copy { font-size:16px; line-height:1.42; letter-spacing:0; font-weight:300; text-wrap:pretty; }
  .case-copy br,.case-meta p br { display:none; }
  .case-line .line-mask { display:inline; height:auto; overflow:visible; }
  .case-line .line-mask > span { display:inline; transform:none; }
  .case-line .line-mask:not(.is-paragraph-gap)::after { content:" "; }
  .case-line .line-mask.is-paragraph-gap { display:block; height:1.25em; }
  .case-line .line-mask.is-paragraph-gap::after { content:none; }
  .case-media + .case-copy,.case-copy + .case-media,.case-copy + .case-collage,.case-collage + .case-copy { margin-top:2.5rem; }
  .case-final,.case-stack { margin-top:2.5rem; }
  .case-collage { gap:.25rem; }
  .case-collage-pin > div { gap:.25rem; }
  .case-page .contact { padding-top:4rem; padding-bottom:5rem; }
}

@media (prefers-reduced-motion:reduce) {
  .case-rise::after { display:none; }
  .case-line .line-mask > span { transform:none; }
}