/* ==========================================================================
   CCC Parallax Hero
   Loaded only when [ccc_parallax] shortcode is present.
   ========================================================================== */

:root {
  --ccc-dark-bot: #242E42; /* parallax gradient bottom — no matching token in style.css */
  --stage-scale: 1;        /* set by JS to scale the 1920×1080 design canvas */
}

#ccc-parallax-scroll *,
#ccc-logo * {
  box-sizing: border-box;
}

/* PARALLAX WRAPPER */
#ccc-parallax-scroll {
  position: relative;
  background: transparent;
}

#ccc-parallax-stage {
  position: relative;
  top: 0 !important;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom, #1A2230, var(--ccc-dark-bot));
  z-index: 50;
}

#ccc-stage-inner {
  position: absolute;
  width: 1920px;  /* px — JS scale formula uses this exact value: vw / 1920 */
  height: 1080px; /* px — JS scale formula uses this exact value: vh / 1080 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: center center;
  z-index: 2;
}

/* White background reveal */
#ccc-white-reveal {
  position: absolute;
  inset: 0;
  background: var(--ccc-color-offwhite);
  clip-path: circle(0px at 50% 57%); /* 0px kept — GSAP animates this string */
  pointer-events: none;
  z-index: 1;
}

#ccc-stage-inner > * {
  position: absolute;
  z-index: 2;
}

/* Decorative circles */
.ccc-circle {
  border: 0.0625rem solid var(--ccc-color-orange);
  border-radius: 50%;
  opacity: 0.75;
  pointer-events: none;
}

#ccc-circle-1 {
  width: 83.625rem; height: 83.625rem; /* 1338px — r=669 from XD */
  left: -15.5rem; top: -39.9375rem;
}
#ccc-circle-2 {
  width: 83.625rem; height: 83.625rem;
  left: 51.875rem; top: 27.4375rem;
}
#ccc-circle-3 {
  width: 47.5rem; height: 47.5rem;
  left: 36.25rem; top: 19.375rem;
  opacity: 0;
}

/* Impact circle */
#ccc-impact-circle {
  width: 45rem;
  height: 45rem;
  left: 37.5rem;
  top: 18.125rem;
  border: 0.0625rem solid var(--ccc-color-orange);
  border-radius: 50%;
  opacity: 0;
  z-index: 3;
}

/* Flying logo — fixed at root level, above the site header */
#ccc-logo {
  position: fixed;
  left: 18.75rem;
  top: 18.125rem;
  width: 32.5rem;
  display: block;
  z-index: 9999;
  transform-origin: left top;
  cursor: pointer;
  background: transparent; /* no fill mid-flight; only needed once arrived, see .logo-arrived below */
}
#ccc-logo img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1; /* above #ccc-logo::after line */
  background: transparent;
}

/* Once the logo reaches the header corner (.logo-arrived, toggled by
   ccc-parallax.js off scroll progress), fill the logo's transparent PNG
   pixels so the accent line doesn't bleed through gaps inside the
   letterforms. Not needed mid-flight — the line itself is still at
   opacity 0 until arrival (#ccc-logo.logo-arrived::after below). */
@media (min-width: 769px) {
  #ccc-logo.logo-arrived {
    background: var(--ccc-color-navy);
    /* Safety net: #ccc-logo's width is only ever set via inline style from JS
       (GSAP tween mid-flight, direct assignment on the "already seen" skip
       path) — there's no CSS-driven cap of its own. If that JS-set width
       ever ends up stale/wrong in a given browser once the logo is
       supposed to have arrived at its small header-corner size, this forces
       it back down to the same target width already computed for the
       accent line (--ccc-logo-target-w, set alongside the width tween in
       ccc-parallax.js) instead of silently rendering oversized and
       overlapping the content below the header. */
    max-width: var(--ccc-logo-target-w, 12rem);
  }
  #ccc-logo.logo-arrived img {
    background: var(--ccc-color-ink);
  }
}

/* Parallax logo accent line — uses JS-set --ccc-logo-target-w so width is always the
   animated target size, not the large start size that GSAP scrub hasn't caught up to yet */
#ccc-logo::after {
  content: '';
  position: absolute;
  left: -3.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--ccc-logo-target-w, 10.625rem) + 7rem);
  height: 1px;
  background: var(--ccc-color-orange);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}
#ccc-logo.logo-arrived::after {
  opacity: 1;
}

/* Hero "More X" */
#ccc-hero {
  top: 75rem;
  left: 0;
  width: 100%; /* full 1920px canvas — text-align:center keeps phrase centred */
  text-align: center;
  font-weight: 500;
  font-size: 4.375rem; /* 70px — XD artboard spec */
  line-height: 1;
  white-space: nowrap;
  color: var(--ccc-color-offwhite);
  transform-origin: center top; /* scale from centre so centering is preserved */
}
#ccc-hero .more {
  display: inline-block;
  vertical-align: top;
  line-height: 1;
  color: var(--ccc-color-offwhite);
}
.ccc-hero-word-wrap {
  display: inline-block;
  position: relative;
  height: 1em;
  vertical-align: top;
  line-height: 1;
  margin-left: 0.5rem;
  /* width set dynamically by JS to match the current word */
}
.ccc-hero-word {
  position: absolute;
  top: 0; left: 0;
  line-height: 1;
  color: var(--ccc-color-orange);
  opacity: 0;
}
#ccc-word-1 { opacity: 1; }

/* Beliefs title */
#ccc-beliefs-title {
  top: 31.5625rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: 700; /* was 500 — bolded to stand out more */
  font-size: 3.125rem; /* 50px — XD artboard spec */
  color: var(--ccc-color-offwhite);
  opacity: 0;
}

/* Belief cards */
.ccc-belief {
  top: 50rem;
  width: 30rem;
  text-align: center;
  opacity: 0;
  color: var(--ccc-color-offwhite);
}
.ccc-belief h3 {
  font-weight: 700; /* was 500 — bolded to stand out more from the body copy below */
  font-size: 2.8125rem; /* 45px — XD artboard spec */
  margin-bottom: 1.25rem;
  color: var(--ccc-color-offwhite);
}
.ccc-belief p {
  font-weight: 500;
  font-size: 1.625rem; /* 26px — was 31px; smaller so the paragraph leaves a bit of space below within the card */
  line-height: 1.3;
  color: var(--ccc-color-offwhite);
}
#ccc-belief-1 { left: 1.875rem; }
#ccc-belief-2 { left: 45rem; }
#ccc-belief-3 { left: 88.125rem; }

/* "Our Impact" TEXT */
#ccc-impact-text {
  width: 37.5rem;
  left: 41.25rem;
  top: 30.625rem;
  font-weight: 500;
  font-size: 9.375rem; /* 150px — XD artboard spec */
  line-height: 1;
  color: var(--ccc-color-offwhite);
  opacity: 0;
  text-align: center;
  z-index: 4;
}
#ccc-impact-text .our,
#ccc-impact-text .impact {
  display: block;
}
#ccc-impact-text .impact {
  margin-top: 1.25rem;
}

/* STATS block */
#ccc-stats {
  left: 9.375rem; /* 150px right of stage edge — gives clearance from the circle */
  top: 0;
  width: 120rem;
  height: 67.5rem;
  opacity: 0;
  color: var(--ccc-color-ink);
  z-index: 5;
}
.ccc-stat {
  position: absolute;
}
#ccc-stat-1 { left: 51.25rem;  top: 10rem; }
#ccc-stat-2 { left: 55rem;     top: 22.5rem; }
#ccc-stat-3 { left: 56.25rem;  top: 37.5rem; }
#ccc-stat-4 { left: 53.75rem;  top: 52.5rem; }

/* FINAL SLIDE — kept on the navy scene instead of the white reveal used for
   the impact stats just before it (see #ccc-final-bg below); text colors are
   the light-on-navy pair, not the ink-on-white pair the stats section uses. */
#ccc-final {
  position: absolute; /* explicit — also set by #ccc-stage-inner > * but guarded here */
  left: 5.625rem;
  top: 15rem; /* 240px — was 380px; that left a large empty gap above the headline */
  width: 108.75rem;
  opacity: 0;
  z-index: 6;
}
#ccc-final .ccc-final-headline {
  font-weight: 700;
  font-size: 6.25rem; /* 100px canvas (was 150px) — was rendering oversized relative to the rest of the scene */
  line-height: 1.15;
  color: var(--ccc-color-white);
  text-align: left;
}
#ccc-final .ccc-final-headline .hl {
  color: var(--ccc-color-orange);
}
#ccc-final .ccc-final-sub {
  font-style: italic;
  font-weight: 300;
  font-size: 1.875rem; /* 30px */
  color: var(--ccc-color-white);
  opacity: 0.7; /* muted secondary text — same opacity-based de-emphasis as .ccc-stat-desc, but on a dark bg there's no separate muted-gray token to reach for */
  margin-top: 2.25rem;
  text-align: left;
}

/* Navy backdrop for the final slide only. Deliberately a sibling of
   #ccc-white-reveal (both direct children of #ccc-parallax-stage) rather
   than a child of #ccc-stage-inner — #ccc-stage-inner is the 1920x1080
   canvas that gets scaled+centered via `transform: scale(var(--stage-scale))`,
   so inset:0 in there only covers that scaled-down canvas box, leaving a
   visible margin around it. Sitting alongside #ccc-white-reveal instead
   means inset:0 covers the full unscaled stage (100%/100vh), same as the
   white reveal it's covering up.
   z-index:2 matches #ccc-stage-inner's own z-index and relies on DOM order
   (this div is placed before #ccc-stage-inner in the markup) so equal
   z-index still resolves in #ccc-stage-inner's favor — its contents
   (#ccc-final, z-index:6 internally) stay visible on top of this navy fill,
   while this still paints over #ccc-white-reveal's z-index:1. */
#ccc-final-bg {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--ccc-color-navy);
  opacity: 0;
  pointer-events: none;
}
.ccc-stat-num {
  font-size: 5rem; /* 80px — XD artboard spec */
  font-weight: 500;
  color: var(--ccc-color-orange);
  line-height: 1;
}
.ccc-stat-num.large {
  font-size: 5rem; /* 80px — same as regular per XD; no large variant in design */
}
.ccc-stat-label {
  font-size: 1.875rem; /* 30px — XD artboard spec */
  font-weight: 700;
  color: var(--ccc-color-ink);
  margin-top: 0.5rem;
  line-height: 1;
}
.ccc-stat-desc {
  font-size: 1.25rem; /* 20px — XD artboard spec */
  font-weight: 400;
  color: var(--ccc-color-ink);
  opacity: 0.75;
  margin-top: 0.375rem;
  line-height: 1.2;
}

/* ============================================================
   TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  #ccc-belief-1 { left: 1.25rem; }
  #ccc-belief-2 { left: 45rem; }
  #ccc-belief-3 { left: 88.75rem; }
}

/* Flying logo — no background or pointer interception on mobile (no orange line, no hamburger conflict) */
@media (max-width: 768px) {
  #ccc-logo {
    background: transparent;
    pointer-events: none; /* clicks pass through to header content (hamburger etc.) */
  }
  #ccc-logo img {
    pointer-events: auto; /* restore pointer events on the image itself so the logo is still tappable */
  }
  #ccc-logo::after {
    display: none;
  }
}

/* Mobile-static hero — hidden on desktop, shown in place of parallax on mobile */
#ccc-mobile-hero {
  display: none !important;
}

/* ============================================================
   MOBILE (≤768px) — portrait design space 440×900
   ============================================================ */
@media (max-width: 768px) {
  /* Disable the full parallax section; logo is re-positioned to header by JS */
  #ccc-parallax-scroll { display: none !important; }

  /* Orange header line is desktop-only — too cluttered in compact mobile header */
  .logo-place::after { display: none !important; }

  /* Static "We protect" hero — compact height on mobile */
  #ccc-mobile-hero {
    display: flex !important;
    align-items: center;
    min-height: auto;
    background: var(--ccc-color-navy);
    padding: 5rem 10% 3.5rem;
    box-sizing: border-box;
  }
  .ccc-mobile-hero-headline {
    font-weight: 700;
    font-size: 2.375rem;
    line-height: 1.2;
    color: var(--ccc-color-white);
    text-align: left;
  }
  .ccc-mobile-hero-headline .hl {
    color: var(--ccc-color-orange);
  }
  #ccc-stage-inner {
    width: 440px;  /* px — JS scale formula uses this exact value: vw / 440 */
    height: 900px; /* px — kept to match JS */
  }

  #ccc-white-reveal { clip-path: circle(0px at 50% 52%); } /* 0px — GSAP string */

  #ccc-circle-1 { width: 28.75rem; height: 28.75rem; }
  #ccc-circle-2 { width: 28.75rem; height: 28.75rem; }
  #ccc-circle-3 { width: 23.75rem; height: 23.75rem; }
  #ccc-impact-circle { width: 20rem; height: 20rem; }

  #ccc-hero {
    width: 25rem;
    white-space: normal;
    text-align: center;
    font-size: 3.625rem; /* 58px — scaled from 70px desktop */
    line-height: 1.1;
    display: block;
    transform-origin: center center;
  }
  #ccc-hero .more { display: inline; }
  .ccc-hero-word-wrap {
    display: inline;
    position: static;
    width: auto;
    height: auto;
    margin-left: 0.5rem;
  }
  .ccc-hero-word {
    position: static;
    display: none;
  }
  #ccc-word-1 { display: inline; }

  #ccc-beliefs-title { font-size: 2.1875rem; } /* 35px — XD mobile artboard spec */

  .ccc-belief { width: 25rem; text-align: center; }
  .ccc-belief h3 { font-size: 2.0625rem; margin-bottom: 0.5rem; } /* 33px — scaled from 45px desktop */
  .ccc-belief p  { font-size: 1.125rem; line-height: 1.25; } /* 18px — scaled from 26px desktop */

  #ccc-impact-text { width: 25rem; font-size: 5.25rem; text-align: center; } /* scaled from 150px desktop */
  #ccc-impact-text .impact { margin-top: 0.375rem; }

  .ccc-stat { width: 25rem; text-align: center; }
  .ccc-stat-num        { font-size: 3rem; } /* scaled from 80px desktop */
  .ccc-stat-num.large  { font-size: 3rem; }
  .ccc-stat-label      { font-size: 1.125rem; margin-top: 0.25rem; } /* scaled from 30px desktop */
  .ccc-stat-desc       { font-size: 0.8125rem; } /* scaled from 20px desktop */

  #ccc-final { width: 25rem; text-align: center; }
  #ccc-final .ccc-final-headline { font-size: 2.75rem; line-height: 1.2; } /* 44px — XD mobile 30px/desktop 100px ratio applied */
  #ccc-final .ccc-final-sub { font-size: 1rem; text-align: center; margin-top: 1rem; }
}