/* Shared enhanced case-study components for non-EKS project pages.
   Uses the same visual language as the EKS case study without changing global styles. */

body[data-case-style="enhanced"] .case-overview-copy{max-width:900px}
body[data-case-style="enhanced"] .case-facts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}
body[data-case-style="enhanced"] .case-fact{padding:18px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--panel) 30%,transparent);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
body[data-case-style="enhanced"] .case-fact strong{display:block;margin-bottom:4px;color:var(--orange);font-size:18px;line-height:1.1}
body[data-case-style="enhanced"] .case-fact span{display:block;color:var(--muted);font-size:11px;line-height:1.45}
body[data-case-style="enhanced"] .case-fact:nth-child(3) strong,
body[data-case-style="enhanced"] .case-fact:nth-child(4) strong{color:var(--green)}
body[data-case-style="enhanced"] .case-fact:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--orange) 44%,var(--line))}

body[data-case-style="enhanced"] .case-visual-architecture{margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 97%,transparent),color-mix(in srgb,var(--panel-2) 78%,transparent));box-shadow:0 14px 42px rgba(0,0,0,.14);transition:border-color .22s ease,box-shadow .22s ease}
body[data-case-style="enhanced"] .case-visual-architecture:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
body[data-case-style="enhanced"] .case-arch-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
body[data-case-style="enhanced"] .case-arch-toolbar h3{margin:5px 0 4px;font-size:clamp(24px,2.5vw,32px);line-height:1.05}
body[data-case-style="enhanced"] .case-arch-toolbar p{margin:0;color:var(--muted);font-size:13px}
body[data-case-style="enhanced"] .case-arch-controls{display:flex;align-items:center;gap:8px;flex:0 0 auto}
body[data-case-style="enhanced"] .case-arch-tabs{display:flex;gap:6px}
body[data-case-style="enhanced"] .case-arch-tab{min-height:38px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font-size:11px;font-weight:800;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
body[data-case-style="enhanced"] .case-arch-tab:hover{color:var(--text);border-color:var(--line-strong)}
body[data-case-style="enhanced"] .case-arch-tab.active{border-color:color-mix(in srgb,var(--orange) 70%,var(--line));background:var(--orange);color:#052426}
body[data-case-style="enhanced"] .case-arch-stage{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(250px,.72fr);gap:14px;align-items:stretch}
body[data-case-style="enhanced"] .case-arch-canvas,
body[data-case-style="enhanced"] .case-arch-info{min-height:230px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--bg) 72%,transparent)}
body[data-case-style="enhanced"] .case-arch-canvas{display:flex;align-items:center;overflow:hidden;padding:18px}
body[data-case-style="enhanced"] .case-arch-flow{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .16s ease,transform .16s ease}
body[data-case-style="enhanced"] .case-arch-flow.is-switching{opacity:0;transform:translateY(4px)}
body[data-case-style="enhanced"] .case-arch-node{position:relative;flex:0 1 126px;min-width:88px;min-height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 9px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel-2);color:var(--text);text-align:center;cursor:pointer;opacity:.55;transform:translateY(8px) scale(.98);transition:opacity .34s ease,transform .34s cubic-bezier(.22,1,.36,1),border-color .18s ease,box-shadow .18s ease,background .18s ease}
body[data-case-style="enhanced"] .case-arch-node strong{font-size:12px;line-height:1.2}
body[data-case-style="enhanced"] .case-arch-node small{color:var(--muted);font-size:9px;line-height:1.25}
body[data-case-style="enhanced"] .case-arch-node.active{border-color:color-mix(in srgb,var(--orange) 75%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--orange) 12%,transparent),0 0 22px color-mix(in srgb,var(--orange) 7%,transparent);background:color-mix(in srgb,var(--panel-2) 88%,var(--orange) 12%)}
body[data-case-style="enhanced"] .case-arch-node:hover,
body[data-case-style="enhanced"] .case-arch-node:focus-visible{border-color:color-mix(in srgb,var(--orange) 55%,var(--line));box-shadow:0 8px 24px rgba(0,0,0,.12)}
body[data-case-style="enhanced"] .case-arch-icon{width:36px;height:36px;display:grid;place-items:center;color:var(--green);transition:transform .18s ease,color .18s ease}
body[data-case-style="enhanced"] .case-arch-icon svg{width:100%;height:100%}
body[data-case-style="enhanced"] .case-arch-node.active .case-arch-icon{color:var(--orange);transform:scale(1.06)}
body[data-case-style="enhanced"] .case-arch-link{position:relative;flex:1 1 28px;max-width:48px;min-width:20px;height:2px;overflow:visible;background:linear-gradient(90deg,var(--line-strong),color-mix(in srgb,var(--green) 56%,var(--line-strong)));transform:scaleX(0);transform-origin:left center;opacity:.65}
body[data-case-style="enhanced"] .case-arch-link::after{content:"";position:absolute;top:50%;left:-4px;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px color-mix(in srgb,var(--orange) 55%,transparent);opacity:0;transform:translateY(-50%)}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-node{opacity:1;transform:none}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-node:nth-of-type(2){transition-delay:70ms}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-node:nth-of-type(3){transition-delay:140ms}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-node:nth-of-type(4){transition-delay:210ms}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-node:nth-of-type(5){transition-delay:280ms}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link{animation:caseEnhancedLinkDraw 420ms ease-out both}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link:nth-of-type(2){animation-delay:110ms}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link:nth-of-type(3){animation-delay:220ms}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link:nth-of-type(4){animation-delay:330ms}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link:nth-of-type(5){animation-delay:440ms}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link::after{animation:caseEnhancedSignal 1.55s ease-in-out infinite}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link:nth-of-type(2)::after{animation-delay:.28s}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link:nth-of-type(3)::after{animation-delay:.56s}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link:nth-of-type(4)::after{animation-delay:.84s}
body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link:nth-of-type(5)::after{animation-delay:1.12s}
@keyframes caseEnhancedLinkDraw{to{transform:scaleX(1)}}
@keyframes caseEnhancedSignal{0%{left:-4px;opacity:0}18%,78%{opacity:1}100%{left:calc(100% - 4px);opacity:0}}
body[data-case-style="enhanced"] .case-arch-info{padding:18px;transition:opacity .14s ease,transform .14s ease}
body[data-case-style="enhanced"] .case-arch-info.is-changing{opacity:.25;transform:translateY(3px)}
body[data-case-style="enhanced"] .case-arch-info-kicker{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--orange);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
body[data-case-style="enhanced"] .case-arch-info-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px color-mix(in srgb,var(--orange) 50%,transparent)}
body[data-case-style="enhanced"] .case-arch-info h4{margin:0 0 8px;font-size:18px;line-height:1.1}
body[data-case-style="enhanced"] .case-arch-info p{margin:0 0 10px;color:var(--muted);font-size:11px;line-height:1.55}
body[data-case-style="enhanced"] .case-arch-info strong{display:block;margin-bottom:5px;color:var(--green);font-size:10px}
body[data-case-style="enhanced"] .case-arch-benefits{display:grid;gap:4px;margin:0;padding:0;list-style:none;color:var(--muted);font-size:10px}
body[data-case-style="enhanced"] .case-arch-benefits li::before{content:"✓";margin-right:7px;color:var(--green);font-weight:900}

body[data-case-style="enhanced"] .case-troubleshooting-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
body[data-case-style="enhanced"] .case-trouble-card{position:relative;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 97%,transparent),color-mix(in srgb,var(--panel-2) 78%,transparent));box-shadow:0 14px 42px rgba(0,0,0,.14);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
body[data-case-style="enhanced"] .case-trouble-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--orange) 42%,var(--line));box-shadow:var(--shadow)}
body[data-case-style="enhanced"] .case-trouble-no{display:block;margin-bottom:20px;color:color-mix(in srgb,var(--text) 12%,transparent);font:850 30px/1 ui-monospace,monospace}
body[data-case-style="enhanced"] .case-trouble-card h3{margin:6px 0 14px;font-size:21px;line-height:1.08}
body[data-case-style="enhanced"] .case-trouble-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
body[data-case-style="enhanced"] .case-trouble-card p+p{margin-top:12px}
body[data-case-style="enhanced"] .case-trouble-card p strong{display:block;margin-bottom:4px;color:var(--orange);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

body[data-case-style="enhanced"] .case-outcome-panel{margin-top:24px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 97%,transparent),color-mix(in srgb,var(--panel-2) 78%,transparent));box-shadow:0 14px 42px rgba(0,0,0,.14);transition:border-color .2s ease,box-shadow .2s ease}
body[data-case-style="enhanced"] .case-outcome-panel:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
body[data-case-style="enhanced"] .case-outcome-panel h2{margin:7px 0 12px;font-size:clamp(35px,4.3vw,54px)}
body[data-case-style="enhanced"] .case-outcome-panel p{max-width:940px;margin:0;color:var(--muted)}

/* Motion polish: does not alter spacing or component dimensions. */
body[data-case-style="enhanced"] .case-motion-facts.is-inview .case-fact{animation:caseEnhancedFact 720ms ease-out both}
body[data-case-style="enhanced"] .case-motion-facts.is-inview .case-fact:nth-child(2){animation-delay:90ms}
body[data-case-style="enhanced"] .case-motion-facts.is-inview .case-fact:nth-child(3){animation-delay:180ms}
body[data-case-style="enhanced"] .case-motion-facts.is-inview .case-fact:nth-child(4){animation-delay:270ms}
@keyframes caseEnhancedFact{0%,100%{box-shadow:0 0 0 transparent}45%{border-color:color-mix(in srgb,var(--orange) 48%,var(--line));box-shadow:0 0 22px color-mix(in srgb,var(--orange) 7%,transparent)}}
body[data-case-style="enhanced"] .case-motion-list.is-inview>li{animation:caseEnhancedStep 680ms ease-out both}
body[data-case-style="enhanced"] .case-motion-list.is-inview>li:nth-child(2){animation-delay:75ms}
body[data-case-style="enhanced"] .case-motion-list.is-inview>li:nth-child(3){animation-delay:150ms}
body[data-case-style="enhanced"] .case-motion-list.is-inview>li:nth-child(4){animation-delay:225ms}
body[data-case-style="enhanced"] .case-motion-list.is-inview>li:nth-child(5){animation-delay:300ms}
body[data-case-style="enhanced"] .case-motion-list.is-inview>li:nth-child(6){animation-delay:375ms}
body[data-case-style="enhanced"] .case-motion-list.is-inview>li:nth-child(7){animation-delay:450ms}
body[data-case-style="enhanced"] .case-motion-list>li:hover{border-color:color-mix(in srgb,var(--orange) 40%,var(--line));background:color-mix(in srgb,var(--orange) 3%,transparent);box-shadow:inset 3px 0 0 color-mix(in srgb,var(--orange) 78%,transparent);transform:translateX(2px)}
@keyframes caseEnhancedStep{0%,100%{box-shadow:inset 0 0 0 transparent}45%{border-color:color-mix(in srgb,var(--orange) 42%,var(--line));box-shadow:inset 3px 0 0 color-mix(in srgb,var(--orange) 72%,transparent)}}
body[data-case-style="enhanced"] .case-motion-terminal{position:relative;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease}
body[data-case-style="enhanced"] .case-motion-terminal::after{content:"";position:absolute;z-index:3;left:0;right:0;top:-3px;height:2px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--green) 75%,white),transparent);box-shadow:0 0 14px color-mix(in srgb,var(--green) 30%,transparent)}
body[data-case-style="enhanced"] .case-motion-terminal.is-inview{animation:caseEnhancedTerminalWake 950ms ease-out 1}
body[data-case-style="enhanced"] .case-motion-terminal.is-inview::after{animation:caseEnhancedTerminalScan 1450ms cubic-bezier(.22,.61,.36,1) 260ms 1 both}
body[data-case-style="enhanced"] .case-motion-terminal:hover{border-color:color-mix(in srgb,var(--green) 40%,var(--line));box-shadow:0 12px 32px rgba(0,0,0,.15)}
body[data-case-style="enhanced"] .case-motion-terminal .terminal-cursor{animation:caseEnhancedCursor 950ms steps(1,end) infinite}
@keyframes caseEnhancedTerminalWake{0%,100%{box-shadow:none}45%{box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 18%,transparent),0 0 28px color-mix(in srgb,var(--green) 7%,transparent)}}
@keyframes caseEnhancedTerminalScan{0%{top:-3px;opacity:0}12%,76%{opacity:.72}100%{top:calc(100% + 3px);opacity:0}}
@keyframes caseEnhancedCursor{0%,48%{opacity:1}49%,100%{opacity:.12}}
body[data-case-style="enhanced"] .case-motion-trouble.is-inview .case-trouble-card{animation:caseEnhancedTrouble 820ms ease-out both}
body[data-case-style="enhanced"] .case-motion-trouble.is-inview .case-trouble-card:nth-child(2){animation-delay:140ms}
body[data-case-style="enhanced"] .case-motion-trouble.is-inview .case-trouble-card:nth-child(3){animation-delay:280ms}
@keyframes caseEnhancedTrouble{0%,100%{box-shadow:0 14px 42px rgba(0,0,0,.14)}45%{border-color:color-mix(in srgb,var(--orange) 42%,var(--line));box-shadow:0 0 25px color-mix(in srgb,var(--orange) 7%,transparent)}}
body[data-case-style="enhanced"] .case-motion-outcome.is-inview{animation:caseEnhancedOutcome 1000ms ease-out both}
@keyframes caseEnhancedOutcome{0%,100%{box-shadow:0 14px 42px rgba(0,0,0,.14)}45%{box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 16%,transparent),0 0 28px color-mix(in srgb,var(--green) 7%,transparent)}}

@media(max-width:900px){
  body[data-case-style="enhanced"] .case-arch-stage{grid-template-columns:1fr}
  body[data-case-style="enhanced"] .case-arch-info{min-height:0}
  body[data-case-style="enhanced"] .case-troubleshooting-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  body[data-case-style="enhanced"] .case-facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-case-style="enhanced"] .case-arch-toolbar{flex-direction:column}
  body[data-case-style="enhanced"] .case-arch-controls{width:100%}
  body[data-case-style="enhanced"] .case-arch-tabs{width:100%}
  body[data-case-style="enhanced"] .case-arch-tab{flex:1}
  body[data-case-style="enhanced"] .case-arch-flow{flex-direction:column;align-items:stretch}
  body[data-case-style="enhanced"] .case-arch-node{width:100%;min-height:82px;flex:none}
  body[data-case-style="enhanced"] .case-arch-link{width:2px;min-width:2px;height:22px;min-height:22px;max-width:none;margin:auto;transform:scaleY(0);transform-origin:center top}
  body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link{animation:caseEnhancedLinkDrawMobile 360ms ease-out both}
  body[data-case-style="enhanced"] .case-arch-link::after{left:50%;top:-4px;transform:translateX(-50%)}
  body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link::after{animation:caseEnhancedSignalMobile 1.45s ease-in-out infinite}
  @keyframes caseEnhancedLinkDrawMobile{to{transform:scaleY(1)}}
  @keyframes caseEnhancedSignalMobile{0%{top:-4px;opacity:0}18%,78%{opacity:1}100%{top:calc(100% - 4px);opacity:0}}
}
@media(max-width:520px){
  body[data-case-style="enhanced"] .case-facts-grid{grid-template-columns:1fr 1fr}
  body[data-case-style="enhanced"] .case-visual-architecture{padding:18px}
}
@media(prefers-reduced-motion:reduce){
  body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link,
  body[data-case-style="enhanced"] .case-visual-architecture.is-ready .case-arch-link::after,
  body[data-case-style="enhanced"] .case-motion-facts.is-inview .case-fact,
  body[data-case-style="enhanced"] .case-motion-list.is-inview>li,
  body[data-case-style="enhanced"] .case-motion-terminal.is-inview,
  body[data-case-style="enhanced"] .case-motion-terminal.is-inview::after,
  body[data-case-style="enhanced"] .case-motion-terminal .terminal-cursor,
  body[data-case-style="enhanced"] .case-motion-trouble.is-inview .case-trouble-card,
  body[data-case-style="enhanced"] .case-motion-outcome.is-inview{animation:none!important}
  body[data-case-style="enhanced"] .case-arch-node{opacity:1;transform:none}
  body[data-case-style="enhanced"] .case-arch-link{transform:none}
}