/* Live projects: a tree under a sky that changes with each project. */
@keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.95; } }
@keyframes mist { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

.hero { position: relative; overflow: hidden; }
.sky { position: absolute; inset: 0; transition: opacity 2s ease; }
.stars { position: absolute; inset: 0; width: 100%; height: 70%; }
.t1 { animation: twinkle 5s ease-in-out infinite; }
.t2 { animation: twinkle 8s ease-in-out infinite 1.5s; }
.t3 { animation: twinkle 11s ease-in-out infinite 3s; }
.mist { position: absolute; left: -10%; right: -10%; bottom: 6%; height: 34%; background: radial-gradient(50% 50% at 30% 60%, rgba(255, 255, 255, 0.13), transparent 100%), radial-gradient(45% 45% at 75% 45%, rgba(255, 255, 255, 0.1), transparent 100%); animation: mist 28s ease-in-out infinite alternate; }

.title { position: relative; padding: clamp(4rem, 6vw, 5.5rem) var(--gutter) 0; text-align: center; }
.title h1 { margin: 0; color: rgba(255, 255, 255, 0.92); font: 800 clamp(2.25rem, 7vw, 8rem)/0.9 var(--display); letter-spacing: -0.035em; }
/* A quiet off grey with a hint of blue, so "kind" stands apart without shouting. */
.title h1 .kind { color: #a9b4c8; }
.title p { margin: 1rem 0 0; font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 500; }

.stage { position: relative; width: 100%; aspect-ratio: 1600 / 1000; margin-top: -3vw; }
.stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.bird { width: 7.6%; min-width: 44px; color: #03040a; }
.bird svg { fill: currentColor; transition: filter 0.8s ease; }
.bird .eye { fill: #262a3c; }
.bird:hover svg { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)); }
.bird.on svg { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 16px rgba(255, 255, 255, 0.65)); }
.bird.on .eye { fill: #fff; }
.bird.on, .bird:hover, .bird:focus-visible { z-index: 2; }

.lab { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); color: #fff; font: 700 0.9375rem/1.2 var(--body); white-space: nowrap; opacity: 0; transition: opacity 0.3s; text-shadow: 0 1px 8px #000; }
.bird:hover .lab, .bird:focus-visible .lab, .bird.on .lab { opacity: 1; }

@media (min-width: 761px) {
  .stage { width: min(100%, 108vh); margin-left: auto; margin-right: auto; }
}

@media (max-width: 760px) {
  /* Phones see the whole tree. It's a little wider than the screen, which only trims the outer twigs.
     The buttons under the tree are the touch targets, so the ravens can be smaller than 44px. */
  .stage { width: 112%; margin: -2vw 0 0 -6%; }
  .bird { width: 8.5%; min-width: 0; }
  .lab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sky, .stage, .bird svg { transition: none; }
  .t1, .t2, .t3, .mist { animation: none; }
}