/* Lunaris – global base for the Hydrogen app.
   The section stylesheets come 1:1 from the Shopify theme; there each section set its own font
   variables from the theme's font pickers. Here all of them point to the same two families. */
:root{
  --lunaris-heading-font:'Cormorant',Georgia,'Times New Roman',serif;
  --lunaris-body-font:'Alegreya',Georgia,'Times New Roman',serif;
  --la-heading-font:var(--lunaris-heading-font);
  --la-body-font:var(--lunaris-body-font);
  --lx-heading-font:var(--lunaris-heading-font);
  --lx-body-font:var(--lunaris-body-font);
  --fw-heading-font:var(--lunaris-heading-font);
  --fw-body-font:var(--lunaris-body-font);
  --ft-heading-font:var(--lunaris-heading-font);
  --ft-body-font:var(--lunaris-body-font);
  --at-heading-font:var(--lunaris-heading-font);
  --at-body-font:var(--lunaris-body-font);
  --ad-heading-font:var(--lunaris-heading-font);
  --ad-body-font:var(--lunaris-body-font);
  --pb-font:var(--lunaris-body-font);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#17191d;font-family:var(--lunaris-body-font)}
/* the Hydrogen skeleton rounds every image – the gallery does not */
img{border-radius:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Page changes (view transitions, see app/components/lunaris/PageTransition.tsx) ----------
   The old page fades out, the new one – already scrolled to the top – fades in over a deep gallery tone.
   Paintings that carry view-transition-name art-<handle> still fly from the collection into the artwork page. */
::view-transition{background:#0f1714}
::view-transition-old(root){animation:lx-vt-out .34s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:lx-vt-in .62s cubic-bezier(.22,1,.36,1) .12s both}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
@keyframes lx-vt-out{to{opacity:0;filter:blur(2px)}}
@keyframes lx-vt-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.01s;animation-delay:0s}
}

/* loading line */
.lx-loadline{position:fixed;top:0;left:0;right:0;z-index:2147483000;height:2px;transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,rgba(214,178,110,0),#d6b26e 30%,#f1dca6 70%,#d6b26e);box-shadow:0 0 10px rgba(214,178,110,.6)}

/* ---------- the one Lunaris logo (components/lunaris/LunarisLogo.tsx) ---------- */
/* wordmark "lunise.art" – type only (components/lunaris/LunarisLogo.tsx) */
.lx-logo{display:inline-flex;align-items:center;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;font-size:24px;letter-spacing:-.015em;line-height:1;white-space:nowrap;text-transform:none}
.lx-logo>span{margin:0}
.lx-logo svg{flex:none;font-size:1.15em;transform:rotate(-20deg)}
.lx-logo--dark{color:#1c1430}
.lx-logo--dark svg{color:#4f3ff0}
.lx-logo--light{color:#fff}
.lx-logo--light svg{color:#9d90ff}
@media(max-width:520px){.lx-logo{font-size:22px}}
.lx-logo--footer{font-size:clamp(24px,5vw,30px)}
.ld-logo--card{font-size:16px}
.lunaris-site-brand{display:inline-flex;align-items:center;text-decoration:none}
.lunaris-ft__logo{display:inline-flex;text-decoration:none}

/* ---------- stage: the work's own backdrop behind thumbnails (components/lunaris/Staged.tsx) ---------- */
html, body { overflow-x: clip; }
.lx-staged { position: relative; display: block; }
.lx-staged__art { position: relative; display: block; }
.lx-staged__bg {
  position: absolute; inset: -18% -26% -24% -26%; pointer-events: none;
  background: center / cover no-repeat; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%);
  opacity: 0; transform: scale(.94);
  animation: lx-stage-in 1.4s cubic-bezier(.22, 1, .36, 1) .15s forwards;
}
@keyframes lx-stage-in { to { opacity: 1; transform: none; } }
.lx-staged--soft .lx-staged__bg { inset: -12% -16% -16% -16%; }
@media (prefers-reduced-motion: reduce) { .lx-staged__bg { animation: none; opacity: 1; transform: none; } }