/* Coming Soon — page styles.
   Translated from `Coming Soon.dc.html` in the Claude Design project.
   The two design-time props that affect styling are exposed as custom
   properties so JS (assets/js/main.js) can override them at runtime; the
   values below are the component defaults, so the page is correct with
   JavaScript disabled. */

:root{
  --glow-opacity:.4;   /* prop: glowIntensity (0 – 0.8) */
  --grain-opacity:.05; /* prop: showGrain (.05 when on, 0 when off) */
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:var(--cafe);
  color:var(--crema);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------------------------------------------------------------- stage */

.stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  /* The source fixes this at 100dvh; `min-height` lets a short viewport
     (landscape phone) scroll instead of clipping the signup form. */
  min-height:max(100dvh,560px);
  padding:32px 24px;
  overflow:hidden;
}

/* Warm terracotta bloom behind the wordmark. */
.stage__glow{
  position:absolute;
  top:50%;
  left:50%;
  width:560px;
  height:560px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(181,84,31,var(--glow-opacity)) 0%,rgba(181,84,31,0) 70%);
  pointer-events:none;
}

/* Paper grain, so the flat brown reads as stock rather than screen. */
.stage__grain{
  position:absolute;
  inset:0;
  opacity:var(--grain-opacity);
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- content */

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:380px;
  text-align:center;
  animation:fadeUp .7s var(--ease);
}

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

.card__mark{
  stroke:var(--terracota);
  opacity:.55;
}

.card__wordmark{
  margin:0;
  font-family:var(--font-display);
  font-variation-settings:var(--display-settings);
  font-weight:var(--weight-display-bold);
  font-size:clamp(36px,10vw,58px);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-display);
  color:var(--crema);
  text-shadow:0 0 48px rgba(181,84,31,.4);
}

.card__tagline{
  margin:0;
  max-width:290px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:var(--weight-medium);
  font-size:clamp(17px,4.4vw,21px);
  line-height:var(--leading-snug);
  color:var(--crema-deep);
}

.card__eyebrow{
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:var(--tracking-caps);
  color:var(--mostaza);
}

/* ---------------------------------------------------------------- signup */

.signup{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  margin-top:10px;
}

.signup__label{
  font-size:13px;
  font-weight:var(--weight-medium);
  color:var(--crema-deep);
}

.signup__row{
  display:flex;
  gap:8px;
  width:100%;
}

.signup__input{
  flex:1;
  min-width:0;
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--crema);
  background:var(--cafe-soft);
  border:1px solid rgba(244,233,220,.22);
  border-radius:var(--radius-md);
  outline:none;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}

.signup__input::placeholder{color:rgba(234,220,200,.5)}

.signup__input:focus{
  border-color:var(--mostaza);
  box-shadow:0 0 0 3px rgba(217,164,65,.22);
}

.signup__button{
  padding:12px 18px;
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  font-size:15px;
  color:var(--crema);
  background:var(--terracota);
  border:none;
  border-radius:var(--radius-md);
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}

.signup__button:hover{background:var(--terracota-dark)}
.signup__button:active{background:#7D370C}

.signup__button:disabled{
  cursor:default;
  opacity:.65;
}

.signup__error{
  margin:0;
  font-size:13px;
  font-weight:var(--weight-medium);
  color:var(--mostaza-soft);
}

/* Confirmation replaces the form once the address is in. */
.signup-done{
  width:100%;
  margin-top:10px;
  padding:12px 18px;
  font-size:15px;
  font-weight:var(--weight-medium);
  color:var(--crema);
  background:var(--cafe-soft);
  border:1px solid rgba(244,233,220,.18);
  border-radius:var(--radius-md);
}

/* ---------------------------------------------------------------- whatsapp */

.whatsapp{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--crema-deep);
  text-decoration:none;
  opacity:.85;
  transition:color var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}

.whatsapp:hover{
  color:var(--terracota-soft);
  opacity:1;
}

/* ---------------------------------------------------------------- shared */

.is-hidden{display:none}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}