/* ==========================================================================
   CHUNNIINDIA — Launching Soon
   Palette + geometry taken from Figma: "ChunniIndia — Color Palette + Tokens"
   Desktop frame 37:675 (1440x1024) · Mobile frame 41:989 (375x812)
   ========================================================================== */

/* Kannada MN — self-hosted so the display face is identical on every device,
   not just Macs that happen to have it installed. Subset to Latin + punctuation. */
@font-face {
  font-family: 'Kannada MN';
  src: url('assets/fonts/kannada-mn.woff2') format('woff2'),
       url('assets/fonts/kannada-mn.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sand:            #f3e9dc;  /* cream / primary on-terracotta */
  --terracotta:      #b56e3b;  /* card fill */
  --shadow:          #170d08;  /* color/shadow token */
  --terracotta-deep: #8a4e28;
  --terracotta-lite: #d99b62;
  --sand-warm:       #e2cba7;

  --font-display: 'Kannada MN', 'Times New Roman', Times, serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--shadow);
  color: var(--sand);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Background slideshow — crossfades every 3s with a subtle push-in
   -------------------------------------------------------------------------- */
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* NOT inset:0 — that sizes to the layout viewport, so when iOS Safari's
     toolbars retract the visible area grows taller than the background and
     the page colour shows as bands top and bottom. lvh is always the tallest
     viewport, so the photo covers in every toolbar state. */
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  background: var(--shadow);
  overflow: hidden;
}

.bg__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1400ms var(--ease);
  will-change: opacity;
}

.bg__slide.is-active { opacity: 1; }

.bg__slide picture,
.bg__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bg__slide img {
  transform: scale(1.06);
  transition: transform 6000ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.bg__slide.is-active img { transform: scale(1); }

/* --------------------------------------------------------------------------
   Confetti canvas
   -------------------------------------------------------------------------- */
.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms linear;
}

.confetti.is-firing { opacity: 1; }

/* --------------------------------------------------------------------------
   Stage + card
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}

.card {
  position: relative;
  width: 920px;
  max-width: 100%;
  padding: 53px 67px 74px;
  background: var(--terracotta);
  overflow: hidden;
  transition: height 620ms var(--ease);
  animation: card-in 900ms var(--ease) both;
}

.card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Logo — Figma leaf box 152 x 158 (bottom-aligned artwork) */
.logo {
  display: block;
  width: 152px;
  height: 158px;
  object-fit: contain;
  object-position: bottom;
  flex: none;
}

/* Copy block */
.copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.title {
  margin: 0;
  text-box: trim-both cap alphabetic;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--sand);
  white-space: nowrap;
}

.lede {
  margin: 0;
  text-box: trim-both cap alphabetic;
  width: 494px;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  text-align: center;
  color: var(--sand);
}

/* --------------------------------------------------------------------------
   Slot — holds the sign-up form and the success state
   -------------------------------------------------------------------------- */
.slot {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.form,
.success { animation: slot-in 520ms var(--ease) both; }

@keyframes slot-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.form[hidden],
.success[hidden] { display: none; }

/* Sign-up form */
.form {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  justify-content: center;
}

.field {
  display: flex;
  align-items: center;
  width: 527px;
  min-width: 0;
  height: 71px;
  padding: 10px 32px;
  border: 0.5px solid var(--sand);
  transition: border-color 220ms var(--ease), background-color 220ms var(--ease);
}

.field:focus-within { background: rgba(243, 233, 220, 0.07); }

.field.is-invalid { border-color: #f6d0b4; }

.field__input {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--sand);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  outline: none;
}

.field__input::placeholder { color: var(--sand); opacity: 1; }
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--sand);
  transition: background-color 100000s ease-in-out 0s;
}

.btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 71px;
  padding: 10px;
  border: 0.5px solid var(--sand);
  background: var(--sand);
  color: var(--shadow);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  cursor: pointer;
  transition: background-color 220ms var(--ease), color 220ms var(--ease),
              transform 220ms var(--ease);
}

.btn:hover { background: transparent; color: var(--sand); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.form__error {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  margin: 0;
  width: 100%;
  font-size: 13px;
  letter-spacing: -0.3px;
  text-align: center;
  color: #f6d0b4;
}

.form__error[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Success state
   -------------------------------------------------------------------------- */
.success {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 36px 40px 34px;
  border: 0.5px solid var(--sand);
  text-align: center;
}

.success__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--terracotta);
  animation: mark-pop 620ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

.success__mark svg { width: 52px; height: 52px; }

.success__tick {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: tick-draw 520ms var(--ease) 260ms forwards;
}

@keyframes mark-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes tick-draw { to { stroke-dashoffset: 0; } }

.success__title {
  margin: 26px 0 0;
  text-box: trim-both cap alphabetic;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--sand);
}

.success__text {
  margin: 20px 0 0;
  text-box: trim-both cap alphabetic;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: var(--sand);
}

.success__again {
  margin: 28px 0 0;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--sand);
  background: transparent;
  color: var(--sand);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  cursor: pointer;
  transition: opacity 220ms var(--ease);
}

.success__again:hover { opacity: 0.72; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  position: fixed;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 20px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.handle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sand);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  pointer-events: auto;
  transition: opacity 220ms var(--ease);
}

.handle span { text-box: trim-both cap alphabetic; }

.handle:hover { opacity: 0.75; }

.handle__icon { flex: none; display: block; width: 24px; height: 24px; }

.stay {
  margin: 0;
  text-box: trim-both cap alphabetic;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--sand);
}

/* --------------------------------------------------------------------------
   Between the two comps — keep desktop type, let the card breathe
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) and (min-width: 768px) {
  .card { padding-left: 48px; padding-right: 48px; }
  .field { width: auto; flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   Mobile — Figma frame 41:989 (375 x 812)
   -------------------------------------------------------------------------- */
@media (max-width: 767px), (max-height: 620px) and (max-width: 1023px) {
  .stage { padding: 48px 22px; }

  .card {
    width: 331px;
    padding: 20px 16.5px 35px;
  }

  .card__inner { gap: 24px; }

  .logo { width: 98px; height: 101px; }

  .copy { gap: 16px; }

  .title {
    font-size: 24px;
    letter-spacing: -0.025em;
  }

  .lede {
    text-box: normal;
    width: 232px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: -0.3px;
  }

  .form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 298px;
    max-width: 100%;
  }

  .field {
    width: 100%;
    height: 38px;
    padding: 3.381px 10.82px;
  }

  .field__input { font-size: 12px; letter-spacing: -0.3px; }

  .btn {
    width: 100%;
    height: 38px;
    padding: 3.381px;
    font-size: 12px;
    letter-spacing: -0.3px;
  }

  .form__error { font-size: 11px; top: calc(100% + 8px); }

  .success {
    width: 298px;
    max-width: 100%;
    padding: 26px 20px 24px;
  }

  .success__mark { width: 74px; height: 74px; }
  .success__mark svg { width: 44px; height: 44px; }

  .success__title { margin-top: 22px; font-size: 20px; }
  .success__text { margin-top: 14px; font-size: 12px; font-weight: 300; }
  .success__again { margin-top: 22px; font-size: 12px; letter-spacing: -0.3px; }

  .footer {
    left: 0;
    right: 0;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
  }

  body.is-overflowing .footer { margin: 0 0 16px; }

  .stay { display: none; }
}

/* Card taller than the viewport (long success state, landscape phones):
   the footer leaves its fixed overlay and sits below the card in flow, so
   nothing is ever clipped behind it. Toggled from script.js. */
body.is-overflowing .footer {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0 24px 20px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bg__slide img { transform: none; transition: none; }
  .card, .form, .success, .success__mark, .success__tick { animation: none; }
  .success__tick { stroke-dashoffset: 0; }
  .card { transition: none; }
}

/* --------------------------------------------------------------------------
   Fallback where cap-height trimming is unsupported — approximates the same
   box geometry so the card keeps its designed 920x559 / 331x378 proportions
   -------------------------------------------------------------------------- */
@supports not (text-box: trim-both cap alphabetic) {
  .title { line-height: 26px; }
  .lede { margin-block: -4.3px; }
  .stay, .handle span { line-height: 11px; }
  .success__title { line-height: 21px; }
  .success__text { margin-block: -3px; }

  @media (max-width: 767px), (max-height: 620px) and (max-width: 1023px) {
    .title { line-height: 16px; }
    .lede { margin-block: 0; }
    .success__title { line-height: 13px; }
  }
}