/* ==========================================================
   Cherry Grove — 30-Iteration Blitz
   Revenue mechanics, FOMO, conversion, polish
   ========================================================== */

/* === ITERATION 1: Custom branded scrollbar === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold) 0%, var(--rose) 100%);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
html { scrollbar-color: var(--gold) var(--ink-2); scrollbar-width: thin; }

/* === ITERATION 2: Preloader === */
.preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-brand {
  font-family: 'Cinzel', serif; font-size: clamp(1.4rem,3vw,2rem);
  letter-spacing: 0.4em; color: var(--gold); margin-bottom: 2rem;
  animation: heroTextIn 1s ease-out 0.2s both;
}
.preloader-bar { width: 200px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.preloader-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--rose)); animation: preloadFill 1.6s ease-in-out forwards; }
@keyframes preloadFill { 0%{width:0} 100%{width:100%} }
.preloader-sub {
  margin-top: 1.2rem; font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 0.95rem; color: var(--mist);
  animation: heroTextIn 0.8s ease-out 0.6s both;
}

/* === ITERATION 3: Urgency bar === */
.urgency-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 160;
  background: linear-gradient(90deg, rgba(44,34,24,0.96), rgba(60,40,28,0.96));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 0.65rem 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  border-top: 1px solid rgba(184,137,68,0.3);
  transform: translateY(100%); transition: transform 0.5s ease;
}
.urgency-bar.visible { transform: translateY(0); }
.urgency-pulse { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex-shrink: 0; animation: uPulse 2s ease-in-out infinite; }
@keyframes uPulse { 0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0.5)} 50%{box-shadow:0 0 0 8px rgba(74,222,128,0)} }
.urgency-text { font-family:'Cormorant Garamond',serif; font-size:0.95rem; color:var(--light); text-align:center; }
.urgency-text strong { color:var(--gold); font-family:'Cinzel',serif; font-size:0.8rem; letter-spacing:0.1em; }
.urgency-cta { font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:0.25em; text-transform:uppercase; color:#2c2218; background:var(--gold); padding:0.45rem 1.2rem; border:none; cursor:pointer; text-decoration:none; transition:background 0.2s ease; flex-shrink:0; border-radius:2px; }
.urgency-cta:hover { background:var(--gold-soft); }
.urgency-bar.visible ~ .floating-cta.visible, .urgency-bar.visible ~ #floatingReply.visible { bottom: 4rem; }
.urgency-bar.visible ~ .affirmation-bar.visible, .urgency-bar.visible ~ #affirmationBar.visible { bottom: 4rem; }
@media (max-width:640px) { .urgency-bar { flex-wrap:wrap; gap:0.5rem; padding:0.6rem 1rem; } }

/* === ITERATION 4: Glassmorphism cards === */
.pillar, .bonus-card, .benefit-card, .team-card, .work-card {
  background: rgba(255,246,225,0.42) !important;
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(184,137,68,0.18) !important;
}

/* === ITERATION 5: Animated gradient borders === */
@keyframes gradBorder {
  0%{border-color:var(--gold)} 33%{border-color:var(--rose)} 66%{border-color:var(--sage)} 100%{border-color:var(--gold)}
}
.tldr-row { animation: gradBorder 6s ease-in-out infinite; }
.tldr-row:nth-child(2) { animation-delay: 2s; }
.tldr-row:nth-child(3) { animation-delay: 4s; }

/* === ITERATION 6: Confetti canvas === */
#confettiCanvas { position: fixed; inset: 0; z-index: 9990; pointer-events: none; }

/* === ITERATION 7: Social proof ticker === */
.social-proof-ticker {
  overflow: hidden; padding: 1.1rem 0;
  background: rgba(44,34,24,0.03);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.ticker-track {
  display: flex; gap: 3rem; width: max-content;
  animation: tickerScroll 35s linear infinite;
}
@keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-item {
  flex-shrink: 0; display: flex; align-items: center; gap: 0.6rem;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; color: var(--mist); white-space: nowrap;
}
.ticker-star { color: var(--gold); font-size: 0.85rem; }

/* === ITERATION 8: Spots remaining badge === */
.spots-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 1.1rem;
  background: linear-gradient(135deg, rgba(74,222,128,0.10), rgba(184,137,68,0.10));
  border: 1px solid rgba(74,222,128,0.28);
  border-radius: 999px;
  font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--light); margin-bottom: 1.2rem;
}
.spots-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: uPulse 2s ease-in-out infinite; }

/* === ITERATION 9: LIVE badge in topbar === */
.live-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.25rem 0.7rem;
  background: rgba(74,222,128,0.06);
  border: 1px solid rgba(74,222,128,0.22);
  border-radius: 999px;
  font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: #4ade80;
}
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; animation: uPulse 1.5s ease-in-out infinite; }

/* === ITERATION 10: Revenue comparison bars === */
.rev-compare { margin: 3rem 0; display: flex; flex-direction: column; gap: 1.4rem; }
.rev-row { display: grid; grid-template-columns: 140px 1fr 90px; gap: 1rem; align-items: center; }
@media(max-width:640px) { .rev-row { grid-template-columns: 1fr; gap: 0.3rem; } }
.rev-label { font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--mist); }
.rev-bar-wrap { height: 30px; background: rgba(255,246,225,0.45); border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; }
.rev-bar { height: 100%; border-radius: 3px; width: 0; transition: width 1.8s cubic-bezier(0.4,0,0.2,1); display: flex; align-items: center; padding: 0 0.8rem; }
.rev-bar.solo { background: linear-gradient(90deg, var(--mist-soft), var(--mist)); }
.rev-bar.house { background: linear-gradient(90deg, var(--gold), var(--rose)); }
.rev-bar-label { font-family:'Inter',sans-serif; font-size:0.65rem; font-weight:500; color:#fff; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,0.3); }
.rev-val { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.2rem; text-align:right; }
.rev-val.gold { color:var(--gold); }

/* === ITERATION 11: Earnings growth chart === */
.earnings-chart { margin: 2.5rem 0; padding: 1.5rem; border: 1px solid var(--line); background: rgba(255,246,225,0.5); border-radius: 4px; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-line.solo { stroke: var(--mist); stroke-dasharray: 4 4; }
.chart-line.house { stroke: var(--gold); }
.chart-area { opacity: 0.12; }
.chart-area.solo { fill: var(--mist); }
.chart-area.house { fill: var(--gold); }
@keyframes chartDraw { from{stroke-dashoffset:800} to{stroke-dashoffset:0} }
.chart-line.animate { stroke-dasharray: 800; animation: chartDraw 2.2s ease-out forwards; }
.chart-label { font-family:'Cinzel',serif; font-size:8px; letter-spacing:0.15em; text-transform:uppercase; }
.chart-val { font-family:'Cormorant Garamond',serif; font-size:11px; font-weight:500; }

/* === ITERATION 12: Mesh gradient backgrounds === */
@keyframes meshShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.vision { background: linear-gradient(-45deg, var(--ink), var(--ink-2), rgba(149,165,133,0.08), var(--ink)) !important; background-size: 400% 400% !important; animation: meshShift 15s ease infinite; }
.bonuses { background: linear-gradient(-45deg, var(--ink), rgba(232,180,138,0.08), var(--ink), rgba(196,122,107,0.06)) !important; background-size: 400% 400% !important; animation: meshShift 18s ease infinite; }
.ask { background: linear-gradient(-45deg, var(--ink-2), var(--ink), rgba(232,180,138,0.10), var(--ink-2)) !important; background-size: 400% 400% !important; animation: meshShift 20s ease infinite; }

/* === ITERATION 13: Apply interest form === */
.apply-card {
  margin: 3rem auto 0; max-width: 480px; padding: 2.5rem 2rem;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, rgba(255,246,225,0.92), rgba(232,218,188,0.85));
  text-align: center;
  box-shadow: 0 16px 50px rgba(60,40,28,0.15);
  position: relative;
  animation: borderGlow 5s ease-in-out infinite;
}
.apply-card::before { content:''; position:absolute; inset:6px; border:1px solid var(--line); pointer-events:none; }
.apply-title { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.35em; text-transform:uppercase; color:var(--gold); margin:0 0 0.8rem; }
.apply-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem; color:var(--mist); margin:0 0 1.5rem; line-height:1.5; }
.apply-field { display:flex; border:1px solid var(--gold); margin-bottom:0.8rem; }
.apply-field input { flex:1; background:rgba(255,246,225,0.8); border:none; outline:none; padding:0.85rem 1rem; font-family:'Inter',sans-serif; font-size:0.95rem; color:var(--cream); }
.apply-field input::placeholder { color:var(--mist-soft); font-style:italic; }
.apply-btn { background:linear-gradient(135deg,var(--gold),var(--rose)); color:#2c2218; border:none; font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; padding:0 1.4rem; cursor:pointer; transition:filter 0.2s ease; font-weight:500; }
.apply-btn:hover { filter:brightness(1.1); }
.apply-note { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.82rem; color:var(--mist-soft); margin:0; }
.apply-form.sent .apply-field, .apply-form.sent .apply-note { display:none; }
.apply-confirm { display:none; padding:1rem 0 0; }
.apply-form.sent .apply-confirm { display:block; }
.apply-confirm p { font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--gold); margin:0 0 0.5rem; }
.apply-confirm .small { font-size:0.95rem; color:var(--mist); font-style:italic; }

/* === ITERATION 14: Comparison table === */
.compare-table { width:100%; border-collapse:collapse; margin:2.5rem 0; }
.compare-table th { font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); padding:0.9rem 1rem; text-align:left; border-bottom:2px solid var(--gold); }
.compare-table th:nth-child(2), .compare-table th:nth-child(3) { text-align:center; }
.compare-table td { padding:0.85rem 1rem; border-bottom:1px solid var(--line-soft); font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--cream); }
.compare-table td:nth-child(2) { text-align:center; color:var(--mist); }
.compare-table td:nth-child(3) { text-align:center; font-weight:500; color:var(--gold); }
.compare-table tr:hover td { background:rgba(184,137,68,0.04); }
.compare-table .strike { text-decoration:line-through; color:var(--mist-soft); }
.compare-table .free-tag { display:inline-block; padding:0.1rem 0.5rem; background:var(--gold); color:#2c2218; font-family:'Cinzel',serif; font-size:0.5rem; letter-spacing:0.15em; text-transform:uppercase; vertical-align:middle; }

/* === ITERATION 15: Reading time tooltip === */
.read-time-tip {
  position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 201;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.75rem;
  color:var(--mist-soft); opacity:0; transition:opacity 0.3s ease; pointer-events:none;
}
.read-time-tip.visible { opacity:1; }

/* === ITERATION 16: Topbar scroll shadow === */
.topbar.scrolled { box-shadow: 0 2px 20px rgba(184,137,68,0.10); }

/* === ITERATION 17: Brand hover underline === */
.brand { position: relative; }
.brand::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:var(--gold); transition:width 0.4s ease; }
.brand:hover::after { width:100%; }

/* === ITERATION 18: FAQ open enhancement === */
.faq-item[open] summary { color:var(--gold); padding-bottom:0.8rem; }

/* === ITERATION 19: Perk row hover === */
.perk-title { transition:color 0.2s ease; }
.perks li:hover .perk-title { color:var(--rose); }
.perks li { transition:background 0.2s ease; }
.perks li:hover { background:rgba(184,137,68,0.03); }

/* === ITERATION 20: Map fact hover === */
.map-fact { transition:transform 0.3s ease, box-shadow 0.3s ease; }
.map-fact:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(60,40,28,0.10); }

/* === ITERATION 21: Week block hover === */
.we-block { transition:transform 0.2s ease; }
.we-block:hover { transform:translateX(3px); }

/* === ITERATION 22: Privacy item gold accent === */
.privacy-list li { transition:transform 0.3s ease, border-color 0.3s ease; }
.privacy-list li:hover { border-color:var(--gold); }

/* === ITERATION 23: Certificate hover float === */
.certificate { transition:transform 0.4s ease, box-shadow 0.4s ease; }
.certificate:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(60,40,28,0.22); }

/* === ITERATION 24: SweatHouz photo zoom === */
.swthz-feature img { transition:transform 0.6s ease; }
.swthz-feature:hover img { transform:scale(1.03); }
.swthz-hero img { transition:transform 0.6s ease; }
.swthz-hero:hover img { transform:scale(1.02); }

/* === ITERATION 25: Comparison highlight pulse === */
@keyframes highlightPulse {
  0%,100% { background:linear-gradient(180deg,rgba(232,180,138,0.18),rgba(255,246,225,0.7)); }
  50% { background:linear-gradient(180deg,rgba(232,180,138,0.28),rgba(255,246,225,0.85)); }
}
.vi-compare-row.highlight { animation:highlightPulse 4s ease-in-out infinite; }

/* === ITERATION 26: Enhanced gallery hover === */
.g-cell { transition:transform 0.4s ease, box-shadow 0.4s ease; }
.g-cell:hover { transform:scale(1.02); }

/* === ITERATION 27: Stat pop animation === */
@keyframes statPop {
  0%{transform:scale(0.85);opacity:0} 60%{transform:scale(1.04)} 100%{transform:scale(1);opacity:1}
}

/* === ITERATION 28: Section eyebrow glow === */
.section-eyebrow { transition:text-shadow 0.3s ease; }
.section:hover .section-eyebrow { text-shadow:0 0 12px rgba(184,137,68,0.3); }

/* === ITERATION 29: Mockup screen shimmer === */
@keyframes screenShimmer {
  0%{background-position:-200% 0} 100%{background-position:200% 0}
}
.mockup-page { position:relative; }
.mockup-page::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,0.06) 50%,transparent 70%);
  background-size:200% 100%;
  animation:screenShimmer 4s ease-in-out infinite;
  pointer-events:none;
}

/* === ITERATION 30: Ultimate final CTA glow === */
.ask .section-title {
  text-shadow: 0 0 40px rgba(184,137,68,0.15);
}
.ask-sign {
  animation: shimmer 3s linear infinite;
  background: linear-gradient(90deg, var(--gold) 0%, var(--rose) 50%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* === BONUS: Affirmation bar adjust when urgency visible === */
body.has-urgency .affirmation-bar { bottom: 4rem !important; }
body.has-urgency .floating-cta { bottom: 4rem !important; }
@media(max-width:720px) {
  body.has-urgency .affirmation-bar { bottom: 7.5rem !important; }
}