/* =========================================================
   GROWV — registration gate
   ---------------------------------------------------------
   Self-contained. Remove the <link> to this file and the
   <script> for register-gate.js and the site loses the gate
   entirely; nothing else references these classes.

   Styled off the same tokens as the rest of the site, so it
   reads as part of the brand rather than a bolted-on popup.
   ========================================================= */

.gate{
  position:relative;
  border:0;padding:0;background:transparent;
  max-width:min(540px,calc(100vw - 2rem));width:100%;
  color:rgba(255,255,255,.92);
}
/* Deliberately light, and no blur. The site stays readable behind the
   panel — the form sits on top of the page rather than replacing it, so
   someone can still see what they would be registering to get at. The
   panel's own shadow and solid fill do the separating. */
.gate::backdrop{
  background:rgba(8,16,12,.38);
}

.gate__inner{
  background:var(--ink-2);
  border:1px solid var(--ink-line);
  border-top:2px solid var(--gold);
  box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.35);
  /* The form is long enough to overrun a laptop in landscape, so the
     panel scrolls internally rather than the page behind it. */
  max-height:min(92svh,860px);overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1.5rem,4vw,2.5rem);
}

.gate__langbar{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);margin:0 0 var(--space-4)}
.gate__logo{display:block;height:38px;width:auto;margin:0}

.gate__lang{display:flex;gap:.25rem;flex:0 0 auto}
.gate__langbtn{
  background:transparent;border:1px solid var(--ink-line);color:rgba(255,255,255,.55);
  font-family:var(--f-body);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .7rem;cursor:pointer;border-radius:999px;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out),background .2s var(--ease-out);
}
.gate__langbtn:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.gate__langbtn.is-active{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}

/* Español: maroon, with a ring that pulses so a Spanish speaker spots it
   without a banner taking up the top of the panel. The pulse stops once
   it is the active language — it has done its job by then. */
.gate__langbtn[data-lang="es"]{
  background:var(--maroon,#7A2E3A);border-color:#A8465A;color:#fff;font-weight:600;
}
.gate__langbtn[data-lang="es"]:hover{background:var(--maroon-2,#5E2029);border-color:#C25A70;color:#fff}
.gate__langbtn[data-lang="es"]:not(.is-active){
  animation:gate-lang-pulse 1.25s ease-in-out infinite;
  padding:.46rem .85rem;font-size:.72rem;
}
/* A lit dot before the word, so it reads as an active signal and not just
   a second tab. It brightens on the same beat as the ring. */
.gate__langbtn[data-lang="es"]:not(.is-active)::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#FFD9E1;margin-right:.45rem;vertical-align:1px;
  animation:gate-lang-dot 1.25s ease-in-out infinite;
}
.gate__langbtn[data-lang="es"].is-active{
  background:var(--maroon,#7A2E3A);border-color:#D9C28C;color:#fff;
  box-shadow:0 0 0 2px rgba(217,194,140,.35);
}
@keyframes gate-lang-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(229,128,152,.85), 0 0 12px 2px rgba(229,128,152,.45);border-color:#C25A70}
  50%    {box-shadow:0 0 0 7px rgba(229,128,152,0),  0 0 26px 7px rgba(229,128,152,.7); border-color:#FF9DB4}
}
@keyframes gate-lang-dot{
  0%,100%{opacity:.45;box-shadow:0 0 0 0 rgba(255,217,225,.6)}
  50%    {opacity:1;  box-shadow:0 0 8px 2px rgba(255,217,225,.9)}
}
@media (prefers-reduced-motion:reduce){
  .gate__langbtn[data-lang="es"]:not(.is-active),
  .gate__langbtn[data-lang="es"]:not(.is-active)::before{
    animation:none;
  }
  .gate__langbtn[data-lang="es"]:not(.is-active){
    box-shadow:0 0 0 3px rgba(229,128,152,.6);border-color:#FF9DB4;
  }
}

.gate__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.6rem,4.4vw,2.2rem);line-height:1.12;
  color:#fff;margin:0 0 var(--space-3);letter-spacing:-.008em;
}
.gate__title em{font-style:italic;color:var(--gold-2)}

.gate__lede{
  font-size:var(--fs-small);line-height:1.6;
  color:rgba(255,255,255,.72);margin:0 0 var(--space-5);max-width:46ch;
}

.gate__field{display:block;margin-bottom:var(--space-3)}
.gate__field span{
  display:block;font-family:var(--f-body);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:.45rem;
}
.gate__field input{
  width:100%;background:rgba(0,0,0,.28);color:#fff;
  border:1px solid var(--ink-line);border-radius:var(--radius-sm);
  padding:.85rem 1rem;font-family:var(--f-body);font-size:1rem;
  transition:border-color .25s var(--ease-out),background .25s var(--ease-out);
}
.gate__field input::placeholder{color:rgba(255,255,255,.34)}
.gate__field input:focus{
  outline:none;border-color:var(--gold);background:rgba(0,0,0,.42);
}
.gate__field input:user-invalid{border-color:#C0553A}

.gate__row{display:grid;gap:var(--space-3)}
@media (min-width:520px){
  .gate__row{grid-template-columns:1fr 1fr}
  .gate__row--3{grid-template-columns:1fr 1fr 1fr}
}

/* Separates the three required fields from the optional criteria. */
.gate__divider{
  margin:var(--space-5) 0 var(--space-3);padding-top:var(--space-4);
  border-top:1px solid var(--ink-line);
  font-family:var(--f-body);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-2);max-width:none;
}

.gate__field select,
.gate__field textarea{
  width:100%;background:rgba(0,0,0,.28);color:#fff;
  border:1px solid var(--ink-line);border-radius:var(--radius-sm);
  padding:.85rem 1rem;font-family:var(--f-body);font-size:1rem;
  transition:border-color .25s var(--ease-out),background .25s var(--ease-out);
}
.gate__field textarea{resize:vertical;min-height:3.2rem}
.gate__field textarea::placeholder{color:rgba(255,255,255,.34)}
.gate__field select:focus,
.gate__field textarea:focus{outline:none;border-color:var(--gold);background:rgba(0,0,0,.42)}
/* Native option lists render on the OS, which is light — keep them legible. */
.gate__field select option{background:#17241d;color:#fff}

/* Bots fill this; people never see it. */
.gate__honeypot{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.gate__submit{width:100%;margin-top:var(--space-4)}

.gate__status{
  margin:var(--space-3) 0 0;font-size:var(--fs-small);min-height:1.2em;
}
.gate__status[data-state="error"]{color:#E08B6F}
.gate__status[data-state="success"]{color:var(--gold-2)}

.gate__fine{
  margin:var(--space-4) 0 0;font-size:.78rem;line-height:1.55;
  color:rgba(255,255,255,.45);max-width:46ch;
}
.gate__fine a{color:rgba(255,255,255,.7)}

/* The X. Hidden in the markup, revealed by the script after a few
   seconds; it fades in rather than appearing, so someone mid-sentence
   notices it arrive instead of finding it already there. */
.gate__x{
  position:absolute;top:.6rem;right:.6rem;z-index:3;
  width:38px;height:38px;display:grid;place-items:center;
  background:rgba(0,0,0,.35);border:1px solid var(--ink-line);border-radius:50%;
  color:rgba(255,255,255,.7);cursor:pointer;
  animation:gate-x-in .45s var(--ease-out) both;
  transition:color .2s var(--ease-out),background .2s var(--ease-out),border-color .2s var(--ease-out);
}
.gate__x[hidden]{display:none}
.gate__x svg{width:17px;height:17px;display:block}
.gate__x:hover{color:#fff;background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.3)}
.gate__x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@keyframes gate-x-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gate__x{animation:none}}

/* While the gate is open the page behind it must not scroll. */
html.gate-open,body.gate-open{overflow:hidden}

@media (prefers-reduced-motion:no-preference){
  .gate[open] .gate__inner{animation:gate-in .4s var(--ease-out) both}
  @keyframes gate-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

@media print{.gate{display:none}}