/* BLOOMFIELD DESIGN TOKENS & COMPONENTS */

/* Hero Spacing Utility
   Ensures hero content clears the floating header with consistent breathing room.
   Accounts for -mt-24 negative margin on main container. */
.hero-spacer {
  padding-top: 12rem; /* 192px - mobile/tablet */
}

@media (min-width: 1024px) {
  .hero-spacer {
    padding-top: 14rem; /* 224px - desktop */
  }
}

/* Header Spacer Utility
   For non-hero pages (app pages, etc.) where content starts immediately.
   Pushes content down to account for floating header height + breathing room.
   Prevents header from overlapping first content element. */
.header-spacer {
  padding-top: 120px; /* Approx header height (80px) + visual gap (40px) */
}

@media (min-width: 768px) {
  .header-spacer {
    padding-top: 140px; /* More space for desktop */
  }
}

/* 1. Glassmorphism Strategy
   Creates the frosted, premium container effect.
   Essential for the "Card-within-a-Card" look. */
.glass-panel {
  /* Semi-transparent white base - increased opacity for better contrast on dark backgrounds */
  background: rgba(255, 255, 255, 0.75);
  /* The blur magic */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Subtle border for definition */
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease-in-out;
}

/* Refined Glass for Content Sections (slightly different opacity) */
.content-glass-panel {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Inner shadow creates the "beveled" look */
  box-shadow: inset 0px 2px 4px rgba(255,255,255,0.6), inset 0px -2px 4px rgba(0,0,0,0.02);
}

/* 2. Plush UI Strategy
   Creates the soft, tactile feel for buttons and cards. */
.plush-button {
  border-radius: 50px;
  background: #F9FAFB;
  /* Dual-shadow for soft 3D feel */
  box-shadow: 6px 6px 12px #e5e7eb, -6px -6px 12px #ffffff;
  transition: all 0.2s ease-in-out;
}

.plush-button:hover {
  /* On hover, shadow tightens to simulate press */
  box-shadow: 4px 4px 8px #e5e7eb, -4px -4px 8px #ffffff;
  transform: translateY(1px);
}

.plush-card {
  border-radius: 24px;
  background: #ffffff;
  /* Deep, soft shadow for lift */
  box-shadow: 0px 10px 25px rgba(17, 24, 39, 0.05), 0px 2px 10px rgba(17, 24, 39, 0.03);
  transition: all 0.3s ease-in-out;
}

.plush-card:hover {
  transform: translateY(-8px);
  box-shadow: 0px 20px 40px rgba(17, 24, 39, 0.07), 0px 5px 15px rgba(17, 24, 39, 0.05);
}

/* 3. Papercraft Atmosphere
   Handles the abstract shapes in the background. */
.paper-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none; /* Allows clicking through the shapes */
}

.paper-shape {
  position: absolute;
  /* Drop shadow separates the layers visually */
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.05));
  transition: transform 0.5s ease-in-out;
}

/* 4. Animations (Drift) */
@media (prefers-reduced-motion: no-preference) {
  .drift-1 { animation: subtle-drift 15s ease-in-out infinite; }
  .drift-2 { animation: subtle-drift-2 18s ease-in-out infinite; }
  .drift-3 { animation: subtle-drift-3 22s ease-in-out infinite; }
}

@keyframes subtle-drift {
  0% { transform: translate(0, 0) rotate(-15deg); }
  50% { transform: translate(10px, 5px) rotate(-12deg); }
  100% { transform: translate(0, 0) rotate(-15deg); }
}
@keyframes subtle-drift-2 {
  0% { transform: translate(0, 0) rotate(10deg); }
  50% { transform: translate(-5px, -10px) rotate(12deg); }
  100% { transform: translate(0, 0) rotate(10deg); }
}
@keyframes subtle-drift-3 {
  0% { transform: translate(0, 0) rotate(-5deg); }
  50% { transform: translate(5px, 5px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(-5deg); }
}

/* 5. Section Specifics */
.footer-gradient {
  background: radial-gradient(ellipse at center, #f9fafb, #f3f4f6);
}