/* fx/forged-w3.css — lane w3, /forged-sites/ #the-case #agents #proof. Layers on forged-offer.css. Prefix .fsw3- */
@property --fsw3-p{syntax:"<number>";inherits:false;initial-value:0}

/* ── 1. The case: one lede sentence up front, the rest behind "Keep reading" ── */
.fs-case .fsw3-lede{font-size:1.1rem;line-height:1.62;color:#f3f0f8;max-width:62ch;margin-bottom:.95rem}
.fs-case .fsw3-lede strong{font-weight:600;color:#fff;background:linear-gradient(90deg,#e6492566,#f9dd9a40) no-repeat 0 94%/100% .34em}
.fsw3-more{margin:0 0 1.35rem}
.fsw3-more>summary{list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:6px 16px 6px 8px;border:1px solid #ffae9166;border-radius:999px;color:#ffcd8e;font-size:.84rem;font-weight:600;line-height:1.2;cursor:pointer;user-select:none;transition:background-color .2s,border-color .2s}
.fsw3-more>summary::-webkit-details-marker{display:none}
.fsw3-more>summary::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(#ffcd8e,#ffcd8e) center/10px 2px no-repeat,linear-gradient(#ffcd8e,#ffcd8e) center/2px 10px no-repeat,#ffffff14;transition:transform .3s var(--fx-ease-out)}
.fsw3-more[open]>summary::before{transform:rotate(135deg)}
.fsw3-more>summary:hover{background:#ffffff12;border-color:#ffcd8e}
.fs-case .fsw3-more>summary:focus-visible{outline:3px solid #ffcd8e;outline-offset:3px}
.fsw3-more-close,.fsw3-more[open] .fsw3-more-open{display:none}
.fsw3-more[open] .fsw3-more-close{display:inline}
.fs-case .fsw3-more-body{max-width:62ch;margin-top:12px;padding:2px 0 2px 18px;font-size:.95rem;border-left:2px solid #e6492599}
.fs-case .fsw3-more-body p{color:#d8d4e4;margin-bottom:.8rem}
.fs-case .fsw3-more-body p:last-child{margin-bottom:0}
.fs-case .fsw3-more-body a{color:var(--fs-peach)}

/* Rows heat as they arrive: an ingot on the eyebrow and an ember glow under the art. */
.fs-case-row .fs-eyebrow{position:relative;padding-left:38px;background:linear-gradient(#5d5977,#5d5977) 0 50%/26px 3px no-repeat}
.fs-case-row .fs-eyebrow::before{content:"";position:absolute;left:0;top:50%;width:26px;height:3px;margin-top:-1.5px;border-radius:2px;background:linear-gradient(90deg,#e64925,#f9dd9a);transform:scaleX(0);transform-origin:left center;transition:transform 1s .2s var(--fx-ease-out),filter .6s}
.fs-case-row.fsw3-hot .fs-eyebrow::before{transform:scaleX(1)}
.fs-case-art{position:relative}
.fs-case-art::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #f9dd9a70,inset 0 -48px 64px -34px #e6492570;opacity:0;transition:opacity 1.6s ease,filter .6s}
.fsw3-hot .fs-case-art::after{opacity:1}

/* The pull-quote: a verbatim line, struck on the anvil. Decorative duplicate (aria-hidden, copy-excluded). */
.fs-case .fsw3-quote{position:relative;max-width:860px;margin:0 auto;padding:4px 12px 0;text-align:center;font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.28;color:#fff}
.fsw3-quote::before{content:"";display:block;width:72px;height:3px;margin:0 auto 26px;border-radius:2px;background:linear-gradient(90deg,#e64925,#f9dd9a);transition:filter .6s}
.fsw3-quote .fsw3-sparks{top:5px}
/* a11y 2026-10-01: the line is written on with a soft mask wipe, not an opacity fade. The glyphs keep full color
   the whole time, so a scanner that samples mid-animation reads white on navy (it once read 1.56:1 mid-fade). */
.fsw3-quote.fsw3-armed>span{display:inline-block;transform:translateY(12px);
  -webkit-mask-image:linear-gradient(90deg,#000 44%,transparent 56%);mask-image:linear-gradient(90deg,#000 44%,transparent 56%);
  -webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 1.1s .15s var(--fx-ease-out),mask-position 1.1s .15s var(--fx-ease-out),transform 1s .15s var(--fx-ease-out)}
.fsw3-quote.fsw3-armed::before{transform:scaleX(0);transition:transform .7s var(--fx-ease-forge)}
.fsw3-quote.fsw3-hot>span{transform:none;-webkit-mask-position:0 0;mask-position:0 0}
.fsw3-quote.fsw3-hot::before{transform:scaleX(1)}

/* ── 2. The agents: sparks under the pointer, a status light, a team trick ── */
.fsw3-sparks{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:3}
.fsw3-sparks i{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#f9dd9a;box-shadow:0 0 6px 1px #e64925;opacity:0}
.fsw3-spark .fsw3-sparks i{animation:fsw3-spark .75s var(--fx-ease-out) both}
@keyframes fsw3-spark{0%{opacity:1;transform:rotate(var(--a)) translateY(-30px) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(var(--r,-70px)) scale(.3)}}
#agents .fs-video-thumb img{transition:transform .9s var(--fx-ease-out),opacity .2s}
#agents .fs-video-thumb:hover img,#agents .fs-video-thumb:focus-visible img{transform:scale(1.045)}
#agents .fs-play{transition:transform .35s var(--fx-ease-out)}
#agents .fs-play::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #f9dd9a;opacity:0}
#agents .fs-video-thumb:hover .fs-play,#agents .fs-video-thumb:focus-visible .fs-play{transform:scale(1.1)}
#agents .fsw3-wake .fs-play::before{animation:fsw3-ping 1.2s var(--fsw3-d,0s) ease-out both}
@keyframes fsw3-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
#agents .fs-video-label{display:inline-flex;align-items:center;gap:7px}
#agents .fs-video-label::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffffff80;transition:background-color .4s,box-shadow .4s}
#agents .fsw3-awake .fs-video-label::before{background:#f9dd9a;box-shadow:0 0 6px 1px #f9dd9acc}
#agents .fsw3-soon .fs-video-label::before{background:transparent;box-shadow:inset 0 0 0 1.5px #ffffffb3}
#agents .fsw3-hop{animation:fsw3-hop .7s var(--fx-ease-out)}
@keyframes fsw3-hop{0%,100%{transform:none}30%{transform:translateY(-10px)}55%{transform:translateY(2px)}75%{transform:translateY(-3px)}}
#agents .fsw3-knock{animation:fsw3-knock .9s ease-in-out}
@keyframes fsw3-knock{0%,100%{transform:none}15%,45%,75%{transform:rotate(-1.4deg)}30%,60%{transform:rotate(1.4deg)}}
/* Video modal fix: the frame clipped its own close button (top:-44px inside overflow:hidden). */
.fs-video-frame{overflow:visible}
.fs-video-frame iframe{border-radius:16px}
.fs-page .fs-video-close:focus-visible{outline-color:#ffcd8e;outline-offset:0}
.fsw3-onejob{position:relative;display:inline-block;transition:color .8s ease}
.fsw3-onejob::after{content:"";position:absolute;left:0;right:.2em;bottom:-.06em;height:.12em;border-radius:.1em;background:linear-gradient(90deg,#e64925,#f9dd9a);transform:scaleX(0);transform-origin:left center;transition:transform .9s .2s var(--fx-ease-out),filter .6s}
.fsw3-assembled .fsw3-onejob{color:#c93812}
.fsw3-assembled .fsw3-onejob::after{transform:scaleX(1)}

/* ── 3. Proof: each score sits in a PageSpeed-style ring that forges shut ── */
.fsw3-ring.fsw3-on{--fsw3-p:var(--fsw3-s);position:relative;display:inline-grid;place-items:center;width:2.7em;height:2.7em;margin:0 .15em;border-radius:50%;vertical-align:middle;font-variant-numeric:tabular-nums;
  background:radial-gradient(closest-side,#1c1a4a 79%,transparent 81%),conic-gradient(#f9dd9a calc(var(--fsw3-p) * 1%),#ffffff2e 0);transition:filter .6s}
.fsw3-ring.fsw3-armed{--fsw3-p:0}
.fsw3-ring.fsw3-lit{--fsw3-p:var(--fsw3-s);transition:--fsw3-p 1.3s var(--fx-ease-out),filter .6s}
.fsw3-ring::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 12px 2px #f9dd9a;opacity:0;pointer-events:none}
.fsw3-ring.fsw3-struck{animation:fsw3-strike .5s var(--fx-ease-forge)}
.fsw3-ring.fsw3-struck::after{animation:fsw3-flare .9s ease-out}
@keyframes fsw3-strike{0%,100%{transform:none}40%{transform:scale(1.16)}70%{transform:scale(.96)}}
@keyframes fsw3-flare{0%{opacity:.85}100%{opacity:0}}

/* ── 4. Hidden: quench. Steam rises; the hot pieces cool, then heat again. ── */
.fsw3-steam{position:fixed;left:0;right:0;bottom:0;height:70vh;pointer-events:none;z-index:79;overflow:hidden}
.fsw3-steam i{position:absolute;bottom:-120px;width:240px;height:240px;margin-left:-120px;border-radius:50%;background:radial-gradient(closest-side,#f4f2fbb0,#f4f2fb00);opacity:0;animation:fsw3-steam 2.8s var(--d,0s) ease-out both}
@keyframes fsw3-steam{0%{opacity:0;transform:translateY(0) scale(.5)}25%{opacity:.6}100%{opacity:0;transform:translateY(-58vh) scale(1.7)}}
@keyframes fsw3-steam-calm{0%,100%{opacity:0}35%{opacity:.45}}
.fsw3-q .fs-case-row .fs-eyebrow::before,.fsw3-q .fs-case-art::after,.fsw3-q .fsw3-quote::before,.fsw3-q .fsw3-ring,.fsw3-q .fsw3-onejob::after{filter:saturate(0) brightness(1.5) hue-rotate(0deg)}

/* ── motion preferences ── */
@media (prefers-reduced-motion: reduce){
  .fsw3-more>summary::before,.fs-case-row .fs-eyebrow::before,.fs-case-art::after,.fsw3-quote::before,.fsw3-quote>span,
  #agents .fs-video-thumb img,#agents .fs-play,.fsw3-onejob,.fsw3-onejob::after,.fsw3-ring.fsw3-on,.fsw3-ring.fsw3-lit{transition:none!important}
  .fsw3-sparks,#agents .fs-play::before{display:none}
  #agents .fs-video-thumb:hover img,#agents .fs-video-thumb:focus-visible img,#agents .fs-video-thumb:hover .fs-play,#agents .fs-video-thumb:focus-visible .fs-play{transform:none}
  #agents .fsw3-hop,#agents .fsw3-knock,.fsw3-ring.fsw3-struck,.fsw3-ring.fsw3-struck::after{animation:none}
  .fsw3-steam i{animation-name:fsw3-steam-calm}
}
@media (min-width:1051px){
  .fs-case-row{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
  .fs-case-flip{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
}
@media (max-width:700px){
  .fs-case-art img{aspect-ratio:4/3}
  .fs-case .fsw3-lede{font-size:1.02rem}
  .fs-case .fsw3-more-body{padding-left:14px;font-size:.92rem}
  .fsw3-ring.fsw3-on{font-size:.88em;width:2.65em;height:2.65em;margin:0 .1em}
  .fsw3-steam i{width:170px;height:170px;margin-left:-85px}
}
@media print{.fsw3-quote,.fsw3-sparks,.fsw3-steam,.fsw3-more>summary{display:none!important}.fs-case .fsw3-more-body{border:0;padding-left:0}}