/* CropNow, Contact: "Sow a message".
 *
 * The top is the sky over Kattigenahalli right now (contact.js sets the
 * phase and the sun's place). Below it the form is a field: each answer is a
 * furrow that sprouts as you write, and sending sows the message, which then
 * grows. Beside it, every other way in, and a pen sketch of the way there.
 */

body.page-contact {
  --soil: #6b4a32;
  --furrow: #b99c76;
  background: var(--chalk);
}

/* -- The sky: a sun dial for Kattigenahalli -------------------------------------------
 * contact.js sets --sky-top, --sky-bottom and --body continuously from where
 * the sun is, and data-phase (dawn, day, dusk, night) for the ink and moon.
 */

.c-sky {
  --sky-top: #cfe3ea;
  --sky-bottom: #f6e8c8;
  --body: #f6d27c;
  --glow: rgb(246 210 124 / .35);
  --ink-on-sky: var(--ink);
  --sub-on-sky: rgb(13 59 9 / .8);
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: max(100svh, 52.8vw + 4rem);
  overflow: hidden;
  /* The text sits low inside the arc, clear of its top. */
  padding: calc(var(--header-h) + 2vh) var(--gutter) calc(8vw + 2.5rem);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  color: var(--ink-on-sky);
  text-align: center;
}

.c-sky[data-phase="dusk"] {
  --ink-on-sky: #1c1410;
  --sub-on-sky: rgb(28 20 16 / .8);
}

.c-sky[data-phase="night"] {
  --ink-on-sky: #f8faf7;
  --sub-on-sky: rgb(248 250 247 / .8);
}

.c-sky__stars {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  background:
    radial-gradient(1.2px 1.2px at 8% 18%, #fff, transparent 60%),
    radial-gradient(1px 1px at 22% 42%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 37% 12%, #fff, transparent 60%),
    radial-gradient(1px 1px at 52% 30%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 66% 9%, #fff, transparent 60%),
    radial-gradient(1px 1px at 74% 38%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 22%, #fff, transparent 60%),
    radial-gradient(1px 1px at 94% 48%, #fff, transparent 60%),
    radial-gradient(1px 1px at 14% 58%, #fff, transparent 60%),
    radial-gradient(1px 1px at 58% 54%, #fff, transparent 60%),
    radial-gradient(1px 1px at 30% 70%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 80% 66%, #fff, transparent 60%);
  transition: opacity 1.2s var(--ease);
}

.c-sky[data-phase="night"] .c-sky__stars {
  opacity: .85;
  animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
  to { opacity: .55; }
}

.dial {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: auto;
  overflow: visible;
}

.dial__path {
  fill: none;
  stroke: var(--ink-on-sky);
  stroke-opacity: .28;
  stroke-width: 2;
  stroke-dasharray: 2 12;
  stroke-linecap: round;
}

.dial__done {
  fill: none;
  stroke: var(--body);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: .5;
  filter: drop-shadow(0 0 6px var(--glow));
}

.dial__tick {
  stroke: var(--ink-on-sky);
  stroke-opacity: .4;
  stroke-width: 2;
  stroke-linecap: round;
}

.dial__tick--major {
  stroke-opacity: .7;
  stroke-width: 3;
}

.dial__hour,
.dial__end {
  fill: var(--sub-on-sky);
  font: 600 15px var(--font-text);
  letter-spacing: .04em;
}

.dial__end {
  font-size: 16px;
  font-weight: 700;
}

.dial__hill { fill: var(--chalk); }
.dial__hill--far { fill: #c9d6b4; transition: fill 1.2s var(--ease); }
.c-sky[data-phase="night"] .dial__hill--far { fill: #3c4a3a; }
.c-sky[data-phase="dusk"] .dial__hill--far { fill: #8f9a74; }

.dial__body {
  pointer-events: all;
  cursor: grab;
  touch-action: none;
}

.dial__body.is-dragging {
  cursor: grabbing;
}

.dial__glow { fill: var(--glow); }
.dial__disc { fill: var(--body); }

.dial__ring {
  fill: none;
  stroke: var(--ink-on-sky);
  stroke-opacity: 0;
  stroke-width: 2;
  stroke-dasharray: 4 6;
  transition: stroke-opacity .3s var(--ease);
}

.dial__body:hover .dial__ring,
.c-sky.is-focused .dial__ring,
.dial__body.is-dragging .dial__ring {
  stroke-opacity: .6;
}

.c-sky[data-phase="night"] .dial__disc { fill: url(#dial-moon); }

/* The text sits under the arc, and lets the pointer through to the sun. */
.c-sky__text {
  position: relative;
  width: min(54rem, 100%);
  margin: 0 auto;
  pointer-events: none;
}

.c-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin: 0;
  color: var(--sub-on-sky);
  font: 600 .8rem/1.2 var(--font-text);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.c-hello {
  margin: .5rem 0 0;
  font-size: clamp(3.2rem, 1.4rem + 6.2vw, 7.4rem);
  font-weight: 400;
  line-height: 1.25;
}

.c-lead {
  max-width: 34rem;
  margin: .2rem auto 0;
  color: var(--sub-on-sky);
  font-size: clamp(1.02rem, .95rem + .3vw, 1.25rem);
  line-height: 1.6;
}

.c-now {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 1.3rem 0 0;
  padding: .45rem 1rem;
  border-radius: 999px;
  background: rgb(248 250 247 / .6);
  color: #0d3b09;
  font-size: .92rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.c-now::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--body);
  box-shadow: 0 0 0 3px var(--glow);
}

.c-scrub {
  display: block;
  margin-top: .7rem;
  color: var(--sub-on-sky);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .8;
}

.c-scrub[hidden] {
  display: none;
}

/* Phones: the text first, the dial below it. */
@media (max-width: 700px) {
  .c-sky {
    align-content: start;
    min-height: 0;
    padding-top: calc(var(--header-h) + 2.5rem);
    padding-bottom: calc(52.8vw + 1.5rem);
  }

  .dial__hour {
    font-size: 26px;
  }

  .dial__end {
    font-size: 30px;
  }
}

/* After dark the header sits on the night sky, so it turns light. */
body[data-sky-phase="night"] .site-header,
body[data-sky-phase="night"] .site-brand,
body[data-sky-phase="night"] .site-nav__toggle {
  color: var(--chalk);
}

/* -- Four greetings, taking turns ------------------------------------------------ */

[lang="hi"] { font-family: "Tiro Devanagari Hindi", serif; }
[lang="kn"] { font-family: "Tiro Kannada", serif; }
[lang="te"] { font-family: "Tiro Telugu", serif; }
[lang="ta"] { font-family: "Tiro Tamil", serif; }

.multi {
  display: inline-grid;
}

.multi > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  animation: lang-turn 12s var(--ease) infinite both;
  animation-delay: calc(var(--x) * 3s);
}

.multi > span:not(:first-child) {
  opacity: 0;
}

@keyframes lang-turn {
  0% { opacity: 0; transform: translateY(.14em); }
  4%, 22% { opacity: 1; transform: none; }
  26%, 100% { opacity: 0; transform: translateY(-.1em); }
}

/* -- The page below the sky -------------------------------------------------------- */

.c-body {
  display: grid;
  gap: clamp(3.5rem, 8vh, 5rem) clamp(3rem, 6vw, 6rem);
  width: min(72rem, 100vw - 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) 0 clamp(4rem, 10vh, 7rem);
}

@media (min-width: 960px) {
  .c-body {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}

.dot {
  color: var(--green);
}

/* -- Sow a message ------------------------------------------------------------------- */

.sow__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.8rem + 4vw, 5.4rem);
  font-weight: 900;
  line-height: .92;
}

.sow__reply {
  margin: .9rem 0 0;
  color: var(--green);
  font-weight: 600;
}

.sow__form {
  margin-top: 2rem;
}

.who {
  margin: 0;
  padding: 0;
  border: 0;
}

.who legend {
  margin-bottom: .8rem;
  color: rgb(13 59 9 / .7);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.who__options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.who__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.who__chip span {
  display: inline-block;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: rgb(197 209 181 / .45);
  color: var(--forest);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.who__chip span:hover {
  background: rgb(197 209 181 / .8);
}

.who__chip input:checked + span {
  background: var(--forest);
  color: var(--chalk);
}

.who__chip input:focus-visible + span {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* Answers are furrows: a dashed line of turned soil, and sprouts that come up
 * along it as the answer grows (--fill, set by contact.js). */
.furrows {
  display: grid;
  gap: 1.8rem 2rem;
  margin-top: 2.2rem;
}

@media (min-width: 640px) {
  .furrows {
    grid-template-columns: 1fr 1fr;
  }

  .furrow--wide {
    grid-column: 1 / -1;
  }
}

.furrow {
  position: relative;
  display: grid;
  gap: .3rem;
}

.furrow__label {
  color: rgb(13 59 9 / .7);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.furrow__label small {
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  opacity: .8;
}

.furrow input,
.furrow textarea {
  width: 100%;
  padding: .5rem 0 1.2rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 clamp(1.15rem, 1rem + .4vw, 1.35rem)/1.5 var(--font-text);
  outline: none;
}

.furrow textarea {
  resize: vertical;
  min-height: 8.5rem;
}

.furrow textarea::placeholder {
  color: rgb(13 59 9 / .42);
  font-size: 1rem;
  font-style: italic;
}

.furrow__soil {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.3rem;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--furrow) 0 10px, transparent 10px 15px) 0 100% / 100% 3px no-repeat;
}

.furrow:focus-within .furrow__soil {
  background-image: repeating-linear-gradient(90deg, var(--soil) 0 10px, transparent 10px 15px);
}

.furrow__soil i {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: calc(var(--fill, 0) * 100%);
  height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 18 V8' stroke='%2342923E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10 12 C6 12 3 9 2.5 6 C6.5 6 9 8.5 10 12 Z M10 9 C14 8.6 17 6 17.5 2.5 C13.5 3 10.6 5.6 10 9 Z' fill='%2342923E'/%3E%3C/svg%3E") 0 100% / 20px 18px repeat-x;
  transition: width .5s var(--ease);
}

.furrow__error {
  color: #a63d2a;
  font-size: .88rem;
  font-weight: 600;
}

.furrow--trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sow__error {
  margin: 1.6rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid #a63d2a;
  color: #7a2c1d;
  font-weight: 600;
  line-height: 1.5;
}

.sow__error a {
  color: inherit;
}

.sow__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 2.4rem;
}

.sow__button {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem 1.8rem .7rem .7rem;
  border: 0;
  border-radius: 999px;
  background: var(--forest);
  color: var(--chalk);
  font: 700 1.15rem/1 var(--font-text);
  cursor: pointer;
  transition: background-color .3s var(--ease);
}

.sow__button:hover {
  background: #0a2e07;
}

.sow__button:disabled {
  cursor: progress;
  opacity: .85;
}

/* A seed in a green circle, which drops on a hover. */
.sow__seed {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--green);
}

.sow__seed::before {
  content: "";
  width: .8rem;
  height: 1.05rem;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #e5c07b;
  rotate: -20deg;
  transition: translate .4s var(--ease);
}

.sow__button:hover .sow__seed::before {
  translate: 0 .25rem;
}

.sow__button.is-sowing .sow__seed::before {
  animation: seed-drop .7s var(--ease) infinite alternate;
}

@keyframes seed-drop {
  to { translate: 0 .45rem; }
}

.sow__note {
  margin: 0;
  color: rgb(13 59 9 / .6);
  font-size: .85rem;
}

/* -- Sown ----------------------------------------------------------------------------- */

.sow[data-state="sent"] .sow__form {
  display: none;
}

.grown {
  margin-top: 2rem;
}

.grown__plant {
  width: min(16rem, 70%);
  height: auto;
  overflow: visible;
}

.grown__soil { fill: #8a6646; }
.grown__seed { fill: #e5c07b; stroke: var(--soil); stroke-width: 1.2; }
.grown__root { fill: none; stroke: #f0dfc4; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; }
.grown__stem { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; }
.grown__leaf { fill: var(--green); transform-box: fill-box; }
.grown__leaf--1 { transform-origin: 100% 100%; }
.grown__leaf--2 { transform-origin: 0 100%; }
.grown__leaf--3 { transform-origin: 50% 100%; }

.js .grown:not([hidden]) .grown__seed { animation: seed-in .7s var(--ease) both; }
.js .grown:not([hidden]) .grown__root { stroke-dashoffset: 1; animation: draw .9s var(--ease) .6s forwards; }
.js .grown:not([hidden]) .grown__stem { stroke-dashoffset: 1; animation: draw 1.3s var(--ease) .9s forwards; }
.js .grown:not([hidden]) .grown__leaf { scale: 0; animation: open .9s var(--ease) forwards; }
.js .grown:not([hidden]) .grown__leaf--1 { animation-delay: 1.6s; }
.js .grown:not([hidden]) .grown__leaf--2 { animation-delay: 1.9s; }
.js .grown:not([hidden]) .grown__leaf--3 { animation-delay: 2.2s; }

@keyframes seed-in {
  from { translate: 0 -120px; opacity: 0; }
  60% { opacity: 1; }
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes open { to { scale: 1; } }

.grown__title {
  margin: 1.2rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem);
  font-weight: 900;
  line-height: .95;
}

.grown__text {
  max-width: 30rem;
  margin: .8rem 0 0;
  font-size: 1.08rem;
  line-height: 1.6;
}

.grown__text a {
  color: var(--forest);
  font-weight: 600;
}

.grown__again {
  display: inline-block;
  margin-top: 1.2rem;
  color: var(--green);
  font-weight: 700;
}

/* -- Every other way in ---------------------------------------------------------------- */

.ways {
  display: grid;
  gap: 1.2rem;
}

.ways__title {
  margin: 0 0 .4rem;
  color: rgb(13 59 9 / .7);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.way {
  display: grid;
  gap: .2rem;
  color: var(--ink);
  text-decoration: none;
}

.way__label {
  color: var(--green);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.way--big {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  transition: color .25s var(--ease);
}

.way--email {
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.1rem);
  overflow-wrap: anywhere;
}

.way--big:hover {
  color: var(--green);
}

.way__social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .3rem;
}

.way__social a {
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgb(197 209 181 / .45);
  color: var(--forest);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .25s var(--ease);
}

.way__social a:hover {
  background: rgb(197 209 181 / .85);
}

/* -- The way there: a pen sketch ---------------------------------------------------------- */

.visit {
  margin: 1.6rem 0 0;
}

.visit__map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.map__road {
  fill: none;
  stroke: var(--forest);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
}

.map__lane {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: .03 .02;
}

.map__lake {
  fill: rgb(78 140 160 / .25);
  stroke: rgb(78 140 160 / .6);
  stroke-width: 1.2;
}

.map__place circle,
.map__place path {
  fill: var(--chalk);
  stroke: var(--forest);
  stroke-width: 2;
}

.map__place text,
.map__road-name,
.map__scale {
  fill: rgb(13 59 9 / .75);
  font: 600 13px var(--font-text);
}

.map__scale {
  font-size: 11px;
  fill: rgb(13 59 9 / .5);
}

.map__pin path {
  fill: var(--green);
}

.map__pin-dot {
  fill: var(--chalk);
}

.map__pulse {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: pin-pulse 2.6s ease-out infinite;
}

@keyframes pin-pulse {
  from { scale: .6; opacity: .9; }
  to { scale: 2.8; opacity: 0; }
}

.map__us {
  fill: var(--green);
  font: 900 22px var(--font-display);
}

/* The road draws itself when the map comes into view. */
.js .visit:not(.is-in) .map__road {
  stroke-dashoffset: 1;
}

.js .visit .map__road {
  transition: stroke-dashoffset 2.2s var(--ease);
}

.visit figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: .8rem 2rem;
  margin-top: 1rem;
}

.visit address {
  color: rgb(13 59 9 / .85);
  font-style: normal;
  line-height: 1.6;
}

.visit figcaption a {
  color: var(--forest);
  font-weight: 700;
}

/* -- Paused motion ------------------------------------------------------------------------ */

[data-motion="paused"] .multi > span,
[data-motion="paused"] .c-sky__stars,
[data-motion="paused"] .map__pulse {
  animation: none !important;
}

[data-motion="paused"] .grown *,
[data-motion="paused"] .visit .map__road {
  animation: none !important;
  transition: none !important;
  stroke-dashoffset: 0 !important;
  scale: 1 !important;
  translate: none !important;
}

/* -- Careers: the open places on the tree ------------------------------------------------ */

.grow {
  width: min(70rem, 100vw - 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 7rem) 0 clamp(3rem, 8vh, 5rem);
}

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .grow {
    width: min(70rem, 100vw - 24rem);
  }
}

.grow__title {
  max-width: 44rem;
  margin: .8rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem);
  font-weight: 900;
  line-height: .92;
  text-wrap: balance;
}

.grow__lead {
  max-width: 36rem;
  margin: 1rem 0 0;
  color: rgb(13 59 9 / .8);
  font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem);
  line-height: 1.6;
}

.grow__inner {
  max-width: 44rem;
}

.opening__art {
  display: block;
  width: min(15rem, 70%);
  height: auto;
  margin-bottom: 1rem;
  overflow: visible;
}

.opening__branch {
  fill: none;
  stroke: #6b4a32;
  stroke-width: 7;
  stroke-linecap: round;
}

.opening__leaf {
  fill: var(--green);
}

/* The leaf still to grow: dashed, breathing. */
.opening__leaf--empty {
  fill: rgb(66 146 62 / .12);
  stroke: var(--green);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  transform-box: fill-box;
  transform-origin: 0 100%;
  animation: leaf-wait 2.8s var(--ease) infinite;
}

@keyframes leaf-wait {
  50% { scale: 1.12; fill: rgb(66 146 62 / .28); }
}

.opening__send {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.4rem;
  padding: .55rem .6rem .55rem 1.3rem;
  border-radius: 999px;
  background: var(--forest);
  color: var(--chalk);
  font: 600 1rem/1.2 var(--font-text);
  text-decoration: none;
  transition: background .3s var(--ease);
}

.opening__send span {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--green);
  transition: translate .3s var(--ease);
}

.opening__send:hover {
  background: #000;
}

.opening__send:hover span {
  translate: .2rem 0;
}

.grow__other {
  margin: 2.6rem 0 0;
  color: rgb(13 59 9 / .75);
}

.grow__other a {
  color: var(--forest);
  font-weight: 600;
}


html[data-motion="paused"] .opening__leaf--empty {
  animation: none;
}

.grow .c-kicker {
  justify-content: flex-start;
}