/* ==========================================================================
   ShootInPRO - Unified Seamless 3D Motion Background & Fluid Glass System
   Covers the full scrollable page height continuously without abrupt black gaps.
   ========================================================================== */

/* 1. Global Viewport Background & Base Reset */
html {
  background-color: #060605;
}

body {
  background-color: transparent !important;
  background: transparent !important;
  min-height: 100vh;
  position: relative;
}

main {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* 2. Fixed Unified Background Container (Always covers the entire viewport & scroll height) */
.theme-3d-bg-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100lvh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  perspective: 1200px !important;
  background-color: #060605 !important;
}

/* Background layers sized with generous bleed to permit 3D motion without revealing white/black edges */
.theme-3d-bg-layer {
  position: absolute !important;
  inset: -120px !important;
  width: calc(100% + 240px) !important;
  height: calc(100% + 240px) !important;
  pointer-events: none !important;
}

/* The Cinematic Black & Gold Curved Theme Image */
.theme-3d-bg-image {
  background-image: url('assets/theme-3d-bg.png') !important;
  background-size: cover !important;
  background-position: center 38% !important;
  background-repeat: no-repeat !important;
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform 0.08s ease-out;
  filter: brightness(0.92) contrast(1.1) saturate(1.12);
  opacity: 0.92;
}

/* Ambient Secondary Golden Flow (Bridges curves across the entire vertical height) */
.theme-3d-bg-ambient-flow {
  background: 
    radial-gradient(ellipse 90% 70% at 85% 25%, rgba(255, 216, 77, 0.15) 0%, rgba(180, 130, 20, 0.05) 45%, transparent 70%),
    radial-gradient(ellipse 85% 65% at 15% 75%, rgba(255, 216, 77, 0.12) 0%, rgba(160, 115, 15, 0.04) 40%, transparent 68%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(212, 168, 39, 0.08) 0%, transparent 65%);
  mix-blend-mode: screen;
  will-change: transform;
  opacity: 0.85;
}

/* Light specular shimmer that reacts in 3D to cursor */
.theme-3d-bg-shimmer {
  mix-blend-mode: color-dodge;
  opacity: 0.75;
  transition: background 0.15s ease-out;
}

/* Unified Subtle Dark Vignette: Keeps text and pricing contrast sharp while letting gold shine through */
.theme-3d-bg-unified-vignette {
  background: 
    radial-gradient(ellipse 95% 85% at 50% 50%, rgba(6, 6, 5, 0.22) 0%, rgba(6, 6, 5, 0.62) 100%),
    linear-gradient(180deg, rgba(6, 6, 5, 0.35) 0%, rgba(6, 6, 5, 0.12) 35%, rgba(6, 6, 5, 0.12) 70%, rgba(6, 6, 5, 0.45) 100%);
}

/* ==========================================================================
   3. SECTION BACKGROUND OVERRIDES - REMOVE SOLID BLACK BOXES
   All sections become transparent so the shared cinematic gold background
   flows continuously without abrupt cuts.
   ========================================================================== */

/* Remove harsh dark backgrounds on sections */
.work-section,
#work,
.quote-section,
.contact-section,
#contact,
.packages,
#packages,
.services,
#services,
.intro,
#about {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Subtle atmospheric gold pool under Our Work to harmonize cards */
.work-section {
  position: relative !important;
}

.work-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255, 216, 77, 0.04) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.intro h2 .hero-white {
  color: #ffffff !important;
}

.intro h2 .hero-gold {
  color: #ffd84d !important;
}
.quote-section {
  border-block: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
}

.quote-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 216, 77, 0.07) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Subtle ambient lighting behind contact section */
.contact-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 70% 50% at 20% 30%, rgba(255, 216, 77, 0.06) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ==========================================================================
   4. HERO SECTION LAYOUT & SPACING (NO OVERLAPS)
   ========================================================================== */

.hero.section-wrap {
  width: min(1200px, calc(100% - 80px)) !important;
  height: auto !important;
  min-height: calc(80vh - 112px) !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding-top: 64px !important;
  padding-bottom: 74px !important;
  position: relative !important;
  margin-inline: auto !important;
  overflow: visible !important;
  background: transparent !important;
}

.hero-copy {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 820px !important;
  transform: none !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-copy > .eyebrow {
  margin: 0 0 20px !important;
}

.hero h1 {
  margin: 0 !important;
}

.hero-tagline {
  margin: 24px 0 16px !important;
}

.hero-lede {
  margin: 0 auto 36px !important;
  max-width: 580px !important;
}

/* Hide hero art / mobile frame if any exists */
.hero-art,
.hero-bolt {
  display: none !important;
}

/* Scrolling Ticker Marquee Bar */
.ticker {
  margin-top: 10px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  z-index: 5 !important;
  clear: both !important;
}

/* ==========================================================================
   5. HERO ACTIONS & PREMIUM APPLE-INSPIRED FLUID GLASS BUTTONS
   ========================================================================== */

.hero-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  flex-wrap: wrap !important;
}

.hero-actions .button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 200px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 0 28px !important;
  border-radius: 16px !important;
  font-family: var(--body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  isolation: isolate !important;
  overflow: hidden !important;
  transform: translateY(0) scale(1) translateZ(0) !important;
  transition: 
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    color 0.35s ease !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
}

.hero-actions .button::before {
  content: "" !important;
  position: absolute !important;
  inset: -100% !important;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.28) 46%,
    rgba(255, 225, 120, 0.42) 50%,
    rgba(255, 255, 255, 0.28) 54%,
    transparent 80%
  ) !important;
  transform: translateX(-100%) rotate(25deg) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  z-index: 1 !important;
}

.hero-actions .button:hover::before {
  transform: translateX(100%) rotate(25deg) !important;
  opacity: 1 !important;
}

/* BUTTON 1: "BOOK A SHOOT" (Champagne-Gold Tinted Liquid Glass) */
.hero-actions .button:first-child {
  background: linear-gradient(
    135deg,
    rgba(255, 228, 130, 0.26) 0%,
    rgba(255, 216, 77, 0.16) 42%,
    rgba(180, 135, 25, 0.24) 100%
  ) !important;
  border: 1px solid rgba(255, 226, 120, 0.65) !important;
  color: #fff8e1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 216, 77, 0.35) !important;
  box-shadow: 
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(255, 216, 77, 0.22),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.5),
    inset 0 -1.5px 1.5px rgba(212, 168, 39, 0.25) !important;
}

.hero-actions .button:first-child:hover {
  transform: translateY(-3px) scale(1.025) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 235, 150, 0.36) 0%,
    rgba(255, 216, 77, 0.24) 42%,
    rgba(205, 155, 35, 0.32) 100%
  ) !important;
  border-color: rgba(255, 240, 160, 0.9) !important;
  color: #ffffff !important;
  box-shadow: 
    0 16px 38px rgba(0, 0, 0, 0.5),
    0 0 36px rgba(255, 216, 77, 0.45),
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    inset 0 -2px 2px rgba(212, 168, 39, 0.35) !important;
}

/* BUTTON 2: "VIEW OUR WORK" (Dark Translucent Liquid Glass with Silver-White Highlights) */
.hero-actions .button.button-outline,
.hero-actions #view-our-work {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 48%,
    rgba(0, 0, 0, 0.45) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  border-bottom-color: rgba(255, 216, 77, 0.35) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(255, 255, 255, 0.08),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.45),
    inset 0 -1.5px 1.5px rgba(0, 0, 0, 0.4) !important;
}

.hero-actions .button.button-outline:hover,
.hero-actions #view-our-work:hover {
  transform: translateY(-3px) scale(1.025) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 216, 77, 0.08) 50%,
    rgba(20, 20, 18, 0.55) 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  border-bottom-color: rgba(255, 216, 77, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 
    0 16px 38px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(255, 216, 77, 0.25),
    inset 0 2px 2px rgba(255, 255, 255, 0.65),
    inset 0 -1.5px 1.5px rgba(255, 216, 77, 0.25) !important;
}

.hero-actions .button:active {
  transform: translateY(-1px) scale(0.99) !important;
}

/* ==========================================================================
   6. RESPONSIVE LAYOUT (DESKTOP, TABLET, MOBILE)
   ========================================================================== */

@media (max-width: 1050px) {
  .hero.section-wrap {
    width: calc(100% - 48px) !important;
    grid-template-columns: 1fr 0.9fr !important;
    gap: 32px !important;
    padding-top: 36px !important;
    padding-bottom: 60px !important;
  }
  .hero h1 {
    font-size: clamp(56px, 7vw, 84px) !important;
  }
  .hero-actions .button {
    min-width: 180px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 760px) {
  .hero.section-wrap {
    width: calc(100% - 32px) !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 28px !important;
    padding-bottom: 54px !important;
  }
  .hero-copy {
    max-width: 100% !important;
  }
  .hero h1 {
    font-size: clamp(48px, 12vw, 68px) !important;
    line-height: 0.96 !important;
  }
  .hero-lede {
    font-size: 14px !important;
    margin-bottom: 26px !important;
  }
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
  }
  .hero-actions .button {
    width: 100% !important;
    min-width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }
  .hero-art {
    width: 100% !important;
    min-height: 280px !important;
    aspect-ratio: 16 / 10 !important;
    margin-top: 8px !important;
  }
  .ticker {
    margin-top: 0 !important;
  }
}

/* ==========================================================================
   7. FLUID GLASS BARS STYLING
   ========================================================================== */

.header {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 216, 77, 0.04) 30%,
    rgba(15, 15, 13, 0.65) 100%
  ) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(255, 216, 77, 0.12) !important;
}

.brand-logo {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 20px rgba(255, 216, 77, 0.25));
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
}

.brand:hover .brand-logo {
  transform: scale(1.035);
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 26px rgba(255, 216, 77, 0.4));
}

.ticker {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 216, 77, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%
  ), rgba(12, 12, 11, 0.58) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  border-block: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 216, 77, 0.15) !important;
}

.footer {
  background: linear-gradient(
    180deg,
    rgba(20, 19, 16, 0.65) 0%,
    rgba(8, 8, 7, 0.88) 100%
  ) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 
    0 -10px 30px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  position: relative;
  z-index: 2;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 900px) {
  .header .nav {
    background: linear-gradient(
      180deg,
      rgba(24, 23, 19, 0.88) 0%,
      rgba(10, 10, 9, 0.94) 100%
    ) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 216, 77, 0.25) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important;
  }
}

/* ==========================================================================
   8. CHOOSE A PACKAGE BUTTON - FROSTED GLASS / GLASSMORPHISM
   ========================================================================== */

.contact-book.button {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 216, 77, 0.05) 50%,
    rgba(18, 17, 14, 0.6) 100%
  ) !important;
  color: #f7f5ee !important;
  border: 1px solid rgba(255, 216, 77, 0.38) !important;
  border-top-color: rgba(255, 235, 160, 0.55) !important;
  border-radius: 8px !important;
  -webkit-backdrop-filter: blur(15px) saturate(160%) !important;
  backdrop-filter: blur(15px) saturate(160%) !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(255, 216, 77, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.32),
    inset 0 -1px 1px rgba(255, 216, 77, 0.15) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateY(0) scale(1) !important;
  transition: 
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    color 0.35s ease !important;
}

/* Fallback for browsers that do not support backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contact-book.button {
    background: rgba(20, 19, 16, 0.88) !important;
  }
}

/* Elegant golden shimmer beam on hover */
.contact-book.button::after {
  content: "" !important;
  position: absolute !important;
  inset: -100% !important;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(255, 255, 255, 0.18) 46%,
    rgba(255, 216, 77, 0.32) 50%,
    rgba(255, 255, 255, 0.18) 54%,
    transparent 75%
  ) !important;
  transform: translateX(-100%) rotate(25deg) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  z-index: 1 !important;
}

/* Hover state: gentle lift, brighter glass border, and subtle gold glow */
.contact-book.button:hover {
  transform: translateY(-3px) scale(1.02) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 216, 77, 0.1) 50%,
    rgba(26, 24, 18, 0.65) 100%
  ) !important;
  border-color: rgba(255, 226, 120, 0.72) !important;
  border-top-color: rgba(255, 245, 190, 0.85) !important;
  color: #ffffff !important;
  box-shadow: 
    0 14px 34px rgba(0, 0, 0, 0.48),
    0 0 30px rgba(255, 216, 77, 0.28),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(255, 216, 77, 0.25) !important;
}

.contact-book.button:hover::after {
  transform: translateX(100%) rotate(25deg) !important;
  opacity: 1 !important;
}

.contact-book.button:active {
  transform: translateY(-1px) scale(0.99) !important;
}

/* Reduced motion preference respect */
@media (prefers-reduced-motion: reduce) {
  .theme-3d-bg-image,
  .theme-3d-bg-ambient-flow {
    transform: none !important;
    transition: none !important;
  }
  .hero-actions .button,
  .hero-actions .button::before,
  .contact-book.button,
  .contact-book.button::after {
    transition: none !important;
  }
}