/* Adinci home showcase (Lane B, 2026-09-30): the hero's stage. Drawn by /home/showcase.js.
   Durations and curves are the motion system's (src/lib/motion/tokens.ts); only transform and opacity move, and only
   under prefers-reduced-motion: no-preference. Logical properties throughout, so AR (RTL) mirrors the corners. */
#sec-era .show-frame{
  --m-tap:150ms;--m-quick:200ms;--m-base:280ms;--m-slow:400ms;--m-breath:2400ms;--m-stagger:40ms;
  --m-ease-out:cubic-bezier(.22,1,.36,1);--m-ease-in-out:cubic-bezier(.65,0,.35,1);
  position:relative;width:100%;height:clamp(420px,62vh,640px);border-radius:22px;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);background:#06090F;contain:layout paint;
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(45,225,252,.06)}
#sec-era .show-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
#sec-era .show-glow{pointer-events:none;opacity:0}
#sec-era .show-fx{z-index:2;pointer-events:none}
#sec-era .show-frame.settled .show-glow{opacity:.9}
#sec-era .show-layer{position:absolute;inset:0;pointer-events:none}

/* the four parties: chips, positioned by the corners they belong to (logical: AR mirrors them) */
#sec-era .show-node{position:absolute;z-index:2}
#sec-era .show-adv{top:54px;inset-inline-start:12px}
#sec-era .show-own{top:54px;inset-inline-end:12px}
#sec-era .show-ptf{bottom:92px;inset-inline-end:12px}
#sec-era .show-view,#sec-era .show-card{left:0;top:0;will-change:transform}
#sec-era .show-pop{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;padding-inline:4px 10px;border-radius:999px;
  background:rgba(4,5,10,.8);border:1px solid var(--line);color:var(--ink);white-space:nowrap;
  font:600 11px/1.2 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;
  opacity:0;transform:translateY(4px) scale(.92)}
#sec-era .show-node.on .show-pop{opacity:1;transform:none}
#sec-era .show-ico{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c,var(--cyan));color:#04050A}
#sec-era .show-ico svg{width:13px;height:13px}
#sec-era .show-adv{--c:var(--gold)}
#sec-era .show-own{--c:var(--mag)}
#sec-era .show-ptf{--c:var(--vio)}
#sec-era .show-view{--c:var(--cyan)}
#sec-era .show-ptf .show-pop{padding-inline:10px}
#sec-era .show-ptf .show-pop::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vio);box-shadow:0 0 8px var(--vio)}
#sec-era .show-view .show-pop{padding-inline:9px;transform-origin:50% 0}
#sec-era .show-view .show-in{display:block;transform:translateX(-50%)}
#sec-era .show-pct{font-style:normal;font-weight:700;color:var(--c);direction:ltr;unicode-bidi:isolate;
  max-width:0;overflow:hidden;opacity:0;transform:scale(.6)}
#sec-era .show-node.paid .show-pct{max-width:5em;opacity:1;transform:none}

/* the ad: a small poster on the zone, with its countdown */
#sec-era .show-card .show-in{display:block;transform:translate(-50%,-50%)}
#sec-era .show-card .show-pop{display:grid;place-items:center;gap:0;width:78px;height:54px;padding:0;border-radius:11px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#FF5FA2 0%,#8B7BFF 100%);border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 30px -8px rgba(255,95,162,.6);font:800 13px/1 Unbounded,Manrope,sans-serif;letter-spacing:.02em;color:#fff}
#sec-era .show-card .show-play{position:absolute;top:6px;inset-inline-end:7px;width:9px;height:9px;opacity:.85}
#sec-era .show-card .show-track{position:absolute;inset-inline:6px;bottom:6px;height:4px;border-radius:4px;background:rgba(4,5,10,.35);overflow:hidden}
#sec-era .show-bar{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left center}
[dir="rtl"] #sec-era .show-bar{transform-origin:right center}
#sec-era .show-card .show-ok{position:absolute;inset:0;display:grid;place-items:center;background:rgba(4,5,10,.28);opacity:0}
#sec-era .show-card.done .show-ok{opacity:1}
#sec-era .show-card.done .show-pop>b,#sec-era .show-card.done .show-play{opacity:0}
#sec-era .show-card .show-ok svg{width:26px;height:26px;color:#fff}

/* corners: what this is (tag), replay and sound */
#sec-era .show-tag{position:absolute;z-index:3;top:12px;inset-inline-start:12px;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;
  background:rgba(4,5,10,.78);border:1px solid var(--line);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);opacity:0}
#sec-era .show-tag.on{opacity:1}
#sec-era .show-dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
#sec-era .show-tag.live{color:var(--ink)}
#sec-era .show-tag.live .show-dot{background:var(--lime);box-shadow:0 0 8px var(--lime)}
#sec-era .show-ctl{position:absolute;z-index:3;top:9px;inset-inline-end:9px;display:flex;gap:6px}
#sec-era .show-btn{width:34px;height:34px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(4,5,10,.75);border:1px solid var(--line);color:var(--ink);font:inherit;-webkit-tap-highlight-color:transparent}
#sec-era .show-btn svg{width:16px;height:16px}
#sec-era .show-btn:hover{border-color:var(--cyan);color:var(--cyan)}
#sec-era .show-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--void),0 0 0 4px var(--cyan)}
#sec-era .show-btn .snd-off{display:none}
#sec-era .show-btn[aria-pressed="false"] .snd-on{display:none}
#sec-era .show-btn[aria-pressed="false"] .snd-off{display:inline}
#sec-era .show-btn[aria-pressed="false"]{color:var(--faint)}
#sec-era .show-frame.reduced #show-replay{display:none}

/* the caption, then the figures in its place */
#sec-era .show-cap{position:absolute;z-index:3;inset-inline:12px;bottom:12px;margin:0;padding:9px 12px;border-radius:14px;
  background:rgba(4,5,10,.82);border:1px solid var(--line);color:var(--ink);font-size:13.5px;line-height:1.45;min-height:3.3em;
  display:flex;align-items:center}
#sec-era .show-frame.has-figs .show-cap{visibility:hidden}   /* not opacity: the caption's entrance animation holds it */
#sec-era .show-figs{position:absolute;z-index:4;inset-inline:12px;bottom:12px;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#sec-era .show-fig{min-width:0;margin:0;padding:8px 10px 9px;border-radius:14px;background:rgba(4,5,10,.86);border:1px solid var(--line)}
#sec-era .show-n{display:block;font:800 clamp(18px,2.3vw,26px)/1.1 Unbounded,Manrope,sans-serif;letter-spacing:-.02em;color:var(--cyan);
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:start}
[dir="rtl"] #sec-era .show-n{text-align:right}
#sec-era .show-fig:nth-child(2) .show-n{color:var(--gold)}
#sec-era .show-fig:nth-child(3) .show-n{color:var(--lime)}
#sec-era .show-l{display:block;margin-top:3px;font:600 10.5px/1.3 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);
  overflow-wrap:anywhere}
#sec-era .show-hint{margin:10px 2px 0;font-size:11px;color:var(--faint);letter-spacing:.02em;text-transform:none}
#sec-era .show-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Arabic: the mono face carries no Arabic, and tracking pulls joined letters apart */
[lang="ar"] #sec-era .show-pop,[lang="ar"] #sec-era .show-tag,[lang="ar"] #sec-era .show-l,[lang="ar"] #sec-era .show-hint{
  font-family:"Noto Naskh Arabic","Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:normal;text-transform:none}
[lang="ar"] #sec-era .show-pop{font-size:12px}
[lang="ar"] #sec-era .show-card .show-pop{font-family:"Noto Naskh Arabic","Segoe UI",Tahoma,Arial,sans-serif;font-size:15px}

@media (max-width:1000px){
  #sec-era .show-frame{height:58vh;min-height:360px;max-height:580px;border-radius:18px}
}
@media (max-width:520px){
  #sec-era .show-stage{margin-inline:-10px}   /* 26 px page gutter - 10 = 16 px: the stage runs wider than the words */
  #sec-era .show-cap{font-size:12.5px;padding:8px 10px}
  #sec-era .show-adv,#sec-era .show-own{top:50px}
  #sec-era .show-ptf{bottom:104px}   /* above a caption of three lines */
  #sec-era .show-pop{font-size:10.5px}
  #sec-era .show-fig{padding:7px 8px 8px}
  #sec-era .show-l{font-size:9.5px}
  #sec-era .show-card .show-pop{width:68px;height:48px}
}

@media (prefers-reduced-motion:no-preference){
  #sec-era .show-pop,#sec-era .show-pct{transition:opacity var(--m-base) var(--m-ease-out),transform var(--m-base) var(--m-ease-out)}
  #sec-era .show-tag,#sec-era .show-card .show-ok,#sec-era .show-card .show-pop>b,#sec-era .show-card .show-play,#sec-era .show-frame .show-cap{transition:opacity var(--m-quick) var(--m-ease-out)}
  #sec-era .show-btn{transition:border-color var(--m-tap) var(--m-ease-out),color var(--m-tap) var(--m-ease-out),transform var(--m-tap) var(--m-ease-out)}
  #sec-era .show-btn:active{transform:scale(.94)}
  #sec-era .show-cap.in{animation:show-in var(--m-base) var(--m-ease-out) both}
  #sec-era .show-fig{animation:show-in var(--m-base) var(--m-ease-out) both}
  #sec-era .show-fig:nth-child(2){animation-delay:var(--m-stagger)}
  #sec-era .show-fig:nth-child(3){animation-delay:calc(var(--m-stagger) * 2)}
  #sec-era .show-frame.settled .show-glow{animation:show-breath var(--m-breath) ease-in-out infinite alternate}
  #sec-era .show-tag.live .show-dot{animation:show-breath var(--m-breath) ease-in-out infinite alternate}
}
@keyframes show-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes show-breath{from{opacity:1}to{opacity:.35}}

/* Lane T (2026-09-30): the offline chapter's chips -- the connection above the phone, the visit kept on the phone below
   it, Adinci's server in the corner where the Adinci chip stood (they never show together). showcase.js places them
   with transform; they come and go by opacity and transform, like the others. */
#sec-era .show-net,#sec-era .show-q{left:0;top:0;will-change:transform}
#sec-era .show-net{--c:var(--lime)}
#sec-era .show-net.back{--c:var(--cyan)}
#sec-era .show-net .show-in{display:block;transform:translate(-50%,-100%)}
#sec-era .show-net .show-pop{transform-origin:50% 100%}
#sec-era .show-net.back .show-slash{opacity:0}
#sec-era .show-q .show-in{display:block;transform:translateX(-50%)}
#sec-era .show-q .show-pop{padding-inline:4px 10px;border-color:rgba(139,232,95,.55);transform-origin:50% 0}
#sec-era .show-qn{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--lime);color:#04050A;
  font-style:normal;font-weight:800;font-size:11px;letter-spacing:0;direction:ltr}
#sec-era .show-srv{bottom:92px;inset-inline-end:12px;--c:var(--vio)}
#sec-era .show-okm{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--vio);color:#fff;
  max-width:0;overflow:hidden;opacity:0;transform:scale(.6)}
#sec-era .show-srv.ok .show-okm{max-width:18px;opacity:1;transform:none}
#sec-era .show-okm svg{width:12px;height:12px}
@media (max-width:520px){#sec-era .show-srv{bottom:104px}}
@media (prefers-reduced-motion:no-preference){
  #sec-era .show-slash,#sec-era .show-okm{transition:opacity var(--m-base) var(--m-ease-out),transform var(--m-base) var(--m-ease-out)}
}