/* Small composited effects; the large background image never moves. */
/* Reserve the same scrollbar space on both pages and when the viewer opens. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
.cursor-aura {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #c3efd51a, #a1d9df08 42%, transparent 70%);
  opacity: 0;
  transition: opacity .35s;
  contain: strict;
}
.cursor-aura.is-visible { opacity: 1; }
.scene { perspective: 1200px; }
.site-header { height: 0; padding: 0; margin: 0; }
.navigation {
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid #d8ece323;
  border-radius: 999px;
  background: #081218ed;
  font-size: .75rem;
  line-height: 1.25;
  letter-spacing: .02em;
}
.navigation a { padding: 10px 16px; border-radius: inherit; color: #c1d0cb; text-decoration: none; }
.navigation a[aria-current] { background: #d9ede51b; color: #f5faf6; }
.archive-main { padding-top: 128px; }
.greeting { transform-style: preserve-3d; transition: transform .3s ease-out; }
.greeting .intro { animation: intro-arrive .9s both .12s; }
.greeting .name { animation: name-arrive 1.15s cubic-bezier(.16,1,.3,1) both .2s; }
.greeting .name::after { transition: width .5s, left .5s, opacity .5s; }
.greeting:hover .name::after { width: 50%; left: 25%; opacity: 1; }
.navigation a, header nav a {
  position: relative;
  transition: transform .25s ease-out, background .2s, color .2s;
}
.navigation a::after, header nav a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 27%;
  width: 46%;
  height: 1px;
  background: #c6e7b9;
  transform: scaleX(0);
  transition: transform .25s ease-out;
}
.navigation a:hover::after, header nav a:hover::after,
.navigation a:focus-visible::after, header nav a:focus-visible::after { transform: scaleX(1); }
.fireflies { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.fireflies i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d5efaf;
  box-shadow: 0 0 9px 2px #b6eac749;
  opacity: 0;
  animation: firefly-drift 7s ease-in-out infinite;
  animation-delay: var(--delay);
}
.motion-hint {
  position: absolute;
  right: 26px;
  bottom: 104px;
  margin: 0;
  color: #b9cec593;
  font-size: .65rem;
  letter-spacing: .12em;
  pointer-events: none;
  animation: intro-arrive 1s both 1s;
}
.motion-toggle { z-index: 10; }
.ai-notice {
  position: fixed;
  z-index: 12;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  max-width: calc(100vw - 88px);
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid #d4e8dd35;
  border-radius: 8px;
  background: #071116f5;
  color: #d8e9df;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .01em;
  pointer-events: none;
}
.ai-notice strong { color: #f4fff6; font-size: 13px; font-weight: 600; }
.ai-credit { margin-top: 2px; font-size: 10px; color: #bdd0c5; }
.ai-art-label { display: block; margin-top: 7px; color: #c8e7d2; font-size: 12px; line-height: 1.5; }
.viewer-ai-label { flex-shrink: 0; margin: 0; padding: 9px 18px 0; color: #d8e9df; font-size: 12px; line-height: 1.5; }
.motion-toggle:hover { transform: scale(1.08); }
.gallery-motion {
  position: fixed;
  bottom: 18px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #d8ece32b;
  border-radius: 50%;
  color: #d5e9dd;
  background: #081218ee;
  cursor: pointer;
}
.gallery-motion svg { width: 14px; height: 14px; }
.gallery-motion .play-icon { display: none; }
[data-motion="paused"] .gallery-motion .pause-icon { display: none; }
[data-motion="paused"] .gallery-motion .play-icon { display: block; }
.gallery-motion:focus-visible { outline: 2px solid #e5fbe9; outline-offset: 5px; }
.artwork { transition: transform .3s ease-out, border-color .2s, box-shadow .3s; }
.artwork img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, #f4ffe922 48%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .85s ease;
}
.artwork:hover, .artwork:focus-visible { border-color: #cce4b9a6; box-shadow: 0 18px 35px #0004; }
.artwork:hover img { transform: scale(1.025); }
.artwork:hover::after { transform: translateX(130%); }
.gallery figure { animation: card-arrive .65s both; }
.gallery figure:nth-child(even) { animation-delay: .1s; }
.art-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: -20px 0 28px; }
.art-filters button {
  border: 1px solid #d8ece325;
  border-radius: 999px;
  padding: 9px 16px;
  background: #102021;
  color: #b7cbc1;
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.art-filters button:hover { transform: translateY(-2px); color: #fff; }
.art-filters button[aria-pressed="true"] { background: #cee8cd; color: #102021; }
.art-filters button:focus-visible { outline: 2px solid #e5fbe9; outline-offset: 4px; }
dialog[open] { animation: viewer-arrive .28s cubic-bezier(.2,.8,.2,1); }
dialog[open]::backdrop { animation: backdrop-arrive .25s ease-out; }
.viewer-button { transition: background .2s, transform .2s; }
.viewer-button:hover { transform: scale(1.1); }
.star-burst { position: fixed; z-index: 9; width: 1px; height: 1px; pointer-events: none; }
.star-burst i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e5f7cd;
  box-shadow: 0 0 8px #c9edbd;
  animation: star-scatter .8s ease-out forwards;
}
.star-burst::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: -12px;
  top: -12px;
  border: 1px solid #dcefcf99;
  border-radius: 50%;
  animation: ring-expand .7s ease-out forwards;
}
@keyframes intro-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes name-arrive { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes card-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes viewer-arrive { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes firefly-drift { 0%, 100% { opacity: 0; transform: translate3d(0,18px,0); } 40% { opacity: .65; } 80% { opacity: 0; transform: translate3d(18px,-65px,0); } }
@keyframes star-scatter { from { opacity: .9; transform: translate3d(0,0,0) scale(1.2); } to { opacity: 0; transform: translate3d(var(--dx),var(--dy),0) scale(.1); } }
@keyframes ring-expand { from { opacity: .6; transform: scale(.2); } to { opacity: 0; transform: scale(3.5); } }
[hidden] { display: none !important; }
[data-motion="paused"] *, [data-motion="paused"] *::before, [data-motion="paused"] *::after { animation: none !important; transition: none !important; }
[data-motion="paused"] .cursor-aura, [data-motion="paused"] .fireflies, [data-motion="paused"] .motion-hint, [data-motion="paused"] .star-burst { display: none; }
[data-motion="paused"] .artwork, [data-motion="paused"] .artwork img,
[data-motion="paused"] .motion-toggle:hover, [data-motion="paused"] .art-filters button:hover, [data-motion="paused"] .viewer-button:hover { transform: none !important; }
[data-motion="paused"] .artwork::after { display: none; }
[data-visible="false"] *, [data-visible="false"] *::before, [data-visible="false"] *::after { animation-play-state: paused !important; }
@media (hover: none), (pointer: coarse) {
  .cursor-aura, .motion-hint { display: none; }
  .fireflies i:nth-child(n+4) { display: none; }
  .artwork:hover img, .artwork:hover { transform: none; }
  .artwork::after { display: none; }
}
@media (max-width: 600px) {
  .motion-hint { display: none; }
  .navigation { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); font-size: .7rem; }
  .navigation a { padding: 9px 13px; }
  .archive-main { padding-top: 108px; }
  .ai-notice { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cursor-aura, .fireflies, .motion-hint, .star-burst, .motion-toggle, .artwork::after { display: none !important; }
  .greeting, .artwork, .artwork img, .navigation a, header nav a { transform: none !important; }
}
@media (forced-colors: active) { .cursor-aura, .fireflies, .star-burst { display: none; } }

/* Keep the greeting clear of the persistent artwork disclosure on narrow screens. */
@media (max-width: 900px) {
  .scene { padding-bottom: max(116px, env(safe-area-inset-bottom)); }
  .archive-main { padding-bottom: 120px; }
  .motion-hint { display: none; }
}