/* ==========================================================================
   Wolfside Urban Market — pre-launch hero
   Single viewport, no scroll. Brand kit is the official 3-color system:
   teal #004643 / cream #F0EDE5 / charcoal #414142. No orange in UI chrome
   (illustration food colors — cheese gold, bottle cap, etc. — are
   representational, not brand accents, so they're exempt).
   Vanilla CSS + SVG + JS. No frameworks, no build step.
   ========================================================================== */

:root {
  --teal: #004643;
  --teal-light: #3f7d72;
  --teal-soft: rgba(0, 70, 67, 0.10);
  --cream: #f0ede5;
  --charcoal: #414142;
  --font-display: "Yeseva One", Georgia, serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cream);
}
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  opacity: 0;
  animation: pageFade 0.5s ease forwards;
  display: flex;
  flex-direction: column;
}
@keyframes pageFade { to { opacity: 1; } }

/* ---- animated premium background glow ---- */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  animation: blobFade 1.8s ease forwards 0.2s, blobDrift 22s ease-in-out infinite 2s;
}
.blob-teal {
  width: 46vw;
  height: 46vw;
  left: -10vw;
  top: -8vw;
  background: radial-gradient(circle, rgba(0, 70, 67, 0.16), transparent 70%);
  --dx: 4vw; --dy: 3vw;
}
.blob-charcoal {
  width: 34vw;
  height: 34vw;
  right: 4vw;
  top: 12vw;
  background: radial-gradient(circle, rgba(65, 65, 66, 0.10), transparent 70%);
  animation-duration: 1.8s, 26s;
  animation-delay: 0.4s, 3s;
  --dx: -3vw; --dy: 4vw;
}
.blob-teal-2 {
  width: 30vw;
  height: 30vw;
  left: 30vw;
  bottom: -12vw;
  background: radial-gradient(circle, rgba(0, 70, 67, 0.10), transparent 70%);
  animation-duration: 1.8s, 19s;
  animation-delay: 0.6s, 2.5s;
  --dx: 3vw; --dy: -3vw;
}
@keyframes blobFade { to { opacity: 1; } }
@keyframes blobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(var(--dx), var(--dy)) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .blob { animation: blobFade 1.8s ease forwards 0.2s !important; }
}

/* faint paper grain */
.grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 min(6vw, 72px);
  overflow: hidden;
}

/* ---- copy column ---- */
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 480px;
  flex: 0 0 auto;
}

.brand-mark {
  margin: 0 0 20px;
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
  animation-delay: 0.15s;
}
.brand-logo {
  height: 62px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 70, 67, 0.14));
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
  animation-delay: 0.55s;
}
.eyebrow-line {
  display: inline-block;
  width: 30px;
  height: 2px;
  background: var(--charcoal);
  transform: scaleX(0);
  transform-origin: left;
  animation: lineDraw 0.7s ease forwards;
  animation-delay: 0.35s;
}
@keyframes lineDraw { to { transform: scaleX(1); } }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.headline {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--teal);
  font-size: clamp(2.4rem, 4.4vw + 1rem, 5.6rem);
  line-height: 1.06;
}
.mask {
  display: block;
  overflow: hidden;
}
.mask .line {
  display: block;
  transform: translateY(115%);
  animation: lineReveal 1s cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
}
.mask[data-step="2"] .line { animation-delay: 0.9s; }
.mask[data-step="3"] .line { animation-delay: 1.15s; }
@keyframes lineReveal { to { transform: translateY(0); } }

.supporting {
  margin: 0 0 14px;
  max-width: 420px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--charcoal);
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
  animation-delay: 2.55s;
}
.supporting .highlight {
  display: block;
  margin-top: 4px;
  color: var(--teal);
  font-weight: 600;
}
.descriptor {
  margin: 0 0 34px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
  animation-delay: 2.7s;
}
.descriptor .sep { color: var(--teal-light); margin: 0 8px; }

.signup {
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
  animation-delay: 3.05s;
}

/* ---- CTA (opens the signup modal) ---- */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 278px;
  max-width: 100%;
  height: 54px;
  padding: 0 22px;
  border: none;
  border-radius: 8px;
  background: var(--teal);
  color: var(--cream);
  font-family: var(--font-body);
  cursor: pointer;
  appearance: none;
  text-align: center;
}
.cta:active { transform: scale(0.98); }

.cta-label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cta-arrow {
  color: var(--cream);
  font-size: 1rem;
  transition: transform 0.25s ease;
}
.cta:hover .cta-arrow { transform: translateX(4px); }

.cta-note {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--charcoal);
  opacity: 0.75;
}

/* ---- signup modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 24, 23, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease;
}
.modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(600px, 92vh);
  overflow-y: auto;
  background: var(--cream);
  border-radius: 16px;
  padding: 36px 30px 30px;
  box-shadow: 0 24px 60px -16px rgba(0, 20, 18, 0.4);
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.16, 0.9, 0.3, 1), opacity 0.28s ease;
}
.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.modal-close:hover { background: rgba(0, 70, 67, 0.08); }

.modal-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin: 0 0 14px;
  filter: drop-shadow(0 2px 4px rgba(0, 70, 67, 0.18));
}
.modal-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  color: var(--teal);
  font-size: 1.6rem;
  line-height: 1.15;
}
.modal-copy {
  margin: 0 0 22px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--charcoal);
  opacity: 0.85;
  max-width: 42ch;
}

.modal-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.modal-input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid rgba(65, 65, 66, 0.22);
  border-radius: 8px;
  background: #fff;
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px; /* prevents iOS zoom-on-focus */
  outline: none;
  transition: border-color 0.2s ease;
}
.modal-input:focus { border-color: var(--teal); }
.modal-input.is-invalid { border-color: #b3261e; }

.modal-error {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: #b3261e;
}

.modal-submit {
  position: relative;
  width: 100%;
  height: 52px;
  margin-top: 18px;
  border: none;
  border-radius: 8px;
  background: var(--teal);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-submit:disabled { opacity: 0.75; cursor: default; }
.modal-submit-label { transition: opacity 0.15s ease; }
.modal-submit.is-loading .modal-submit-label { opacity: 0; }
.modal-spinner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(240, 237, 229, 0.35);
  border-top-color: var(--cream);
  opacity: 0;
}
.modal-submit.is-loading .modal-spinner {
  opacity: 1;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.modal-view.modal-success { text-align: left; }
.modal-success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 0 16px;
}
.modal-done {
  width: 100%;
  height: 52px;
  margin-top: 20px;
  border: 1.5px solid var(--teal);
  border-radius: 8px;
  background: transparent;
  color: var(--teal);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal { transition: opacity 0.15s ease !important; transform: none !important; }
}

@media (max-width: 480px) {
  .modal { padding: 30px 22px 24px; border-radius: 14px; }
}

/* ---- brand world (hero illustration: the real logo artwork) ---- */
.brand-world {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  max-width: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.breathe-wrap {
  animation: breathe 9s ease-in-out infinite;
  animation-delay: 2.4s;
}
@keyframes breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(0.4deg); }
}
.hero-illustration {
  position: relative;
  width: min(36vw, 380px);
  perspective: 1400px;
  opacity: 0;
  animation: heroArtReveal 1s cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
  animation-delay: 0.5s;
  /* rotateX/rotateY tilt is applied here via JS inline style on hover */
}
.hero-illustration-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 32px rgba(0, 70, 67, 0.22));
}
@keyframes heroArtReveal {
  from { opacity: 0; transform: scale(0.92) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- background line-art motif field ---- */
.motif-field {
  position: absolute;
  inset: -10% -6%;
  width: 112%;
  height: 120%;
  z-index: 1;
  pointer-events: none;
}
.motif {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  animation: motifFade 0.6s ease forwards var(--ddelay), motifFloat var(--mdur) ease-in-out infinite var(--ddelay);
  transform-origin: center;
}
.motif.accent { stroke: var(--charcoal); }
.motif path,
.motif rect,
.motif circle,
.motif ellipse {
  transition: stroke-dashoffset 1.3s cubic-bezier(0.16, 0.9, 0.3, 1);
}
@keyframes motifFade { to { opacity: 0.09; } }
.motif.accent { animation-name: motifFadeAccent, motifFloat; }
@keyframes motifFadeAccent { to { opacity: 0.16; } }
@keyframes motifFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(var(--mx), var(--my)) rotate(var(--mr)); }
}

/* ---- particles ---- */
.particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0;
  animation: particleFade 1s ease forwards var(--pdelay), particleDrift var(--pdur) ease-in-out infinite var(--pdelay);
}
.particle.accent { background: var(--charcoal); }
@keyframes particleFade { to { opacity: var(--pop, 0.35); } }
@keyframes particleDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--px), var(--py)); }
}

/* ---- full-page decorative vector field (wine, cheese, bread, deli motifs) ---- */
.vector-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.vf-icon {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  animation: vfFade 1.4s ease forwards var(--vdelay), motifFloat var(--vdur) ease-in-out infinite var(--vdelay);
  transform-origin: center;
}
.vf-icon.accent { stroke: var(--charcoal); }
@keyframes vfFade { to { opacity: var(--vop, 0.07); } }

@media (prefers-reduced-motion: reduce) {
  .vf-icon { animation: vfFade 1s ease forwards !important; }
}

@media (max-width: 860px) {
  .vf-icon:nth-child(n+7) { display: none; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .breathe-wrap { animation: none !important; }
  .motif, .particle { animation: motifFade 0.6s ease forwards, particleFade 1s ease forwards !important; }
  .hero-illustration { animation: heroArtRevealSimple 0.6s ease forwards !important; }
  @keyframes heroArtRevealSimple { from { opacity: 0; } to { opacity: 1; transform: none; } }
  .mask .line { animation: fadeUp 0.6s ease forwards !important; transform: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---- responsive ---- */
@media (max-width: 980px) {
  .headline { font-size: clamp(2.1rem, 7vw, 3.4rem); }
  .brand-world { max-width: 44vw; }
}

@media (max-width: 860px) {
  html, body { height: auto; min-height: 100%; overflow: visible; }
  .hero {
    flex-direction: column;
    justify-content: flex-start;
    padding: 32px 24px 28px;
    gap: 6px;
    overflow-y: visible;
  }
  .hero-copy { max-width: 560px; padding-top: 4px; text-align: center; margin: 0 auto; }
  .eyebrow { justify-content: center; }
  .headline { font-size: clamp(2.3rem, 9vw, 3.1rem); }
  .supporting { font-size: 0.94rem; }
  .brand-world {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
    min-height: 38vh;
  }
  .hero-illustration { width: min(62vw, 300px); }
  .motif:nth-child(n+6) { display: none; }
  .cta, .cta.is-form { width: min(100%, 320px); }
  .signup { text-align: center; }
}

@media (min-width: 861px) and (max-height: 720px) {
  .headline { font-size: clamp(2rem, 4vw + 0.6rem, 4.2rem); }
  .eyebrow { margin-bottom: 14px; }
  .supporting, .descriptor { margin-bottom: 10px; }
}

/* ---- footer ---- */
.site-footer {
  position: relative;
  z-index: 2;
  flex: none;
  background: var(--teal);
  color: var(--cream);
  padding: 14px min(6vw, 72px);
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
  animation-delay: 3.3s;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 0.78rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  margin-right: 4px;
}
.footer-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  flex: none;
}
.footer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(240, 237, 229, 0.85);
}
.footer-email { color: rgba(240, 237, 229, 0.85); text-decoration: none; }
.footer-email:hover { text-decoration: underline; }
.footer-dot { opacity: 0.5; }
.footer-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.footer-copy { color: rgba(240, 237, 229, 0.65); white-space: nowrap; }
.footer-social { display: flex; align-items: center; gap: 8px; }
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(240, 237, 229, 0.3);
  color: var(--cream);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.social-icon svg { width: 15px; height: 15px; }
.social-icon:hover { background: rgba(240, 237, 229, 0.14); border-color: rgba(240, 237, 229, 0.5); }

@media (max-width: 640px) {
  .footer-inner { justify-content: center; text-align: center; }
  .footer-info { justify-content: center; }
  .footer-right { justify-content: center; }
}