/* Static case UI contract: pills + featured carousel styles must exist before JS. */

.case-channel-pills{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.case-channel-pill{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 14px;border:1px solid currentColor;border-radius:999px;font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-size:12px;font-weight:500;line-height:1;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,text-shadow .22s ease}
.case-channel-pill--google{color:#d87986;background:rgba(200,90,104,.105);box-shadow:inset 0 0 0 1px rgba(200,90,104,.04),0 0 16px rgba(200,90,104,.16);text-shadow:0 0 10px rgba(200,90,104,.16)}
.case-channel-pill--meta{color:#4f83ff;background:rgba(45,108,255,.11);box-shadow:inset 0 0 0 1px rgba(45,108,255,.04),0 0 16px rgba(45,108,255,.18);text-shadow:0 0 10px rgba(45,108,255,.18)}
.case-channel-pill--tiktok{color:#ad72ff;background:rgba(154,77,255,.115);box-shadow:inset 0 0 0 1px rgba(154,77,255,.04),0 0 16px rgba(154,77,255,.18);text-shadow:0 0 10px rgba(154,77,255,.18)}
.case:hover .case-channel-pill,.related-case:hover .case-channel-pill{transform:translateY(-1px)}
.case:hover .case-channel-pill--google,.related-case:hover .case-channel-pill--google{background:rgba(200,90,104,.16);box-shadow:inset 0 0 0 1px rgba(200,90,104,.05),0 0 28px rgba(200,90,104,.26);text-shadow:0 0 13px rgba(200,90,104,.28)}
.case:hover .case-channel-pill--meta,.related-case:hover .case-channel-pill--meta{background:rgba(45,108,255,.17);box-shadow:inset 0 0 0 1px rgba(45,108,255,.05),0 0 28px rgba(45,108,255,.28);text-shadow:0 0 13px rgba(45,108,255,.30)}
.case:hover .case-channel-pill--tiktok,.related-case:hover .case-channel-pill--tiktok{background:rgba(154,77,255,.17);box-shadow:inset 0 0 0 1px rgba(154,77,255,.05),0 0 28px rgba(154,77,255,.28);text-shadow:0 0 13px rgba(154,77,255,.30)}
.case-detail-hero .case-channel-pills{gap:10px;margin:0 0 20px}
.case-detail-hero .case-channel-pill{min-height:42px;padding:0 18px;font-size:14px;border-width:1.5px;background:rgba(10,11,15,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.case-detail-hero .case-channel-pill--google{background:rgba(200,90,104,.12);box-shadow:inset 0 0 0 1px rgba(200,90,104,.05),0 0 20px rgba(200,90,104,.18)}
.case-detail-hero .case-channel-pill--meta{background:rgba(45,108,255,.12);box-shadow:inset 0 0 0 1px rgba(45,108,255,.05),0 0 20px rgba(45,108,255,.20)}
.case-detail-hero .case-channel-pill--tiktok{background:rgba(154,77,255,.13);box-shadow:inset 0 0 0 1px rgba(154,77,255,.05),0 0 20px rgba(154,77,255,.20)}

#featured-cases{position:relative;overflow:hidden;--case-glow-a:0vw;--case-glow-b:0vw}
#featured-cases>.shell{z-index:2}
.case-swiper-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.82}
.case-swiper-glow:before,.case-swiper-glow:after{content:"";position:absolute;border-radius:50%;filter:blur(82px);will-change:transform;transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .5s}
.case-swiper-glow:before{width:42vw;height:42vw;min-width:420px;min-height:420px;left:-18vw;top:20%;background:rgba(41,103,255,.14);transform:translate3d(var(--case-glow-a),-4%,0)}
.case-swiper-glow:after{width:34vw;height:34vw;min-width:340px;min-height:340px;right:-13vw;bottom:2%;background:rgba(91,125,255,.09);transform:translate3d(var(--case-glow-b),8%,0)}
#featured-cases .case-grid{display:flex!important;grid-template-columns:none!important;gap:18px!important;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-padding-inline:0 8vw;padding:18px 8vw 26px 0;margin-right:calc((100vw - min(1180px,calc(100% - 28px)))/-2);overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y}
#featured-cases .case-grid::-webkit-scrollbar{display:none}
#featured-cases .case-grid.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
body[data-page-type="landing"] #featured-cases .case,
body[data-page-type="landing"] #featured-cases .case.big{flex:0 0 clamp(330px,36vw,438px);scroll-snap-align:start;grid-row:auto!important;transform:translate3d(0,7px,0) scale(.955)!important;opacity:.62!important;filter:saturate(.78)!important;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .45s,filter .45s,border-color .45s,box-shadow .45s!important;will-change:transform}
body[data-page-type="landing"] #featured-cases .case.is-active{transform:translate3d(0,0,0) scale(1)!important;opacity:1!important;filter:saturate(1)!important;border-color:rgba(126,162,255,.24);box-shadow:0 30px 70px rgba(0,0,0,.30)}
body[data-page-type="landing"] #featured-cases:not(.case-swiper-ready) .case:first-child{transform:translate3d(0,0,0) scale(1)!important;opacity:1!important;filter:saturate(1)!important;border-color:rgba(126,162,255,.24);box-shadow:0 30px 70px rgba(0,0,0,.30)}
#featured-cases .case-media{overflow:hidden}
#featured-cases .case-media img.cover{transform:scale(1.055) translate3d(var(--case-parallax,0px),0,0)!important;transition:transform .18s linear,filter .45s;will-change:transform}
#featured-cases .case:not(.is-active) .case-media img.cover{filter:brightness(.82) saturate(.82) blur(.45px)}
#featured-cases:not(.case-swiper-ready) .case:first-child .case-media img.cover{filter:none}
.case-swiper-controls{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;gap:18px;align-items:center;margin-top:26px;max-width:100%}
.case-swiper-count{display:flex;align-items:baseline;gap:6px;min-width:72px;color:rgba(255,255,255,.62);font-size:12px;letter-spacing:.08em}
.case-swiper-count strong{font-size:18px;color:#fff;font-weight:500}
.case-swiper-progress{height:2px;background:rgba(255,255,255,.10);position:relative;overflow:hidden;border-radius:99px}
.case-swiper-progress span{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,#2967ff,#9bb4ff);transform:scaleX(var(--case-fill,.16));transform-origin:left center;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.case-swiper-nav{display:flex;gap:8px}
.case-swiper-btn{width:44px;height:44px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(255,255,255,.035);color:#fff;display:grid;place-items:center;font-size:21px;line-height:1;transition:background .2s,border-color .2s,transform .2s}
.case-swiper-btn:hover{background:rgba(41,103,255,.14);border-color:rgba(126,162,255,.30);transform:translateY(-2px)}

@media(max-width:760px){
  .case-channel-pills{gap:6px;margin-bottom:12px}.case-channel-pill{min-height:30px;padding:0 11px;font-size:11px}.case-detail-hero .case-channel-pills{gap:7px;margin-bottom:16px}.case-detail-hero .case-channel-pill{min-height:36px;padding:0 14px;font-size:12px}
  #featured-cases .case-grid{margin-right:-14px;padding-right:14vw;gap:14px}
  body[data-page-type="landing"] #featured-cases .case,body[data-page-type="landing"] #featured-cases .case.big{flex-basis:min(84vw,390px)}
  .case-swiper-controls{grid-template-columns:auto 1fr auto;gap:12px;margin-top:20px}
  .case-swiper-btn{width:40px;height:40px}
  .case-swiper-glow:before{opacity:.72}.case-swiper-glow:after{opacity:.55}
}
@media(prefers-reduced-motion:reduce){
  .case-channel-pill{transition:none!important}
  body[data-page-type="landing"] #featured-cases .case,body[data-page-type="landing"] #featured-cases .case.big,#featured-cases .case-media img.cover,.case-swiper-glow:before,.case-swiper-glow:after{transition:none!important}
  #featured-cases .case-grid{scroll-behavior:auto}
}