/* ═══════════════════════════════════════════════════════════════════
   ATMOSPHERE — signature background system
   Layered SVG patterns + organic blobs = depth without distraction.
   Pure CSS + SVG (no JS). Respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Root container ─── */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: inherit;
}

/* ─── Layer 1: topographic contour pattern (very subtle, tileable) ─── */
.atmosphere::before {
  content: '';
  position: absolute;
  inset: -5%;
  /*
    Tileable topographic pattern. Each path starts at x=0 and ends at x=800
    with the SAME y-coordinate, so when the 800×800 tile repeats horizontally
    the curves flow seamlessly across tile boundaries. Lines are spaced every
    80px vertically (40 → 760), and 800-40 = 760 + 80 = next tile's 40,
    so vertical tiling is also gap-free.
  */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'><g fill='none' stroke='%23A34F24' stroke-width='1.1' stroke-linecap='round'><path d='M0 40 C 200 75, 600 5, 800 40'/><path d='M0 120 C 220 85, 580 155, 800 120'/><path d='M0 200 C 180 240, 620 165, 800 200'/><path d='M0 280 C 260 310, 540 250, 800 280'/><path d='M0 360 C 200 395, 600 320, 800 360'/><path d='M0 440 C 240 475, 560 405, 800 440'/><path d='M0 520 C 180 485, 620 555, 800 520'/><path d='M0 600 C 220 635, 580 570, 800 600'/><path d='M0 680 C 260 645, 540 715, 800 680'/><path d='M0 760 C 200 795, 600 725, 800 760'/></g></svg>");
  background-size: 800px 800px;
  background-repeat: repeat;
  opacity: 0.11;
  animation: atmosphere-drift 120s linear infinite;
  will-change: transform;
}

/* ─── Layer 2: fine grain noise (warms up digital flatness) ─── */
.atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0.5 0'/></filter><rect width='300' height='300' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: 300px 300px;
  opacity: 0.03;
  mix-blend-mode: multiply;
}

/* ─── Layer 3: organic color blobs (added via HTML, positioned individually) ─── */
.atmosphere-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
  will-change: transform;
  animation: atmosphere-breathe 14s ease-in-out infinite;
}

.atmosphere-blob--warm {
  background: radial-gradient(circle, #FECE00 0%, #E8A500 60%, transparent 80%);
}
.atmosphere-blob--coral {
  background: radial-gradient(circle, #D42B2B 0%, #CB6330 60%, transparent 80%);
}
.atmosphere-blob--sage {
  background: radial-gradient(circle, #2A9D8F 0%, #1A6B5A 60%, transparent 80%);
}
.atmosphere-blob--cream {
  background: radial-gradient(circle, #F5EDE0 0%, #FDF8F0 60%, transparent 80%);
}

/* Stagger blob animations so they don't breathe in lockstep */
.atmosphere-blob:nth-child(2) { animation-delay: -3s;  animation-duration: 18s; }
.atmosphere-blob:nth-child(3) { animation-delay: -7s;  animation-duration: 22s; }
.atmosphere-blob:nth-child(4) { animation-delay: -10s; animation-duration: 16s; }
.atmosphere-blob:nth-child(5) { animation-delay: -5s;  animation-duration: 20s; }

/* ─── Motion ─── */
@keyframes atmosphere-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-40px, -30px); }
  100% { transform: translate(0, 0); }
}

@keyframes atmosphere-breathe {
  0%, 100% { transform: translate(0, 0) scale(1);      opacity: 0.35; }
  50%      { transform: translate(20px, -30px) scale(1.08); opacity: 0.5; }
}

/* ─── Reduced motion: keep the pretty, kill the movement ─── */
@media (prefers-reduced-motion: reduce) {
  .atmosphere::before,
  .atmosphere-blob {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ORGANIC SHAPE UTILITIES
   Drop these classes on any card/container for hand-crafted feel.
   ═══════════════════════════════════════════════════════════════════ */

.organic-radius { border-radius: 30px 8px 24px 12px; }
.organic-radius-alt { border-radius: 12px 28px 8px 30px; }
.organic-radius-soft { border-radius: 24px 16px 20px 18px; }

/* Subtle inner-gradient for cards — lifts them off the atmospheric bg */
.card-lift {
  background: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(253,248,240,0.92) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 1px 2px rgba(139, 90, 40, 0.04),
    0 10px 30px rgba(139, 90, 40, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

/* Accent glow — behind CTAs or featured elements */
.glow-warm::before {
  content: '';
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, rgba(254,206,0,0.35) 0%, transparent 70%);
  z-index: -1;
  filter: blur(20px);
  border-radius: inherit;
}

.glow-coral::before {
  content: '';
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, rgba(212,43,43,0.25) 0%, transparent 70%);
  z-index: -1;
  filter: blur(20px);
  border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════════════════
   GSAP REVEAL DEFAULTS — set up, let JS drive.
   Elements marked with these classes start hidden; GSAP reveals them.
   If JS fails or reduced motion is on, the CSS fallback below shows them.
   ═══════════════════════════════════════════════════════════════════ */

.reveal-up,
.reveal-in,
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

/* Safety fallback: if GSAP never loads, show content after 1s */
.gsap-fallback .reveal-up,
.gsap-fallback .reveal-in,
.gsap-fallback .reveal-stagger > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-in,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}