.case-page { --pointer-x: 50%; --pointer-y: 28%; }

.case-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 4px;
  pointer-events: none;
}
.case-scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--lime), var(--orange));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.case-intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: white;
  pointer-events: none;
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
}
.case-intro-curtain > div { display: flex; align-items: center; gap: 18px; }
.case-intro-curtain .brand-mark { width: 26px; height: 26px; box-shadow: 15px 0 0 var(--lime); }
.case-intro-curtain strong { font-size: clamp(54px, 10vw, 138px); line-height: 1; letter-spacing: -.085em; }
.motion-ready .case-intro-curtain { opacity: 1; visibility: visible; animation: curtain-away 1.05s cubic-bezier(.77,0,.18,1) .2s both; }
.motion-ready .case-intro-curtain > div { animation: curtain-mark .8s cubic-bezier(.2,.8,.2,1) both; }

.case-page .site-header { transition: background .3s ease, box-shadow .3s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.case-page .site-header.is-scrolled { background: rgba(245,242,234,.94); box-shadow: 0 16px 40px rgba(16,16,21,.08); }
.motion-ready:not(.is-loaded) .site-header { transform: translateY(-110%); }

.case-page .case-hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-motion-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-motion-field::before {
  content: "";
  position: absolute;
  width: 760px;
  height: 760px;
  left: calc(var(--pointer-x) - 380px);
  top: calc(var(--pointer-y) - 380px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53,87,255,.12), transparent 67%);
  transition: left .8s cubic-bezier(.2,.8,.2,1), top .8s cubic-bezier(.2,.8,.2,1);
}
.hero-motion-field i { position: absolute; display: block; border-radius: 50%; filter: blur(.1px); }
.hero-motion-field i:nth-child(1) { width: 150px; height: 150px; right: 46%; top: 8%; border: 26px solid var(--lime); animation: orbit-one 11s ease-in-out infinite alternate; }
.hero-motion-field i:nth-child(2) { width: 38px; height: 38px; left: 48%; bottom: 12%; background: var(--orange); animation: drift-dot 7s ease-in-out infinite; }
.hero-motion-field i:nth-child(3) { width: 92px; height: 92px; left: 2%; top: 24%; border: 2px solid var(--blue); opacity: .35; animation: orbit-two 15s linear infinite; }

.motion-ready .hero-title span,
.motion-ready .case-hero .eyebrow,
.motion-ready .case-hero .hero-copy,
.motion-ready .case-hero .hero-actions {
  opacity: 0;
  transform: translateY(72px) rotate(2deg);
  transition: opacity .85s ease, transform .95s cubic-bezier(.2,.8,.2,1);
}
.motion-ready .hero-title span { display: block; }
.motion-ready.is-loaded .case-hero .eyebrow { opacity: 1; transform: none; transition-delay: .48s; }
.motion-ready.is-loaded .hero-title span:nth-child(1) { opacity: 1; transform: none; transition-delay: .54s; }
.motion-ready.is-loaded .hero-title span:nth-child(2) { opacity: 1; transform: none; transition-delay: .63s; }
.motion-ready.is-loaded .hero-title span:nth-child(3) { opacity: 1; transform: none; transition-delay: .72s; }
.motion-ready.is-loaded .case-hero .hero-copy { opacity: 1; transform: none; transition-delay: .8s; }
.motion-ready.is-loaded .case-hero .hero-actions { opacity: 1; transform: none; transition-delay: .88s; }

.motion-ready .learning-board {
  opacity: 0;
  transform: perspective(1200px) translateY(80px) rotateX(8deg) rotateY(-8deg) scale(.94);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.motion-ready.is-loaded .learning-board { opacity: 1; transform: perspective(1200px) translateY(0) rotateX(0) rotateY(0) scale(1); transition-delay: .64s; }
.motion-ready .board-progress span { width: 0; transition: width 1.4s cubic-bezier(.2,.8,.2,1) 1.05s; }
.motion-ready.is-loaded .board-progress span { width: 68%; }
.learning-board .board-card { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.learning-board:hover .board-card:first-child { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 20px 45px rgba(16,16,21,.18); }
.learning-board:hover .board-card:last-child { transform: translateY(-14px) rotate(2deg); box-shadow: 0 20px 45px rgba(16,16,21,.18); }

.motion-reveal { opacity: 0; transform: translateY(62px); transition: opacity .85s ease, transform .95s cubic-bezier(.2,.8,.2,1); }
.motion-reveal.is-visible { opacity: 1; transform: none; }
.motion-stagger > * { opacity: 0; transform: translateY(34px) scale(.975); transition: opacity .65s ease, transform .75s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--motion-index, 0) * 70ms); }
.motion-stagger.is-visible > * { opacity: 1; transform: none; }

.case-page .challenge-card,
.case-page .delivery-card,
.case-page .role-card,
.case-page .interface-card,
.case-page .swatch {
  transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s ease;
}
.case-page .challenge-card:hover,
.case-page .delivery-card:hover,
.case-page .role-card:hover,
.case-page .interface-card:hover,
.case-page .swatch:hover { transform: translateY(-10px); box-shadow: 0 28px 58px rgba(16,16,21,.14); }
.case-page .role-card:hover .role-ui { transform: rotate(0) translateY(-6px); }
.case-page .role-ui { transition: transform .55s cubic-bezier(.2,.8,.2,1); }

.motion-ready .analytics-chart i,
.motion-ready .admin-chart i { transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--motion-index, 0) * 80ms); }
.motion-ready .is-visible .analytics-chart i,
.motion-ready .is-visible .admin-chart i { transform: scaleY(1); }
.motion-ready .lesson-blocks i { transform-origin: bottom; }
.motion-ready .is-visible .lesson-blocks i.active { animation: lesson-pulse 2.8s ease-in-out infinite; }

.case-page .case-cta { position: relative; isolation: isolate; overflow: hidden; }
.case-page .case-cta::before,
.case-page .case-cta::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.case-page .case-cta::before { width: 430px; height: 430px; right: -120px; top: -220px; border: 72px solid var(--blue); animation: cta-ring 9s ease-in-out infinite alternate; }
.case-page .case-cta::after { width: 190px; height: 190px; left: 46%; bottom: -120px; background: var(--orange); animation: cta-dot 7s ease-in-out infinite alternate; }
.case-page .case-cta .button { min-width: 240px; background: var(--ink); border-color: var(--ink); }
.case-page .case-cta .button:hover { background: var(--blue); border-color: var(--blue); }

@keyframes curtain-away { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes curtain-mark { 0% { opacity: 0; transform: translateY(35px) scale(.88); } 45%,75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-24px) scale(1.06); } }
@keyframes orbit-one { to { transform: translate3d(64px, 50px, 0) rotate(90deg) scale(1.15); } }
@keyframes orbit-two { to { transform: rotate(360deg) translateX(34px) rotate(-360deg); } }
@keyframes drift-dot { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-34px) scale(1.18); } }
@keyframes lesson-pulse { 0%,100% { transform: translateY(-10px) scaleY(1); } 50% { transform: translateY(-17px) scaleY(1.08); } }
@keyframes cta-ring { to { transform: translate(-46px, 64px) rotate(40deg); } }
@keyframes cta-dot { to { transform: translate(100px, -42px) scale(1.18); } }

@media (max-width: 980px) {
  .hero-motion-field i:nth-child(1) { right: 12%; }
  .case-page .case-cta::before { width: 300px; height: 300px; right: -140px; border-width: 54px; }
}

@media (max-width: 680px) {
  .case-intro-curtain strong { font-size: 64px; }
  .case-intro-curtain .brand-mark { width: 20px; height: 20px; box-shadow: 12px 0 0 var(--lime); }
  .hero-motion-field i:nth-child(1) { width: 90px; height: 90px; border-width: 16px; right: 2%; top: 20%; }
  .hero-motion-field i:nth-child(2) { left: auto; right: 12%; }
  .case-page .case-cta::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .case-scroll-progress, .case-intro-curtain, .hero-motion-field { display: none; }
  .motion-ready .site-header,
  .motion-ready .hero-title span,
  .motion-ready .case-hero .eyebrow,
  .motion-ready .case-hero .hero-copy,
  .motion-ready .case-hero .hero-actions,
  .motion-ready .learning-board,
  .motion-reveal,
  .motion-stagger > * { opacity: 1; transform: none; transition: none; }
  .motion-ready .board-progress span { width: 68%; transition: none; }
  .motion-ready .analytics-chart i,
  .motion-ready .admin-chart i { transform: scaleY(1); transition: none; }
  .case-page *, .case-page *::before, .case-page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}