/* Adapted from the approved site-proposal-2026-11-10/r8.css: preserve the approved composition and interaction. Production routes, accessibility and language changes stay here. */

.garden8 { position: relative; width: 100%; height: clamp(520px, 80vh, 940px); margin: var(--space-7) 0 0; overflow: hidden;
  background: color-mix(in srgb, var(--rikyu-shiro) 70%, var(--rikyu-stone)); }
.garden8 picture, .garden8 picture img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.garden8 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; opacity: 0;
  transition: opacity 700ms var(--ease); touch-action: pan-y; }
.garden8[data-state="gl"] canvas { opacity: 1; }
.garden8::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 85% 90% at 50% 55%, transparent 60%, color-mix(in srgb, var(--rikyu-kuro) 28%, transparent) 100%); }
.g-keys { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.g-keys button { position: absolute; padding: 0; border: 0; background: transparent; border-radius: var(--radius-md, 6px); pointer-events: none; }
.g-keys button:focus-visible { outline: var(--focus-w, 2px) solid var(--rikyu-kuro); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--rikyu-shiro); border-radius: 50%; }   
.g-under { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); }
.g-hint { margin: 0; visibility: hidden; font-size: var(--t-small-size); letter-spacing: .04em; color: var(--rikyu-shiro); }
.band-dark:has([data-garden][data-state="gl"]) .g-hint { visibility: visible; }
.g-credit { margin: 0; font-size: var(--t-small-size); color: color-mix(in srgb, var(--rikyu-shiro) 70%, var(--rikyu-kuro)); }
@media (max-width: 759px) { .garden8 { height: clamp(440px, 74svh, 680px); margin-top: var(--space-6); } }
@media (prefers-reduced-motion: reduce) { .garden8 canvas { transition: none; } }