@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  --charcoal:#1C1B19;
  --paper:#F7F3EA;
  --avo:#8BAA3C;
  --avo-dark:#5E7A28;
  --line: rgba(28,27,25,0.14);
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background:var(--paper);
  color:var(--charcoal);
  font-family:'Archivo', sans-serif;
  height:100vh;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

::selection{ background:var(--avo); color:var(--paper); }

/* Cursor-follow glow */
.glow{
  position:fixed;
  top:0; left:0;
  width:640px; height:640px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(139,170,60,0.22) 0%, rgba(139,170,60,0.08) 45%, transparent 72%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity 0.4s ease;
  z-index:0;
  will-change:transform;
}
.glow.active{ opacity:1; }

main{
  position:relative;
  z-index:1;
  text-align:center;
  padding:24px;
  max-width:720px;
}

.eyebrow{
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--avo-dark);
  margin-bottom:28px;
  opacity:0;
  animation: fadeUp 0.7s ease 0.15s forwards;
}

.wordmark{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(64px, 14vw, 168px);
  line-height:0.9;
  text-transform:none;
  letter-spacing:-0.01em;
  margin-bottom:26px;
  cursor:default;
  user-select:none;
}
.wordmark span{
  display:inline-block;
  opacity:0;
  transform:translateY(40px);
  animation: letterUp 0.7s cubic-bezier(.22,1,.36,1) forwards;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), color 0.35s ease, text-shadow 0.35s ease;
}
.wordmark span:nth-child(1){ animation-delay:0.25s; }
.wordmark span:nth-child(2){ animation-delay:0.32s; }
.wordmark span:nth-child(3){ animation-delay:0.39s; }
.wordmark span:nth-child(4){ animation-delay:0.46s; }
.wordmark span:nth-child(5){ animation-delay:0.53s; }

/* hover state applied per-letter via JS proximity, defined here as a utility class */
.wordmark span.lift{
  transform:translateY(-14px);
  color:var(--avo-dark);
  text-shadow: 0 14px 24px rgba(94,122,40,0.28);
}

.tagline{
  font-size:17px;
  color:rgba(28,27,25,0.65);
  margin-bottom:44px;
  opacity:0;
  animation: fadeUp 0.7s ease 0.75s forwards;
}

.notify-form{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  opacity:0;
  animation: fadeUp 0.7s ease 0.9s forwards;
}
.notify-form input{
  flex:1 1 260px;
  max-width:300px;
  padding:15px 18px;
  border:1.5px solid var(--line);
  background:transparent;
  color:var(--charcoal);
  font-size:14px;
  font-family:'Archivo', sans-serif;
  border-radius:2px;
  transition:border-color 0.2s ease;
}
.notify-form input::placeholder{ color:rgba(28,27,25,0.4); }
.notify-form input:focus{
  outline:none;
  border-color:var(--avo-dark);
}
.notify-form button{
  padding:15px 28px;
  background:var(--charcoal);
  color:var(--paper);
  border:none;
  border-radius:2px;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.2s ease;
  font-family:'Archivo', sans-serif;
}
.notify-form button:hover{
  background:var(--avo-dark);
  transform:translateY(-2px);
}
.notify-form button:active{ transform:translateY(0); }

.form-note{
  font-size:12px;
  color:rgba(28,27,25,0.45);
  margin-top:16px;
  opacity:0;
  animation: fadeUp 0.7s ease 1.05s forwards;
}

.corner{
  position:fixed;
  font-family:'Archivo', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(28,27,25,0.4);
  z-index:1;
  opacity:0;
  animation: fadeUp 0.7s ease 1.1s forwards;
}
.corner-tl{ top:32px; left:32px; }
.corner-br{ bottom:32px; right:32px; }

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

@media (max-width:560px){
  .corner{ display:none; }
  .notify-form{ flex-direction:column; align-items:center; }
  .notify-form input, .notify-form button{ width:100%; max-width:300px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .glow{ display:none; }
}

:focus-visible{ outline:2px solid var(--avo-dark); outline-offset:3px; }