/* #1135 — RU-style rotating 3D case cover in hero
   (ported from yusmpgroup.ru /assets/case.css .case3d.is-cover, dark-adapted). */
.case-detail__hero-visual:has(.case3d){width:min(100%,560px);aspect-ratio:1/1;justify-self:center;margin:0 auto;border:0;box-shadow:none;background:none;overflow:visible}
.case3d{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center;perspective:1000px}
.case3d.is-cover{--brand:#3f6bff}
.c3d-glow{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 60%,transparent),transparent 72%);filter:blur(24px);opacity:.7;animation:c3dPulse 6s ease-in-out infinite;z-index:0}
.c3d-grid{position:absolute;inset:0;border-radius:26px;background:linear-gradient(transparent 96%,color-mix(in srgb,var(--brand) 24%,transparent) 0) 0 0/36px 36px,linear-gradient(90deg,transparent 96%,color-mix(in srgb,var(--brand) 24%,transparent) 0) 0 0/36px 36px;-webkit-mask:radial-gradient(closest-side,#000,transparent 76%);mask:radial-gradient(closest-side,#000,transparent 76%);opacity:.4;transform:translateZ(-70px);z-index:0}
.c3d-ring{position:absolute;width:90%;aspect-ratio:1;border-radius:50%;border:1px dashed color-mix(in srgb,var(--brand) 55%,transparent);transform:rotateX(74deg);animation:c3dOrbit 16s linear infinite;opacity:.5;z-index:1}
.c3d-ring::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--brand);box-shadow:0 0 16px 3px color-mix(in srgb,var(--brand) 80%,transparent)}
.c3d-stage{position:relative;width:56%;aspect-ratio:1/1;transform-style:preserve-3d;z-index:2}
.case3d.is-cover .c3d-stage{width:80%;aspect-ratio:4/3}
.c3d-card{position:absolute;inset:0;transform-style:preserve-3d;animation:c3dSpin 9s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
.c3d-edge{position:absolute;inset:0;border-radius:16px;background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 66%,#0a0c10),color-mix(in srgb,var(--brand) 42%,#0a0c10));transform:translateZ(calc(var(--k) * -1.4px));filter:brightness(calc(1 - var(--k)*0.018))}
.c3d-front{position:absolute;inset:0;border-radius:16px;overflow:hidden;transform:translateZ(3px);background:#0a0c10;box-shadow:0 30px 66px -22px color-mix(in srgb,var(--brand) 62%,transparent),0 6px 18px rgba(0,0,0,.28)}
.c3d-front::before{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);z-index:2;pointer-events:none}
.c3d-front::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(255,255,255,.24),transparent 42%);z-index:3;pointer-events:none}
.c3d-front img{width:100%;height:100%;object-fit:cover;display:block}
.c3d-badge{position:absolute;left:50%;bottom:0;transform:translateX(-50%);text-align:center;z-index:3;max-width:90%}
.c3d-badge b{display:block;font-size:1.05rem;letter-spacing:.01em;color:var(--ink,#eaf0ff)}
.c3d-badge span{font-size:.7rem;opacity:.66;letter-spacing:.14em;text-transform:uppercase;color:var(--ink,#eaf0ff)}
@keyframes c3dSpin{0%,100%{transform:rotateY(-34deg) rotateX(7deg)}50%{transform:rotateY(34deg) rotateX(-5deg)}}
@keyframes c3dPulse{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:.82;transform:scale(1.05)}}
@keyframes c3dOrbit{to{transform:rotateX(74deg) rotateZ(360deg)}}
@media(max-width:900px){
  .case-detail__hero-visual:has(.case3d){max-width:360px}
  .case3d.is-cover .c3d-stage{width:92%}
}
@media(prefers-reduced-motion:reduce){
  .c3d-card,.c3d-ring,.c3d-glow{animation:none}
  .c3d-card{transform:rotateY(-18deg) rotateX(7deg)}
}

/* #1244 — mobile hero cover overlap fix (Артур: "в мобилках в кейсах изображение
   на текст налазит"). On phones the square 1:1 stage let the spinning 3D card
   and the absolutely-positioned caption badge bleed over the cover image and the
   heading of the next section. On <=640px: drop the fixed square, let the cover
   size to the image, and flow the caption + decorations in-column so nothing
   overlaps. Desktop (>=641px) is untouched. */
@media (max-width:640px){
  .case-detail__hero-visual:has(.case3d){aspect-ratio:auto;max-width:420px;overflow:visible}
  .case3d.is-cover{aspect-ratio:auto;row-gap:14px;padding-bottom:2px}
  .case3d.is-cover .c3d-stage{position:relative;width:100%;aspect-ratio:4/3;margin:0 auto}
  /* caption out of the absolute overlay -> sits under the image, never on it */
  .case3d .c3d-badge{position:relative;left:auto;bottom:auto;transform:none;max-width:100%;margin:0 auto}
  /* the big tilted ring/grid are the parts that painted past the box edge */
  .case3d .c3d-ring,.case3d .c3d-grid{display:none}
  .case3d .c3d-glow{inset:6% 6% 22%}
}