/* HENDL — coming soon. Palette & type from the HENDL Brand Guide (Oct 2026). */
:root {
  --burgundy: #590C1B;
  --ivory: #F7F3EA;
  --rose: #EBD9D5;
}

*, *::before, *::after { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--burgundy);
  color: var(--ivory);
  font: 400 16px/1.5 "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  overflow: hidden;
}

main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 20px;
}

/* The head: draws itself as one line, follows you with its eye, blinks, pecks when tapped */
.head {
  all: unset; cursor: pointer; display: block;
  width: clamp(96px, 15vw, 140px); margin-bottom: 28px;
  -webkit-tap-highlight-color: transparent;
}
.head:focus-visible { outline: 2px solid var(--rose); outline-offset: 10px; border-radius: 8px; }
.head svg { display: block; width: 100%; height: auto; overflow: visible; }
.mark { fill: var(--ivory); }
.pen {
  fill: none; stroke: #fff; stroke-width: 56;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1.1 2; stroke-dashoffset: 1.15;
  animation: draw 1.9s .3s cubic-bezier(.55, .05, .35, 1) forwards;
}
.eye { fill: var(--ivory); opacity: 0; transform-box: fill-box; transform-origin: center; animation: appear .35s 2.1s forwards; transition: transform .08s; }
.eye.blink { transform: scaleY(.1); }
.eye-track { transition: transform .25s ease-out; }
.peck { transform-box: fill-box; transform-origin: 30% 95%; }
.peck.go { animation: peck .42s cubic-bezier(.3, 0, .2, 1); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes peck { 35% { transform: rotate(14deg) translate(4%, 6%); } 60% { transform: rotate(-3deg); } }

h1 {
  margin: 0; cursor: default; outline: none;
  font: 400 clamp(64px, 16vw, 160px)/.9 "Archivo Black", "Arial Black", sans-serif;
  letter-spacing: -.01em;
  transition: letter-spacing .6s cubic-bezier(.2, .7, .1, 1);
}
h1:hover, h1:focus-visible { letter-spacing: .02em; }

.sub {
  /* fixed height so swapping the text never shifts the layout */
  margin: 20px 0 0; height: 24px; line-height: 24px;
  font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--rose);
}
.sub span { display: inline-block; transition: opacity .7s, transform .7s, filter .7s; }
.sub span.out { opacity: 0; transform: translateY(6px); filter: blur(3px); }
.sub .phon { text-transform: none; letter-spacing: .08em; font-weight: 400; font-size: 15px; line-height: 24px; }

/* Launch notification field */
.notify {
  position: relative;
  display: flex; gap: 8px; width: 100%; max-width: 400px;
  margin: 44px 0 0;
}
.notify input {
  flex: 1; min-width: 0; height: 48px; padding: 0 20px;
  border: 1px solid rgba(235, 217, 213, .4); border-radius: 999px;
  background: transparent; color: var(--ivory);
  font: 400 16px "DM Sans", system-ui, sans-serif; /* 16px+ prevents iOS zoom on focus */
  transition: border-color .3s;
}
.notify input::placeholder { color: rgba(235, 217, 213, .6); }
.notify input:hover, .notify input:focus { border-color: var(--rose); }
.notify button {
  flex: none; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ivory); color: var(--burgundy);
  font: 700 14px "DM Sans", system-ui, sans-serif;
  transition: transform .2s, opacity .2s;
}
.notify button:hover { transform: translateY(-1px); }
.notify button:disabled { opacity: .6; cursor: default; transform: none; }
.notify input:focus-visible, .notify button:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.notify .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* message sits below the field so it never shifts the layout */
.notify-msg { position: absolute; top: 100%; left: 0; right: 0; margin: 12px 0 0; font-size: 13px; color: var(--rose); }
.notify.done input, .notify.done button { visibility: hidden; }
.notify.done .notify-msg {
  top: 0; margin: 0; height: 48px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--ivory);
}

footer {
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--rose);
}
footer p { margin: 0; }
footer .legal {
  font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: none;
  opacity: .6;
}

@media (max-width: 480px) {
  .notify { margin-top: 36px; }
  .notify button { padding: 0 18px; }
  .sub { letter-spacing: .22em; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .pen { animation: none; stroke-dashoffset: 0; }
  .eye { animation: none; opacity: 1; }
  .peck.go { animation: none; }
  .sub span, h1 { transition: none; }
}