/* Canello — design tokens och delat formspråk.
   Värden hämtade rakt av från designfacit (Canello Waitlist.dc.html / Canello QR.dc.html). */

:root {
  --paper: #F3EDE4;
  --ink: #1C1916;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
}

a { color: var(--ink); }
a:hover { color: #5a5148; }

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

/* ---------- Sidram ---------- */

.page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Hanken Grotesk', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.page--cover { padding: clamp(28px, 4.5vh, 56px) clamp(24px, 6vw, 88px); }

.page--qr {
  justify-content: center;
  padding: clamp(24px, 5vw, 72px);
}

/* Kornighet: fractalNoise, avmättad, multiplicerad över pappret */
.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .045;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Hårfin omslagsram */
.cover-border {
  position: absolute;
  inset: clamp(14px, 2.2vw, 26px);
  border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  pointer-events: none;
}
.page--cover .cover-border { animation: cnl-fade 1.6s ease .35s both; }
.page--qr .cover-border { animation: cnl-pop 1.4s ease .3s both; }

/* ---------- Omslaget (landing) ---------- */

.spacer-top { flex: 0 0 auto; height: clamp(44px, 10vh, 118px); }
.spacer-a { flex: 1 1 0; }
.spacer-b { flex: 1.15 1 0; }

.wordmark {
  text-align: center;
  position: relative;
  will-change: transform;
}

.wordmark__word {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(84px, 14.5vw, 208px);
  line-height: .95;
  letter-spacing: -0.015em;
  color: var(--ink);
  cursor: default;
}

.wordmark__word span {
  display: inline-block;
  animation: cnl-rise 1.15s cubic-bezier(.19, .8, .22, 1) both;
}
.wordmark__word span:nth-child(1) { animation-delay: .08s; }
.wordmark__word span:nth-child(2) { animation-delay: .14s; }
.wordmark__word span:nth-child(3) { animation-delay: .20s; font-style: italic; }
.wordmark__word span:nth-child(4) { animation-delay: .26s; }
.wordmark__word span:nth-child(5) { animation-delay: .32s; }
.wordmark__word span:nth-child(6) { animation-delay: .38s; }
.wordmark__word span:nth-child(7) { animation-delay: .44s; }

.rule {
  height: 1px;
  width: 104px;
  margin: clamp(22px, 3.5vh, 40px) auto 0;
  background: rgba(28, 25, 22, .38);
  transform-origin: center;
  animation: cnl-draw 1.1s cubic-bezier(.7, 0, .2, 1) .95s both;
}

.tagline {
  margin: clamp(18px, 2.6vh, 30px) 0 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ink);
  animation: cnl-fade 1.2s ease 1.35s both;
}

.soon {
  margin: clamp(14px, 2vh, 22px) 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .42em;
  text-indent: .42em;
  color: color-mix(in oklab, var(--ink) 62%, var(--paper));
  animation: cnl-soon 2.6s cubic-bezier(.19, .8, .22, 1) 2.2s both;
}

/* ---------- E-postraden ---------- */

.signup {
  width: min(340px, 100%);
  position: relative;
  z-index: 1;
  animation: cnl-fade 1s ease .8s both;
}

.signup__field { position: relative; }

.signup__input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  border-radius: 0;
  text-align: center;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .05em;
  color: var(--ink);
  caret-color: var(--ink);
  /* Symmetrisk indragning: reserverar plats åt pilen utan att rubba centreringen. */
  padding: 10px 28px 12px;
}

/* Hårfin pil i samma 1px-språk som linjerna. Gör submit synlig —
   annars måste besökaren gissa att Enter skickar. */
.signup__send {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 6px 2px;
  cursor: pointer;
  color: color-mix(in oklab, var(--ink) 45%, var(--paper));
  transition: color .4s ease;
}

.signup__send:hover,
.signup__send:focus-visible,
.signup:focus-within .signup__send { color: var(--ink); }

/* Osynlig utvidgning till 44x42 px tryckyta utan att rubba pilens placering. */
.signup__send::after {
  content: '';
  position: absolute;
  inset: -11px -10px;
}

.signup__send svg { display: block; transition: transform .4s cubic-bezier(.19, .8, .22, 1); }
.signup__send:hover svg { transform: translateX(3px); }

.signup__input::placeholder {
  color: rgba(28, 25, 22, .45);
  transition: color .4s ease;
}
.signup__input:focus::placeholder { color: rgba(28, 25, 22, .22); }

.signup__line {
  position: relative;
  height: 1px;
  background: color-mix(in oklab, var(--ink) 30%, var(--paper));
}

.signup__line-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .55s cubic-bezier(.7, 0, .2, 1);
}
.signup:focus-within .signup__line-fill { transform: scaleX(1); }

/* Bekräftelsen efter godkänd anmälan. Återanvänder sidans två befintliga
   röster: ordmärkets kursiva antikva och COMING SOON:s spärrade småstil. */
.signup__done {
  text-align: center;
  padding: 10px 4px 13px;
}

.signup__done-lead {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 6vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  animation: cnl-fade .9s ease both;
}

.signup__done-note {
  margin: clamp(12px, 1.8vh, 18px) 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--soon-ls, .42em);
  text-indent: var(--soon-ls, .42em);
  color: color-mix(in oklab, var(--ink) 62%, var(--paper));
  animation: cnl-soon 1.6s cubic-bezier(.19, .8, .22, 1) .35s both;
}

.signup__done-sign {
  margin: clamp(10px, 1.4vh, 14px) 0 0;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
  color: color-mix(in oklab, var(--ink) 45%, var(--paper));
  animation: cnl-fade 1.1s ease .8s both;
}

/* ---------- QR-plansch ---------- */

.qr-home {
  position: absolute;
  top: clamp(26px, 4.5vh, 46px);
  left: clamp(26px, 3.4vw, 50px);
  font-family: 'Instrument Serif', serif;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--ink);
  text-decoration: none;
  z-index: 1;
  animation: cnl-fade-sm 1s ease .15s both;
}
.qr-home:hover {
  color: var(--ink);
  font-style: italic;
}

.qr-plate {
  position: relative;
  z-index: 1;
  will-change: transform;
}

.qr-code {
  display: block;
  width: min(64vw, 52vh, 420px);
  height: auto;
  color: var(--ink);
}

.qr-caption {
  position: relative;
  z-index: 1;
  margin: clamp(24px, 4.5vh, 40px) 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .42em;
  text-indent: .42em;
  color: color-mix(in oklab, var(--ink) 78%, var(--paper));
  animation: cnl-fade-sm 1.1s ease 1.1s both;
}

/* ---------- Rörelse ---------- */

@keyframes cnl-rise {
  from { opacity: 0; transform: translateY(.38em); filter: blur(12px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes cnl-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cnl-fade-sm {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cnl-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes cnl-soon {
  from { opacity: 0; letter-spacing: .7em; filter: blur(6px); }
  to   { opacity: 1; letter-spacing: var(--soon-ls, .42em); filter: blur(0); }
}

/* Löftesraden är 332px vid .42em — bredare än formuläret på en iPhone SE (327px).
   Minskad spärrning håller den på en rad utan att korta ned texten. */
@media (max-width: 430px) {
  .signup__done-note { --soon-ls: .28em; }
}
@keyframes cnl-pop {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition: none !important;
  }
}