/* BYTE & CORGI "agent launches coming soon" strip, directly below the $WOOD hero. Pure CSS + tiny canvas (agents-soon.js). */
@property --asA{syntax:"<angle>";inherits:false;initial-value:0deg}
.as{position:relative;padding:8px 20px 56px;background:var(--bg,#08110c);color:#f1ead6;font-family:var(--font,system-ui);isolation:isolate}
.as-card{position:relative;width:min(1080px,100%);margin:0 auto;border-radius:26px;padding:34px clamp(18px,4vw,52px);overflow:hidden;
  background:radial-gradient(90% 140% at 50% 0%,rgba(242,193,78,.13) 0%,transparent 55%),radial-gradient(120% 120% at 50% 120%,#17331f 0%,#0b1a11 55%,#070f0a 100%);
  box-shadow:0 0 0 1px rgba(242,193,78,.18) inset,0 30px 80px -40px rgba(242,193,78,.45),0 0 60px -30px rgba(95,191,110,.4)}
/* animated gold border: a bright light travels back and forth along the edge */
.as-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;z-index:3;pointer-events:none;
  background:conic-gradient(from var(--asA),rgba(242,193,78,.25) 0deg,rgba(242,193,78,.25) 200deg,#fff3c8 240deg,#f2c14e 262deg,rgba(242,193,78,.25) 300deg,rgba(242,193,78,.25) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:asOrbit 7s ease-in-out infinite alternate}
/* soft light sweep across the card face, back and forth */
.as-sweep{position:absolute;inset:-20% -40%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,231,163,.11) 48%,rgba(255,246,214,.18) 50%,rgba(255,231,163,.11) 52%,transparent 60%);animation:asSweep 6s ease-in-out infinite alternate;mix-blend-mode:screen}
.as canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.as-in{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,4vw,56px)}
.as-mid{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.as-kick{display:inline-flex;align-items:center;gap:8px;font:400 11px var(--pix,monospace);letter-spacing:.18em;color:#ffe7a3;padding:6px 12px;border:1px solid rgba(242,193,78,.4);border-radius:999px;background:rgba(242,193,78,.07)}
.as-kick i{width:7px;height:7px;border-radius:2px;background:#f2c14e;box-shadow:0 0 10px #f2c14e;animation:asBlink 1.8s ease-in-out infinite}
.as h2.as-t{margin:0;font:400 clamp(30px,5vw,58px)/1 var(--pix,monospace);letter-spacing:.03em;white-space:nowrap;
  background:linear-gradient(90deg,#c9963a 0%,#f2c14e 25%,#fff6d6 45%,#f2c14e 55%,#c9963a 75%,#f2c14e 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#f2c14e;
  animation:asShine 5.5s linear infinite;filter:drop-shadow(0 0 18px rgba(242,193,78,.35))}
.as h2.as-t span{font-family:var(--serif,Georgia,serif);font-style:italic;font-size:1.12em;letter-spacing:0;padding:0 .06em}
.as-sub{margin:0;font:400 clamp(19px,2.3vw,27px)/1.2 var(--serif,Georgia,serif);font-style:italic;color:#f1ead6}
.as-poll{margin:4px 0 0;font:400 11.5px var(--pix,monospace);letter-spacing:.14em;color:#a7ad97;text-transform:lowercase}
.as-poll b{font-weight:400;color:#ffe7a3}
/* portraits with pulsing gold rings */
.as-p{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;color:#f1ead6;outline:none}
.as-ring{position:relative;width:clamp(96px,11vw,132px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center}
.as-ring::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(from var(--asA),transparent 0deg,rgba(242,193,78,.15) 90deg,#ffe7a3 180deg,#f2c14e 220deg,transparent 300deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));animation:asSpin 4.5s linear infinite}
.as-ring::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px rgba(242,193,78,.65),0 0 22px 2px rgba(242,193,78,.35);animation:asPulse 2.6s ease-out infinite}
.as-ring .as-halo{position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,rgba(242,193,78,.28),transparent 66%);animation:asGlow 2.6s ease-in-out infinite}
.as-ring img{position:relative;z-index:1;width:84%;height:84%;object-fit:contain;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1f3a26,#0a140d 75%);padding:8%;box-sizing:border-box;transition:transform .3s}
.as-p.r .as-ring::after,.as-p.r .as-ring .as-halo{animation-delay:-1.3s}
.as-p.r .as-ring::before{animation-direction:reverse}
.as-n{font:400 13px var(--pix,monospace);letter-spacing:.16em;color:#ffe7a3}
.as-n small{display:block;margin-top:4px;font:500 11px var(--font,system-ui);letter-spacing:.02em;color:#8f9784;text-align:center;transition:color .2s}
.as-p:hover .as-ring img,.as-p:focus-visible .as-ring img{transform:scale(1.06)}
.as-p:hover .as-n small,.as-p:focus-visible .as-n small{color:#ffe7a3}
.as-p:focus-visible .as-ring{outline:2px solid #ffe7a3;outline-offset:10px}
@keyframes asOrbit{from{--asA:-40deg}to{--asA:220deg}}
@keyframes asSpin{to{--asA:360deg}}
@keyframes asSweep{from{transform:translateX(-38%)}to{transform:translateX(38%)}}
@keyframes asShine{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes asPulse{0%{box-shadow:0 0 0 1.5px rgba(242,193,78,.75),0 0 18px 2px rgba(242,193,78,.4),0 0 0 0 rgba(242,193,78,.45)}70%{box-shadow:0 0 0 1.5px rgba(242,193,78,.55),0 0 30px 6px rgba(242,193,78,.25),0 0 0 16px rgba(242,193,78,0)}100%{box-shadow:0 0 0 1.5px rgba(242,193,78,.75),0 0 18px 2px rgba(242,193,78,.4),0 0 0 0 rgba(242,193,78,0)}}
@keyframes asGlow{50%{opacity:.45;transform:scale(1.08)}}
@keyframes asBlink{50%{opacity:.35}}
@media (max-width:760px){
  .as{padding:4px 14px 44px}
  .as-card{padding:26px 16px 24px;border-radius:22px}
  .as-in{grid-template-columns:1fr 1fr;gap:18px 12px}
  .as-mid{grid-column:1/-1;order:-1}
  .as h2.as-t{font-size:clamp(28px,9vw,40px)}
  .as-ring{width:96px}
}
@media (prefers-reduced-motion:reduce){
  .as *,.as *::before,.as *::after,.as-card::before{animation:none!important}
  .as-sweep{display:none}
  .as-card::before{--asA:200deg}
}