/* ARAZU's stage beside the seller's sign-in (registration/login.html, core/arazu_stage.html). The left part of the
   screen belongs to the platform in Svenity's colours; the right part (topbar, form, credit) stays the seller's. */
@font-face{font-family:"Noto Sans Cuneiform";font-style:normal;font-weight:400;font-display:block;src:url(../fonts/noto-sans-cuneiform-arazu.woff2) format("woff2");unicode-range:U+12000-1254F}
body.has-stage{--stage:56vw;background:#14171C}
body.has-stage>.topbar,body.has-stage>.auth-shell{margin-left:var(--stage)}
body.has-stage>.auth-shell{background:var(--bg)}
.arazu-stage{--night:#14171C;--night-line:#2B303A;--night-text:#EDEFF2;--night-dim:#AAB1BC;--copper:#E0954F;--ease:cubic-bezier(.16,1,.3,1);
  --l1:33.333%;--l2:66.667%;--floor:72.4%;--bust:36%;--lw:min(26vw,312px);font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--night-text)}
.arazu-stage .stage-cv{position:fixed;left:0;top:0;width:var(--stage);height:100dvh;display:block;pointer-events:none}
.arazu-stage .stage{position:fixed;left:0;top:0;width:var(--stage);height:100dvh;pointer-events:none}
.arazu-stage .stage a,.arazu-stage .replay{pointer-events:auto}
.arazu-stage .replay{position:absolute;top:clamp(20px,3.4vh,36px);right:clamp(20px,3.4vw,48px);min-height:0;padding:3px 9px;border:1px solid var(--night-line);border-radius:999px;background:transparent;color:var(--night-dim);font:600 10px/1.4 "Hanken Grotesk",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.55;cursor:pointer;transition:opacity .2s var(--ease),color .2s var(--ease)}
.arazu-stage .replay:hover,.arazu-stage .replay:focus-visible{opacity:1;color:var(--night-text);background:transparent}
.arazu-stage .stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.arazu-stage .mark{position:absolute;top:clamp(20px,3.4vh,36px);left:clamp(20px,3.4vw,48px);display:flex;align-items:center;gap:12px;color:var(--night-text);text-decoration:none;font-weight:800;letter-spacing:.16em;font-size:15px}
.arazu-stage .mark svg{width:28px;height:26px}.arazu-stage .mark .m1,.arazu-stage .flyer .m1{fill:var(--copper)}.arazu-stage .mark .m2,.arazu-stage .flyer .m2{fill:var(--copper);opacity:.5}
/* The copy of the corner mark that flies over the tower to become the lamp (stage.js fly()). */
.arazu-stage .flyer{position:fixed;left:0;top:0;display:flex;align-items:center;gap:12px;height:26px;opacity:0;transform-origin:0 0;will-change:transform,opacity;color:var(--night-text);font-weight:800;letter-spacing:.16em;font-size:15px;line-height:26px;white-space:nowrap}
.arazu-stage .flyer svg{width:28px;height:26px;flex:none}

/* The cella inside the tower, under the canvas: it shows through as the tower's face comes away. Vertical thirds:
   the god's eye on the upper line, the seller's logo centred on the lower one, a logo-height of clear space between. */
.arazu-stage .sanctum{position:fixed;left:0;top:0;width:var(--stage);height:100dvh;visibility:hidden;overflow:hidden}
body.inside .arazu-stage .sanctum{visibility:visible}
.arazu-stage .chamber{position:absolute;inset:0;background:radial-gradient(ellipse 70% 45% at 50% var(--floor),#1D2027,#14171C 70%)}
.arazu-stage .lamp{position:absolute;left:50%;top:4.5%;transform:translateX(-50%);display:block;perspective:600px;opacity:0}
/* Lamplight around the settled mark: the beam's own warm tone, low and wide, no colour of its own. */
.arazu-stage .halo{position:absolute;left:50%;top:50%;width:150px;height:110px;transform:translate(-50%,-50%);opacity:0;pointer-events:none;background:radial-gradient(closest-side,rgba(255,222,176,.24),rgba(242,184,102,.09) 55%,rgba(242,184,102,0))}
.arazu-stage .sigil{display:block;position:relative;width:34px;height:31px;transform-style:preserve-3d}
.arazu-stage .sigil svg{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(calc(var(--i) * .9px))}
.arazu-stage .sigil svg path{fill:#7E4718}.arazu-stage .sigil svg.front .m1{fill:url(#arazu-gold)}.arazu-stage .sigil svg.front .m2{fill:url(#arazu-gold);opacity:.55}
.arazu-stage .beam{position:absolute;left:0;right:0;top:10%;height:calc(var(--floor) - 10%);opacity:0;background:linear-gradient(180deg,rgba(255,222,176,.36),rgba(255,222,176,.05));clip-path:polygon(48.8% 0,51.2% 0,75% 100%,25% 100%);filter:blur(6px)}
.arazu-stage .bust{position:absolute;left:50%;top:calc(var(--l1) - var(--bust) * .42);height:var(--bust);width:auto;opacity:0;transform:translateX(-50%);-webkit-mask:linear-gradient(#000 68%,transparent 96%);mask:linear-gradient(#000 68%,transparent 96%)}
.arazu-stage .altar{position:absolute;left:0;right:0;top:var(--l2);transform:translateY(-50%);display:flex;justify-content:center;perspective:900px}
.arazu-stage .rig{transform-style:preserve-3d;opacity:0}
.arazu-stage .logo3d{position:relative;width:var(--lw);aspect-ratio:var(--logo-ratio,4);transform-style:preserve-3d}
.arazu-stage .logo3d img{max-width:none;position:absolute;inset:0;width:100%;height:100%;transform:translateZ(calc(var(--i) * 1px))}
.arazu-stage .pool{position:absolute;left:50%;top:100%;width:calc(var(--lw) * 1.7);height:calc(var(--lw) * .2);transform:translate(-50%,-50%);opacity:0;background:radial-gradient(closest-side,rgba(255,214,160,.3),rgba(255,214,160,0))}
.arazu-stage .refl{position:absolute;left:50%;top:100%;width:var(--lw);transform:translateX(-50%);opacity:0;pointer-events:none}
.arazu-stage .refl img{display:block;width:100%;transform:scaleY(-1);filter:blur(1.5px);-webkit-mask:linear-gradient(to top,rgba(0,0,0,.7),transparent 75%);mask:linear-gradient(to top,rgba(0,0,0,.7),transparent 75%)}
body.entering .arazu-stage .beam{animation:arazu-lamp 1.2s ease-in-out infinite}
@keyframes arazu-lamp{50%{opacity:.55}}

/* Inscriptions: cuneiform only, one place at a time, each gone after a while. */
.arazu-stage .quote{position:absolute;margin:0;opacity:0;filter:blur(4px);transition:opacity 2.6s cubic-bezier(.4,0,.2,1),filter 2.6s cubic-bezier(.4,0,.2,1)}
.arazu-stage .quote.on{opacity:1;filter:none}
.arazu-stage .quote blockquote{margin:0;font:400 15px/1.7 "Noto Sans Cuneiform";letter-spacing:.12em;color:#D9DDE3;white-space:nowrap}
.arazu-stage .q1{text-align:right}
.arazu-stage .q2{right:clamp(20px,3.4vw,48px);top:16%}
.arazu-stage .q3{left:clamp(20px,3.4vw,48px);top:26%}
.arazu-stage .pitch{position:absolute;left:clamp(20px,3.4vw,48px);right:clamp(20px,3.4vw,48px);bottom:clamp(20px,4.2vh,44px);display:grid;gap:14px}
.arazu-stage .pitch>*{margin:0;opacity:0;transition:opacity 1s var(--ease)}
.arazu-stage .pitch.on>*{opacity:1}.arazu-stage .pitch.on>.links{transition-delay:.3s}
.arazu-stage .pitch.on>.inscr.gone{opacity:0;transition:opacity 3.2s cubic-bezier(.4,0,.2,1)}
.arazu-stage .inscr{font:400 16px/1.7 "Noto Sans Cuneiform";letter-spacing:.12em;color:var(--night-text)}.arazu-stage .inscr span{color:var(--copper)}
.arazu-stage .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.arazu-stage .links{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13px}
.arazu-stage .more{color:var(--copper);text-decoration:none;font-weight:600}.arazu-stage .more span{display:inline-block;transition:transform .2s var(--ease)}.arazu-stage .more:hover span{transform:translateX(3px)}
.arazu-stage .svenity{color:var(--night-dim);text-decoration:none}
.arazu-stage .svenity b{font-family:Georgia,"Times New Roman",serif;font-size:14px;color:var(--night-text)}.arazu-stage .svenity i{font-style:normal;color:var(--copper)}
.arazu-stage .svenity:hover b{color:#fff}
.arazu-stage a:focus-visible,.arazu-stage .replay:focus-visible{outline:2px solid var(--copper);outline-offset:4px;border-radius:6px}

/* Once the seller's logo has turned to face us, the one in their own header catches the light. */
body.has-stage .store-logo{position:relative;overflow:hidden}
body.has-stage .store-logo::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,226,180,.85) 50%,transparent 70%);transform:translateX(-120%);mix-blend-mode:screen;pointer-events:none}
body.has-stage .store-logo.blessed::after{animation:arazu-sheen 1.1s var(--ease) forwards}
@keyframes arazu-sheen{to{transform:translateX(120%)}}

@media (max-width:900px){
  body.has-stage{--stage:100vw}
  body.has-stage>.topbar,body.has-stage>.auth-shell{margin-left:0}
  body.has-stage>.topbar{position:relative;margin-top:56dvh;border-radius:18px 18px 0 0;box-shadow:0 -24px 60px rgba(0,0,0,.45)}
  body.has-stage .topbar+.auth-shell{min-height:auto}
  .arazu-stage .stage-cv,.arazu-stage .stage,.arazu-stage .sanctum{height:56dvh}
  .arazu-stage{--l1:26%;--l2:54%;--floor:59.4%;--bust:27%;--lw:min(46vw,200px)}
  .arazu-stage .sigil{width:26px;height:24px}
  .arazu-stage .pitch{gap:10px;bottom:16px}
  .arazu-stage .inscr{font-size:13px}
  .arazu-stage .quote{display:none}
}
@media (prefers-reduced-motion:reduce){.arazu-stage .quote,.arazu-stage .pitch>*{transition:none}}
