/* ===== ADAYA — Services Showcase (home) =====
   The signature services section: an interactive expanding accordion of
   the six services Adaya delivers. On desktop each service is a vertical
   panel; the active one expands to reveal its story while the rest
   collapse to an icon + vertical label. Hover / click / arrow-keys drive
   it, with a gentle autoplay that pauses on interaction. On mobile it
   becomes a clean stacked card list. Scroll-reveal entrance, theme-aware,
   no-JS + reduced-motion safe. */

.svcx{position:relative}

/* ---------- rail ---------- */
.svcx-rail{
  position:relative;z-index:1;display:flex;gap:14px;
  height:clamp(400px,50vw,480px);
}
.svcx-panel{
  position:relative;display:block;flex:1 1 0;min-width:0;height:100%;
  border-radius:var(--r-xl);overflow:hidden;cursor:pointer;text-align:left;
  background:var(--glass-reg);border:1px solid var(--glass-border);
  box-shadow:var(--elev-2),var(--glass-hi);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  appearance:none;-webkit-appearance:none;font:inherit;color:inherit;padding:0;
  transition:flex-grow .6s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.svcx-panel.active{
  flex-grow:5.6;border-color:color-mix(in srgb,var(--sky) 42%,transparent);
  box-shadow:var(--elev-3),0 0 44px color-mix(in srgb,var(--sky) 16%,transparent);
}
.svcx-panel:focus-visible{outline:3px solid color-mix(in srgb,var(--sky) 55%,transparent);outline-offset:3px}

/* brand wash — only on the active panel (blue→cyan, per design system imagery) */
.sx-bg{
  position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s var(--ease);
  background:
    radial-gradient(120% 90% at 84% 14%, color-mix(in srgb,var(--sky) 22%,transparent), transparent 58%),
    linear-gradient(152deg, color-mix(in srgb,var(--sapphire) 20%,transparent) 0%, transparent 64%);
}
.svcx-panel.active .sx-bg{opacity:1}

/* icon chip */
.sx-ic{
  position:absolute;top:22px;left:22px;z-index:2;
  width:48px;height:48px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--sapphire) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--sky) 28%,transparent);color:var(--text-brand);
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease);
}
.sx-ic svg{width:24px;height:24px}
.svcx-panel.active .sx-ic{
  background:var(--grad-cta);border-color:transparent;color:#fff;
  box-shadow:0 12px 26px rgba(26,132,242,.3),0 0 28px color-mix(in srgb,var(--sky) 38%,transparent);
}

/* number */
.sx-num{
  position:absolute;top:27px;right:24px;z-index:2;
  font-family:"IBM Plex Mono",monospace;font-size:.9rem;letter-spacing:.12em;color:var(--text-3);
  transition:color .5s var(--ease);
}
.svcx-panel.active .sx-num{color:var(--text-brand)}

/* collapsed vertical label */
.sx-label{
  position:absolute;left:50%;bottom:26px;z-index:2;
  writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);
  font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--text);white-space:nowrap;
  transition:opacity .35s var(--ease);
}
.svcx-panel.active .sx-label{opacity:0}

/* expanded detail */
.sx-detail{
  position:absolute;left:28px;bottom:28px;right:28px;z-index:2;
  max-width:min(380px,90%);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s var(--ease) .12s,transform .5s var(--ease) .12s;
}
.svcx-panel.active .sx-detail{opacity:1;transform:none;pointer-events:auto}
.sx-detail h3{font-size:clamp(1.3rem,1.9vw,1.72rem);font-weight:700;letter-spacing:-.02em;line-height:1.12;
  margin-bottom:12px;color:var(--text)}
.sx-detail p{font-size:1rem;color:var(--text-2);line-height:1.6;margin-bottom:16px;text-wrap:pretty}
.sx-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sx-tags span{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.05em;
  padding:5px 11px;border-radius:999px;color:var(--text-2);
  background:color-mix(in srgb,var(--sapphire) 9%,transparent);border:1px solid var(--border);
}
.sx-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:var(--text-brand)}
.sx-link svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.svcx-panel.active:hover .sx-link svg{transform:translateX(4px)}

/* ---------- scroll reveal (only when JS arms it) ---------- */
.svcx.svcx-anim .svcx-panel{opacity:0}
@keyframes sxRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.svcx.svcx-anim .svcx-rail.in .svcx-panel{animation:sxRise .7s var(--ease) forwards}
.svcx.svcx-anim .svcx-rail.in .svcx-panel:nth-child(1){animation-delay:.04s}
.svcx.svcx-anim .svcx-rail.in .svcx-panel:nth-child(2){animation-delay:.12s}
.svcx.svcx-anim .svcx-rail.in .svcx-panel:nth-child(3){animation-delay:.20s}
.svcx.svcx-anim .svcx-rail.in .svcx-panel:nth-child(4){animation-delay:.28s}
.svcx.svcx-anim .svcx-rail.in .svcx-panel:nth-child(5){animation-delay:.36s}
.svcx.svcx-anim .svcx-rail.in .svcx-panel:nth-child(6){animation-delay:.44s}

/* ---------- responsive: stacked cards ---------- */
@media (max-width:860px){
  .svcx-rail{flex-direction:column;height:auto;gap:14px}
  .svcx-panel{flex:none;height:auto;min-height:0;padding:26px 24px 28px}
  .svcx-panel.active{flex-grow:0}
  .sx-bg{opacity:.4}
  .svcx-panel.active .sx-bg{opacity:.85}
  .sx-ic{position:static}
  .sx-num{top:30px;right:26px}
  .sx-label{display:none}
  .sx-detail{position:static;opacity:1;transform:none;pointer-events:auto;max-width:none;margin-top:20px}
}

@media (prefers-reduced-motion:reduce){
  .svcx.svcx-anim .svcx-panel{opacity:1;animation:none}
  .svcx-panel,.sx-bg,.sx-detail,.sx-label,.sx-ic{transition:none}
}