/* Animated card scenes for "What we do" — style B: the product itself, floating in depth on the night background */
.wwd .media.has-scene::after { display:none; }
.wwd .card:hover .media.has-scene .stage { transform:translate(-50%,-50%) scale(var(--s,1)); }

.scene { position:absolute; inset:0; overflow:hidden; color:#EEF1F5; font-family:var(--sans);
  background:radial-gradient(90% 110% at 75% 0%, #22304D 0%, #101828 45%, #0A0D12 100%); }
.scene::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(80% 80% at 70% 20%, #000, transparent); mask-image:radial-gradient(80% 80% at 70% 20%, #000, transparent); }
.scene .stage { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(var(--s,1)); transform-origin:center; }
.scene .ex { position:absolute; left:14px; top:14px; z-index:3; font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:rgba(238,241,245,.7); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); padding:6px 8px; border-radius:6px; }

/* shared check circle */
.ck { flex:none; width:22px; height:22px; border-radius:50%; border:2px solid #CBD3DE; position:relative; transition:background .3s, border-color .3s; }
.ck::after { content:''; position:absolute; inset:0; opacity:0; transform:scale(.4);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/68% no-repeat;
  transition:opacity .25s, transform .45s cubic-bezier(.3,1.6,.5,1); }
.run > .ck { border-color:#F1E2CC; border-top-color:#E0913F; animation:spin .8s linear infinite; }
.done > .ck { background:#22B573; border-color:#22B573; animation:pop .5s cubic-bezier(.3,1.6,.5,1); }
.done > .ck::after { opacity:1; transform:scale(1); }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pop { 0% { transform:scale(.6); } 60% { transform:scale(1.18); } 100% { transform:scale(1); } }

/* ---------- 1 · Routine work ---------- */
.s-auto .stage { width:760px; height:500px; }
.s-auto .win { position:absolute; left:34px; top:58px; width:480px; height:330px; background:#F6F8FB; color:#1B2330; border-radius:16px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06); transform:perspective(1400px) rotateY(9deg) rotateX(3deg); }
.s-auto .bar { height:42px; display:flex; align-items:center; gap:7px; padding:0 16px; background:#E7ECF3; font:600 14px/1 var(--sans); color:#2B3442; }
.s-auto .bar i { width:9px; height:9px; border-radius:50%; } .s-auto .bar i:nth-child(1){background:#F26B5B} .s-auto .bar i:nth-child(2){background:#F2B36B} .s-auto .bar i:nth-child(3){background:#3CCB7F}
.s-auto .bar b { margin-left:8px; font-weight:600; } .s-auto .bar em { margin-left:auto; font:500 12px/1 var(--mono); font-style:normal; color:#5B6472; }
/* the job list flows upward like a conveyor: finished jobs leave at the top, new ones join at the bottom */
.s-auto .rows-wrap { height:calc(100% - 42px); overflow:hidden; padding:0 18px; }
.s-auto .rows { list-style:none; margin:0; padding:2px 0 0; }
.s-auto .rows.shift { transition:transform .7s cubic-bezier(.65,0,.25,1); }
.s-auto .rows li { display:flex; align-items:center; gap:12px; height:56px; border-top:1px solid #E3E8EF; font:500 15.5px/1.2 var(--sans); color:#9AA3B1;
  transition:color .4s, opacity .5s; white-space:nowrap; }
.s-auto .rows li:first-child { border-top-color:transparent; }
.s-auto .rows li.run { color:#1B2330; font-weight:600; }
.s-auto .rows li.done { color:#1B2330; }
.s-auto .rows li.leaving { opacity:0; }
.s-auto .rows li.enter { animation:rowIn .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rowIn { from { opacity:0; transform:translateY(10px); } }

/* "Archelaus working" progress pill */
.s-auto .pill { position:relative; overflow:hidden; margin-left:auto; flex:none; min-width:158px; text-align:center;
  font:600 12.5px/1 var(--sans); border-radius:999px; padding:8px 12px; background:#EEF1F5; color:#8A93A1;
  transition:background .5s, color .5s, box-shadow .5s; }
.s-auto .pill .fill { position:absolute; inset:0; transform-origin:left center; transform:scaleX(var(--p,0)); opacity:0;
  background:linear-gradient(90deg, #FCEBD3 0%, #F6C98E 70%, #F2B36B 100%); transition:opacity .4s; }
.s-auto .pill .fill::after { content:''; position:absolute; top:0; bottom:0; width:40%; left:-40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation:sheen 1.8s ease-in-out infinite; }
.s-auto .pill .txt { position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; }
.s-auto .pill .txt.swap { animation:txtIn .45s cubic-bezier(.2,.7,.2,1); }
.s-auto .pill .txt svg { width:13px; height:13px; }
.s-auto li.run .pill { background:#F4EFE7; color:#7A430C; }
.s-auto li.run .pill .fill { opacity:1; }
.s-auto li.done .pill { background:#E2F6EB; color:#138A52; }
.s-auto li.done .pill .fill { opacity:0; transition:opacity .6s .15s; }
.s-auto li.flash .pill { animation:flash .8s ease-out; }
@keyframes sheen { 0% { left:-40%; } 60%, 100% { left:110%; } }
@keyframes txtIn { from { opacity:0; transform:translateY(5px); } }
@keyframes flash { 0% { box-shadow:0 0 0 0 rgba(34,181,115,.55); } 100% { box-shadow:0 0 0 10px rgba(34,181,115,0); } }

/* notifications: at most two on screen; new ones grow in at the top, old ones collapse away — nothing ever reaches the counter */
.s-auto .toasts { position:absolute; left:500px; top:46px; width:240px; height:200px; overflow:hidden; display:flex; flex-direction:column; }
.toast { display:flex; align-items:center; gap:12px; border-radius:14px; font:500 14px/1.25 var(--sans); color:#EEF1F5; overflow:hidden; flex:none;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); box-shadow:0 20px 50px -20px rgba(0,0,0,.85);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  max-height:0; padding:0 14px; margin-bottom:0; border-width:0;
  opacity:0; transform:translateX(24px) scale(.96);
  transition:max-height .55s cubic-bezier(.2,.7,.2,1), padding .55s cubic-bezier(.2,.7,.2,1), margin .55s cubic-bezier(.2,.7,.2,1),
             opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1); }
.toast.in { max-height:90px; padding:13px 14px; margin-bottom:10px; border-width:1px; opacity:1; transform:none; }
.toast.old { opacity:.55; }
.toast.out { max-height:0; padding-top:0; padding-bottom:0; margin-bottom:0; opacity:0; transform:scale(.96); }
.toast .ck { width:24px; height:24px; background:#22B573; border-color:#22B573; }
.toast .ck::after { opacity:1; transform:none; }
.toast small { display:block; color:#97A1B0; font-size:12px; margin-top:3px; font-weight:400; }

.s-auto .stat { position:absolute; right:30px; bottom:34px; text-align:right; }
.s-auto .stat b { display:block; font:200 76px/1 var(--sans); letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.s-auto .stat b small { font-size:.36em; font-weight:400; color:#97A1B0; letter-spacing:0; margin:0 .18em 0 .04em; }
.s-auto .stat b small:last-child { margin-right:0; }
.s-auto .stat p { margin:6px 0 0; font:400 15px/1.35 var(--sans); color:#B8C1CE; }
.s-auto .stat .for { margin-top:10px; font-weight:500; color:#F2B36B; transition:opacity .4s, transform .4s; }
.s-auto .stat .for.swap { opacity:0; transform:translateY(6px); }

/* compact layout for narrow cards (phones) */
.s-auto.compact .stage { width:430px; height:378px; }
.s-auto.compact .win { left:16px; top:48px; width:398px; height:232px; transform:none; }
.s-auto.compact .pill { min-width:146px; padding:7px 10px; }
.s-auto.compact .rows li { height:46px; font-size:14.5px; }
.s-auto.compact .toasts { display:none; }
.s-auto.compact .stat { left:18px; right:18px; bottom:12px; text-align:left; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.s-auto.compact .stat b { font-size:38px; }
.s-auto.compact .stat p { margin:0; font-size:13px; }
.s-auto.compact .stat .for { display:none; }

/* ---------- 2 · Finding information ---------- */
.s-find .stage { width:520px; height:260px; }
.s-find .map { position:absolute; left:22px; top:40px; width:236px; height:196px; border-radius:16px; overflow:hidden; background:#121A2B;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07); }
.s-find .map svg { position:absolute; inset:0; }
.s-find .ring { position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; border:2px solid rgba(242,179,107,.9);
  box-shadow:0 0 0 6px rgba(242,179,107,.15); left:40px; top:40px; transition:left .8s cubic-bezier(.6,0,.2,1), top .8s cubic-bezier(.6,0,.2,1), opacity .3s; }
.s-find .pin { position:absolute; width:16px; height:22px; margin:-22px 0 0 -8px; opacity:0; transform:translateY(-14px); transition:opacity .2s, transform .45s cubic-bezier(.3,1.6,.5,1); }
.s-find .pin.on { opacity:1; transform:none; }
.s-find .pin svg { display:block; }
.s-find .res { position:absolute; left:276px; top:40px; width:224px; height:196px; border-radius:16px; background:#F6F8FB; color:#1B2330; padding:14px 14px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85); }
.s-find .res h4 { margin:0 0 10px; font:600 13px/1 var(--sans); display:flex; justify-content:space-between; color:#2B3442; }
.s-find .res h4 span { font:500 11px/1 var(--mono); color:#5B6472; }
.s-find .res ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.s-find .res li { display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:10px; background:#fff; border:1px solid #E3E8EF; font:500 12.5px/1.25 var(--sans);
  opacity:0; transform:translateY(8px); transition:opacity .4s, transform .45s cubic-bezier(.2,.7,.2,1); }
.s-find .res li.on { opacity:1; transform:none; }
.s-find .res li i { flex:none; width:8px; height:8px; border-radius:50%; background:#E0913F; }
.s-find .res li em { white-space:nowrap; flex:none; margin-left:auto; font:500 10.5px/1 var(--mono); font-style:normal; color:#138A52; background:#E2F6EB; padding:4px 6px; border-radius:6px; }

/* ---------- 3 · Buying better ---------- */
.s-buy .stage { width:520px; height:330px; }
.s-buy .prod { position:absolute; top:78px; width:212px; height:212px; border-radius:16px; padding:14px; background:#F6F8FB; color:#1B2330;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85); transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s, outline-color .4s;
  outline:2px solid transparent; outline-offset:-2px; }
.s-buy .prod.now { left:30px; opacity:.86; }
.s-buy .prod.new { left:278px; }
.s-buy .prod.new.win { transform:translateY(-8px) scale(1.035); outline-color:#22B573; box-shadow:0 40px 70px -24px rgba(0,0,0,.9), 0 0 40px -6px rgba(34,181,115,.45); }
.s-buy .lbl { font:500 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#5B6472; }
.s-buy .top { display:flex; align-items:center; gap:12px; margin:10px 0 12px; }
/* product photos: the left coil for "Bought now", the right coil for the replacement (cropped from our own photo) */
.s-buy .thumb { flex:none; width:88px; height:66px; border-radius:10px; background-color:#DDE2EA;
  background-image:url("https://archelaus.net/img/card-buy-1200.webp"); background-size:256px auto; background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(14,21,30,.06); }
.s-buy .t-now { background-position:4px -83px; }
.s-buy .t-new { background-position:-174px -80px; }
.s-buy .top b { font:600 13.5px/1.2 var(--sans); }
.s-buy .attrs { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.s-buy .attrs li { display:flex; align-items:center; gap:8px; font:500 12px/1 var(--sans); color:#5B6472; height:22px; }
.s-buy .attrs li span { flex:1; height:6px; border-radius:3px; background:#E3E8EF; }
.s-buy .attrs li em { font:600 11px/1 var(--sans); font-style:normal; padding:5px 7px; border-radius:999px; background:#E2F6EB; color:#138A52;
  opacity:0; transform:scale(.7); transition:opacity .3s, transform .45s cubic-bezier(.3,1.6,.5,1); }
.s-buy .attrs li em.same { background:#EEF1F5; color:#5B6472; }
.s-buy .attrs li.on em { opacity:1; transform:none; }
.s-buy .link { position:absolute; left:242px; top:184px; width:36px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,.1), #F2B36B); transform-origin:left; transform:scaleX(0); transition:transform .6s; }
.s-buy .link.on { transform:scaleX(1); }
.s-buy .found { position:absolute; left:50%; top:304px; display:flex; align-items:center; gap:8px; font:600 12.5px/1 var(--sans); color:#EEF1F5; white-space:nowrap;
  opacity:0; transform:translate(-50%,6px); transition:opacity .4s, transform .5s cubic-bezier(.2,.7,.2,1); }
.s-buy .found .ck { width:20px; height:20px; background:#22B573; border-color:#22B573; }
.s-buy .found .ck::after { opacity:1; transform:none; }
.s-buy .found.on { opacity:1; transform:translate(-50%,0); }

/* phones: give the small cards a little more height */
@media (max-width:980px) { .wwd .small .media.has-scene { aspect-ratio:16/10; } .wwd .big .media.has-scene { aspect-ratio:4/3; } }
@media (max-width:600px) { .wwd .media.has-scene .badge { top:10px; right:10px; font-size:11px; padding:6px 9px; } .scene .ex { left:10px; top:10px; } }

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .scene *, html:not(.force-motion) .scene *::after { animation:none !important; transition:none !important; }
}
.s-auto .rows .lbl { overflow:hidden; text-overflow:ellipsis; }