@font-face {
  font-family: "Yet Grotesk";
  src: url("fonts/for-yetgroteskweb-bold.woff2") format("woff2"),
       url("fonts/for-yetgroteskweb-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yet Grotesk";
  src: url("fonts/for-yetgroteskweb-bolditalic.woff2") format("woff2"),
       url("fonts/for-yetgroteskweb-bolditalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Yet Grotesk";
  src: url("fonts/for-yetgroteskweb-black.woff2") format("woff2"),
       url("fonts/for-yetgroteskweb-black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

html,
body {
  margin: 0;
  height: 100%;
  /* overflow: hidden; */
  overscroll-behavior: none;
}

.render{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-image: url(render-green.png);
    background-size:cover;
    opacity: 0;
}

.layout {
position: relative;
  box-sizing: border-box;
  height: 100vh;
  height: 100svh;
  padding: 4vw;
  display: grid;
  grid-template-columns: 2fr 3fr 2fr;
  grid-template-rows: 1fr 2fr 1fr;
  gap: 10px;
  /* background-color: aquamarine; */
}

.layout div {
  /* background-color: blueviolet; */
}

.about {
text-align: right;
  grid-column: 3;
  grid-row: 1;
}

.about p {
  margin: 0;
  font-family: "Yet Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1vw;
  line-height: 1.1;
  text-transform: uppercase;
  color: #1a1a1a;
}

/* Language switcher, above the about text */
.lang {
  margin-bottom: 1vw;
  font-family: "Yet Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1vw;
  line-height: 1.1;
}

.lang a {
  margin-left: 0.6em;
  color: #9a9a9a;
  text-decoration: none;
}

.lang a[aria-current="page"] {
  color: #1a1a1a;
}

.lang a:hover,
.lang a:focus-visible {
  color: #ff66d9;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;   /* right-aligned stack */
  text-align: center;
  justify-content: center;
  gap: 0.5vw;
  grid-column: 2;
  grid-row: 2;
}

.opening {
  margin: 0;
  font-family: "Yet Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.75vw;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #000;
  text-transform: uppercase;
}

.countdown {
  margin: 0;
  font-family: "Yet Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: 5vw;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;   /* digits stay the same width, so nothing shifts */
  white-space: nowrap;
  color: #000;
}

.address {
  margin: 0;
  font-family: "Yet Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.5vw;
  color: #1a1a1a;
}


.capture {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0fr) auto;  
  justify-content: center;
  width: 100%;
  margin-top: 1vw;
  font-family: "Yet Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  --text: 1.5vw;                
  font-size: var(--text);
  text-align: left;
  transition: grid-template-columns .5s cubic-bezier(.65, 0, .35, 1);
}

/* outline: spans both columns, hidden behind the pill when closed */
.capture::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #ff66d9;
  pointer-events: none;
}

.capture .field {
  all: unset;
  box-sizing: border-box;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  min-width: 0;
  text-indent: 1.5vw;
  font-family: inherit;
  font-size: max(16px, var(--text));
  transform: scale(var(--shrink, 1));
  transform-origin: left center;
  width: calc(100% / var(--shrink, 1));
  color: #1a1a1a;
  caret-color: #ff66d9;
}

.capture .field::placeholder {
  color: #9a9a9a;
}

.pill {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  padding: .8vw 2vw;
  border-radius: 999px;
  background: #0ddcff;
  font-weight: 700;
  font-style: italic;
  color: #1a1a1a;
}

/* label text and its width, per state */
.pill span {
  display: inline-block;
  width: 6.25em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: bottom;
  transition: width .45s cubic-bezier(.65, 0, .35, 1);
}

.pill span::after {
  content: "Stay updated";
}

/* invisible click targets on top of the pill */
.hit {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  cursor: pointer;
}

.hit-sent {
  visibility: hidden;
}

.pill:has(.hit-open:hover) {
  background: #ff66d9;
}

/* keyboard focus */
.capture:has(#open:focus-visible) .pill,
.capture:has(#sent:focus-visible) .pill {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

/* open ------------------------------------------------------------------ */

.capture:has(#open:checked) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.capture:has(#open:checked) .pill {
  background: #ff66d9;
}

.capture:has(#open:checked) .pill span {
  width: 3.35em;
}

.capture:has(#open:checked) .pill span::after {
  content: "Submit";
}

.capture:has(#open:checked) .hit-open {
  visibility: hidden;
}

.capture:has(#open:checked) .hit-sent {
  visibility: visible;
}

/* Submit only works once the email is valid */
.capture:has(#open:checked):has(.field:invalid) .hit-sent {
  pointer-events: none;
}

/* done ------------------------------------------------------------------ */

.capture:has(#sent:checked) {
  grid-template-columns: minmax(0, 0fr) auto;
}

.capture:has(#sent:checked)::before {
  box-shadow: inset 0 0 0 1px #36e612;
}

.capture:has(#sent:checked) .pill {
  background: #36e612;
}

.capture:has(#sent:checked) .pill span {
  width: 5.1em;
}

.capture:has(#sent:checked) .pill span::after {
  content: "Thank you!";
}

.capture:has(#sent:checked) .hit {
  visibility: hidden;
}

/* Spanish labels (the English ones above are the default) --------------- */

.pill.es span {
  width: 4.35em;
}

.pill.es span::after {
  content: "Apúntate";
}

.capture:has(#open:checked) .pill.es span {
  width: 2.95em;
}

.capture:has(#open:checked) .pill.es span::after {
  content: "Enviar";
}

.capture:has(#sent:checked) .pill.es span {
  width: 4.1em;
}

.capture:has(#sent:checked) .pill.es span::after {
  content: "¡Gracias!";
}

.capture .field:autofill {
  background: transparent;
  filter: none;              /* Firefox also tints autofilled fields with a filter */
  -webkit-text-fill-color: #1a1a1a;
  transition: background-color 9999s 9999s;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .capture,
  .capture * {
    transition: none !important;
  }
}

/* Wordmark -------------------------------------------------------------- */

.wordmark {
  position: absolute;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  inset: 0;
  color: #1e1e1e;
  pointer-events: none;
  --pad: 4vw;                                  /* match .layout padding */
  --falta-w: max(5.3vw, 32px);                 /* never smaller than 32px wide */
  --falta-h: calc(var(--falta-w) * 449 / 104); /* FALTA's height, from its viewBox */
}

.wordmark svg {
  display: block;
  fill: currentColor;
}

.falta {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--falta-w);
  overflow: visible;
}

.line {
  position: absolute;
  inset: 0;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-bottom-left-radius: max(0px, calc(100vh - 2 * var(--pad) - var(--falta-h)));
  border-bottom-left-radius: max(0px, calc(100svh - 2 * var(--pad) - var(--falta-h)));
}

.tiempo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: max(33%, calc(var(--falta-w) * 5.46)); /* 5.46 × FALTA keeps both words the same letter height */
}

.falta path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* Wordmark motion --------------------------------------------------------
   wordmark.js reads the letterforms and sizes from the static wordmark above
   and draws the animation here, across the whole window. While it runs, the
   static pieces are hidden but keep their layout, so they still set the
   word sizes, line weight and corner. With reduced motion the resting
   composition shows as a still; without JavaScript the static wordmark shows.
   ----------------------------------------------------------------------- */

.wordmark-motion {
  display: none;
  position: absolute;
  /* cover the page padding too: the whole window. An <svg> won't stretch
     between top/bottom like a div, so it gets an explicit size. */
  top: calc(-1 * var(--pad));
  left: calc(-1 * var(--pad));
  width: calc(100% + 2 * var(--pad));
  height: calc(100% + 2 * var(--pad));
  overflow: hidden;              /* words disappear at the window edges */
}

.wordmark.is-animated .wordmark-motion {
  display: block;
}

.wordmark.is-animated > .falta,
.wordmark.is-animated > .line,
.wordmark.is-animated > .tiempo {
  visibility: hidden;
}

.wordmark-motion .m-line {
  fill: none;
  stroke: currentColor;
}

.wordmark-motion .m-falta {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.wordmark-motion .m-tiempo {
  fill: currentColor;
  fill-rule: nonzero;
}

/* Portrait screens (phones, upright tablets) ----------------------------
   Grid columns are shared by every row, so instead of different ratios
   per row the grid becomes four equal columns:
     row 1: the about text spans the right half   (≈ 1fr 1fr 2fr)
     row 2: the info spans the middle half         (≈ 1fr 2fr 1fr)
   Text sizes go up, since vw units get small on a narrow screen.
   ----------------------------------------------------------------------- */
@media (orientation: portrait) {
  .layout {
    grid-template-columns: repeat(4, 1fr);
  }

  .about {
    grid-column: 3 / 5;
  }

  .about p {
    font-size: 4.5vw;
    line-height: 1.2;
    text-transform: none;        /* sentence case, as in the mobile mockup */
  }

  .lang {
    font-size: 4.5vw;
    margin-bottom: 2vw;
  }

  .info {
    grid-column: 2 / 4;
    gap: 1vw;
  }

  .opening {
    font-size: 4.2vw;
    text-transform: uppercase;   /* as in the mobile mockup */
    white-space: nowrap;         /* keep the address on one line */
  }

  .countdown {
    font-size: 9.6vw;            /* wider than its column; it stays centred */
  }

  .capture {
    margin-top: 2vw;
    --text: 3.8vw;
  }

  .capture .field {
    text-indent: 3vw;
  }

  .pill {
    padding: 1.6vw 4vw;
  }

  .wordmark {
       --falta-w: max(6.7vw, 22px); /* about 26px on a phone */
    --rest-align: right;          /* wordmark rests against the right edge, so the corner can be bigger */  }

  .tiempo {
    width: calc(var(--falta-w) * 5.46);
  }
}