/* ══════════════════════════════════════════════════════════════
   thequeen.co.il — holding page.
   One crown, drawn in fine line on a dark plate. Nothing else loud.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ground:      #1C1E1B;   /* dark olive ink */
  --ground-lift: #24271F;
  --line:        #D9D2C0;   /* the crown, drawn in chalk-paper */
  --seal:        #8C2F39;   /* oxblood — the button at rest */
  --sent:        #3E6B4B;   /* green — the button once pressed */
  --text:        #8E9186;
  --text-dim:    #6B6E64;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  background-image: radial-gradient(115% 65% at 50% 38%, var(--ground-lift) 0%, var(--ground) 64%);
  color: var(--text);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  display: flex;
  justify-content: center;
}

.room{
  width: 100%;
  max-width: 32rem;
  padding: clamp(2rem, 8vh, 4.5rem) 16px clamp(2.5rem, 9vh, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mark{
  margin: 0 0 clamp(2rem, 7vh, 3.5rem);
  font-size: .8125rem;
  letter-spacing: .14em;
  color: var(--text-dim);
}

/* ── the crown: the one loud thing ──────────────────────────── */
.crown{
  display: block;
  width: min(100%, 27rem);
  height: auto;
  color: var(--line);
}

/* ── coming soon ────────────────────────────────────────────── */
.soon{
  margin: clamp(2rem, 6vh, 3rem) 0 0;
  font-family: "Bodoni Moda", serif;
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--line);
}

/* ── the button ─────────────────────────────────────────────── */
.knock{
  margin-top: clamp(1.75rem, 5vh, 2.5rem);
  padding: .85rem 1.7rem;
  font: inherit;
  /* after the shorthand, or it gets reset back to the body family */
  font-family: "Assistant", "Archivo", system-ui, sans-serif;
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: .03em;
  color: #F0EADA;
  background: var(--seal);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background 140ms ease;
}
.knock:hover{ background: #9D3742; }

/* the one response to a press */
.knock.is-sent,
.knock.is-sent:hover{ background: var(--sent); }
.knock:focus-visible{ outline: 2px solid var(--line); outline-offset: 3px; }
/* ══ the one orchestrated moment: the crown is drawn, then set ══ */
@media (prefers-reduced-motion: no-preference){
  .crown__line > *{
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 900ms cubic-bezier(.45,.05,.3,1) var(--d, 0s) forwards;
  }
  .crown__gem > *{
    opacity: 0;
    animation: gem 260ms ease var(--d, 0s) forwards;
  }
  .soon, .knock{
    opacity: 0;
    animation: rise 620ms cubic-bezier(.2,.75,.25,1) 1.25s forwards;
  }
  .knock{ animation-delay: 1.38s; }
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@keyframes gem{ to{ opacity: 1; } }
@keyframes rise{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: none; }
}