/* ==============================================================================
   ECLIPSE PROD — GLOBAL CINEMATIC BACKGROUND
   
   A premium, atmosphere-driven background that evokes:
   - A nearly black eclipse with faint red/orange light leaking from behind
   - Cinematic depth through layered, blurred gradients
   - Luxury, mystery, and refined restraint
   
   The background covers the entire website, including all vertically scrolling
   content, with no repeating seams or section breaks. Blacks dominate (75-85%),
   with subtle warm glows positioned strategically for depth and drama.
   ============================================================================== */

:root {
  /* ECLIPSE PALETTE - black dominated, with solar orange/yellow corona glow */
  --eclipse-black: #030303;
  --eclipse-charcoal: #080707;
  --eclipse-dark-gray: #0f0f0f;

  --eclipse-burgundy: 42, 0, 0;
  --eclipse-maroon: 58, 0, 7;
  --eclipse-crimson: 101, 7, 7;
  --eclipse-deep-red: 139, 13, 13;

  --eclipse-ember: 217, 74, 22;
  --eclipse-burnt-orange: 224, 106, 26;
  --eclipse-solar: 255, 154, 72;
  --eclipse-gold: 255, 198, 92;

  --eclipse-light-opacity: .78;
  --eclipse-accent-opacity: .9;
  --eclipse-shadow-opacity: .9;

  --eclipse-blur: clamp(62px, 8vw, 120px);
  --eclipse-blur-secondary: clamp(32px, 4.5vw, 65px);
}

/* ==============================================================================
   HTML & BODY - Global base and fullscreen atmosphere
   ============================================================================== */

html {
  min-height: 100%;
  background: var(--eclipse-black);
  overflow-x: hidden;
}

body.eclipse-site {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--white, #f2f0e9);

  background:
    radial-gradient(ellipse 42vw 780px at 104% 22%, rgba(var(--eclipse-solar), 0.11), transparent 64%),
    radial-gradient(ellipse 38vw 720px at 104% 42%, rgba(var(--eclipse-burnt-orange), 0.13), transparent 70%),
    radial-gradient(ellipse 34vw 620px at 10% 82%, rgba(var(--eclipse-ember), 0.08), transparent 74%),
    radial-gradient(ellipse 30vw 520px at 100% 24%, rgba(var(--eclipse-gold), 0.06), transparent 72%),
    linear-gradient(110deg, var(--eclipse-black) 0%, #050505 48%, var(--eclipse-charcoal) 100%);

  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Remove old pseudo-elements if they exist */
body.eclipse-site::before,
body.eclipse-site::after { content: none; }

/* ==============================================================================
   ECLIPSE-ATMOSPHERE - Fixed cinematic glow layer
   
   This fixed container stays with the viewport and creates the primary
   "eclipse corona" visual effect through layered, blurred gradients.
   Paint containment ensures blur doesn't affect layout.
   ============================================================================== */

.eclipse-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: paint;
}

/* Primary glow layer: the main cinematic lighting effect */
.eclipse-atmosphere::before {
  content: "";
  position: absolute;
  inset: -120px;
  z-index: 1;

  filter: blur(var(--eclipse-blur)) saturate(1.15) brightness(1.12);
  opacity: var(--eclipse-light-opacity);

  background:
    radial-gradient(
      ellipse 18% 28% at 98% 22%,
      rgba(var(--eclipse-gold), 0.42),
      transparent 68%
    ),
    radial-gradient(
      ellipse 16% 26% at 96% 26%,
      rgba(var(--eclipse-solar), 0.52),
      transparent 70%
    ),
    radial-gradient(
      ellipse 22% 34% at 103% 32%,
      rgba(var(--eclipse-burnt-orange), 0.4),
      transparent 72%
    ),
    radial-gradient(
      ellipse 30% 44% at 108% 36%,
      rgba(var(--eclipse-deep-red), 0.62),
      transparent 76%
    ),
    radial-gradient(
      ellipse 18% 28% at 6% 76%,
      rgba(var(--eclipse-ember), 0.22),
      transparent 70%
    ),
    radial-gradient(
      ellipse 20% 30% at 4% 82%,
      rgba(var(--eclipse-crimson), 0.18),
      transparent 74%
    );

  background-repeat: no-repeat;
}

/* Occlusion and vignette layer: protects text contrast and creates theatrical framing */
.eclipse-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  
  background:
    /* Primary theatrical shadow: strong protection from glow washout */
    radial-gradient(
      ellipse 24% 38% at 94% 14%,
      rgba(1, 1, 1, var(--eclipse-shadow-opacity)) 12%,
      rgba(1, 1, 1, 0.68) 45%,
      transparent 80%
    ),
    /* Central noir vignette: gradual theatrical darkening creates frame effect */
    radial-gradient(
      ellipse 46% 62% at 50% 50%,
      rgba(1, 1, 1, 0.25),
      rgba(1, 1, 1, 0.64) 62%,
      rgba(1, 1, 1, 0.88) 100%
    ),
    /* Edge noir vignette: subtle sophisticated darkening at all edges */
    radial-gradient(
      ellipse at center,
      transparent 38%,
      rgba(0, 0, 0, 0.22) 100%
    );
}

/* Layout surfaces share the single atmosphere. Card art, video backplates,
   inputs, buttons and the opaque mobile menu retain their own surfaces. */
body.eclipse-site > main,
body.eclipse-site > main > section,
body.eclipse-site > footer,
body.eclipse-site .home-section,
body.eclipse-site .home-hero,
body.eclipse-site .collection-main,
body.eclipse-site .contact-hero,
body.eclipse-site .contact-cta {
  background: transparent;
  color: var(--white, #f2f0e9);
}
body.eclipse-site .collection-main::before,
body.eclipse-site .campaigns-hero::after,
body.eclipse-site .contact-hero::before,
body.eclipse-site .contact-hero::after,
body.eclipse-site .contact-cta::before,
body.eclipse-site .contact-cta::after { content: none; }
body.eclipse-site .home-eclipse,
body.eclipse-site .collection-orbit,
body.eclipse-site .campaigns-orbit { display: none; }
body.eclipse-site .noise { opacity: .012; }

/* Keep the hero dark while giving the stats and About Us section one still surface. */
body.eclipse-site .about-stats,
body.eclipse-site #about {
  background: #e7e7e4 !important;
  background-image: none !important;
  color: #1b1e23;
}

body.eclipse-site .about-stats {
  border-color: rgba(27, 30, 35, .12);
}

body.eclipse-site .about-stat strong {
  color: #0d3046;
}

body.eclipse-site .about-stat > span {
  color: #555a5d;
}

body.eclipse-site #about .editorial-label,
body.eclipse-site #about .about-person__role {
  color: #555a5d;
}

body.eclipse-site #about .about-intro__copy p,
body.eclipse-site #about .about-person__bio p {
  color: #4f5457;
}

body.eclipse-site #about .about-intro__copy .about-lead,
body.eclipse-site #about .about-signoff {
  color: #1b1e23;
}

/* Restore readable secondary text where previously light sections are now dark. */
.eclipse-site .campaign-work .section-label,
.eclipse-site .campaign-work-heading > p:last-child,
.eclipse-site .campaign-client > span,
.eclipse-site .campaign-client > p,
.eclipse-site .campaigns-return .section-label,
.eclipse-site .media-library .section-label,
.eclipse-site .media-library-heading > p:last-child,
.eclipse-site .happy-creation-hero .eyebrow { color: #aaa8a0; }
.eclipse-site .campaign-client-grid,
.eclipse-site .campaign-client,
.eclipse-site .media-folder { border-color: rgba(242,240,233,.18); }
.eclipse-site .media-folder { background: rgba(8,7,7,.5); color: var(--white); }
.eclipse-site .happy-creation-mark { color: rgba(242,240,233,.035); }
.eclipse-site .contact-form { background: rgba(14,12,12,.88); }
.eclipse-site .contact-location { background: rgba(14,12,12,.65); }

/* The supplied silhouette is used for the homepage's first-screen hero. */
body.eclipse-site .home-hero {
  background-image:
    linear-gradient(180deg, rgba(3,3,3,.12) 0%, rgba(3,3,3,.42) 58%, transparent 100%),
    url("../website-background.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
}

/* Keep the Contact, Expertise & Services, and Portfolio pages on the same
   full-bleed editorial frame as the Contact page. */
body.eclipse-site.expertise-page .site-header,
body.eclipse-site.contact-template-page .site-header { position: absolute; }

/* Use the supplied blue-black texture at the top of every remaining section. */
body.eclipse-site > main > *:not(.home-hero) {
  background-image:
    linear-gradient(180deg, rgba(3,3,3,.08) 0%, transparent 72%),
    url("../sections-background.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% auto;
}

body.eclipse-site .about-stats,
body.eclipse-site #about {
  background-image: none !important;
}


/* Keep the Expertise & Services philosophy panel static like the reference. */
body.eclipse-site .expertise-motto::before,
body.eclipse-site .expertise-motto__slide { animation: none; }
body.eclipse-site .expertise-motto__slide--one { opacity: .24; transform: none; }
body.eclipse-site .expertise-motto__slide--two,
body.eclipse-site .expertise-motto__slide--three { display: none; }
body.eclipse-site .expertise-main { background-image: none; }
body.eclipse-site .expertise-main .expertise-heading {
  background-image: url("../sections-background.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
body.eclipse-site .expertise-main,
body.eclipse-site .expertise-main .expertise-heading,
body.eclipse-site .expertise-main .expertise-motto {
  background-image: none !important;
  background-color: #050505 !important;
}
body.eclipse-site .expertise-main .expertise-motto__slideshow,
body.eclipse-site .expertise-main .expertise-motto__orbit { display: none !important; }
body.eclipse-site .expertise-main .expertise-motto::before { display: none !important; }
body.eclipse-site .expertise-main .expertise-heading {
  background-image: url("../sections-background.jpg") !important;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
body.eclipse-site .expertise-main {
  padding: 0 4vw 100px !important;
  position: relative;
  isolation: isolate;
  background: #050505 !important;
}
body.eclipse-site .expertise-main .expertise-heading {
  min-height: clamp(430px, 58vw, 680px);
  box-sizing: border-box;
  padding: 140px 0 80px;
  background-image: url("../sections-background.jpg") !important;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: none !important;
}
body.eclipse-site .expertise-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: clamp(430px, 58vw, 680px);
  transform: translateX(-50%);
  background: url("../sections-background.jpg") center top / cover no-repeat;
  pointer-events: none;
}
@media (max-width: 600px) {
  body.eclipse-site .expertise-main { padding: 0 22px 65px !important; }
  body.eclipse-site .expertise-main .expertise-heading {
    min-height: 430px;
    padding: 125px 0 65px;
  }
  body.eclipse-site .expertise-main::before { height: 430px; }
}
body.eclipse-site.contact-template-page .contact-hero {
  background-image:
    linear-gradient(180deg, transparent 52%, rgba(5,5,5,.35) 76%, #050505 100%),
    url("../sections-background.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
}
body.eclipse-site.contact-template-page > main > *:not(.contact-hero) {
  background-image: none !important;
}
body.eclipse-site.corporate-page .corporate-grid {
  background-image: none !important;
  background-color: #050505 !important;
}

/* Shared footer treatment for every page. */
body.eclipse-site > footer:not(.contact-footer) {
  display: grid;
  grid-template-columns: 1.6fr .7fr 1fr;
  gap: 7vw;
  min-height: 260px;
  padding: clamp(65px, 8vw, 110px) 4vw 35px;
  border-top: 1px solid rgba(242,240,233,.12);
  background: #050505 !important;
  color: #aaa9a2;
  align-items: start;
}
body.eclipse-site > footer:not(.contact-footer) .footer-brand { color: #f2f0e9; }
body.eclipse-site > footer:not(.contact-footer) > p { margin: 0; font: .65rem "DM Mono", monospace; letter-spacing: .1em; }
body.eclipse-site > footer:not(.contact-footer) > a:last-child { color: #f2f0e9; font: .65rem "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
body.eclipse-site > footer.contact-footer { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr .7fr 1fr; gap: 7vw; min-height: 0; padding: clamp(65px, 8vw, 110px) 4vw 35px; border-top: 1px solid rgba(255,255,255,.12); background: #050505; color: #aaa9a2; align-items: start; }
body.eclipse-site > footer.contact-footer .brand-logo { width: min(225px, 70vw); }
body.eclipse-site > footer.contact-footer .contact-footer__brand > p { margin: 30px 0; line-height: 1.7; }
body.eclipse-site > footer.contact-footer nav,
body.eclipse-site > footer.contact-footer .contact-footer__details { display: flex; flex-direction: column; gap: 14px; }
body.eclipse-site > footer.contact-footer b { margin-bottom: 10px; color: var(--white); font-weight: 500; text-transform: uppercase; }
body.eclipse-site > footer.contact-footer .contact-footer__legal { grid-column: 1 / -1; margin: 45px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); text-align: center; }
@media (max-width: 600px) {
  body.eclipse-site > footer:not(.contact-footer), body.eclipse-site > footer.contact-footer { grid-template-columns: 1fr; gap: 25px; padding-inline: 22px; }
  body.eclipse-site > footer.contact-footer .contact-footer__details { grid-column: 1; }
}

@media (max-width: 800px) {
  :root { --eclipse-blur: 56px; --eclipse-light-opacity: .64; }
  body.eclipse-site {
    background:
      radial-gradient(ellipse 58vw 480px at -28% 42%, rgba(var(--eclipse-deep-red), .14), transparent 78%),
      radial-gradient(ellipse 52vw 560px at 132% 76%, rgba(var(--eclipse-maroon), .08), transparent 78%),
      var(--eclipse-black);
    background-repeat: no-repeat;
  }
  .eclipse-atmosphere::before { inset: -80px; }
}

@media (forced-colors: active) {
  .eclipse-atmosphere, .eclipse-site .noise { display: none; }
}