/* Heavenly scenes: the rooms of light behind the portal, the website and the landing pages (art.js draws them).
   Rule of the house: the room lives in margins, edges and empty bands; where people read, a sheet of light holds the words. */

/* ── the layer ─────────────────────────────────────────────── */
.ink-paper > .aeh { position: absolute; inset: 0; overflow: hidden; overflow: clip; pointer-events: none;
  --aeh-paper: 253 253 252; --aeh-ground: #e9f0f8; }
.ink-paper > .aeh.aeh-night { --aeh-paper: 12 16 28; --aeh-ground: #0b1226; }
.aeh-wall, .aeh-stick { position: absolute; inset: 0; overflow: hidden; overflow: clip; background: var(--aeh-ground); }
.aeh-still, .aeh-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 1.4s ease; }
.aeh-still.on, .aeh-gl.on { opacity: 1; }
.aeh-veil { position: absolute; inset: 0; }
/* without WebGL the painting still breathes */
.aeh-still.on { animation: aeh-drift 46s ease-in-out infinite alternate; }
.aeh-live .aeh-still.on { animation: none; }
@keyframes aeh-drift { from { transform: scale(1.04) translateX(-.6%); } to { transform: scale(1.08) translateX(.6%); } }

.ink-paper .aeh img, .ink-paper .aeh canvas { max-width: none; }

/* ── login: the room in full; the form stands in it on its own sheet ── */
.auth-wrap > .ink-paper .aeh-veil { background: radial-gradient(ellipse 40% 75% at 50% 50%, rgb(var(--aeh-paper) / .3), transparent 100%); }
.auth-wrap::before, .auth-wrap::after { display: none; }
.auth-wrap .auth-foot { color: var(--ink); text-shadow: 0 0 12px rgb(255 255 255 / .9); }
.auth-wrap .auth-theme-btn { background: rgb(255 255 255 / .82); border-color: rgb(255 255 255 / .6); color: var(--ink); }
.auth-wrap[data-auth-theme="dark"] .auth-foot { text-shadow: 0 0 12px #000; }
.auth-wrap[data-auth-theme="dark"] .auth-theme-btn { background: rgb(12 16 28 / .7); border-color: rgb(255 255 255 / .14); }
.auth-wrap .auth-box, .auth-wrap[data-auth-theme="dark"] .auth-box { padding: 30px 32px 22px; max-width: 420px; border-radius: 12px; }
.auth-wrap .auth-box { background: rgb(255 255 255 / .84); border: 1px solid rgb(255 255 255 / .7);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 30px 70px -40px rgb(38 58 110 / .55); }
.auth-wrap[data-auth-theme="dark"] .auth-box, [data-theme="dark"] .auth-wrap .auth-box { background: rgb(12 16 28 / .78); border-color: rgb(255 255 255 / .1); box-shadow: 0 30px 70px -40px #000; }

/* ── portal: quiet. The room shows at the edges and in the sidebar; the work sits on paper ── */
.aeh-portal .aeh-veil { background:
  linear-gradient(to left, transparent 0, rgb(var(--aeh-paper) / .35) max(50px, 5vw), rgb(var(--aeh-paper) / .84) max(190px, 16vw)); }

/* ── website: the room stays still behind the page; sheets of light hold the words and scroll over it ── */
html[data-view="site"] #rest > .ink-paper-page { z-index: -1; overflow: clip; }
html[data-view="site"] #rest .section,
html[data-view="site"] #rest .final { background: transparent !important; }
.aeh-page .aeh-wall {   /* before art.js measures the page: edges only */
  -webkit-mask-image: linear-gradient(to right, #000, transparent 60px, transparent calc(100% - 60px), #000);
          mask-image: linear-gradient(to right, #000, transparent 60px, transparent calc(100% - 60px), #000);
}
.aeh-page, .aeh-page .aeh-wall { overflow: visible; }
.aeh-page .aeh-wall { background: none; }
@supports (overflow: clip) {
  .aeh-page, .aeh-page .aeh-wall { overflow: clip; }
  .aeh-page .aeh-stick { position: sticky; top: 0; bottom: auto; height: 100vh; }
  @supports (height: 100lvh) { .aeh-page .aeh-stick { height: 100lvh; } }
}
/* room to breathe: the windows onto the room open between the sheets */
html[data-view="site"] #rest > .section + .section { margin-top: 110px; border-top: 0; }
html[data-view="site"] #rest > .final { border-top: 0; margin-top: 110px; }
.aeh-dialog .aeh-veil { background: rgb(var(--aeh-paper) / .86); }
/* a short message stands in the room in full (the 404 page); a soft pool of light holds the words */
.aeh-room .aeh-veil { background: radial-gradient(ellipse min(640px, 96vw) 48% at 50% 47%, rgb(var(--aeh-paper) / .92) 0, rgb(var(--aeh-paper) / .84) 60%, rgb(var(--aeh-paper) / 0) 100%); }

/* ── phones ── */
@media (max-width: 700px) {
  .auth-wrap > .ink-paper .aeh-veil { background: none; }
  .auth-wrap { align-items: flex-end; padding: 200px 14px 16px; }
  .aeh-login .aeh-stick { top: -34%; bottom: auto; height: 134%; }   /* the sky and the arch sit above the form */
  .auth-wrap .auth-box, .auth-wrap[data-auth-theme="dark"] .auth-box { padding: 18px 20px 12px; }
  .auth-wrap .auth-brand { margin-bottom: 14px; }
  .auth-wrap .auth-logo { width: 72px; height: 72px; }
  .auth-wrap .auth-title { font-size: 1.7rem; }
  .auth-wrap .auth-rule { margin: 8px auto; }
  .auth-wrap .auth-tabs { margin-bottom: 16px; }
  .aeh-portal .aeh-veil { background: linear-gradient(to bottom, rgb(var(--aeh-paper) / .62) 0, rgb(var(--aeh-paper) / .9) 240px); }
  html[data-view="site"] #rest > .section + .section, html[data-view="site"] #rest > .final { margin-top: 170px; }
}

/* ── the real website: the art layer sits behind every section below the doors ── */
/* its own paper: the sections are see-through so the room shows, and the 3D world canvas must not */
html[data-view="site"] #rest { position: relative; isolation: isolate; background: var(--paper); }