/* ==========================================================================
   Components
   ========================================================================== */

/* Masthead ---------------------------------------------------------------- */

.masthead {
  padding: clamp(3.5rem, 11vh, 7rem) var(--gutter) 0;
  margin-bottom: clamp(3rem, 10vh, 6rem);
  text-align: center;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 480;
  font-variation-settings: "SOFT" 100, "opsz" 96;
  /* stay on one line and shrink to fit narrow screens */
  font-size: min(clamp(2.1rem, 1.5rem + 3.2vw, 3.6rem), (100vw - 2 * var(--gutter)) / 8.6);
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--pine-dark);
}

.wordmark__word {
  position: relative;
  display: inline-block;
}

.bird {
  position: absolute;
  left: 0.03em;
  top: -0.56em;
  width: 0.78em;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 100%;
}

.bird svg {
  width: 100%;
  overflow: visible;
  /* facing direction (robin.js sets --face to 1 or -1); hop is done on the svg so the speech bubble stays put */
  scale: var(--face, 1) 1;
  transition: scale 0.2s ease;
}

/* Invisible marker on the wordmark: where the robin's home perch is */
.bird-home {
  position: absolute;
  left: 0.03em;
  top: -0.56em;
  width: 0.78em;
  aspect-ratio: 42 / 36;
  visibility: hidden;
  pointer-events: none;
}

/* Once robin.js frees the robin it flies around the whole page */
.bird.is-free {
  z-index: 6;
}

.bird__body,
.bird__wing,
.bird__beak-lo,
.bird__tail,
.bird__eye {
  transform-box: fill-box;
}

.bird__body {
  transform-origin: 50% 85%;
  transition: rotate 0.3s ease;
}

.bird__wing {
  transform-origin: 10% 60%;
}

.bird__beak-lo {
  transform-origin: 0 0;
}

.bird__tail {
  transform-origin: 100% 100%;
}

.bird__eye {
  transform-origin: 50% 50%;
}

.bird__legs {
  transition: opacity 0.2s ease;
}

.bird.is-flying .bird__legs {
  opacity: 0;
}

.bird.is-flying .bird__body {
  rotate: -12deg;
}

.pinecone {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* iMessage-style bubble: blue, rounded, tail at the bottom corner nearest the robin */
.bird__say {
  --bubble: #0a84ff;
  position: absolute;
  bottom: calc(100% + 6px);
  left: calc(50% - 10px);
  width: max-content;
  max-width: 13rem;
  padding: 0.5rem 0.85rem 0.55rem;
  border-radius: 1.15rem;
  border-bottom-left-radius: 0.25rem; /* tail side: square-ish so the tail joins flush */
  background: var(--bubble);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: left;
  color: #fff;
  opacity: 0;
  scale: 0.6;
  transform-origin: 0 100%;
  transition: opacity 0.2s ease, scale 0.35s var(--ease-spring);
  pointer-events: none;
}

.bird__say::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 18'%3E%3Cpath fill='%230a84ff' d='M0 18C4 17.6 7.5 15 8.5 10.5V0H15v18H8C5 18 2.4 18.1 0 18z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Robin faces right (left-hand cards, ground, wordmark): the bubble extends to the left */
.bird.on-left .bird__say {
  border-bottom-left-radius: 1.15rem;
  border-bottom-right-radius: 0.25rem;
  left: auto;
  right: calc(50% - 10px);
  transform-origin: 100% 100%;
}

.bird.on-left .bird__say::after {
  left: auto;
  right: -8px;
  scale: -1 1;
}

.bird.is-chirp .bird__say {
  opacity: 1;
  scale: 1;
}

.bird.is-chirp svg {
  animation: hop 0.5s var(--ease-out);
}

@keyframes hop {
  30% { translate: 0 -28%; rotate: -6deg; }
  60% { translate: 0 0; }
  75% { translate: 0 -9%; }
}

@media (prefers-reduced-motion: no-preference) {
  .bird__eye {
    animation: blink 5s infinite;
  }
  .bird__tail {
    animation: flick 6.5s ease-in-out infinite;
  }
  .bird__beak-lo {
    animation: sing 7s ease-in-out infinite;
  }
  .bird.is-chirp .bird__beak-lo {
    animation: peck 0.22s ease-in-out infinite; /* talking */
  }
  .bird.is-pecking .bird__body {
    animation: forage 1.5s ease-in-out;
  }
  .bird.is-pecking .bird__beak-lo {
    animation: peck 0.25s ease-in-out 5;
  }
  .pinecone.is-poked {
    animation: poke 1.5s ease-in-out;
  }
  .bird.is-flying .bird__wing {
    animation: flap 0.16s ease-in-out infinite alternate;
  }
}

@keyframes sing {
  0%, 60%, 76%, 100% { rotate: 0deg; }
  64%, 72% { rotate: 24deg; }
  68% { rotate: 2deg; }
}

@keyframes peck {
  50% { rotate: 26deg; }
}

@keyframes forage {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  15%, 45%, 75% { rotate: 34deg; translate: 2px 2px; }
  30%, 60%, 88% { rotate: 6deg; translate: 0 0; }
}

@keyframes poke {
  0%, 100% { rotate: 0deg; }
  17%, 47%, 77% { rotate: -6deg; }
  32%, 62% { rotate: 2deg; }
}

@keyframes flap {
  from { rotate: -40deg; scale: 1.45 1.7; }
  to { rotate: 18deg; scale: 1 1; }
}

@keyframes blink {
  0%, 94%, 100% { scale: 1 1; }
  96% { scale: 1 0.1; }
}

@keyframes flick {
  0%, 88%, 100% { rotate: 0deg; }
  92% { rotate: -14deg; }
  96% { rotate: 4deg; }
}

.masthead__sub {
  margin-top: 0.6rem;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .masthead > * {
    animation: rise 1.1s var(--ease-out) both;
  }
  .masthead > :nth-child(2) {
    animation-delay: 0.18s;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

/* Forest: holds the tree, the branches and the footer it is rooted in ----- */

.forest {
  position: relative;
}

/* Tree --------------------------------------------------------------------- */

tpt-pine {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: var(--tree-w);
  translate: -50% 0;
  pointer-events: none;
}

tpt-pine svg {
  overflow: visible;
}

tpt-pine .tier {
  fill: var(--tree);
}

tpt-pine .trunk {
  fill: var(--bark);
}

tpt-pine .root {
  fill: none;
  stroke: var(--bark);
  stroke-linecap: round;
}

tpt-pine .pine-mid path {
  fill: var(--tree-mid);
}

tpt-pine .pine-light path {
  fill: var(--tree-light);
}

tpt-pine .companion .trunk {
  fill: var(--bark-soft);
}

/* Growth: tiers unfold downward from where they join the trunk */
tpt-pine .tier,
tpt-pine .trunk.grow {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

tpt-pine .tier {
  scale: 0.35 0;
  opacity: 0;
  transition: scale 0.5s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.3s ease 0.2s;
}

tpt-pine .tier.is-grown {
  transition: scale 1s var(--ease-spring), opacity 0.35s ease;
}

tpt-pine .trunk.grow {
  scale: 1 0;
  transition: scale 1.1s var(--ease-out);
}

tpt-pine .root {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* round caps would leave dots behind when retracted, so fade out too */
  opacity: 0;
  transition: stroke-dashoffset 0.8s ease-in, opacity 0.1s linear 0.8s;
}

tpt-pine .root.is-grown {
  transition: stroke-dashoffset 1.8s var(--ease-out), opacity 0.1s linear;
}

tpt-pine .companion {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  scale: 0.6 0;
  opacity: 0;
  transition: scale 0.5s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.3s ease 0.2s;
}

tpt-pine .companion.is-grown {
  transition: scale 1.1s var(--ease-spring), opacity 0.4s ease;
}

tpt-pine .grow.is-grown {
  scale: 1 1;
  opacity: 1;
  stroke-dashoffset: 0;
}

tpt-pine .no-anim {
  transition: none !important;
}

/* The young top keeps gently swaying */
tpt-pine .tier.sways.is-grown {
  animation: sway var(--sway-d) ease-in-out var(--sway-delay) infinite alternate;
}

@keyframes sway {
  from {
    rotate: calc(var(--sway) * -1);
  }
  to {
    rotate: var(--sway);
  }
}

.no-js tpt-pine {
  display: none;
}

/* Branches (projects) ------------------------------------------------------ */

tpt-branches {
  display: block;
}

tpt-branches .branches {
  padding: clamp(2rem, 6vh, 4rem) 0 clamp(12rem, 40vh, 22rem);
}

.branch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--tree-w) 1fr;
  column-gap: var(--branch-gap);
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.branch + .branch {
  margin-top: clamp(6rem, 22vh, 13rem);
}

/* Hand-drawn twig from the trunk out to the card, ending in a needle sprig. Sits under the tree. */
.branch__twig {
  position: absolute;
  top: 19px; /* middle of the 52px icon, less half the twig's height */
  z-index: 0;
  height: 14px;
  scale: 0 1;
  transition: scale 0.45s ease-in 0.15s;
}

.branch__twig svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.branch__twig path {
  fill: none;
  stroke: var(--bark-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.55;
}

.branch__twig::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236c8a6a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 10 14 3M2 10h14M2 10l12 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.branch--left .branch__twig {
  left: calc(50% - var(--tree-w) / 2 - var(--branch-gap) + 0.5rem);
  right: 50%;
  transform-origin: 100% 50%;
}

.branch--left .branch__twig::after {
  left: -9px;
  scale: -1 1;
}

.branch--right .branch__twig {
  left: 50%;
  right: calc(50% - var(--tree-w) / 2 - var(--branch-gap) + 0.5rem);
  transform-origin: 0 50%;
}

.branch--right .branch__twig::after {
  right: -9px;
}

.leaf--intro {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.3;
  color: var(--ink-soft);
}

.leaf {
  --from: 2.5rem;
  position: relative;
  z-index: 2;
  max-width: 23rem;
  opacity: 0;
  translate: var(--from) 0;
  transition: opacity 0.4s ease, translate 0.5s ease-in;
}

.branch--left .leaf {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}

.branch--right .leaf {
  --from: -2.5rem;
  grid-column: 3;
  justify-self: start;
}

.branch.is-in .branch__twig {
  scale: 1 1;
  transition: scale 0.9s var(--ease-out);
}

.branch.is-in .leaf {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.9s var(--ease-out) 0.15s, translate 1s var(--ease-out) 0.15s;
}

.leaf__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.branch--left .leaf__head {
  flex-direction: row-reverse;
}

.leaf__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(38, 51, 43, 0.12), 0 6px 16px -8px rgba(38, 51, 43, 0.35);
}

.leaf__icon {
  transition: rotate 0.4s var(--ease-spring);
}

.leaf__icon:hover {
  animation: wiggle 0.6s ease-in-out;
}

@keyframes wiggle {
  25% { rotate: -7deg; }
  60% { rotate: 5deg; }
}

.leaf__icon > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaf__title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.leaf__meta {
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.badge {
  display: inline-block;
  margin-left: 0.2rem;
  padding: 0 0.6em 0.05em;
  border: 1px solid var(--pine-light);
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--pine-dark);
  vertical-align: 0.1em;
}

.badge--soon {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #8f3f2b;
}

.badge--live::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: var(--tree-mid);
  animation: ping 2.4s ease-out infinite;
}

@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(111, 160, 103, 0.6); }
  70%, 100% { box-shadow: 0 0 0 0.5em rgba(111, 160, 103, 0); }
}

.leaf__tagline {
  margin-top: 0.85rem;
  color: var(--ink-soft);
}

.leaf__platforms {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.leaf__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-top: 0.9rem;
}

.branch--left .leaf__links {
  justify-content: flex-end;
}

.leaf__links a {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pine-dark);
  text-decoration-color: var(--pine-light);
  transition: color 0.2s, text-decoration-color 0.2s;
}

.leaf__links a:hover {
  color: var(--pine-mid);
  text-decoration-color: currentColor;
}

.leaf__links span {
  display: inline-block;
  margin-left: 0.15em;
  font-weight: 400;
  transition: translate 0.25s var(--ease-out);
}

.leaf__links a:hover span {
  translate: 2px -2px;
}

/* Footer: the tree is rooted here ----------------------------------------- */

.site-footer {
  position: relative;
  padding-bottom: 2.5rem;
  text-align: center;
}

.ground {
  display: block;
  width: min(100% - 2 * var(--gutter), var(--container));
  height: 14px;
  margin-inline: auto;
  color: var(--line);
}

.ground-life {
  position: absolute;
  top: -36px;
  left: 50%;
  z-index: 1;
  width: min(100% - 2 * var(--gutter), var(--container));
  height: 40px;
  translate: -50% 0;
  pointer-events: none;
}

.ground-life svg {
  position: absolute;
  bottom: 0;
  width: 108px;
  height: 40px;
  overflow: visible;
}

.ground-life__l {
  left: 12%;
}

.ground-life__r {
  right: 10%;
}

.footer__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding-top: clamp(9rem, 20vh, 12rem);
}

.footer__logo {
  width: 44px;
  height: 44px;
  margin-bottom: 0.4rem;
}

.footer__hello {
  font-family: var(--font-display);
  font-weight: 560;
  font-variation-settings: "SOFT" 100, "opsz" 72;
  font-size: clamp(2.2rem, 1.7rem + 2vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--pine-dark);
}

.footer__hello::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 10px;
  margin: -0.1em auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 10' fill='none' stroke='%23c9674f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6c8-6 14 4 22-1s14 4 22-1 14 4 22-1 12 2 16-1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.footer__email {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration-color: var(--pine-light);
  overflow-wrap: anywhere;
}

.footer__email:hover {
  color: var(--pine-mid);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.4rem;
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.footer__links a {
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--pine-dark);
  text-decoration: underline;
}

.footer__fine {
  margin-top: 1.6rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.footer__fine a {
  text-decoration: none;
}

.footer__fine a:hover {
  color: var(--ink-soft);
}

/* Phones: tree moves to the left edge, branches all grow to the right ----- */

@media (max-width: 720px) {
  tpt-pine {
    left: calc(var(--gutter) + var(--tree-w) / 2);
  }

  .branch {
    grid-template-columns: var(--tree-w) 1fr;
  }

  .branch .leaf,
  .branch--left .leaf {
    --from: -1.5rem;
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .branch--left .leaf__head {
    flex-direction: row;
  }

  .branch--left .leaf__links {
    justify-content: flex-start;
  }

  .branch .branch__twig,
  .branch--left .branch__twig {
    top: 15px;
    left: calc(var(--tree-w) / 2);
    right: auto;
    width: calc(var(--tree-w) / 2 + var(--branch-gap) - 0.4rem);
    transform-origin: 0 50%;
  }

  .branch--left .branch__twig::after {
    left: auto;
    right: -9px;
    scale: 1 1;
  }

  .leaf__title {
    font-size: 1.25rem;
  }

  .leaf__icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }

  .leaf__head {
    gap: 0.7rem;
  }
}

/* Simple page (privacy) ---------------------------------------------------- */

.page {
  max-width: 64ch;
  margin-inline: auto;
  padding: clamp(3rem, 8vh, 5rem) var(--gutter) 4rem;
}

.page > * + * {
  margin-top: 1em;
}

.page h1 {
  font-family: var(--font-display);
  font-weight: 560;
  font-variation-settings: "SOFT" 100, "opsz" 72;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  color: var(--pine-dark);
}

.page h2 {
  margin-top: 2em;
  font-size: 1.2rem;
  font-weight: 800;
}

.page ul {
  padding-left: 1.2em;
}

.page a {
  color: var(--pine-dark);
  text-decoration-color: var(--pine-light);
}

.page .back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}