@import url('https://fonts.googleapis.com/css2?family=Lekton:ital,wght@0,400;0,700;1,400&family=Monsieur+La+Doulaise&family=Mrs+Saint+Delafield&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

@font-face {
  font-family: "Director";
  src: url("Director-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

    .cursor-glow {
      position: fixed;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(6, 182, 212, 0) 70%);
      pointer-events: none;
      z-index: -1;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes glowPulse {
      0% {
        opacity: 0.7;
        text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
      }
      50% {
        opacity: 1;
        text-shadow: 0 0 25px rgba(59, 130, 246, 0.6), 0 0 50px rgba(6, 182, 212, 0.4);
      }
      100% {
        opacity: 0.7;
        text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
      }
    }
body {
  font-size: .6vw;
  background: #fffafc;
}

.inline-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  border: none;
  font-size: .6em;
  cursor: pointer;
  padding-right: 10px;
  /* emoji-safe font stack */
  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    system-ui,
    sans-serif;
  /* custom black arrow */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 L5 6 L10 0' fill='black'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 8px 4px;
}

.orchard-wrapper {
  display: flex;
  flex-direction: column; /* stack header + container vertically */
  align-items: center;    /* horizontal centering */
  justify-content: center; /* vertical centering */
  min-height: 100vh;      /* fill viewport vertically */
  margin: 0 auto;         /* center horizontally */
  text-align: center;
  margin-left: 10vw;
  margin-right: 10vw;
}

.orchard-header {
  font-family: 'Monsieur La Doulaise', cursive;
  font-size: 5em;          /* adjust size as needed */
  margin-bottom: 20px;     /* space between header and container */
  line-height: .8;
  font-weight: 400;
}

.container {
  border: 1px solid #000000;
  border-radius: 100px;
  position: relative;
}

.tree {
  display: flex;           /* turn container into flex */
  justify-content: center; /* center horizontally */
  width: 100%;
  transform-origin: top center;
}

.tree pre {
  line-height: 1.2;        /* critical */
  font-size: 1em;          /* never change */
  white-space: pre;        /* preserve exactly */
}

.fruit-info {
  position: relative;
  left: 90px;
  top: 70px;
  font-family: 'Director', serif;
  font-size: 1.2em;
  text-align: left;
  font-weight: 400;
  z-index: 10;
  pointer-events: none;
  color: #464646;
}


.back-button {
  position: fixed;
  top: 20px;
  left: 20px;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'Source Serif 4', serif;
  font-size: 24px;
  line-height: 1;

  color: #000;
  text-decoration: none;

  border: 1px solid transparent;
  border-radius: 50%;
  animation: fadeIn 0.6s ease forwards;
  opacity: 1;

  transition:
    border-color 0.25s ease,
    opacity 0.25s ease;
	transform 0.25s ease;
  
  z-index: 1000;
}

.back-button:hover {
  border-color: #000;
  opacity: 0.6;
  transform: scale(1.05);
}



@media (max-width: 1200px) {
  .tree {
    transform: scale(0.9);
  }
}

@media (max-width: 900px) {
  .tree {
    transform: scale(0.8);
  }
}

@media (max-width: 700px) {
  .tree {
    transform: scale(0.7);
  }
}