/*
  Tree page common styles
  - Shared layout/animation for both kaoru/setouti trees
  - Theme values (colors/images) are provided via CSS variables
*/

body.tree-page {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  padding: 12px;
  background: var(--page-bg, #000);
  color: #fff;
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
}

/* Page transition: fade out current content to show only the body background */
body.tree-page .outer-box,
body.tree-page .bg-waves,
body.tree-page .debug {
  transition: opacity 420ms ease;
}

body.tree-page.is-fading-out .outer-box,
body.tree-page.is-fading-out .bg-waves,
body.tree-page.is-fading-out .debug {
  opacity: 0;
}

body.tree-page.is-fading-out .outer-box {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.tree-page .outer-box,
  body.tree-page .bg-waves,
  body.tree-page .debug {
    transition: none !important;
  }
}

.debug {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  color: #111;
  z-index: 20;
}

.debug form {
  display: inline;
}

.debug button {
  padding: 6px 10px;
  border: 1px solid #bbb;
  background: #f7f7f7;
  color: #111;
  cursor: pointer;
}

.debug .meta {
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}

.outer-box {
  width: min(92vw, 480px);
  position: relative;
  display: grid;
  place-items: center;
  z-index: 5;
}

.top-controls {
  position: absolute;
  top: 100px;
  right: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.icon-top-link,
.back-link {
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.icon-top,
.back-icon {
  width: clamp(44px, 14vw, 60px);
  height: auto;
  display: block;
}

/* Fallback: if the icon is not wrapped by a link */
.outer-box > .icon-top {
  position: absolute;
  top: 100px;
  right: 20px;
  z-index: 10;
}

.icon-c {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: min(240px, 60svh);
  width: auto;
  display: block;
  z-index: 10;
}

.bg-box {
  width: min(
    100%,
    320px,
    calc(
      (100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 712 / 1290
    )
  );
  margin-inline: auto;
  aspect-ratio: 712 / 1290;

  position: relative;
  overflow: visible;
  display: grid;
  place-items: center;

  background-image: var(--stage-bg-image, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.tree-box {
  width: calc(100% * 600 / 712);
  position: relative;
}

.tree-base {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: auto;
  z-index: 1;
}

.tree-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.tree-name-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 3;
  display: block;
  pointer-events: none;
}

/* Waves */
.bg-waves {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: 18svh;
  min-height: 64px;
  max-height: 140px;

  pointer-events: none;
  z-index: 0;
}

.bg-waves .waves {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.bg-waves .parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.bg-waves .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: var(--wave-1, rgba(212, 175, 55, 0.35));
}

.bg-waves .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: var(--wave-2, rgba(212, 175, 55, 0.25));
}

.bg-waves .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: var(--wave-3, rgba(212, 175, 55, 0.18));
}

.bg-waves .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: var(--wave-4, rgba(212, 175, 55, 0.45));
}

/* Sparkles (hover effect for links / image maps) */
.sparkle {
  position: fixed;
  transform: translate3d(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)), 0) scale(1) rotate(var(--rot, 0deg));
  pointer-events: none;
  z-index: 9998;
  user-select: none;

  filter: drop-shadow(0 0 14px rgba(255, 216, 77, 0.85));

  opacity: 0;
  animation: sparkle-float 900ms ease-out forwards;
}

.sparkle.is-fadeout {
  animation: none !important;
  opacity: 0 !important;
  transition: opacity 220ms ease;
}

@keyframes sparkle-float {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.65) rotate(var(--rot, 0deg)); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)), 0) scale(1.15) rotate(var(--rot, 0deg)); }
}

@keyframes move-forever {
  0% { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d(85px, 0, 0); }
}

/* Mobile tuning */
@media (max-width: 768px) {
  .bg-waves {
    height: 56px;
    min-height: 56px;
  }
}