:root {
  --ink: #f5eeee;
  --gold: #eabd6b;
  --link: #babcff;
  --card: rgba(18, 32, 20, 0.55);
  --line: rgba(234, 189, 107, 0.7);
  --tint: transparent;
}

/* forest moods, set on <body data-phase> by site.js (Raj's clock, IST) */
[data-phase="dawn"]  { --tint: linear-gradient(180deg, rgba(255, 170, 150, 0.35), rgba(60, 40, 80, 0.25)); }
[data-phase="day"]   { --tint: linear-gradient(180deg, rgba(255, 245, 210, 0.08), rgba(0, 0, 0, 0.15)); }
[data-phase="dusk"]  { --tint: linear-gradient(180deg, rgba(255, 120, 60, 0.35), rgba(70, 20, 90, 0.5)); }
[data-phase="night"] { --tint: linear-gradient(180deg, rgba(4, 8, 30, 0.82), rgba(2, 10, 20, 0.9)); --card: rgba(6, 12, 28, 0.6); }

*, *::before, *::after { box-sizing: border-box; }

::selection { background: #b3d4fc; color: #222; }

html {
  font-family: 'Work Sans', sans-serif;
  color: var(--ink);
  line-height: 1.4;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #2c542b;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

a { color: inherit; }

/* links: dotted underline; on hover a tiny bird lands on it and, for links that leave the site, an arrow hops in */
main a:not(.social) {
  position: relative;
  text-decoration: underline dotted 1.5px;
  text-underline-offset: 0.2em;
  transition: color 0.3s, text-decoration-color 0.3s;
}
main a:not(.social):hover, main a:not(.social):focus-visible {
  color: var(--gold);
  text-decoration: underline solid 2px var(--gold);
}
main a:not(.social)::before {
  content: "";
  position: absolute;
  left: 0.1em; /* bird perches at the start, the arrow hops at the end */
  bottom: 82%; /* perch on the letters, not the line box */
  width: max(14px, 0.7em);
  height: max(10px, 0.47em);
  background: #bfffcd;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 10c3 0 5-2 7-5 1-2 4-3 6-1l3-1-2 3c0 4-3 7-8 7H4l3-2c-2 0-4 0-5-1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 10c3 0 5-2 7-5 1-2 4-3 6-1l3-1-2 3c0 4-3 7-8 7H4l3-2c-2 0-4 0-5-1z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translate(-24px, -22px) rotate(25deg) scaleX(-1);
  transition: transform 0.6s cubic-bezier(.2, .8, .3, 1.3), opacity 0.25s;
  pointer-events: none;
}
main a:not(.social):hover::before, main a:not(.social):focus-visible::before { opacity: 1; transform: none; }
/* arrow floats outside the text flow: if it took up width, hovering would reflow the line,
   push a wrapped link out from under the cursor, and flicker */
main a[href^="http"]:not(.social)::after {
  content: "↗";
  position: absolute;
  left: 100%;
  top: -0.3em;
  font-size: 0.7em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
main a[href^="http"]:not(.social):hover::after, main a[href^="http"]:not(.social):focus-visible::after {
  opacity: 1;
  animation: hop 0.5s ease-out;
}
.hero a { white-space: nowrap; }
@keyframes hop { 40% { transform: translate(2px, -5px); } }

/* fixed layers: sky (image + mood tint), then birds, then content */
.sky {
  position: fixed;
  inset: 0;
  background: url('forest.jpg') center / cover;
}
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tint);
  transition: background 1.5s;
}

canvas[resize] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* birds watch the pointer via window listener, page stays clickable */
}

main { position: relative; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
}

.hero article {
  position: absolute;
  bottom: 6rem;
  left: 8rem;
  max-width: 1000px;
  font-weight: 500;
  /* remember - with no padding, the birds run into the text */
  padding: 0.5rem;
  text-shadow: 1px 1px 30px #333;
}

h1 { color: var(--gold); }

.hero h1, .hero p {
  display: inline;
  font-size: 2.6rem;
  line-height: 3.1rem;
}

.clock, .scroll-hint {
  position: absolute;
  font-size: 0.8rem;
  color: var(--ink);
  opacity: 0.75;
  text-decoration: none;
}
.clock {
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: 0;
  padding: 0.25rem;
  cursor: pointer;
  text-align: right;
}
.clock:hover, .scroll-hint:hover { opacity: 1; }
.scroll-hint {
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* ---------- sections ---------- */
.trail, .notes {
  max-width: 980px;
  margin: 0 auto;
  padding: 6rem 1.5rem;
}

.section-label {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--gold);
  margin: 0 0 3rem;
  text-align: center;
}

.card {
  background: var(--card);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  transition: background 1.5s;
}
.card h3 { margin: 0; font-size: 1.5rem; color: var(--gold); }
.card p { margin: 0.4rem 0 0; }
.when, .role { font-size: 0.85rem; opacity: 0.8; }
.when { margin: 0 0 0.3rem !important; }

details { margin-top: 0.75rem; }
summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--link);
  width: max-content;
}
details ul { padding-left: 1.1rem; margin: 0.6rem 0 0; }
details li { margin: 0.35rem 0; font-size: 0.95rem; }

/* ---------- the trail ---------- */
.trail { position: relative; }
.trail ol { list-style: none; margin: 0; padding: 0; }

.trail-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.trail-path path { fill: none; stroke-width: 2; stroke-linecap: round; }
#trail-base { stroke: rgba(255, 255, 255, 0.25); stroke-dasharray: 6 10; }
/* gold line "walks" the trail as you scroll: pathLength=1, offset set by site.js */
#trail-line { stroke: var(--line); stroke-dasharray: 1; stroke-dashoffset: 1; }

.stop {
  position: relative;
  display: flex;
  margin-bottom: 5rem;
}
.stop:nth-child(odd) { justify-content: flex-start; }
.stop:nth-child(even) { justify-content: flex-end; }
.stop .card { width: calc(50% - 3rem); }

.marker {
  position: absolute;
  left: 50%;
  top: 1.5rem;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #1a2a1a;
  border: 2px solid var(--gold);
  transition: background 0.6s, box-shadow 0.6s;
}
.stop.seen .marker {
  background: var(--gold);
  box-shadow: 0 0 18px var(--gold);
}

/* a tiny bird lands on each marker as you reach it */
.perch {
  position: absolute;
  width: 24px;
  left: -6px;
  bottom: 10px;
  fill: #bfffcd;
  opacity: 0;
  transform: translate(40px, -60px) rotate(-30deg);
  transition: transform 1s cubic-bezier(.2, .8, .3, 1.2), opacity 0.4s;
}
.stop.seen .perch { opacity: 1; transform: none; }
[data-phase="night"] .stop.seen .perch { fill: #8aa; }

/* ---------- notes ---------- */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.note { opacity: 0.85; }
.note h3 { font-size: 1.15rem; margin-top: 0.6rem; }
.sprout { font-size: 0.75rem; opacity: 0.8; }

/* ---------- footer ---------- */
footer {
  max-width: 980px;
  margin: 0 auto;
  padding: 4rem 1.5rem 8rem;
  text-align: center;
}
.say-hi { font-size: 2rem; font-weight: 500; margin: 0; }
.say-hi a { color: var(--gold); }
.socials { display: flex; justify-content: center; gap: 0.9rem; margin: 1.5rem 0 1rem; }
.social {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  transition: transform 0.25s, color 0.25s, border-color 0.25s;
}
.social svg { width: 20px; height: 20px; fill: currentColor; }
.social:hover, .social:focus-visible { color: var(--gold); border-color: var(--gold); transform: translateY(-3px); }

/* ---------- fireflies (dusk + night) ---------- */
.fireflies { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 2s; }
[data-phase="night"] .fireflies { opacity: 1; }
[data-phase="dusk"] .fireflies { opacity: 0.4; }
.fireflies i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f6ff9e;
  box-shadow: 0 0 10px 3px rgba(246, 255, 158, 0.6);
  animation: drift var(--d) ease-in-out infinite alternate, glow 3s ease-in-out infinite alternate;
  animation-delay: var(--delay);
}
@keyframes drift { to { transform: translate(var(--x), var(--y)); } }
@keyframes glow { 0%, 60% { opacity: 0.1; } 100% { opacity: 1; } }

/* ---------- floating controls ---------- */
.sound {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  background: var(--card);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  font-size: 0.75rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.3s, border-color 0.3s, opacity 0.3s;
}
.sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound .spk { fill: currentColor; }
/* off: muted speaker, greyed out, dashed edge */
.sound[aria-pressed="false"] { color: #9aa39a; opacity: 0.7; border-style: dashed; }
.sound[aria-pressed="false"] .on { display: none; }
.sound[aria-pressed="false"]:hover { opacity: 1; color: var(--ink); }
/* on: gold speaker with sound waves that pulse */
.sound[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.sound[aria-pressed="true"] .off { display: none; }
.sound[aria-pressed="true"] .on { animation: waves 1.6s ease-in-out infinite; }
@keyframes waves { 50% { opacity: 0.35; } }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 2;
  transform: translate(-50%, 200%);
  background: var(--card);
  backdrop-filter: blur(6px);
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font-size: 0.8rem;
  transition: transform 0.4s;
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media only screen and (min-width: 55em) and (max-width: 70em) {
  .hero article { max-width: 820px; left: 4rem; }
  .hero h1, .hero p { font-size: 2.1rem; line-height: 2.6rem; }
}

@media only screen and (max-width: 55em) {
  .hero article {
    left: 1.5rem;
    right: 1.5rem;
    top: 5rem;
    bottom: auto; /* allow birds to fly under */
    max-width: 420px;
  }
  .hero h1, .hero p { font-size: 1.6rem; line-height: 2rem; }
  .clock { left: 1.5rem; right: 1.5rem; text-align: left; }

  /* trail runs down the left edge on phones */
  .stop:nth-child(odd), .stop:nth-child(even) { justify-content: flex-end; }
  .stop .card { width: calc(100% - 2.5rem); }
  .marker { left: 0.6rem; }
  .say-hi { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint, .fireflies i { animation: none; }
  .perch, main a::before { transition: none; }
  main a::after { animation: none !important; }
}