.art[data-weather] { isolation:isolate; background:#191223; }
.art[data-weather="sun"] { --glow:#ffbd6e; --city-light:saturate(1.16) sepia(.12) brightness(1.05); }
.art[data-weather="wind"] { --glow:#80beb9; --city-light:saturate(.72) brightness(.87); }
.art[data-weather="cloud"] { --glow:#b2a0e1; --city-light:saturate(.60) brightness(.79); }
.art[data-weather="rain"] { --glow:#9288e9; --city-light:saturate(.63) brightness(.64); }
.art[data-weather="snow"] { --glow:#b4d6ff; --city-light:saturate(.46) brightness(1.05) contrast(.89); }
.weather-scene, .weather-photo, .weather-atmosphere, .weather-particles { position:absolute; inset:0; }
.weather-scene { overflow:hidden; pointer-events:none; }
.weather-photo, .crystal-refraction {
  background:url('tbilisi.webp') center / cover no-repeat;
  filter:var(--city-light);
}
.crystal-refraction {
  position:absolute;
  inset:-5%;
  transform:scaleX(-1);
  opacity:.58;
  mask-image:radial-gradient(circle,transparent 54%,#0005 64%,black 74%);
}
.weather-scene::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 41% 35%,transparent 47%,#150a2645 67%,#140a21cf 89%);
}
.weather-atmosphere { inset:-25%; }
[data-weather="sun"] .weather-atmosphere { background:radial-gradient(ellipse at 46% 34%,#ffca771f,transparent 47%); mix-blend-mode:screen; animation:sun-bloom 8s ease-in-out infinite alternate; }
[data-weather="cloud"] .weather-atmosphere { background:radial-gradient(ellipse 49% 14% at 32% 66%,#cec8dd3b,transparent 85%); filter:blur(16px); animation:mist-drift 13s ease-in-out infinite alternate; }
[data-weather="snow"] .weather-atmosphere { background:radial-gradient(ellipse at 50% 67%,#d3e1f951,transparent 65%); }
.particle { position:absolute; left:var(--x); top:var(--y); animation-duration:var(--speed); animation-delay:var(--delay); animation-iteration-count:infinite; animation-timing-function:linear; }
[data-weather="rain"] .particle { width:1px; height:34px; background:linear-gradient(transparent,#e3ecffe0); animation-name:rainfall; }
[data-weather="snow"] .particle { width:var(--size); aspect-ratio:1; border-radius:50%; background:#edf3ff; filter:blur(.45px); animation-name:snowfall; }
[data-weather="wind"] .particle { width:calc(var(--size) * 2); height:3px; border-radius:90% 0 90% 0; background:#e4b875; animation-name:wind-flight; }
@keyframes mist-drift { from { transform:translateX(-22%); opacity:.3; } to { transform:translateX(40%); opacity:.9; } }
@keyframes sun-bloom { from { opacity:.2; } to { opacity:1; } }
@keyframes rainfall { from { transform:translate(80px,-85px) rotate(15deg); opacity:0; } 20% { opacity:.8; } to { transform:translate(-50px,330px) rotate(15deg); opacity:0; } }
@keyframes snowfall { from { transform:translate(-15px,-30px); opacity:0; } 25%,75% { opacity:.85; } to { transform:translate(65px,230px); opacity:0; } }
@keyframes wind-flight { from { transform:translate(-220px,45px) rotate(-20deg); opacity:0; } 20%,68% { opacity:.9; } to { transform:translate(400px,-70px) rotate(320deg); opacity:0; } }
.art .brand { color:#ffda9b; letter-spacing:.31em; text-shadow:0 1px 10px #100b17; font-family:Georgia,serif; font-size:21px; }
.art .brand span { font-size:13px; margin-right:6px; }
.art .caption { bottom:16%; color:#fff4e4; font-size:clamp(18px,3vw,34px); font-weight:500; text-shadow:0 2px 12px #100b17; }
.weather-picker { position:absolute; bottom:5%; margin:0 12px; padding:5px; background:#140f20e8; border:1px solid #d7bb7e70; border-radius:12px; display:flex; justify-content:center; flex-wrap:wrap; gap:3px; }
.weather-picker button { color:#f5ebdd; border:1px solid transparent; border-radius:7px; background:none; padding:5px 8px; cursor:pointer; font:inherit; font-size:12px; }
.weather-picker button:hover { border-color:#e8c77b; }
.weather-picker button[aria-pressed="true"] { color:#f8dba4; background:#e8c77b29; border-color:#e8c77b65; }
@media(max-width:720px) {
  .art { min-height:330px; }
  .art .caption { display:block; bottom:22%; }
  .weather-picker { bottom:12px; }
}

.weather-room {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(180deg,#19122328 0%,transparent 58%,#130d1a80 100%),
    #191223 url('orbita-room.webp') center / 100% 100% no-repeat;
}
.table-reflection {
  position:absolute;
  left:50%;
  top:68%;
  width:min(84%,570px);
  height:14%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,var(--glow),transparent 68%);
  mix-blend-mode:screen;
  filter:blur(16px);
  opacity:.42;
  transition:background .4s, opacity .4s;
}
.crystal {
  position:absolute;
  left:50%;
  bottom:28%;
  width:min(67%,380px,49vh);
  aspect-ratio:1;
  transform:translateX(-50%);
  overflow:hidden;
  border-radius:50%;
  background:#2a2034;
  box-shadow:0 18px 34px #0a050dcc, 0 0 38px -13px var(--glow),
    0 0 0 1px #f0d9ff73;
}
.crystal-glass, .crystal-mist { position:absolute; inset:0; border-radius:50%; }
.crystal-glass {
  background:
    radial-gradient(ellipse 23% 10% at 26% 19%,#fff9edbb 0%,#fdf1e451 45%,transparent 77%),
    radial-gradient(ellipse 14% 6% at 33% 12%,#fff8ea68,transparent 80%),
    radial-gradient(ellipse 58% 16% at 58% 96%,#ffcfac69,transparent 78%),
    radial-gradient(ellipse at 48% 45%,transparent 61%,#e5d5fa35 73%,#100918c7 91%);
  box-shadow:inset 2px 3px 7px #fff2ea95,inset -11px -13px 25px #0d061bc7,
    inset 8px 0 18px #fae9ff35,inset -3px -4px 10px #e0c7ff66;
}
.crystal-mist {
  opacity:0;
  background:radial-gradient(ellipse at 42% 47%,#dfd0eadc,#655470bd 57%,transparent 80%);
  filter:blur(12px);
}
.art .caption { bottom:12%; width:min(88%,510px); font-size:clamp(16px,1.9vw,25px); line-height:1.4; }
@media(max-width:720px) {
  .weather-room { background-size:100% 100%, cover; background-position:center, center 67%; }
  .crystal { width:min(51%,200px); bottom:27%; }
  .art .caption { bottom:13%; }
}

.art .brand {
  left:50%;
  top:clamp(30px,8vh,82px);
  transform:translateX(-50%);
  line-height:0;
  filter:drop-shadow(0 2px 5px #0c060d) drop-shadow(0 0 8px #efaf4340);
}
:is(.art .brand,.menu-logo) .brand-orbit {
  transform-box:fill-box;
  transform-origin:center;
  animation:orbit-letter 3.8s ease-in-out infinite;
}
@keyframes orbit-letter {
  0%,100% { transform:translateY(0) rotate(-5deg); filter:saturate(1.25) brightness(1.06); }
  50% { transform:translateY(-7%) rotate(7deg); filter:saturate(1.37) brightness(1.35); }
}
@media(prefers-reduced-motion:reduce) {
  :is(.art .brand,.menu-logo) .brand-orbit { animation:none; }
}
.weather-room { --orb-size:min(67%,380px,49vh); --orb-bottom:30%; }
.crystal { width:var(--orb-size); bottom:var(--orb-bottom); }
.crystal-glass {
  box-shadow:inset 0 0 0 1px #f6e7ff6b,inset 2px 3px 8px #f8eadc9c,
    inset -14px -16px 28px #0d061b8c,inset -3px -4px 10px #dac3f76e;
}
.weather-current { position:absolute; inset:-20%; pointer-events:none; }
[data-weather="rain"] .weather-current,
[data-weather="snow"] .weather-current {
  background:radial-gradient(ellipse at 48% 16%,#5f647db8,transparent 55%);
}
[data-weather="snow"] .weather-current { background:radial-gradient(ellipse at 48% 18%,#dfebf7a1,transparent 63%); }
[data-weather="sun"] .weather-current {
  inset:0;
  background:conic-gradient(from 118deg at 46% 9%,
    transparent 0deg, #ffdd986b 10deg, transparent 21deg,
    #fff2c69c 30deg, transparent 43deg, #ffc87365 54deg, transparent 65deg);
  mask-image:radial-gradient(ellipse 65% 100% at 46% 9%,black 35%,transparent 100%);
  mix-blend-mode:screen;
  transform-origin:46% 9%;
  animation:sun-rays 2.6s ease-in-out infinite alternate;
}
[data-weather="cloud"] .weather-current {
  inset:-9% -23% 14%;
  background:url('weather-cloud.webp') center top / 100% auto no-repeat;
  mask-image:linear-gradient(180deg,black 0%,black 22%,transparent 53%);
  animation:passing-cloud 5.6s ease-in-out infinite alternate;
}
[data-weather="wind"] .weather-current {
  background:radial-gradient(ellipse 38% 3% at 50% 52%,#e3eee86e,transparent 85%),
    radial-gradient(ellipse 30% 2% at 53% 64%,#e0f1e552,transparent 87%);
  transform:rotate(-14deg);
  animation:wind-current 2.3s ease-in-out infinite;
}
@keyframes sun-rays {
  from { transform:rotate(-11deg); opacity:.48; }
  to { transform:rotate(13deg); opacity:1; }
}
@keyframes passing-cloud {
  from { transform:translateX(-13%); }
  to { transform:translateX(13%); }
}
@keyframes wind-current {
  from { transform:translateX(-35%) rotate(-14deg); opacity:0; }
  40% { opacity:1; }
  to { transform:translateX(40%) rotate(-14deg); opacity:0; }
}
@media(max-width:720px) {
  .weather-room { --orb-size:min(51%,200px); --orb-bottom:30%; }
}

@media(prefers-reduced-motion:reduce) {
  .weather-scene * { animation:none !important; }
}

.room-stars {
  position:absolute;
  inset:0 0 40%;
  pointer-events:none;
  filter:drop-shadow(0 0 5px #ffbf70bd);
}
.room-star {
  position:absolute;
  top:var(--y);
  left:var(--x);
  width:var(--size);
  aspect-ratio:1;
  background:#ffe6af;
  border-radius:50%;
  box-shadow:0 0 7px 1px #f2b564af;
  opacity:.55;
  animation:room-twinkle var(--cycle) var(--phase) ease-in-out infinite alternate;
}
.room-star-flare {
  border-radius:0;
  background:#ffe3a5;
  clip-path:polygon(50% 0,60% 39%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 39%);
}
@keyframes room-twinkle {
  from { opacity:.39; transform:scale(.85); }
  to { opacity:1; transform:scale(1.34); }
}
@media(max-width:720px) {
  .room-stars { bottom:56%; }
}
@media(prefers-reduced-motion:reduce) {
  .room-star { animation:none; }
}

@media(max-width:720px) {
  .art { min-height:390px; }
  .art .brand { top:19px; }
  .art .caption { bottom:13%; }
}

.crystal-render { display:none; width:100%; height:100%; }
.crystal[data-renderer="raytrace"] .crystal-render { display:block; }
.crystal[data-renderer="raytrace"] .weather-photo { background:none; }
.crystal[data-renderer="raytrace"] .crystal-refraction,
.crystal[data-renderer="raytrace"] .crystal-glass,
.crystal[data-renderer="raytrace"] .weather-scene::after { display:none; }


/* The glass cutout includes the stand. Align the circular viewport to the glass. */
.crystal-object {
  --object-scale:129%;
  --object-left:-14.2%;
  --object-top:-.8%;
  --photo-offset:49% 2.8%;
}
.crystal-object {
  position:absolute;
  left:50%;
  bottom:calc(var(--orb-bottom) + 2%);
  width:var(--orb-size);
  aspect-ratio:1;
  transform:translateX(-50%);
}
.crystal-object-photo {
  position:absolute;
  max-width:none;
  width:var(--object-scale);
  height:auto;
  left:var(--object-left);
  top:var(--object-top);
  filter:drop-shadow(0 12px 14px #09050ec7);
}
.crystal-object .crystal {
  inset:0;
  width:100%;
  transform:none;
  background:transparent;
  box-shadow:none;
}
.crystal-object .weather-scene {
  opacity:.96;
  mask-image:radial-gradient(ellipse 50% 48% at 51% 48%,black 64%,#000c 80%,transparent 100%);
}
.crystal-object .weather-photo { filter:var(--city-light) brightness(1.13) contrast(1.06); }
.crystal-object .crystal-glass { display:none; }
.crystal-photo-reflections {
  position:absolute;
  inset:0;
  background:url('crystal-object.webp') var(--photo-offset) / var(--object-scale) auto no-repeat;
  mask-image:radial-gradient(ellipse 38% 31% at 25% 23%,#000c 12%,transparent 100%);
}
.art .brand { --orbit-edge:25%; }
.art .brand img { display:block; width:clamp(195px,28vw,350px); height:auto; }
:is(.art .brand,.menu-logo) .brand-wordmark { clip-path:inset(0 0 0 var(--orbit-edge)); }
:is(.art .brand,.menu-logo) .brand-orbit {
  position:absolute;
  inset:0;
  clip-path:inset(0 calc(100% - var(--orbit-edge)) 0 0);
  transform-box:border-box;
  transform-origin:13% 54%;
}
@media(max-width:720px) {
  .art .brand img { width:clamp(160px,45vw,215px); }
}

.art .scene-controls {
  position:absolute;
  bottom:clamp(18px,3.2vh,34px);
  width:min(calc(100% - 28px),510px);
  display:grid;
  justify-items:center;
  gap:8px;
}
.art .scene-controls .caption {
  position:static;
  width:100%;
  min-height:2.8em;
  display:grid;
  place-items:center;
  padding:0 4px;
  font-size:clamp(15px,1.65vw,22px);
  text-wrap:balance;
}
.art .scene-controls .weather-picker {
  position:static;
  width:min(100%,450px);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0;
  padding:5px;
  border-radius:15px;
  background:#17101eea;
  border-color:#e4bd7750;
  box-shadow:0 8px 22px #09050e7a;
}
.art .weather-picker button {
  display:grid;
  place-items:center;
  align-content:center;
  gap:2px;
  min-width:0;
  min-height:52px;
  padding:4px 1px;
  font-size:clamp(9px,1.05vw,12px);
}
.weather-picker button svg { width:19px; height:19px; color:#e9c888; }
.art .weather-picker button[aria-pressed="true"] { background:#6b4a3157; border-color:#e8c77b81; }
@media(max-width:720px) {
  .art { min-height:475px; }
  .art .scene-controls { bottom:12px; gap:4px; }
  .art .weather-picker button { font-size:11px; }
  .art .brand { top:21px; }
}


.constellations { position:absolute; inset:0; pointer-events:none; }
.constellation {
  position:absolute;
  overflow:visible;
  color:#ffdb99;
  filter:drop-shadow(0 0 4px #ffb85bb0);
  animation:constellation-drift 10s ease-in-out infinite alternate;
}
.constellation path { fill:none; stroke:currentColor; stroke-width:.85; stroke-opacity:.65; }
.constellation circle { fill:#fff0c7; }
.constellation-orion { width:clamp(65px,17%,135px); left:5%; top:23%; }
.constellation-cassiopeia { width:clamp(74px,21%,156px); right:4%; top:28%; animation-delay:-5s; }
@keyframes constellation-drift {
  from { transform:translate(-4px,5px) rotate(-6deg); opacity:.64; }
  to { transform:translate(8px,-7px) rotate(6deg); opacity:1; }
}
@media(max-width:720px) {
  .constellation-orion { top:19%; left:5%; }
  .constellation-cassiopeia { top:22%; right:4%; }
}
@media(prefers-reduced-motion:reduce) {
  .constellation { animation:none; }
}

.panel .panel-stars {
  z-index:-1;
  inset:0;
  opacity:.82;
}