.case-motion-copy,.motion-controls,.case-progress-track{display:none}
.case-card:not([data-position="active"]) button{pointer-events:none}

@media(min-width:641px){
  .cases-section{position:relative;isolation:isolate;background:radial-gradient(ellipse 72% 60% at 52% 54%,#19313b 0%,#0b1a22 48%,#050d12 100%)}
  .cases-section::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(108deg,transparent 0 116px,rgba(116,200,227,.035) 117px 118px,transparent 119px 220px);transform:skewY(-4deg);pointer-events:none}
  .cases-section .section-heading{position:relative;z-index:2}
  .cases-section .section-heading .carousel-controls{display:none}
  .case-stage{height:clamp(420px,42vw,500px);margin-top:8px;perspective:1450px}
  .case-stage::before{content:"";position:absolute;inset:3% 8% 1%;background:radial-gradient(ellipse at 49% 77%,rgba(255,90,63,.19),transparent 45%),radial-gradient(ellipse at 59% 36%,rgba(80,173,206,.2),transparent 54%);pointer-events:none}
  .case-stage::after{content:"";position:absolute;left:-35%;top:78%;width:55%;height:4px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;filter:blur(4px);pointer-events:none;z-index:5}
  .case-stage.is-moving::after{animation:case-streak 920ms ease-out both}
  @keyframes case-streak{0%{opacity:0;transform:translateX(0) skewX(-35deg)}18%{opacity:.95}100%{opacity:0;transform:translateX(250%) skewX(-35deg)}}
  .case-card{top:50%;width:min(980px,75vw);height:min(435px,calc(100% - 30px));display:block;border-radius:17px;border-color:rgba(223,239,244,.31);box-shadow:0 33px 95px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06) inset;transition:transform 920ms cubic-bezier(.18,.86,.2,1),opacity 920ms ease,filter 920ms ease,box-shadow 920ms ease}
  .case-card[data-position="active"]{z-index:4;transform:translate(-60%,-50%) scale(1) rotateY(0);opacity:1;filter:none;box-shadow:0 40px 110px rgba(0,0,0,.68),0 0 45px rgba(255,90,63,.11)}
  .case-card[data-position="left"]{z-index:2;transform:translate(-103%,-50%) scale(.6) rotateY(21deg);opacity:.57;filter:saturate(.62) brightness(.67);cursor:pointer}
  .case-card[data-position="right"]{z-index:3;transform:translate(27%,-50%) scale(.75) rotateY(-21deg);opacity:.73;filter:saturate(.72) brightness(.78);cursor:pointer}
  .case-card[data-position="hidden"]{z-index:0;transform:translate(125%,-50%) scale(.45);opacity:0;pointer-events:none}
  .case-card[data-position="left"]:hover,.case-card[data-position="right"]:hover{opacity:.9;filter:saturate(.9) brightness(.9)}
  .case-card::after{content:attr(data-serial);position:absolute;right:28px;top:8px;color:rgba(255,255,255,.3);font-size:110px;font-weight:800;line-height:1;letter-spacing:-.09em;pointer-events:none;text-shadow:0 4px 30px rgba(0,0,0,.3)}
  .case-visual{position:absolute;inset:0}
  .case-visual>.art{transform:scale(1.045)}
  .case-card[data-position="active"] .case-visual>.art{animation:case-image-drift 8s ease-in-out infinite alternate}
  @keyframes case-image-drift{from{transform:scale(1.045) translateX(0)}to{transform:scale(1.12) translateX(-1.5%)}}
  .case-card:not([data-position="active"]) .case-visual>.art{transform:scale(1.16)}
  .case-visual::after{background:linear-gradient(0deg,rgba(2,8,12,.97) 0%,rgba(2,8,12,.63) 22%,transparent 60%),linear-gradient(90deg,rgba(2,8,12,.52),transparent 68%)}
  .case-badge{top:27px;left:31px;padding:9px 12px;background:rgba(6,25,31,.66);border-color:rgba(203,228,232,.45);color:#eef6f8;backdrop-filter:blur(10px);letter-spacing:.12em}
  .case-badge::before{background:var(--accent)}
  .case-name,.case-info{display:none}
  .case-motion-copy{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;padding:34px;color:#f5f7f8}
  .case-motion-copy>div{width:100%}
  .case-motion-copy .case-motion-serial{display:none}
  .case-motion-category{margin:0 0 8px;color:#ff9b84;font:700 11px Arial,Helvetica,sans-serif;letter-spacing:.17em;text-transform:uppercase}
  .case-motion-copy h3{margin:0 0 8px;font-size:clamp(45px,5.3vw,76px);line-height:.93;letter-spacing:-.065em}
  .case-motion-description{margin:0;color:#d0dce1;font-size:16px;line-height:1.4}
  .case-motion-facts{display:flex;gap:10px;margin-top:18px}
  .case-motion-facts>span{display:grid;gap:5px;min-width:185px;padding:11px 14px;border:1px solid rgba(221,237,242,.25);border-radius:9px;background:rgba(5,17,23,.64);backdrop-filter:blur(9px)}
  .case-motion-facts small{font-size:10px;font-weight:500;letter-spacing:.02em;color:#b5c7d0}
  .case-motion-facts strong{font-size:17px;font-weight:700;letter-spacing:-.025em;color:#fff}
  .case-motion-route{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding-top:15px;border-top:1px solid rgba(221,237,242,.34);font:700 12px Arial,Helvetica,sans-serif;letter-spacing:.1em;text-transform:uppercase}
  .case-motion-route .button{min-height:42px;border-color:rgba(255,90,63,.7);background:rgba(6,20,27,.7);font-size:10px;letter-spacing:0;text-transform:none}
  .case-card[data-position="active"] .case-motion-copy>div{animation:case-copy-enter 640ms 240ms both cubic-bezier(.18,.8,.25,1)}
  @keyframes case-copy-enter{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
  .case-card:not([data-position="active"]) .case-motion-copy>div{opacity:0}
  .case-bottom{position:relative;min-height:58px;margin-top:9px;padding-bottom:18px}
  .case-bottom>.small-note{font-size:11px}
  .case-bottom .carousel-dots{display:none}
  .case-counter{margin-left:auto;color:#e8f1f4;font:700 14px Arial,Helvetica,sans-serif;letter-spacing:.08em}
  .case-bottom .motion-controls{display:flex;gap:12px;margin:0}
  .motion-controls .round-button{width:49px;height:49px;background:rgba(20,42,52,.85);border-color:rgba(219,236,244,.5)}
  .case-progress-track{display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(209,228,236,.18)}
  .case-progress-track>span{display:block;height:100%;width:33.33%;background:var(--accent);transition:width 920ms cubic-bezier(.16,1,.28,1)}
}

@media(min-width:641px) and (max-width:900px){
  .case-card{width:80vw;height:min(380px,calc(100% - 30px))}
  .case-motion-copy{padding:25px}
  .case-motion-copy h3{font-size:clamp(40px,5.3vw,55px)}
  .case-motion-description{font-size:13px}
  .case-motion-facts>span{min-width:0;flex:1;padding:9px 10px}
  .case-motion-facts strong{font-size:14px}
  .case-motion-route{gap:12px;font-size:10px}
  .case-motion-route .button{min-height:37px;padding-inline:12px;font-size:9px}
}

@media(prefers-reduced-motion:reduce){
  .case-card,.case-visual>.art,.case-progress-track>span{transition:none!important}
  .case-card[data-position="active"] .case-visual>.art,.case-card[data-position="active"] .case-motion-copy>div,.case-stage.is-moving::after{animation:none!important}
}
