/* ══════════════════════════════════════════════════════════
   Lili Lind Art Gallery — lililind.com

   Her own identity sets the type: black ground, one light sans,
   wide letterspacing, the feather. See ../../DESIGN.md.
   ══════════════════════════════════════════════════════════ */

:root{
  --night:      #08090b;
  --ember:      #ff7a2f;
  --flame:      #ffcf7a;
  --terracotta: #b45a34;
  --bone:       #f2e6d2;

  /* live fire intensity, 0..1, written by scene.js */
  --fire: 0.55;

  --sans: "Avenir Next", Avenir, "Helvetica Neue", ui-sans-serif,
          -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  height: 100%;
  background: var(--night);
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 300;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#app{ position: fixed; inset: 0; overflow: hidden; }

/* ─────────────── scenes ─────────────── */

.scene{
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.scene.is-active{
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease, visibility 0s;
}

/* ═══════════════════════════════════════
   SCENE 1 — the hut at night
   ═══════════════════════════════════════ */

.layers{
  position: absolute;
  inset: -6%;                  /* bleed, so parallax never shows an edge */
  perspective: 1200px;
}

.layer{
  position: absolute;
  inset: 0;
  will-change: transform;
  /* JS points these at the doorway, so the camera pushes through it */
  transform-origin: var(--ox, 52%) var(--oy, 50%);
}
.layer canvas{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}

.layer--sky{
  background:
    radial-gradient(120% 80% at 50% 96%, #241206 0%, #120c08 26%, #08090b 62%, #050507 100%),
    radial-gradient(60% 40% at 78% 8%,  #0e1a16 0%, transparent 70%);
}

/* ── the hut ── */

.layer--hut{ overflow: hidden; }

.hut{
  position: absolute;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hut.is-ready{ opacity: 1; }

.hut__img{
  display: block;
  width: 100%; height: 100%;
  object-fit: fill;            /* the box is already the picture's own ratio */
}

/* the firelight falling across the thatch */
.hut__light{
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(58% 58% at var(--fx, 30%) var(--fy, 80%),
      rgba(255,176,88,.58) 0%,
      rgba(226,110,40,.30) 34%,
      rgba(150,54,16,.12)  62%,
      transparent 84%);
  opacity: calc(.48 + var(--fire) * .52);
}

/* ── the doorway ── */

.hut__door{
  position: absolute;
  overflow: visible;
}
.hut__door canvas{
  position: absolute;      /* JS sizes and offsets this past the opening */
  display: block;
  pointer-events: none;
}
.door__btn{
  position: absolute;
  inset: -12% -22%;            /* a little forgiveness around a small target */
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.door__btn:focus-visible{
  outline: 2px solid rgba(255,190,110,.9);
  outline-offset: 4px;
}

/* ── the fire in front ── */

.layer--glow{ mix-blend-mode: screen; pointer-events: none; }
.glow{
  position: absolute;
  left: 27%; top: 82%;
  width: 60vmin; height: 60vmin;      /* JS replaces these from the fire's size */
  border-radius: 50%;
  background: radial-gradient(closest-side,
      rgba(255,190,116,.44) 0%,
      rgba(240,112,42,.20) 26%,
      rgba(170,56,18,.07)  50%,
      transparent 68%);
  opacity: calc(.34 + var(--fire) * .46);
  transform: scale(calc(.94 + var(--fire) * .12));
  will-change: opacity, transform;
}

.layer--fire{ filter: blur(1.5px); pointer-events: none; }
.layer--embers{ pointer-events: none; }

.layer--grain{
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: var(--grain, none);
  background-size: 180px 180px;
  animation: grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%{ transform: translate(0,0) } 33%{ transform: translate(-3%,2%) }
  66%{ transform: translate(2%,-3%) } 100%{ transform: translate(0,0) }
}

.layer--vignette{
  pointer-events: none;
  background: radial-gradient(125% 95% at 50% 50%,
      transparent 40%, rgba(0,0,0,.28) 74%, rgba(0,0,0,.72) 100%);
}

/* ── wordmark ── */

.brand{
  position: absolute;
  top: max(28px, env(safe-area-inset-top));
  left: 0; right: 0;
  display: grid;
  justify-items: center;
  pointer-events: none;
}
.brand img{
  width: clamp(190px, 25vw, 360px);
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 2px 26px rgba(0,0,0,.95));
}

.hint{
  position: absolute;
  left: 0; right: 0;
  bottom: max(24px, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}
.hint.is-shown{ animation: hintPulse 3.4s ease-in-out infinite; opacity: .55; }
@keyframes hintPulse{ 0%,100%{ opacity:.34 } 50%{ opacity:.72 } }

.flash{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(60% 60% at 50% 55%, #fff3dd 0%, #ffb35e 38%, #7a2c08 72%, #000 100%);
  z-index: 40;
}

/* ═══════════════════════════════════════
   SCENE 2 — inside
   ═══════════════════════════════════════ */

.scene--inside{
  background: radial-gradient(90% 70% at 50% -10%, #14100e 0%, #0a0908 45%, #060606 100%);
  display: flex;
  flex-direction: column;
}

.top{
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: max(16px, env(safe-area-inset-top)) clamp(18px, 4vw, 44px) 12px;
  z-index: 3;
  /* the wall scrolls under this; without a ground the labels sit on paintings */
  background: linear-gradient(to bottom, #100d0c 62%, rgba(16,13,12,0));
}

.top__brand{ display: inline-flex; align-items: center; }
.top__brand img{
  width: clamp(120px, 13vw, 170px);
  height: auto;
  opacity: .92;
  transition: opacity .3s ease;
}
.top__brand:hover img{ opacity: 1; }

.nav{ display: flex; gap: clamp(18px, 3vw, 42px); justify-content: center; }
.nav a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 2px;
  color: var(--bone);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  opacity: .78;
  white-space: nowrap;
  transition: opacity .3s ease;
}
.nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.nav a:hover{ opacity: 1; }
.nav a:hover::after, .nav a.is-current::after{ transform: scaleX(1); }
.nav a.is-current{ opacity: 1; }
.nav .ext{ width: 12px; height: 12px; opacity: .8; text-indent: 0; }

.top__right{ display: flex; align-items: center; justify-content: flex-end; gap: 16px; }

.lang{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none; border: 0;
  padding: 6px 2px;
  color: var(--bone);
  font: inherit; font-size: 11px;
  letter-spacing: .16em;
  cursor: pointer;
}
.lang span{ opacity: .5; transition: opacity .3s ease; }
.lang i{ opacity: .35; font-style: normal; }
html[data-lang="et"] .lang [data-lang-opt="et"],
html[data-lang="en"] .lang [data-lang-opt="en"]{ opacity: 1; }

.top__back{
  background: none; border: 0;
  padding: 6px 2px;
  color: var(--bone);
  font: inherit; font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .62;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .3s ease;
}
.top__back:hover{ opacity: 1; }

.view{ flex: 1; min-height: 0; display: none; }
.view.is-active{ display: block; animation: viewIn .7s var(--ease-out) both; }
@keyframes viewIn{
  from{ opacity: 0; transform: translateY(14px) }
  to  { opacity: 1; transform: none }
}

/* ── the wall ── */

.wall{
  height: 100%;
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  grid-template-columns: repeat(auto-fill, minmax(min(268px, 74vw), 1fr));
  align-content: start;
  padding: clamp(12px, 2.5vw, 34px) clamp(18px, 5vw, 72px) 14vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #2a241e transparent;
}
.wall::-webkit-scrollbar{ width: 8px; }
.wall::-webkit-scrollbar-thumb{ background: #2a241e; border-radius: 4px; }

.wall__note{
  grid-column: 1 / -1;
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .5;
}

.art{
  position: relative;
  display: block;
  width: 100%;
  padding: 0; border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  perspective: 900px;
  text-align: left;
}
.art__frame{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: #0c0a09;
  box-shadow: 0 18px 46px rgba(0,0,0,.72), 0 0 0 1px rgba(242,230,210,.07);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out), box-shadow .5s ease;
  will-change: transform;
}
.art__frame img{
  display: block;
  width: 100%; height: auto;
  transition: transform .6s var(--ease-out);
}
.art__frame::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
      rgba(255,190,120,0) 36%, rgba(255,205,150,.13) 50%, rgba(255,190,120,0) 64%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.art:hover .art__frame,
.art:focus-visible .art__frame{
  box-shadow: 0 26px 66px rgba(0,0,0,.8), 0 0 0 1px rgba(255,190,120,.22);
}
.art:hover .art__frame::after{ opacity: 1; }
.art:hover .art__frame img{ transform: scale(1.035); }
.art:focus-visible{ outline: none; }

.art__cap{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 13px;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .78;
  transition: opacity .3s ease;
}
.art:hover .art__cap{ opacity: 1; }
.art__cap b{ font-weight: 400; }
.art__cap span{ opacity: .78; white-space: nowrap; }

.art.is-sold .art__frame img{ opacity: .82; }
.art.is-sold .art__cap span{ letter-spacing: .22em; }

/* ── about ── */

.view--lili{ overflow-y: auto; }
.about{
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(16px, 4vh, 48px) clamp(22px, 6vw, 40px) 14vh;
}

.about__portrait{
  position: relative;
  margin: 0;
}
.about__portrait::before{           /* a warm pool behind her, like firelight */
  content: "";
  position: absolute;
  inset: -12% -18% -6%;
  background: radial-gradient(52% 48% at 50% 46%,
      rgba(180,90,52,.30) 0%, rgba(120,60,30,.12) 45%, transparent 76%);
  filter: blur(6px);
}
.about__portrait img{
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  /* the cutout ends at the bottom of the frame — fade it out instead */
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}

.about__text{ min-width: 0; }
.about h2{
  margin: 0 0 26px;
  font-weight: 300;
  font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  opacity: .82;
}
.about__body p{
  margin: 0 0 1.5em;
  font-size: clamp(14.5px, 1.3vw, 16px);
  line-height: 1.85;
  letter-spacing: .012em;
  opacity: .94;
}
.about__body p:first-child{
  font-size: clamp(15.5px, 1.45vw, 17.5px);
  opacity: 1;
}
.about__links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(242,230,210,.1);
}
.about__links a{
  color: var(--bone);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .16em;
  opacity: .8;
  transition: opacity .3s ease;
}
.about__links a:hover{ opacity: 1; }
.about__links span{ opacity: .6; }

/* ── the viewer ── */

.viewer{
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(5,5,6,.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.viewer.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility 0s;
}
#viewerCanvas, #viewerImg{
  border-radius: 2px;
  box-shadow: 0 30px 90px rgba(0,0,0,.85), 0 0 0 1px rgba(242,230,210,.08);
  touch-action: none;
}
#viewerImg{ max-width: 92vw; max-height: 72vh; }
#viewerCanvas[hidden], #viewerImg[hidden]{ display: none; }

.viewer__meta{
  position: absolute;
  left: 0; right: 0;
  bottom: max(22px, env(safe-area-inset-bottom));
  padding: 0 clamp(60px, 10vw, 120px);
  text-align: center;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
  pointer-events: none;
}
.viewer__meta b{ font-weight: 400; }
.viewer__meta span{ opacity: .78; }
.viewer__story{
  display: block;
  max-width: 60ch;
  margin: 12px auto 0;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.7;
  letter-spacing: .01em;
  text-transform: none;
  opacity: .82;
}

.viewer__close, .viewer__nav{
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: rgba(242,230,210,.06);
  color: var(--bone);
  opacity: .78;
  cursor: pointer;
  transition: opacity .3s ease, background .3s ease;
}
.viewer__close:hover, .viewer__nav:hover{ opacity: 1; background: rgba(242,230,210,.16); }
.viewer__close svg, .viewer__nav svg{ width: 22px; height: 22px; }
.viewer__close{ top: max(20px, env(safe-area-inset-top)); right: 22px; }
.viewer__nav--prev{ left: max(14px, 2vw); top: 50%; margin-top: -23px; }
.viewer__nav--next{ right: max(14px, 2vw); top: 50%; margin-top: -23px; }

/* ─────────────── contact ─────────────── */

.foot{
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 6;
  pointer-events: none;          /* only the address itself is clickable */
}
.foot a{
  pointer-events: auto;
  color: var(--bone);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .18em;
  opacity: .6;
  transition: opacity .3s ease;
}
.foot a:hover{ opacity: 1; }

/* ─────────────── sound toggle ─────────────── */

.sound{
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(10,8,6,.5);
  box-shadow: inset 0 0 0 1px rgba(242,230,210,.14);
  color: var(--bone);
  opacity: .7;
  cursor: pointer;
  transition: opacity .3s ease, background .3s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sound:hover{ opacity: 1; background: rgba(30,20,12,.7); }
.sound svg{ width: 21px; height: 21px; }
.sound .sound__off{ display: none; }
.sound[aria-pressed="false"] .sound__on{ display: none; }
.sound[aria-pressed="false"] .sound__off{ display: block; }

/* ─────────────── small screens ─────────────── */

@media (max-width: 860px){
  .about{
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 560px;
    text-align: center;
  }
  .about__portrait{ max-width: 300px; margin-inline: auto; }
  .about__links{ justify-content: center; }
}

@media (max-width: 760px){
  .foot a{ font-size: 10.5px; letter-spacing: .14em; }
  .brand img{ width: clamp(170px, 52vw, 260px); }
  .top{ grid-template-columns: 1fr auto; row-gap: 4px; padding-bottom: 8px; }
  .top__brand img{ width: 110px; }
  .nav{ grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .top__right{ grid-column: 2; grid-row: 1; }
  .viewer__nav{ width: 40px; height: 40px; }
  .viewer__meta{ padding: 0 18px; }
}

@media (max-height: 560px){
  .brand{ top: 12px; }
  .brand img{ width: 170px; }
}

/* ─────────────── reduced motion ─────────────── */

@media (prefers-reduced-motion: reduce){
  .layer--grain{ animation: none; }
  .hint.is-shown{ animation: none; opacity: .34; }
  .art__frame, .art__frame img{ transition: none; }
  .scene{ transition-duration: .01ms; }
  .view.is-active{ animation: none; }
  .hut{ transition: none; }
}