/* ==========================================================================
   FRAMER.COM SHOWCASE DESIGN ENGINE — THE OUTBOUNDERS SITE FACTORY (2026)
   Monolithic 60-30-10 Palette | Specular 1px Bento | Spring Motion | Spotlight
   ========================================================================== */

:root {
  --framer-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --framer-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --framer-radius-lg: 24px;
  --framer-radius-xl: 28px;
  --framer-header-h: 56px;
}

/* 1. Atmospheric Ambient Canvas & Masked Architectural Grid */
.framer-ambient-canvas {
  position: relative;
  isolation: isolate;
}

.framer-ambient-canvas::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(65% 45% at 50% -5%, rgba(var(--brand-accent-rgb, 212, 175, 55), 0.15) 0%, transparent 70%),
    radial-gradient(40% 35% at 85% 25%, rgba(var(--brand-accent-rgb, 212, 175, 55), 0.07) 0%, transparent 70%);
}

.framer-grid-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-size: 48px 48px;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 25%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 25%, #000 25%, transparent 80%);
}

/* 2. Framer Specular Bento Card with Cursor-Tracked Radial Spotlight */
.framer-bento-card {
  position: relative;
  border-radius: var(--framer-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
    0 20px 45px -15px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition:
    transform 0.55s var(--framer-ease-spring),
    border-color 0.4s var(--framer-ease-out),
    box-shadow 0.55s var(--framer-ease-spring);
}

.framer-bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    520px circle at var(--mouse-x, 50%) var(--mouse-y, 0%),
    rgba(var(--brand-accent-rgb, 212, 175, 55), 0.11),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.4s var(--framer-ease-out);
  z-index: 1;
}

.framer-bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--brand-accent-rgb, 212, 175, 55), 0.34);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 28px 60px -15px rgba(0, 0, 0, 0.6),
    0 0 36px -8px rgba(var(--brand-accent-rgb, 212, 175, 55), 0.18);
}

.framer-bento-card:hover::before {
  opacity: 1;
}

/* Light-mode Ivory variant for Medical / Legal / Editorial niches */
.framer-theme-light .framer-bento-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.88) 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    0 18px 40px -15px rgba(15, 23, 42, 0.07);
}

.framer-theme-light .framer-bento-card:hover {
  border-color: rgba(var(--brand-accent-rgb, 15, 118, 110), 0.32);
  box-shadow:
    inset 0 1px 0 0 #ffffff,
    0 26px 55px -14px rgba(15, 23, 42, 0.12);
}

/* 3. Framer Scroll-Reveal Choreography (Spring Blur-to-Crisp) */
.framer-reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  filter: blur(5px);
  transition:
    opacity 0.75s var(--framer-ease-spring),
    transform 0.75s var(--framer-ease-spring),
    filter 0.75s var(--framer-ease-spring);
  transition-delay: calc(var(--stagger, 0) * 85ms);
  will-change: opacity, transform, filter;
}

.framer-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* 4. Framer Editorial Display Typography & Pill Eyebrow */
.framer-display-title {
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

.framer-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(var(--brand-accent-rgb, 212, 175, 55), 0.1);
  border: 1px solid rgba(var(--brand-accent-rgb, 212, 175, 55), 0.28);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

/* 5. Framer Image Frame with Editorial Hover Scale */
.framer-img-frame {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.framer-img-frame img {
  transition: transform 0.85s var(--framer-ease-spring);
}

.framer-bento-card:hover .framer-img-frame img,
.framer-img-frame:hover img {
  transform: scale(1.045);
}

/* 6. Framer Tactile Primary CTA Button with Specular Rim */
.framer-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.32),
    0 10px 28px -6px rgba(var(--brand-accent-rgb, 212, 175, 55), 0.45);
  transition:
    transform 0.35s var(--framer-ease-spring),
    box-shadow 0.35s var(--framer-ease-spring),
    filter 0.3s ease;
}

.framer-btn-primary:hover {
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    0 16px 36px -6px rgba(var(--brand-accent-rgb, 212, 175, 55), 0.6);
}

.framer-btn-primary:active {
  transform: translateY(0) scale(0.99);
}

/* 7. Minimalist 56px Glassmorphic Burger Header Invariant */
.framer-compact-header {
  height: 56px;
  max-height: 60px;
  padding: 10px 20px;
  white-space: nowrap;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.framer-compact-header * {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 8. Print / Skia PDF Safety (Zero Rasterization Trap) */
@media print {
  .framer-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .framer-bento-card,
  .framer-compact-header,
  .framer-btn-primary {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;
  }
  .framer-ambient-canvas::before,
  .framer-grid-backdrop {
    display: none !important;
  }
}