/* ==========================================================================
   About: scroll story. Sticky 3D photo stack + a principle rail that fills
   as you read. Porcelain neumorphism for surfaces, gloss for highlights.
   ========================================================================== */
.ab{position:relative;padding:clamp(4.5rem,3rem + 4vw,7rem) 0;background:var(--base);overflow:clip}
.ab::before{content:"";position:absolute;width:900px;height:900px;left:-380px;top:10%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(29,185,194,.10),transparent);}
.ab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,1rem + 5vw,6rem);align-items:start}

/* ---------- Stage ---------- */
.ab-stage-col{position:sticky;top:calc(50vh - 280px)}
.ab-stage{position:relative;height:560px;perspective:1600px}
.ab-stack{position:absolute;z-index:2;left:0;top:40px;width:84%;height:470px;transform-style:preserve-3d;
  transform:rotateX(var(--srx,0deg)) rotateY(var(--sry,0deg));transition:transform .8s var(--soft)}
.ab-stack.is-tilting{transition:transform .1s linear}
.ab-frame{position:absolute;inset:0;margin:0;padding:10px;border-radius:32px;background:var(--base);box-shadow:var(--raise-lg);
  transform-origin:50% 100%;transition:transform 1.1s var(--soft),opacity .8s,filter .8s,box-shadow .6s;will-change:transform}
.ab-frame img{width:100%;height:100%;object-fit:cover;border-radius:24px;box-shadow:var(--press-sm);transform:scale(1.08);transition:transform 1.6s var(--soft)}
.ab-frame.pos-0{z-index:4;transform:none}
.ab-frame.pos-0 img{transform:scale(1)}
.ab-frame.pos-1{z-index:3;transform:translate3d(9%,-7%,-90px) rotate(4deg) scale(.93);filter:saturate(.75) brightness(.97)}
.ab-frame.pos-2{z-index:2;transform:translate3d(16%,-13%,-180px) rotate(7.5deg) scale(.86);filter:saturate(.55) brightness(.95)}
.ab-frame.pos-3{z-index:1;transform:translate3d(22%,-18%,-270px) rotate(10deg) scale(.8);filter:saturate(.4) brightness(.93);opacity:.75}
.ab-frame.is-dealt{z-index:5;animation:deal 1.1s var(--soft) forwards}
@keyframes deal{
  0%{transform:none;opacity:1}
  45%{transform:translate3d(-58%,8%,60px) rotate(-14deg) scale(.96);opacity:1}
  100%{transform:translate3d(22%,-18%,-270px) rotate(10deg) scale(.8);opacity:.75}}
.ab-cap{position:absolute;left:24px;top:24px;display:flex;align-items:center;gap:.55rem;padding:.55rem 1rem .55rem .7rem;border-radius:999px;
  font-weight:700;font-size:.86rem;color:#fff;background:rgba(10,20,60,.42);border:1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  opacity:0;transform:translateY(-12px);transition:opacity .5s,transform .7s var(--soft)}
.ab-frame.pos-0 .ab-cap{opacity:1;transform:none;transition-delay:.45s}
.ab-cap-dot{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(95,240,217,.25)}
.ab-gloss{position:absolute;inset:10px;border-radius:24px;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 30%),radial-gradient(300px circle at var(--lx,30%) var(--ly,20%),rgba(255,255,255,.25),transparent 60%)}

.ab-badge{position:absolute;left:-18px;bottom:0;z-index:6;display:flex;align-items:center;gap:.9rem;padding:.9rem 1.3rem .9rem .9rem;border-radius:24px;
  background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.ab-badge-num{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-width:62px;height:62px;border-radius:18px;font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:#fff;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55) 0 8%,transparent 30%),var(--grad);box-shadow:0 12px 24px rgba(29,120,180,.35)}
.ab-badge-text{display:grid}
.ab-badge-text strong{font-size:.95rem}
.ab-badge-text span{font-size:.8rem;color:var(--ink-faint)}

.ab-orbit{position:absolute;right:-1%;top:-14px;width:200px;height:200px;border-radius:50%;box-shadow:var(--press);z-index:0;animation:orbit 26s linear infinite}
.ab-orbit span{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px rgba(29,185,194,.6)}
.ab-orbit span:nth-child(1){top:-7px;left:calc(50% - 7px)}
.ab-orbit span:nth-child(2){bottom:20px;left:8px;width:10px;height:10px}
.ab-orbit span:nth-child(3){right:4px;top:60%;width:8px;height:8px}
@keyframes orbit{to{transform:rotate(360deg)}}

/* ---------- Copy ---------- */
.ab-intro h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.3rem);letter-spacing:-.035em;line-height:1.06;margin:.2rem 0 1rem}
.ab-lead{font-size:1.06rem;max-width:56ch}

.ab-steps{position:relative;margin:2.4rem 0 0;padding-left:72px}
.ab-rail{position:absolute;left:24px;top:24px;bottom:24px;width:8px;border-radius:8px;box-shadow:var(--press-sm)}
.ab-rail-fill{position:absolute;left:1px;right:1px;top:1px;height:calc(var(--fill,0) * (100% - 2px));border-radius:8px;background:linear-gradient(180deg,var(--cyan),var(--brand));
  box-shadow:0 0 14px rgba(29,185,194,.55);transition:height .25s linear}
.ab-rail-fill::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(29,185,194,.35),0 0 18px rgba(29,185,194,.8)}
.ab-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.ab-step{position:relative;padding:1.3rem 1.4rem;border-radius:26px;cursor:pointer;outline-offset:3px;
  transition:background .5s,box-shadow .6s var(--soft),transform .6s var(--soft)}
.ab-step:hover{box-shadow:var(--raise-sm)}
.ab-step.is-active{background:var(--surface);box-shadow:var(--raise);transform:translateX(6px)}
.ab-node{position:absolute;left:-72px;top:1.1rem;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--base);box-shadow:var(--raise-sm);color:var(--ink-faint);
  transition:color .4s,box-shadow .5s,transform .6s var(--spring)}
.ab-node::before{content:"";position:absolute;inset:6px;border-radius:50%;opacity:0;transform:scale(.6);transition:opacity .5s,transform .6s var(--spring);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 8%,rgba(255,255,255,0) 30%),linear-gradient(145deg,#3f5bc4,#31459A 45%,#1DB9C2);
  box-shadow:0 8px 18px rgba(29,100,180,.4),inset 0 -4px 8px rgba(6,20,60,.35)}
.ab-step.is-active .ab-node{color:#fff;transform:scale(1.08);box-shadow:var(--raise-sm),0 0 0 6px rgba(29,185,194,.12)}
.ab-step.is-active .ab-node::before{opacity:1;transform:none}
.ab-ico{position:relative;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ab-ico-sm{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ab-step-num{font-family:var(--font-head);font-weight:800;font-size:.78rem;color:var(--teal);letter-spacing:.04em}
.ab-step h3{margin:.15rem 0 .4rem;font-size:1.2rem;transition:color .4s}
.ab-step.is-active h3{color:var(--brand)}
:root[data-theme="dark"] .ab-step.is-active h3{color:var(--mint)}
.ab-step p{margin:0;font-size:.95rem;color:var(--ink-faint);transition:color .4s}
.ab-step.is-active p{color:var(--ink-soft)}
.ab-points{display:grid;margin:0;padding:0;list-style:none;opacity:0;max-height:0;overflow:hidden;transition:max-height .7s var(--soft),opacity .5s,margin .6s var(--soft)}
.ab-step.is-active .ab-points{max-height:140px;opacity:1;margin-top:.9rem}
.ab-points li{display:flex;align-items:center;gap:.55rem;padding:.28rem 0;font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.ab-points svg{flex-shrink:0;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--base);box-shadow:var(--raise-sm);color:var(--teal)}

.ab-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem;padding-left:72px}
.ab-btn{display:flex;align-items:center;gap:.8rem;padding:.6rem 1.2rem .6rem .6rem;border-radius:22px;background:var(--base);box-shadow:var(--raise-sm);text-align:left;
  transition:box-shadow .4s,transform .5s var(--spring)}
.ab-btn:hover{box-shadow:var(--raise);transform:translateY(-3px)}
.ab-btn:active{box-shadow:var(--press-sm);transform:none}
.ab-btn-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;color:#fff;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55) 0 8%,transparent 30%),var(--grad);box-shadow:0 8px 18px rgba(29,120,180,.3);transition:transform .5s var(--spring)}
.ab-btn:hover .ab-btn-ico{transform:rotate(-8deg) scale(1.06)}
.ab-btn strong{display:block;font-size:.95rem}
.ab-btn small{display:block;font-size:.78rem;color:var(--ink-faint)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .ab-grid{grid-template-columns:1fr}
  .ab-stage-col{position:relative;top:auto}
  .ab-stage{height:440px;max-width:560px;margin:0 auto}
  .ab-stack{height:360px}
}
@media (max-width:600px){
  .ab-stage{height:360px}
  .ab-stack{width:82%;height:290px;top:30px}
  .ab-badge{left:0;padding:.7rem 1rem .7rem .7rem}
  .ab-badge-num{min-width:50px;height:50px;font-size:1.2rem}
  .ab-orbit{width:130px;height:130px}
  .ab-steps{padding-left:60px}
  .ab-node{left:-60px;width:46px;height:46px}
  .ab-rail{left:19px}
  .ab-actions{padding-left:0}
  .ab-step{padding:1.1rem}
  .ab-step.is-active{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .ab-frame,.ab-frame img,.ab-stack,.ab-points,.ab-step{transition:none}
  .ab-frame.is-dealt{animation:none}
  .ab-orbit{animation:none}
}