/* =====================================================
   Franklin's Flame — Pre-Launch Landingpage
   style.css
   ===================================================== */

/* ===== TOKENS ===== */
:root {
  --green-deep: #1F3A2C;
  --green-mid: #2A4A39;
  --gold: #B8985A;
  --gold-light: #D4B976;
  --bg-main: #F2EBDD;
  --bg-warm: #EDE5D2;
  --bg-cream: #F6F0E2;
  --bg-card: #FBF7EE;
  --ink: #1A1A17;
  --ink-soft: #4A4A45;
  --ink-mute: #7A786F;
  --line: rgba(31,58,44,0.12);
}

/* ===== BASE / RESET ===== */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; overflow-x:hidden; }
body {
  background:var(--bg-main);
  color:var(--ink);
  font-family:'Inter', -apple-system, sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ===== STAGE / BACKGROUND ===== */
.stage {
  position:relative;
  min-height:100svh;
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
  display:grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(ellipse 55% 70% at 78% 50%, rgba(31,58,44,0.16), transparent 65%),
    radial-gradient(ellipse 50% 60% at 18% 85%, rgba(184,152,90,0.14), transparent 60%),
    radial-gradient(ellipse 45% 55% at 82% 8%, rgba(184,152,90,0.10), transparent 55%),
    radial-gradient(ellipse 60% 45% at 5% 25%, rgba(31,58,44,0.10), transparent 60%),
    linear-gradient(150deg, var(--bg-cream) 0%, var(--bg-main) 45%, var(--bg-warm) 100%);
}
.stage::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(184,152,90,0.06) 0%, transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(31,58,44,0.10) 0%, transparent 42%);
  z-index:0; pointer-events:none; mix-blend-mode:multiply;
}
.grain {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0.32; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(31,58,44,0.10) 1px, transparent 1px);
  background-size:3px 3px;
}
.aura {
  position:absolute; inset:-15% -10%;
  z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 65% at 75% 55%, rgba(184,152,90,0.18), transparent 60%);
  -webkit-filter:blur(30px);
  filter:blur(30px);
  animation:auraDrift 14s ease-in-out infinite;
}
@keyframes auraDrift {
  0%, 100% { transform:translate(0,0) scale(1); opacity:0.85; }
  50%      { transform:translate(-2%, 1.5%) scale(1.05); opacity:1; }
}

/* ===== BRAND MARK (top center) ===== */
.brand-mark {
  position:relative;
  z-index:6;
  display:flex; align-items:center;
  justify-content:center;
  gap:14px;
  padding:34px 24px 0;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:6px;
  color:var(--green-deep);
  font-weight:600;
  text-transform:uppercase;
}
.brand-mark::before,
.brand-mark::after {
  content:'';
  width:34px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ===== HERO — flexible 2-column grid ===== */
.hero {
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(220px, 1.1fr);
  align-items:center;
  gap:60px;
  width:min(100% - 32px, 1280px);
  margin:0 auto;
  padding:60px 0;
}

/* ===== CONTENT (left column) ===== */
.content { width:100%; max-width:560px; }

.badge {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  background:rgba(31,58,44,0.06);
  border:1px solid var(--line);
  margin-bottom:22px;
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:3px;
  color:var(--green-deep);
  text-transform:uppercase;
}
.badge .dot {
  width:6px; height:6px;
  background:var(--green-deep);
  border-radius:50%;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(1.4); }
}

.eyebrow {
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:5px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.eyebrow::after {
  content:'';
  width:32px; height:1px;
  background:var(--gold);
  opacity:0.6;
}

h1.headline {
  font-family:'Cormorant Garamond', serif;
  font-weight:300;
  font-size:clamp(38px, 6.4vw, 92px);
  line-height:0.96;
  letter-spacing:-1px;
  color:var(--ink);
  margin-bottom:18px;
}
h1.headline em {
  font-style:italic;
  color:var(--green-deep);
}

.subline {
  font-family:'Cinzel', serif;
  font-size:12px;
  letter-spacing:5px;
  color:var(--green-deep);
  margin-bottom:26px;
  text-transform:uppercase;
  font-weight:500;
}

.lede {
  font-size:15px;
  line-height:1.75;
  color:var(--ink-soft);
  margin-bottom:24px;
  max-width:480px;
}

.micro-note {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:3px;
  color:var(--ink-mute);
  text-transform:uppercase;
  margin-bottom:28px;
}
.micro-note::before {
  content:'';
  width:6px; height:6px;
  background:var(--gold);
  border-radius:50%;
  flex-shrink:0;
}

/* ===== FORM ===== */
.signup-form {
  width:100%;
  max-width:480px;
  background:var(--bg-card);
  border:1px solid var(--line);
  padding:26px;
  box-shadow:0 30px 60px rgba(31,58,44,0.10), 0 8px 18px rgba(31,58,44,0.06);
  position:relative;
}
.signup-form::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.form-row { margin-bottom:10px; }
.form-input {
  width:100%;
  background:var(--bg-main);
  border:1px solid var(--line);
  color:var(--ink);
  padding:14px 18px;
  font-family:'Inter', sans-serif;
  font-size:14px;
  outline:none;
  transition:border-color 0.3s, background 0.3s;
  min-height:48px;
}
.form-input::placeholder { color:var(--ink-mute); opacity:0.6; }
.form-input:focus {
  border-color:var(--green-deep);
  background:var(--bg-card);
}
.submit-btn {
  width:100%;
  background:var(--green-deep);
  color:var(--bg-main);
  border:1px solid var(--green-deep);
  padding:18px;
  font-family:'Cinzel', serif;
  font-size:11.5px;
  letter-spacing:3px;
  cursor:pointer;
  transition:all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  text-transform:uppercase;
  margin-top:6px;
  position:relative;
  overflow:hidden;
  font-weight:500;
  min-height:52px;
}
.submit-btn::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(184,152,90,0.18) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform 0.9s ease;
}
.submit-btn:hover:not(:disabled)::before { transform:translateX(100%); }
.submit-btn:hover:not(:disabled) {
  background:var(--green-mid);
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(31,58,44,0.22);
}
.submit-btn:disabled { opacity:0.6; cursor:not-allowed; }

.form-hint {
  font-size:11px;
  color:var(--ink-mute);
  letter-spacing:0.3px;
  margin-top:12px;
  text-align:center;
  line-height:1.6;
}

.form-success {
  display:none;
  background:rgba(31,58,44,0.08);
  border:1px solid var(--green-deep);
  padding:14px 16px;
  color:var(--green-deep);
  font-size:13px;
  line-height:1.6;
  margin-top:10px;
  text-align:center;
}
.form-success.show { display:block; animation:fadeIn 0.6s ease; }
.form-success strong {
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:2.5px;
  display:block;
  margin-bottom:5px;
  text-transform:uppercase;
  color:var(--gold);
}
.form-failure {
  display:none;
  background:rgba(178,58,58,0.08);
  border:1px solid rgba(178,58,58,0.4);
  padding:12px 14px;
  color:#B23A3A;
  font-size:12.5px;
  margin-top:10px;
  text-align:center;
}
.form-failure.show { display:block; }
@keyframes fadeIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ===== VISUAL / BOTTLE (right column) ===== */
.visual {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}
.visual-glow {
  position:absolute; inset:-10%;
  background:radial-gradient(ellipse 60% 75% at 50% 50%, rgba(31,58,44,0.22), transparent 62%);
  -webkit-filter:blur(30px);
  filter:blur(30px);
  z-index:0;
  pointer-events:none;
  animation:glowPulse 7s ease-in-out infinite;
}
.visual-glow-gold {
  position:absolute; inset:5% 10%;
  background:radial-gradient(ellipse 50% 40% at 50% 65%, rgba(184,152,90,0.12), transparent 70%);
  -webkit-filter:blur(24px);
  filter:blur(24px);
  z-index:0;
  pointer-events:none;
  animation:glowPulse 9s ease-in-out infinite reverse;
}
@keyframes glowPulse {
  0%, 100% { opacity:0.75; transform:scale(1); }
  50%      { opacity:1;    transform:scale(1.06); }
}
.bottle {
  position:relative;
  z-index:2;
  width:clamp(180px, 42vw, 560px);
  animation:floatBottle 8s ease-in-out infinite;
}
.bottle img {
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  /* Safari: blur > ~40px on transparent PNGs triggers rendering failure;
     transform:translateZ(0) forces GPU compositing layer */
  transform:translateZ(0);
  -webkit-filter:
    drop-shadow(0 30px 40px rgba(31,58,44,0.40))
    drop-shadow(0 12px 20px rgba(0,0,0,0.18));
  filter:
    drop-shadow(0 30px 40px rgba(31,58,44,0.40))
    drop-shadow(0 12px 20px rgba(0,0,0,0.18));
}
@keyframes floatBottle {
  0%, 100% { transform:translateY(0) rotate(-0.3deg); }
  50%      { transform:translateY(-22px) rotate(0.3deg); }
}

/* ===== FOOTER ===== */
.foot {
  position:relative;
  z-index:6;
  text-align:center;
  padding:18px 24px 22px;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:13px;
  color:var(--ink-mute);
  letter-spacing:0.3px;
}
.foot .sep {
  display:inline-block;
  margin:0 10px;
  color:var(--gold);
  opacity:0.6;
}

/* ===== REVEAL ANIMATIONS ===== */
.reveal {
  opacity:0;
  transform:translateY(16px);
  animation:revealIn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.reveal.r1 { animation-delay:0.10s; }
.reveal.r2 { animation-delay:0.20s; }
.reveal.r3 { animation-delay:0.30s; }
.reveal.r4 { animation-delay:0.40s; }
.reveal.r5 { animation-delay:0.50s; }
.reveal.r6 { animation-delay:0.60s; }
.reveal.r7 { animation-delay:0.70s; }
.reveal.r8 { animation-delay:0.18s; }
@keyframes revealIn {
  to { opacity:1; transform:translateY(0); }
}

/* =====================================================
   RESPONSIVE — clean breakpoints
   1000px : smaller laptops / tablets landscape
    800px : tablet / large phone landscape
    520px : small phones (single column)
   ===================================================== */

/* ---------- ≤ 1000px : laptop / tablet ---------- */
@media (max-width: 1000px) {
  .hero {
    gap:40px;
    padding:48px 0;
  }
  h1.headline { font-size:clamp(38px, 6.6vw, 72px); }
  .lede       { font-size:14.5px; line-height:1.7; }
  .bottle     { width:clamp(180px, 42vw, 460px); }
  .brand-mark { padding:28px 24px 0; }
}

/* ---------- ≤ 800px : tablet / mobile (still 2-col) ---------- */
@media (max-width: 800px) {
  .hero {
    grid-template-columns: minmax(240px, 1fr) minmax(160px, 0.9fr);
    gap:20px;
    padding:24px 0;
  }
  h1.headline { font-size:clamp(36px, 7vw, 56px); margin-bottom:14px; }
  .subline    { margin-bottom:18px; font-size:11px; letter-spacing:4px; }
  .lede       { font-size:14px; line-height:1.65; margin-bottom:18px; max-width:none; }
  .micro-note { margin-bottom:20px; }
  .badge      { margin-bottom:16px; }
  .eyebrow    { margin-bottom:14px; }
  .signup-form { padding:20px; }
  .bottle     { width:clamp(170px, 40vw, 340px); }
  .brand-mark { padding:18px 20px 0; font-size:10px; letter-spacing:5px; }
  .brand-mark::before, .brand-mark::after { width:26px; }
  .foot       { font-size:12px; padding:16px 20px 20px; }
}

/* ---------- ≤ 520px : small phones (single column) ---------- */
@media (max-width: 520px) {
  .hero {
    grid-template-columns: 1fr;
    gap:10px;
    padding:8px 0 24px;
    text-align:left;
  }
  .visual { order:-1; margin-bottom:-4px; }
  .bottle { width:clamp(180px, 56vw, 260px); }

  .content     { max-width:100%; }
  .signup-form { max-width:none; padding:18px; }
  .lede        { font-size:14px; max-width:none; }

  h1.headline {
    font-size:clamp(38px, 11vw, 56px);
    margin-bottom:12px;
  }
  .subline    { margin-bottom:14px; }
  .badge      { padding:6px 14px; font-size:9px; letter-spacing:2.5px; margin-bottom:12px; margin-top:2px; }
  .eyebrow    { font-size:10px; letter-spacing:4px; margin-bottom:12px; }
  .micro-note { font-size:9px; letter-spacing:2.5px; margin-bottom:16px; }

  .form-input { padding:12px 14px; font-size:14px; min-height:46px; }
  .submit-btn { padding:15px; font-size:11px; letter-spacing:1.6px; min-height:50px; }
  .form-hint  { text-align:left; font-size:10.5px; }

  .brand-mark { padding:14px 18px 0; font-size:9.5px; letter-spacing:4.5px; }
  .brand-mark::before, .brand-mark::after { width:22px; }

  .foot       { font-size:11px; padding:12px 16px 16px; }
  .foot .sep  { margin:0 6px; }
}