/* ============================================================
   motion.css — shared microinteractions, site-wide
   Everything here degrades to static under prefers-reduced-motion.
   ============================================================ */

/* --- staggered reveal: children arrive in sequence, not as a block --- */
.stagger > * { opacity: 0; transform: translateY(18px); }
.stagger.in > * { animation: rise .62s var(--e) forwards; }
.stagger.in > *:nth-child(1) { animation-delay: .00s }
.stagger.in > *:nth-child(2) { animation-delay: .07s }
.stagger.in > *:nth-child(3) { animation-delay: .14s }
.stagger.in > *:nth-child(4) { animation-delay: .21s }
.stagger.in > *:nth-child(5) { animation-delay: .28s }
.stagger.in > *:nth-child(6) { animation-delay: .35s }
.stagger.in > *:nth-child(7) { animation-delay: .42s }
.stagger.in > *:nth-child(8) { animation-delay: .49s }
@keyframes rise { to { opacity: 1; transform: none } }

/* opacity-only stagger: for groups whose children already own their transform
   (a forwards-filled transform keyframe would outrank :hover and base transforms) */
.stagger-fade > * { opacity: 0 }
.stagger-fade.in > * { animation: fadein .6s var(--e) forwards }
.stagger-fade.in > *:nth-child(1) { animation-delay: .00s }
.stagger-fade.in > *:nth-child(2) { animation-delay: .08s }
.stagger-fade.in > *:nth-child(3) { animation-delay: .16s }
.stagger-fade.in > *:nth-child(4) { animation-delay: .24s }
.stagger-fade.in > *:nth-child(5) { animation-delay: .32s }
@keyframes fadein { to { opacity: 1 } }

/* --- images settle in rather than snapping --- */
.shot img, .legacy-grid img, .dsgrid img {
  transition: transform .7s var(--e), opacity .7s var(--e);
}
.reveal-img { opacity: 0; transform: scale(.985) }
.reveal-img.in { opacity: 1; transform: none }

/* --- reading progress on case study pages --- */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--peri), var(--amber));
  z-index: 240; pointer-events: none;
}

/* --- scrollspy: current section in the nav --- */
.nav a.current:not(.hire), .nav .nbtn.current { color: var(--text) }
/* the Contact pill is already filled: keep its dark ink and mark it with a ring,
   not a white label on light purple or an underline inside the pill */
.nav a.hire.current { color:#16121C; box-shadow:0 0 0 2px rgba(157,155,245,.55), 0 0 0 5px rgba(157,155,245,.18) }
.nav a.hire.current::after { display:none }
.nav a.current::after, .nav .nbtn.current::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1.5px;
  border-radius: 2px; background: linear-gradient(90deg, var(--peri), var(--amber));
  animation: spy .3s var(--e) both;
}
.nav a, .nav .nbtn { position: relative }
@keyframes spy { from { opacity: 0; transform: scaleX(.4) } to { opacity: 1; transform: none } }

/* --- case cards register as destinations --- */
.case { transition: background .4s var(--e) }
.case:hover { background: rgba(245,242,237,.014) }
.case .case-head h3 { transition: transform .35s var(--e) }
.case:hover .case-head h3 { transform: translateX(3px) }

/* --- mega menu grows from its button --- */
.submenu { transform-origin: top center; animation: pop .2s var(--e) both }
.mmenu   { transform-origin: top center; animation: pop .22s var(--e) both }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) scale(.96) }
                 to   { opacity: 1; transform: translateX(-50%) scale(1) } }

/* --- counting stats hold their space while ticking --- */
.stat .n { font-variant-numeric: tabular-nums }

/* --- interactive accordion demo (BankUnited) --- */
.demo { margin: 30px 0 0; max-width: 420px }
.demo-note { font-size: 12.5px; color: var(--dim); margin: 0 0 12px; letter-spacing: .01em }
.acc { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #0B0B10 }
.acc-row + .acc-row { border-top: 1px solid rgba(245,242,237,.08) }
.acc-btn {
  width: 100%; border: 0; cursor: pointer; text-align: left; font-family: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; color: #fff;
  background: linear-gradient(100deg, #2FB6F5, #8B5CF6);
  transition: filter .25s var(--e), padding .3s var(--e);
}
.acc-row.open .acc-btn { background: #14141C; }
.acc-btn:hover { filter: brightness(1.06) }
.acc-btn .lbl { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase }
.acc-btn .amt { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums }
.acc-btn .caret { width: 8px; height: 8px; margin-left: 2px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .3s var(--e) }
.acc-row.open .acc-btn .caret { transform: rotate(-135deg) }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--e); background: #fff }
.acc-row.open .acc-panel { grid-template-rows: 1fr }
.acc-panel > div { overflow: hidden }
.acc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 13px 18px; color: #16121C }
.acc-line + .acc-line { border-top: 1px solid rgba(0,0,0,.07) }
.acc-line b { font-size: 14px; font-weight: 600 }
.acc-line span { font-size: 11px; color: #6B6675; display: block; margin-top: 2px; letter-spacing: .04em }
.acc-line .v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap }

/* --- before / after wipe --- */
.compare-wipe { position: relative; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--line); background: var(--s1); touch-action: pan-y;
  cursor: ew-resize; user-select: none; margin: 26px 0 0 }
.compare-wipe img { display: block; width: 100%; height: auto }
.compare-wipe .after { position: absolute; inset: 0; width: 100%;
  clip-path: inset(0 0 0 var(--pos, 50%)) }
.compare-wipe .after img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: top left }
.wipe-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px;
  background: linear-gradient(180deg, var(--peri), var(--amber)); transform: translateX(-1px); z-index: 3 }
.wipe-handle::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; transform: translate(-50%,-50%); border-radius: 50%;
  background: rgba(16,14,20,.82); border: 1.5px solid rgba(245,242,237,.6);
  backdrop-filter: blur(6px) }
.wipe-tag { position: absolute; top: 12px; z-index: 4; font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  background: rgba(16,14,20,.76); color: var(--text); border: 1px solid var(--line) }
.wipe-tag.l { left: 12px } .wipe-tag.r { right: 12px }

@media (prefers-reduced-motion: reduce) {
  .stagger > *, .stagger.in > * { opacity: 1; transform: none; animation: none }
  .stagger-fade > *, .stagger-fade.in > * { opacity: 1; animation: none }
  .reveal-img, .reveal-img.in { opacity: 1; transform: none }
  .submenu, .mmenu { animation: none }
  .nav a.current::after, .nav .nbtn.current::after { animation: none }
  .case:hover .case-head h3 { transform: none }
  .acc-panel { transition: none }
  .progress { transition: none }
}

/* --- before / after toggle: whole product transforms at once --- */
.ba { margin: 28px 0 0 }
.ba-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(245,242,237,.03); margin-bottom: 22px }
.ba-btn { border: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: 9px 20px; border-radius: 999px; background: transparent;
  transition: color .25s var(--e), background .25s var(--e) }
.ba-btn:hover { color: var(--text) }
.ba-btn.is-on { color: #16121C; background: linear-gradient(90deg, var(--peri), #C0A2F2) }
.ba-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px }
@media(max-width:760px){ .ba-row { grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media(max-width:460px){ .ba-row { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto } }
.ba-slot { position: relative; margin: 0 }
.ba-stage { position: relative; aspect-ratio: 416/550; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: #fff }
.ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: opacity .55s var(--e), transform .55s var(--e) }
.ba-stage .ba-after { opacity: 0; transform: scale(1.03) }
.ba[data-state="after"] .ba-stage .ba-before { opacity: 0; transform: scale(.98) }
.ba[data-state="after"] .ba-stage .ba-after  { opacity: 1; transform: none }
.ba-row .ba-slot:nth-child(2) .ba-stage img { transition-delay: .07s }
.ba-row .ba-slot:nth-child(3) .ba-stage img { transition-delay: .14s }
.ba-slot figcaption { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim) }
@media (prefers-reduced-motion: reduce) {
  .ba-stage img { transition: opacity .01s linear; transform: none !important }
  .ba-row .ba-slot .ba-stage img { transition-delay: 0s }
}

/* ============================================================
   Case study readability: captions, image scale, section rail
   ============================================================ */

/* captions carry the reasoning, so they read as content, not fine print */
.cs-body .cap{
  font-size:15.5px; line-height:1.68; color:#BDB6C6;
  max-width:66ch; margin-top:16px;
}
.cs-body .cap b{ color:#F0ECE6; font-weight:700 }

/* images sit at a readable measure instead of dominating the viewport */
.cs-body figure{ max-width:820px; margin-left:auto; margin-right:auto }
.cs-body figure.wide{ max-width:none }
.cs-body figure > .shot img{ max-height:78vh; object-fit:contain; background:#0B0B10 }
.cs-body .duo figure,.cs-body .dsgrid figure{ max-width:none }

/* case study pages read at a slightly narrower measure, which also frees
   the left margin for the section rail at common laptop widths */
.cs-hero .wrap,.cs-body .wrap{ max-width:1060px }

/* floating section rail: compact by default, readable on hover or focus */
.rail{
  position:fixed; left:6px; top:50%; transform:translateY(-50%); z-index:150;
  width:38px; box-sizing:border-box;
  display:none; padding:12px 8px; border-radius:14px;
  max-height:80vh; overflow:hidden;
  background:transparent; border:1px solid transparent;
  transition:width .28s var(--e), background .25s var(--e), border-color .25s var(--e), box-shadow .25s var(--e);
}
.rail:hover,.rail:focus-within{
  width:190px;
  background:rgba(20,17,26,.92); border-color:var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.5); backdrop-filter:blur(14px);
}
.rail a{
  display:flex; align-items:center; gap:0; padding:6px 4px; border-radius:8px;
  color:var(--dim); text-decoration:none;
  transition:color .2s var(--e);
}
.rail a i{
  width:14px; height:2px; flex:none; border-radius:2px; background:currentColor;
  opacity:.45; transition:width .28s var(--e), opacity .28s var(--e), background .28s var(--e);
}
.rail a span{
  font-size:12.5px; line-height:1.3; white-space:nowrap;
  max-width:0; opacity:0; overflow:hidden;
  transition:max-width .3s var(--e), opacity .22s var(--e);
}
.rail:hover a,.rail:focus-within a{ gap:10px }
.rail:hover a span,.rail:focus-within a span{ max-width:170px; opacity:1 }
.rail a:hover{ color:var(--text) }
.rail a.on{ color:var(--text) }
.rail a.on i{ width:28px; opacity:1; background:linear-gradient(90deg,var(--peri),var(--amber)) }
@media(min-width:720px){ .rail{ display:block } }
@media(min-width:720px) and (max-width:959px){
  .cs-hero .wrap,.cs-body .wrap{
    width:calc(100% - 92px); margin-left:68px; margin-right:24px;
  }
}
@media(prefers-reduced-motion:reduce){ .rail,.rail a,.rail a i,.rail a span{ transition:none } }

/* ---------- image carousel ---------- */
.carousel { position: relative }
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -ms-overflow-style: none; border-radius: 18px }
.carousel-track::-webkit-scrollbar { display: none }
.carousel-slide { scroll-snap-align: center; min-width: 0 }
.carousel-slide img { display: block; width: 100%; height: auto }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(16,14,20,.72); backdrop-filter: blur(10px); color: var(--text);
  font: 600 20px/1 var(--sans); cursor: pointer; display: grid; place-items: center;
  transition: background .2s var(--e), border-color .2s var(--e), opacity .2s var(--e) }
.carousel-btn:hover { border-color: var(--peri); background: rgba(16,14,20,.92) }
.carousel-btn:disabled { opacity: .28; cursor: default }
.carousel-btn.prev { left: 12px }
.carousel-btn.next { right: 12px }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px }
.carousel-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: background .2s var(--e), transform .2s var(--e) }
.carousel-dots button[aria-current="true"] { background: var(--peri); transform: scale(1.35) }
@media(max-width:640px){ .carousel-btn { width: 36px; height: 36px; font-size: 17px } }