/* THE WIRE (6 Oct 2026, Victor: "pipe into hero two dynamic elements: discrete news (top, then middle tier, then bottom
   tier) ... Likewise ... AIReckoning-relevant items from v.vdr.me"). One glass card over the hero photographs, dealt
   from a small stack: the day's AI news in tiers, with Victor's own saved reading between them. Colour is the tier,
   in the five innovators' order: top orange-red, middle blue, bottom green, Victor's desk yellow. */
.wire{--c:255,92,34;position:absolute;z-index:4;top:88px;right:clamp(24px,3.2vw,56px);width:min(380px,30vw);
  font-family:"IBM Plex Sans",-apple-system,system-ui,sans-serif;opacity:0;transform:translateY(-8px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.wire.on{opacity:1;transform:none}
.wire[hidden]{display:none}
html.cards .wire{display:none}

/* the stack: two cards waiting behind the one on top */
.wi-stack{position:relative;perspective:900px}
.wi-stack::before,.wi-stack::after{content:"";position:absolute;left:14px;right:14px;bottom:-7px;height:30px;border-radius:0 0 16px 16px;
  background:rgba(14,16,28,.55);box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wi-stack::after{left:28px;right:28px;bottom:-13px;background:rgba(14,16,28,.38)}
.wire.deal .wi-stack::before{transform:translateY(-4px)}
.wire.deal .wi-stack::after{transform:translateY(-6px)}

.wi-card{position:relative;z-index:1;display:block;padding:15px 16px 16px;border-radius:18px;color:#fff;text-decoration:none;overflow:hidden;
  background:linear-gradient(155deg,rgba(var(--c),.24),rgba(var(--c),.06) 38%,rgba(10,12,22,.66) 70%);
  backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 30px 60px -24px rgba(0,0,0,.7),0 0 0 0 rgba(var(--c),0);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:box-shadow .4s,background .6s,transform .25s ease-out}
/* the glowing top edge, in the tier's colour */
.wi-card::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--c),1) 30%,rgba(var(--c),1) 70%,transparent);
  box-shadow:0 0 14px rgba(var(--c),.9),0 0 30px rgba(var(--c),.5);transition:background .6s,box-shadow .6s}
/* the rim that lights on hover */
.wi-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(140deg,rgba(var(--c),.9),rgba(255,255,255,.15) 40%,rgba(var(--c),.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.wi-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(var(--c),.22),transparent 65%)}
.wi-card:hover::after,.wi-card:focus-visible::after,.wi-card:hover .wi-glow{opacity:1}
.wi-card:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 34px 70px -24px rgba(0,0,0,.75),0 0 40px -8px rgba(var(--c),.45)}
.wi-card:focus-visible{outline:none}

.wi-k{position:relative;display:flex;align-items:center;gap:9px;font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,239,232,.62)}
.wi-dot{position:relative;width:7px;height:7px;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 10px rgba(var(--c),.9);flex:none;transition:background .6s}
.wi-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(var(--c),.8);animation:wiping 2.4s ease-out infinite}
@keyframes wiping{from{transform:scale(.5);opacity:1}to{transform:scale(1.8);opacity:0}}
.wi-tier{color:rgb(var(--c));font-weight:600;filter:brightness(1.25)}
.wi-n{margin-left:auto;font-variant-numeric:tabular-nums;color:rgba(242,239,232,.45);letter-spacing:.14em}

.wi-body{position:relative;display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:start;margin-top:14px}
.wi-img{position:relative;width:76px;height:76px;border-radius:12px;overflow:hidden;background:rgba(var(--c),.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 18px -8px rgba(0,0,0,.6)}
.wi-img img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95)}
.wi-img b{position:absolute;inset:0;display:grid;place-items:center;font:700 26px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:rgba(255,255,255,.9)}
.wi-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font:700 17px/1.24 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:#fff;text-wrap:pretty;
  text-shadow:0 1px 18px rgba(0,0,0,.4)}
.wi-s{display:flex;align-items:center;gap:8px;margin-top:9px;font:500 10.5px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,232,.55)}
.wi-s svg{width:12px;height:12px;opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s}
.wi-card:hover .wi-s svg{opacity:1;transform:none}
.wi-text{min-width:0}

/* the timer: a hairline that fills in the tier's colour */
.wi-bar{position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.wi-bar::after{content:"";position:absolute;inset:0;background:rgba(var(--c),.85);transform-origin:left;transform:scaleX(0)}
.wire.run .wi-bar::after{animation:wifill var(--dur,7s) linear forwards}
.wire.hold .wi-bar::after{animation-play-state:paused}
@keyframes wifill{to{transform:scaleX(1)}}

/* the staged change: the old story lifts away, the new one rises in kicker, title, source */
.wi-card .st{transition:opacity .32s ease,transform .32s ease,filter .32s ease}
.wire.out .wi-card .st{opacity:0;transform:translateY(-8px);filter:blur(3px)}
.wire.in .wi-card .st{animation:wirise .62s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--s,0) * 90ms)}
@keyframes wirise{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* the tiers, as a row of jumps under the stack */
.wi-tiers{display:flex;align-items:center;gap:6px;margin-top:22px;padding:0 4px}
.wi-tiers button,.wi-all{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,239,232,.5);
  transition:color .3s,background .3s;text-decoration:none;white-space:nowrap}
.wi-tiers button i{width:6px;height:6px;border-radius:50%;background:rgba(var(--tc),.45);transition:background .3s,box-shadow .3s}
.wi-tiers button:hover{color:#f2efe8;background:rgba(255,255,255,.05)}
.wi-tiers button.on{color:#f2efe8;background:rgba(var(--tc),.14)}
.wi-tiers button.on i{background:rgb(var(--tc));box-shadow:0 0 8px rgba(var(--tc),.9)}
.wi-tiers button:focus-visible,.wi-all:focus-visible{outline:1px solid rgba(242,239,232,.6);outline-offset:2px}
.wi-all{margin-left:auto;color:rgba(242,239,232,.42)}
.wi-all:hover{color:#f2efe8}

/* the moon steps down to make room for the stack (desktop) */
@media (min-width:1024px){.hero.has-wire>.moon{top:max(calc(50vh - var(--E) * .356),300px)}}

/* phones and tablets: the card sits in the flow under the join ask, full width, no tier row */
@media (max-width:1023px){
  .wire{position:relative;top:auto;right:auto;width:auto;max-width:520px!important;margin-top:28px}
  .wi-tiers{display:none}
  .wi-body{grid-template-columns:60px 1fr;gap:12px;margin-top:12px}
  .wi-img{width:60px;height:60px;border-radius:10px}
  .wi-t{font-size:15.5px;-webkit-line-clamp:2}
  .wi-card{padding:13px 14px 15px;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .wire,.wi-card,.wi-card .st,.wi-stack::before,.wi-stack::after{transition:none}
  .wire.in .wi-card .st{animation:none}.wi-dot::after{animation:none;opacity:0}.wire.run .wi-bar::after{animation:none}
}
.wi-k>b{font-weight:500;display:inline-flex;align-items:center;gap:9px}
.wi-k>b::after{content:"";width:1px;height:11px;background:rgba(242,239,232,.25)}
/* five jumps fit the card's width with room to breathe (6 Oct: "Victor" made the row crowd "All news") */
.wi-tiers{gap:2px;padding:0}
.wi-tiers button,.wi-all{padding:6px 8px;letter-spacing:.12em;gap:6px}
/* the faint chevrons either side of the tier jumps: quiet at rest, lit on hover */
.wi-tiers .wi-ch{width:30px;height:30px;padding:0;justify-content:center;color:rgba(242,239,232,.32)}
.wi-tiers .wi-ch svg{width:8px;height:14px}
.wi-tiers .wi-ch:hover{color:#f2efe8;background:rgba(255,255,255,.06)}
.wi-tiers .wi-ch:active{transform:scale(.92)}
@media (max-width:1023px){.wi-tiers{display:flex;margin-top:16px}.wi-all{display:none}}

/* THE RECKONING TIMES (6 Oct 2026): the signed-in hero's way into Today in AI. First a full sheet of newsprint, then,
   Victor: "toooo much, it is overloading the hero": a dark glass pill the height of the join button, carrying a small cream
   newspaper. The nameplate is the paper's own Gelasio at reading size, the dateline in mono. On hover the paper lifts off
   a second sheet behind it and the pill's rim warms. */
.btn-times{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 22px 0 12px;border-radius:999px;text-decoration:none;
  color:#f2efe8;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 12px 30px -14px rgba(0,0,0,.7);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);transition:background .3s,box-shadow .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.btn-times:hover,.btn-times:focus-visible{background:rgba(255,255,255,.1);transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(244,238,221,.42),0 16px 34px -14px rgba(0,0,0,.75),0 0 26px -10px rgba(244,238,221,.35)}
.btn-times:focus-visible{outline:2px solid #f2efe8;outline-offset:3px}
.bt-ic{width:34px;height:34px;flex:none;overflow:visible}
.bt-back rect{fill:#d9cfb6;opacity:.55}
.bt-pg{fill:#f4eedd}
.bt-mh{stroke:#16161a;stroke-width:1.8;stroke-linecap:round}
.bt-rl{stroke:#16161a;stroke-width:.45}
.bt-pic{fill:#16161a;opacity:.72}
.bt-tx{stroke:#6d685c;stroke-width:.8;stroke-linecap:round}
.bt-front,.bt-back{transform-box:fill-box;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.bt-front{transform:rotate(-7deg)}
.bt-back{transform:rotate(4deg)}
.btn-times:hover .bt-front,.btn-times:focus-visible .bt-front{transform:rotate(-12deg) translate(-1px,-2px)}
.btn-times:hover .bt-back,.btn-times:focus-visible .bt-back{transform:rotate(10deg) translateX(2px)}
.bt-w{display:grid;gap:3px;line-height:1}
.bt-w b{font:400 18px/1 "Gelasio",Georgia,"Times New Roman",serif;letter-spacing:-.005em;color:#f4eedd;white-space:nowrap}
.bt-w small{font:500 9.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,239,232,.55);white-space:nowrap}
@media (max-width:760px){html body .hero .ctas.in-only{flex-direction:column;align-items:flex-start;gap:18px}}
@media (prefers-reduced-motion:reduce){.btn-times,.bt-front,.bt-back{transition:none}}