/* ============================================================
   css/index.css — Bloomin' Acres index / landing page
   ============================================================ */

/* ── Base ───────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background-color: var(--earth-brown);
  background-image: url('../brand-assets/farm-background.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--earth-brown);
  line-height: 1.7;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.03em; line-height: 1.15; }

/* Grain overlay */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(9px); }
}
.animate-fade-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(.22,1,.36,1), transform 0.75s cubic-bezier(.22,1,.36,1);
}
.animate-fade-up.visible { opacity: 1; transform: translateY(0); }
.stagger-1 { transition-delay: .1s; }
.stagger-2 { transition-delay: .2s; }
.stagger-3 { transition-delay: .3s; }

.hero-in { animation: fadeUp 1.1s cubic-bezier(.22,1,.36,1) both; }
.hero-d1 { animation-delay: .15s; }
.hero-d2 { animation-delay: .4s; }
.hero-d3 { animation-delay: .65s; }

.scroll-cta {
  display: inline-block;
  animation: bounce 2.2s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
.scroll-cta:hover  { opacity: 0.45; }
.scroll-cta:active { transform: translateX(-50%) scale(0.88); }

/* ── Cards ──────────────────────────────────────────────── */
.product-card {
  border-radius: 6px; overflow: hidden;
  background: var(--farm-cream);
  box-shadow: var(--shadow-card);
  transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.45s cubic-bezier(.22,1,.36,1);
}
.product-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-card-hover); }
.product-card:hover .card-img { transform: scale(1.05); }
.product-card:active { transform: translateY(-2px); }
.card-img { transition: transform 0.65s cubic-bezier(.22,1,.36,1); width: 100%; height: 260px; object-fit: cover; }

/* ── Footer links & social ──────────────────────────────── */
.footer-link {
  font-size: .875rem; color: rgba(250,240,230,.5);
  text-decoration: none; letter-spacing: .05em;
  transition: color 0.25s ease;
}
.footer-link:hover { color: var(--wheat-gold); }
.social-icon { opacity: .5; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.22,1,.36,1); }
.social-icon:hover  { opacity: 1; transform: translateY(-3px); }
.social-icon:active { transform: translateY(0); }

/* ── Hours glass card ───────────────────────────────────── */
.hours-card {
  background: rgba(250,240,230,.08);
  border: 1px solid rgba(250,240,230,.14);
  border-radius: 4px; padding: 1.5rem 1.75rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ── Process step icon circles ──────────────────────────── */
.step-icon {
  width: 5rem; height: 5rem; border-radius: 50%;
  margin: 0 auto 1.5rem;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}

/* ── Hero section ───────────────────────────────────────── */
.hero-section {
  min-height: 100svh; position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background-color: #263B28;
  background-image:
    radial-gradient(ellipse 90% 70% at 5% 10%,  rgba(60,95,75,.95)   0%, transparent 60%),
    radial-gradient(ellipse 75% 60% at 95% 90%,  rgba(237,163,57,.4)  0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 50% 55%,  rgba(250,240,230,.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 80% 15%,  rgba(74,51,34,.5)    0%, transparent 45%);
  overflow: hidden;
}

/* Hero botanical corner sprigs */
.hero-sprig { position: absolute; pointer-events: none; }
.hero-sprig-tl { top: 2.5rem; left: 2.5rem; opacity: .2; transform: rotate(-12deg); }
.hero-sprig-tr { top: 2rem; right: 2.5rem; opacity: .16; transform: rotate(18deg) scaleX(-1); }
.hero-sprig-br { bottom: 5rem; right: 3rem; opacity: .14; transform: rotate(155deg); }
.hero-sprig-bl { bottom: 4rem; left: 3rem; opacity: .11; transform: rotate(195deg) scaleX(-1); }

.hero-content {
  text-align: center; padding: 2rem; max-width: 1200px; position: relative; z-index: 1;
}
.hero-banner {
  width: min(560px, 68vw);
  object-fit: contain;
  margin: 0 auto -38%;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.4));
  position: relative; z-index: 1;
}
.hero-logo {
  width: min(900px, 80vw); max-height: 52vh; object-fit: contain;
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
  image-rendering: -webkit-optimize-contrast;
  position: relative; z-index: 0;
}
.hero-cta-wrap {
  text-align: center; position: relative; z-index: 2; margin-bottom: 3.5rem;
}

.scroll-anchor {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 1;
}

/* ── Welcome section ────────────────────────────────────── */
.welcome-section {
  background-color: var(--farm-cream);
  padding: 5.5rem 1.5rem;
  position: relative; overflow: hidden;
}
.welcome-wheat-divider {
  display: flex; justify-content: center; margin-bottom: 3rem;
}
.welcome-sprout-watermark {
  position: absolute; right: -2rem; bottom: -3rem;
  width: 290px; opacity: .06; transform: rotate(8deg);
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
.welcome-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
.welcome-overline { color: var(--sage-dark); }
.welcome-heading {
  font-size: clamp(2rem, 4vw, 3.1rem);
  color: var(--earth-brown);
  margin-bottom: 1.5rem;
}
.welcome-body {
  font-size: 1.05rem; line-height: 1.75;
  color: var(--earth-mid); max-width: 480px;
  white-space: pre-line;
}
.welcome-quote-wrap {
  display: flex; align-items: center; gap: .875rem; margin-top: 2rem;
}
.welcome-quote-sprout {
  width: 68px; height: 68px; object-fit: contain; flex-shrink: 0;
}
.welcome-quote-text {
  font-family: var(--font-display); font-style: italic;
  font-size: .95rem; color: var(--sage-dark);
}
.welcome-image-wrap {
  border-radius: 4px; overflow: hidden; position: relative;
  box-shadow: var(--shadow-card);
}
.welcome-image {
  width: 100%; height: 420px; object-fit: cover;
}
.welcome-image-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(74,51,34,.55) 0%, transparent 50%);
}
.welcome-image-tint {
  position: absolute; inset: 0;
  background: rgba(122,155,142,.16); mix-blend-mode: multiply;
}

/* ── What We Make section ───────────────────────────────── */
.what-we-make-section {
  background-color: var(--cream-dark);
  padding: 5.5rem 1.5rem; position: relative;
}
.what-we-make-header {
  text-align: center; margin-bottom: 3.5rem;
}
.what-we-make-overline { color: var(--burnt-orange); }
.what-we-make-heading {
  font-size: clamp(2rem, 4vw, 3rem); color: var(--earth-brown); margin-bottom: 1.25rem;
}
.what-we-make-divider { display: flex; justify-content: center; }
.cards-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.card-img-wrap { position: relative; overflow: hidden; }
.card-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(74,51,34,.65) 0%, transparent 52%);
}
.card-img-tint {
  position: absolute; inset: 0; mix-blend-mode: multiply;
}
.card-body { padding: 1.5rem 1.75rem 2rem; }
.card-title {
  font-size: 1.3rem; color: var(--earth-brown);
  margin-bottom: .5rem; letter-spacing: -.02em;
}
.card-desc { font-size: .9rem; color: var(--earth-mid); line-height: 1.65; }

/* ── Process section ────────────────────────────────────── */
.process-section {
  background-color: var(--cream-warm);
  background-image: radial-gradient(circle, rgba(74,51,34,.065) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 5.5rem 1.5rem;
}
.process-inner { max-width: 1100px; margin: 0 auto; }
.process-header { text-align: center; margin-bottom: 4rem; }
.process-overline { color: var(--sage-dark); }
.process-heading { font-size: clamp(2rem, 4vw, 3rem); color: var(--earth-brown); }
.steps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative;
}
.step-connector {
  position: absolute; top: 2.4rem; left: 12.5%; right: 12.5%; height: 1px;
  background: repeating-linear-gradient(
    to right, var(--sage-green) 0, var(--sage-green) 8px, transparent 8px, transparent 18px
  );
  opacity: .38;
}
.step { text-align: center; padding: 0 1.5rem; }
.step-icon-sage {
  background: var(--sage-green);
  box-shadow: 0 4px 16px rgba(122,155,142,.3), 0 8px 32px rgba(122,155,142,.15);
}
.step-icon-wheat {
  background: var(--wheat-gold);
  box-shadow: 0 4px 16px rgba(237,163,57,.3), 0 8px 32px rgba(237,163,57,.15);
}
.step-icon-rust {
  background: var(--burnt-orange);
  box-shadow: 0 4px 16px rgba(200,90,58,.3), 0 8px 32px rgba(200,90,58,.15);
}
.step-icon-berry {
  background: var(--berry-red);
  box-shadow: 0 4px 16px rgba(139,58,58,.3), 0 8px 32px rgba(139,58,58,.15);
}
.step-title {
  font-size: 1.15rem; color: var(--earth-brown); margin-bottom: .4rem;
}
.step-desc { font-size: .875rem; color: var(--earth-mid); line-height: 1.65; }

/* ── Visit section ──────────────────────────────────────── */
.visit-section {
  background-color: var(--sage-dark);
  background-image:
    radial-gradient(ellipse 65% 55% at 15% 85%, rgba(74,51,34,.42)  0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 88% 18%, rgba(237,163,57,.14) 0%, transparent 55%);
  padding: 5.5rem 1.5rem; color: var(--farm-cream);
}
.visit-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
.visit-overline { color: rgba(250,240,230,.5); }
.visit-heading {
  font-size: clamp(2rem, 4vw, 3rem); color: var(--farm-cream);
  margin-bottom: 2rem; letter-spacing: -.03em;
}
.visit-hours-label {
  font-weight: 600; letter-spacing: .12em; font-size: .72rem;
  text-transform: uppercase; color: var(--wheat-gold); margin-bottom: .875rem;
}
.visit-hours-grid {
  display: grid; grid-template-columns: auto 1fr;
  gap: .3rem 1.5rem; font-size: .93rem; line-height: 1.6;
}
.visit-hours-day { opacity: .75; }
.visit-contact {
  font-size: .93rem; line-height: 1.85; opacity: .78; margin-bottom: 2rem;
}
.visit-contact-link {
  color: var(--wheat-gold); text-decoration: none;
  transition: opacity .25s ease;
}
.visit-contact-link:hover { opacity: .65; }
.visit-map-wrap {
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.28), 0 16px 48px rgba(0,0,0,.22);
  position: relative;
}
.visit-map-iframe { width: 100%; height: 420px; border: 0; display: block; }
.visit-map-gradient {
  position: absolute; bottom: 0; left: 0; right: 0; height: 70px;
  background: linear-gradient(to top, rgba(78,110,100,.5), transparent);
  pointer-events: none;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: transparent;
  padding: 2rem 1.5rem 1.25rem;
  color: rgba(250,240,230,.65);
}
.footer-inner {
  max-width: 860px; margin: 0 auto; text-align: center;
  background-color: var(--earth-brown);
  background-image: radial-gradient(ellipse 65% 45% at 50% 105%, rgba(200,90,58,.1) 0%, transparent 60%);
  border-radius: 8px; padding: 1.5rem 1.5rem 1rem;
}
.footer-logo {
  width: 130px; margin: 0 auto .75rem; opacity: .9;
}
.footer-divider { display: flex; justify-content: center; margin-bottom: .65rem; }
.footer-tagline {
  font-family: var(--font-display); font-style: italic;
  font-size: .82rem; letter-spacing: .1em;
  color: rgba(250,240,230,.4); margin-bottom: .9rem;
}
.footer-nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .4rem 1.5rem; margin-bottom: 1rem;
}
.footer-social-row {
  display: flex; justify-content: center; align-items: center;
  gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.footer-divider-line {
  width: 1px; height: 34px; background: rgba(250,240,230,.14);
}
.footer-badge-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.footer-badge-label {
  font-size: .62rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(250,240,230,.38);
}
.footer-badge-img {
  width: 50px; height: 50px; border-radius: 50%;
  object-fit: cover; object-position: 50% 45%;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  border: 2px solid rgba(91,158,42,.55);
}
.footer-badge-text {
  font-size: .75rem; font-weight: 600; color: var(--wheat-gold); letter-spacing: .04em;
}
.footer-copyright {
  font-size: .72rem; color: rgba(250,240,230,.28);
}

/* ── Card per-card tint colors ──────────────────────────── */
.card-img-tint-rust    { background: rgba(200,90,58,.1);  mix-blend-mode: multiply; }
.card-img-tint-sage    { background: rgba(122,155,142,.18); mix-blend-mode: multiply; }
.card-img-tint-berry   { background: rgba(139,58,58,.15); mix-blend-mode: multiply; }
/* card-2 has a slightly different base overlay gradient */
.card-img-overlay-sage { background: linear-gradient(to top, rgba(74,51,34,.6) 0%, transparent 52%); }

/* ── Hours card spacing ─────────────────────────────────── */
.hours-card-visit { margin-bottom: 1.75rem; }

/* ── Hours small annotation ─────────────────────────────── */
.hours-annotation { opacity: .6; font-size: .82em; }

/* ── Hours closed day ───────────────────────────────────── */
.visit-hours-closed { opacity: .6; }

/* ── Visit contact paragraph spacing ───────────────────── */
.visit-contact-p-gap { margin-top: .4rem; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .welcome-grid,
  .visit-grid   { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .steps-grid   { grid-template-columns: 1fr 1fr !important; gap: 2rem 1.5rem !important; }
  .step-connector { display: none !important; }
}
@media (max-width: 580px) {
  .cards-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .steps-grid { grid-template-columns: 1fr !important; }
}