/* =========================================================
   Art of Hindi Poets — Waitlist teaser styles
   Layered on top of the design system's colors_and_type.css
   ========================================================= */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--aohp-paper-cream);
  color: var(--fg1);
  overflow-x: hidden;
}

/* Dynamic, tweakable variables live on the app root and cascade down. */
#root {
  --accent: var(--aohp-gold);
  --accent-strong: var(--aohp-gold-dark);
  --font-display: "Rozha One", "Tiro Devanagari Hindi", serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-hi-body: "Mukta", "Poppins", system-ui, sans-serif;  /* legible Devanagari for small running text */
  --sec-pv: 104px;          /* section vertical padding */
  --paper-opacity: 0.22;
}

img { max-width: 100%; display: block; }
button, a, input { font-family: inherit; }
::selection { background: rgba(207,150,71,0.25); }

/* ---------------------------------------------------------
   Paper grain — a single fixed overlay, deliberately faint.
   --------------------------------------------------------- */
.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: var(--paper-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.18  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.shell { position: relative; z-index: 1; }

/* ---------------------------------------------------------
   Shared layout helpers
   --------------------------------------------------------- */
.container { max-width: 1100px; margin: 0 auto; padding-inline: 24px; }
.container-wide { max-width: 1220px; margin: 0 auto; padding-inline: 24px; }

.section { padding-block: var(--sec-pv); position: relative; }

.eyebrow {
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
/* Devanagari eyebrows: wide tracking + uppercase break Hindi conjuncts/matras */
.eyebrow[lang="hi"] {
  font-family: var(--font-hi-body);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: none;
}

.sec-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.2;
  color: var(--fg1);
  margin: 14px 0 0;
  letter-spacing: -0.005em;
}
.sec-title .hi { display: block; }
.sec-sub {
  font: 400 17px/1.7 var(--font-body);
  color: var(--fg3);
  max-width: 580px;
  margin: 16px 0 0;
}
.sec-head--center { text-align: center; }
.sec-head--center .sec-sub { margin-inline: auto; }

/* The signature ornament divider */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.ornament .bar { width: 56px; height: 2px; background: var(--ornament-gradient); border-radius: 2px; }
.ornament .star { color: var(--accent); }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 32px; border-radius: 9999px;
  font: 600 14px/1 var(--font-body); letter-spacing: 0.06em;
  cursor: pointer; border: 2px solid transparent; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--aohp-ink-soft); color: var(--fg-inverse); }
.btn--primary:hover { background: var(--aohp-ink); box-shadow: 0 8px 22px rgba(65,32,15,0.22); }
.btn--ghost { background: transparent; color: var(--fg1); border-color: var(--aohp-gold-olive); }
.btn--ghost:hover { background: rgba(207,150,71,0.10); }
.btn--gold { background: var(--accent); color: #2b1402; }
.btn--gold:hover { background: var(--accent-strong); color: #fff; box-shadow: 0 8px 22px rgba(161,108,36,0.3); }
.btn--small { padding: 11px 22px; font-size: 13px; }
.btn:active { transform: translateY(1px); }

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.sher-card:hover {
  transform: rotate(-1.6deg) translateY(-5px);
  box-shadow: 0 14px 40px rgba(65,32,15,0.14);
  border-color: var(--aohp-border-gold);
}

/* ---------------------------------------------------------
   Reveal-on-scroll
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------
   Keyframes & hero entrance
   --------------------------------------------------------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-22px) rotate(1deg); }
}

.hero-title, .hero-sub { animation: heroRise 1s cubic-bezier(.22,.61,.36,1) both; }
.hero-title { animation-delay: .15s; }
.hero-sub   { animation-delay: .35s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-floater { animation: none !important; }
  .hero-title, .hero-sub { animation: none; }
}

/* Social pills */
.social-pill:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(65,32,15,0.12);
  border-color: var(--aohp-border-gold) !important;
}

/* ---------------------------------------------------------
   Responsive — inline grids/flex need !important to override
   --------------------------------------------------------- */
@media (max-width: 880px) {
  #root { --sec-pv: 78px; }
}

@media (max-width: 760px) {
  #root { --sec-pv: 60px; }
  .container, .container-wide { padding-inline: 20px; }
  .brand-word { font-size: 17px !important; }
}

@media (max-width: 520px) {
  .brand-word { display: none !important; }
  .header-btn { padding: 10px 18px !important; font-size: 12px !important; }

  /* hero: hide floating verses, tighten countdown */
  .hero-floater { display: none; }
  .countdown { gap: 12px !important; }
  .countdown > div { min-width: 50px !important; }

  /* waitlist form stacks: pill becomes a soft card, button full width */
  .waitlist-form { border-radius: 24px !important; padding: 14px 16px !important; }
  .waitlist-form input { min-width: 0 !important; flex-basis: 100% !important; padding: 8px 6px !important; }
  .waitlist-form .btn { width: 100%; }

  /* footer stacks */
  .footer-row { flex-direction: column; align-items: flex-start !important; gap: 16px !important; }
}