/* =========================================================
   NOOKAA — Coming Soon
   style.css  (base + desktop design)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Palette (sampled from the reference) */
  --cream:        #fdf4e7;
  --cream-2:      #fbeedd;
  --cream-3:      #f7e4cd;
  --brown:        #704825;   /* headings, button, badge, footer */
  --brown-dark:   #5a3a1d;   /* button hover */
  --brown-ink:    #3f2c1b;   /* body copy */
  --orange:       #e6ab62;   /* "coming soooon" highlight */
  --leaf:         #9bbe6d;
  --white:        #ffffff;

  /* Type */
  --font: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radius & shadow */
  --radius-pill:  999px;
  --radius-lg:    22px;
  --shadow-soft:  0 18px 40px -22px rgba(112, 72, 37, 0.35);
  --shadow-input: 0 10px 30px -18px rgba(112, 72, 37, 0.28);

  /* Layout */
  --max-width:    1400px;
  --gutter:       clamp(20px, 5vw, 90px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--brown-ink);
  background-color: var(--cream);
  /* watercolour background artwork sits underneath very soft radial glows */
  background-image:
    radial-gradient(1200px 680px at 20% 4%, rgba(255,251,244,0.55) 0%, rgba(255,251,244,0) 62%),
    radial-gradient(1000px 620px at 94% 30%, rgba(253,241,222,0.45) 0%, rgba(253,241,222,0) 58%),
    url("assets/backgroundImage.png");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, top center;
  background-size: auto, auto, cover;
  background-attachment: fixed;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { text-decoration: none; color: inherit; }

/* Accessible visually-hidden helper */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.site-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 34px var(--gutter) 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  display: inline-flex;
  justify-content: center;
  background: transparent;
  padding: 0;
}

.logo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--brown);
  text-transform: uppercase;
}

.logo__word {
  display: block;
}

.logo__word--main {
  font-size: clamp(2.8rem, 4.3vw, 3.6rem);
  font-weight: 800;
}

.logo__word--sub {
  font-size: clamp(0.72rem, 1.2vw, 0.94rem);
  font-weight: 300;
  text-transform: none;
  opacity: 0.95;
  margin-top: 1px;
}

/* ---------- Hero layout ---------- */
.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: 42px;
  min-height: calc(100vh - 200px);
}

.hero__art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.hero__mascot-copy {
  margin: 0;
  font-size: 6.15rem;
  font-weight: 700;
  color: var(--brown);
  text-align: center;
}

/* ---------- Left column ---------- */
.hero__content { max-width: 560px; }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.6px solid var(--brown);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  color: var(--brown);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
}
.badge__icon { flex: none; }

/* Heading */
.hero__title {
  margin: 24px 0px 16px 0px;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.05;
  color: var(--brown);
  letter-spacing: 0.2px;
}
.hero__title .accent { color: var(--orange); }

/* Description */
.hero__lead {
  margin: 0px;
  font-size: 21px;
  font-weight:600;
  color: var(--brown-ink);
}
.hero__desc {
  margin: 0px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--brown-ink);
  max-width: 48ch;
}
.hero__desc .underline {
  font-weight: 700;
  text-decoration: none;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Email form */
.waitlist { margin-top: 18px; max-width: 490px; }

.waitlist__field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 10px;
  background: var(--white);
  border: 1.5px solid #efe2cf;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-input);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.waitlist__field:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(230, 171, 98, 0.2);
}

.waitlist__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 12px 10px;
  font-family: var(--font);
  font-size: 17px;
  color: var(--brown-ink);
}
.waitlist__input::placeholder { color: #9c8a76; }

/* Button */
.btn {
  font-family: var(--font);
  cursor: pointer;
  border: 0;
}
.btn--primary {
  flex: none;
  padding: 13px 26px;
  border-radius: 15px;
  background: var(--brown);
  color: #f7efe6;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.12s ease;
}
.btn--primary:hover { background: var(--brown-dark); }
.btn--primary:active { transform: translateY(1px); }
.btn--primary.is-success { background: #5b7a3a; }

/* Form message */
.waitlist__message {
  margin: 10px 4px 0;
  min-height: 18px;
  font-size: 14px;
  font-weight: 500;
}
.waitlist__message.is-error   { color: #b4553a; }
.waitlist__message.is-success { color: #5b7a3a; }

/* Community */
.community {
  display: flex;
  align-items: center;
  gap: 12px;
}
.community__avatars { display: inline-flex; }
.community__avatars img {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255, 250, 242, 0.95);
  margin-left: -13px;
  box-shadow: 0 6px 14px -8px rgba(112, 72, 37, 0.55);
}
.community__avatars img:first-child { margin-left: 0; }
.community__text {
  font-size: 16px;
  font-weight: 500;
  color: var(--brown-ink);
}

/* ---------- Right column (mascot) ---------- */
.hero__art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* soft warm glow that seats the mascot into the scene */
.hero__art::before {
  content: "";
  position: absolute;
  inset: 6% 8%;
  background: radial-gradient(closest-side,
              rgba(255, 244, 224, 0.75) 0%,
              rgba(255, 244, 224, 0.28) 55%,
              rgba(255, 244, 224, 0) 78%);
  filter: blur(6px);
  z-index: 0;
}
/* gentle contact shadow beneath the mascot's feet */
.hero__art::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 46%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
              rgba(112, 72, 37, 0.18) 0%,
              rgba(112, 72, 37, 0) 72%);
  z-index: 0;
}
.mascot {
  position: relative;
  z-index: 1;
  width: min(100%, 457px);
  height: auto;
  filter: drop-shadow(0 26px 30px rgba(112, 72, 37, 0.14));
}

/* ---------- Footer ---------- */
.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 22px var(--gutter) 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-footer__copy {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--brown);
}
.socials { display: flex; align-items: center; gap: 14px; }
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--brown);
  fill: currentColor;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.social:hover,
.social:focus-visible {
  color: var(--orange);
  background: rgba(230, 171, 98, 0.16);
  transform: translateY(-2px);
  outline: none;
}

/* ---------- Floating decorations ---------- */
.decorations {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.deco { position: absolute; opacity: 0.9; }
.deco--leaf-1 { top: 16%;  left: 6%; }
.deco--leaf-2 { top: 62%;  left: 3%; }
.deco--ice    { top: 74%;  right: 8%; }
.deco--spark-1{ top: 20%;  right: 40%; }
.deco--heart  { top: 34%;  left: 22%; }
.deco--snow   { top: 12%;  right: 20%; }

/* Keep hero content above decorations */
.site-header, .hero, .site-footer { position: relative; z-index: 1; }

/* ---------- Motion ---------- */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
@keyframes floatyMascot {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes floatyMascotText {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-12px) scale(1.04); }
}
.float-slow { animation: floaty 7s ease-in-out infinite; }
.float-med  { animation: floaty 5.5s ease-in-out infinite; }
.float-fast { animation: floaty 4.5s ease-in-out infinite; }
.float-mascot { animation: floatyMascot 6s ease-in-out infinite; }
.hero__mascot-copy {
  animation: floatyMascotText 6s ease-in-out infinite;
  transform-origin: center;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  letter-spacing: 0.02em;
}

/* ---------- Entrance (subtle, on load) ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
.hero__content > * { animation: riseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__content > .badge      { animation-delay: 0.05s; }
.hero__content > .hero__title{ animation-delay: 0.12s; }
.hero__content > .hero__lead { animation-delay: 0.20s; }
.hero__content > .hero__desc { animation-delay: 0.26s; }
.hero__content > .waitlist   { animation-delay: 0.34s; }
.hero__content > .community  { animation-delay: 0.42s; }
.hero__art { animation: fadeIn 0.9s ease 0.15s both; }

/* Focus styles (keyboard) */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .float-slow, .float-med, .float-fast, .float-mascot,
  .hero__content > *, .hero__art { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ============ WAITLIST — backend states ============ */

/* Honeypot: off-screen, unfocusable, invisible to humans */
.waitlist__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.waitlist__input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn--primary:disabled {
  opacity: 0.75;
  cursor: progress;
}

.btn--primary:disabled:hover { background: var(--brown-dark); }
.btn--primary.is-success:disabled { opacity: 1; cursor: default; }

/* =========================================================
   RESPONSIVE — tablet, mobile, short/landscape phones
   (merged from responsive.css)
   ========================================================= */

/* ---------- Tablet: stack columns, art below text ---------- */
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
    padding-top: 24px;
    text-align: center;
  }

  .hero__content { max-width: 620px; margin: 0 auto; }

  /* keep description readable & centered */
  .hero__desc { max-width: 46ch; margin-left: auto; margin-right: auto; }
  .waitlist   { margin-left: auto; margin-right: auto; }

  .community { justify-content: center; }

  /* art below the text */
  .hero__art { order: 2; margin-top: 8px; }
  .mascot    { width: min(78%, 460px); }

  /* soften fixed background scaling on smaller screens */
  body { background-attachment: scroll; }
}

/* ---------- Mobile: everything centered, full-width controls ---------- */
@media (max-width: 560px) {
  .site-header { padding-top: 24px; justify-content: center; text-align: center; }
  .logo { display: inline-block; }
  .logo__text { align-items: center; }

  .hero__title { font-size: clamp(32px, 9vw, 44px); }

  /* Stack the form: full-width input + full-width button */
  .waitlist__field {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
  }
  .waitlist__input { text-align: center; padding: 12px; }
  .btn--primary { width: 100%; padding: 14px; }

  /* Footer stacks vertically */
  .site-footer {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding-bottom: 26px;
  }

  .mascot { width: min(88%, 380px); }

  /* trim some far-corner doodles on tiny screens */
  .deco--heart, .deco--spark-1 { display: none; }
}

/* ---------- Short/landscape phones ---------- */
@media (max-height: 560px) and (min-width: 901px) {
  .hero__grid { min-height: auto; padding: 20px 0; }
}