/* ============================================================
   Gandy-Draper animation demo
   GSAP + ScrollTrigger powered.  CSS handles styling only;
   all animation choreography lives in script.js
   ============================================================ */

:root {
  --navy:        #0a1f3d;
  --navy-deep:   #061629;
  --navy-mid:    #122a4d;
  --cream:       #f5efe2;
  --cream-warm:  #efe7d4;
  --gold:        #caa544;
  --gold-tint:   rgba(202, 165, 68, 0.55);
  --slate-tint:  rgba(110, 140, 200, 0.50);
  --text:        #e8e3d5;
  --text-dim:    rgba(232, 227, 213, 0.70);
  --display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--navy);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overscroll-behavior: none;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }

/* ============================================================
   HEADER
   ============================================================ */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 30px 40px;
  background: linear-gradient(180deg, rgba(6,22,41,0.85) 0%, rgba(10,31,61,0.5) 60%, transparent 100%);
  font-family: var(--sans);
}

header .logo {
  display: inline-flex;
  align-items: baseline;
  font: 500 22px/1 var(--display);
  letter-spacing: 0.5px;
  color: var(--cream);
  margin-right: 48px;
}
header .logo .mark { font-weight: 600; color: var(--gold); margin-right: 8px; }
header .logo .word { font-weight: 400; }

header nav { font: 400 12px/1 var(--sans); letter-spacing: 1.5px; text-transform: uppercase; }
header nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
}
header nav.secondary { margin-left: auto; }
header nav a {
  color: var(--cream);
  transition: color 0.2s, opacity 0.4s;
  padding: 4px 0;
}
header nav a:hover { color: var(--gold); }

/* on slide 1, the wordmark sits in the upper-right area;
   hide the Get In Touch link so the two don't overlap */
body[data-slide="1"] header nav.secondary {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
header nav.secondary {
  transition: opacity 0.4s;
}

/* ============================================================
   STAGE - this is what GSAP pins
   ============================================================ */
#home-slides {
  position: relative;
  width: 100%;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ============================================================
   LOGO-FULL (slide 1 hero mark, top-right)
   ============================================================ */
.logo-full {
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 50; /* well above circles (z 1-3) */
  text-align: right;
  pointer-events: none;
}
.logo-full .wordmark {
  font: 600 36px/1 var(--display);
  /* gold reads on both navy bg AND the cream circle */
  color: var(--gold);
  letter-spacing: 0.5px;
  /* navy halo keeps it readable on the cream-circle portion */
  text-shadow:
    0 1px 2px rgba(10, 31, 61, 0.45),
    0 0 18px rgba(10, 31, 61, 0.35);
}
.logo-full .wordmark .dot { color: var(--cream); margin: 0 4px; }
.logo-full .established {
  font: 500 11px/1 var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: 14px;
  text-shadow: 0 1px 2px rgba(10, 31, 61, 0.5);
}

/* ============================================================
   CIRCLES
   - GSAP positions and animates these.
   - Initial top/left set in JS; size scales with viewport.
   ============================================================ */
.home-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: min(680px, 75vh);
  height: min(680px, 75vh);
  border-radius: 50%;
  text-align: center;
  pointer-events: none;
  /* GSAP centers via xPercent/yPercent + animates scale/x/y */
  /* hint browser to pre-allocate GPU layers - kills the first-scroll hesitation */
  will-change: transform, top, left;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* opaque cream is the "anchor" base. it ALWAYS sits at the back so the
   translucent circles can layer on top of it cleanly.
   only the translucent circles (gold, slate) get bumped to the front when
   they're the featured one. */
#home-circle-1 { background: var(--cream);      z-index: 1; }
#home-circle-2 { background: var(--gold-tint);  z-index: 2; }
#home-circle-3 { background: var(--slate-tint); z-index: 3; }

/* a translucent featured circle is brought to the front */
.home-circle.role-top { z-index: 10 !important; }

/* but cream stays at z=1 even when it's the featured one - because it's
   opaque it would otherwise cover the other circles' text. */
#home-circle-1.role-top { z-index: 1 !important; }

/* in cluster (non-featured), translucent ones sit just above cream */
.home-circle.role-bot-left,
.home-circle.role-bot-right { z-index: 5 !important; }
#home-circle-1.role-bot-left,
#home-circle-1.role-bot-right { z-index: 1 !important; }

/* a subtle gold halo on the featured circle for hierarchy */
.home-circle.is-active {
  filter: drop-shadow(0 6px 36px rgba(202, 165, 68, 0.28));
}

#home-circle-1 .circle-inner { color: var(--navy); }
#home-circle-2 .circle-inner,
#home-circle-3 .circle-inner { color: var(--cream); }

.circle-inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  text-align: center;
  transition: top 0.2s ease-out, left 0.2s ease-out;
  will-change: top, left;
}

/* role-based text placement so text sits in each circle's NON-overlapping zone:
   - top vertex circle:  text high up (above where the bottom circles intrude)
   - bottom-left circle:  text shifted LEFT (away from the cluster center)
   - bottom-right circle: text shifted RIGHT
   GSAP toggles these classes on slide change. */
.home-circle.role-top .circle-inner       { top: 22%; left: 50%; }
.home-circle.role-bot-left .circle-inner  { top: 53%; left: 34%; }
.home-circle.role-bot-right .circle-inner { top: 53%; left: 66%; }

.home-circle h3 {
  font: 500 32px/1.15 var(--sans);
  letter-spacing: 0.3px;
  display: inline-block;
  position: relative;
  margin-bottom: 18px;
  transition: font-size 0.25s ease-out;
}
.home-circle.is-active h3 {
  font: 600 44px/1.1 var(--sans);
  letter-spacing: 0.4px;
}
.home-circle h3 .underline {
  display: block;
  height: 3px;
  background: var(--gold);
  width: 0;
  margin: 8px auto 0;
  transition: width 0.4s ease-out;
}
.home-circle.is-active h3 .underline { width: 100%; height: 4px; }

.home-circle p {
  font: 400 19px/1.35 var(--sans);
  letter-spacing: 0.2px;
  transition: font-size 0.25s ease-out;
}
.home-circle.is-active p {
  font-size: 23px;
}

/* on slide 1, hide the in-circle copy */
body[data-slide="1"] .home-circle h3,
body[data-slide="1"] .home-circle p {
  opacity: 0;
}

/* ============================================================
   "Choose your service" centered label inside the cluster
   ============================================================ */
#home-circles-label {
  position: absolute;
  font: 600 15px/1.35 var(--sans);
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--cream);
  text-align: center;
  width: 130px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(6, 22, 41, 0.5);
}
#home-circles-label .lbl-w {
  display: block; /* desktop: stacked vertically */
}

/* ============================================================
   SLIDES (text panels)
   - All overlap; one is opacity 1 at a time, driven by GSAP.
   ============================================================ */
.slide {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.slide-inner h2 {
  font: 500 96px/1.05 var(--display);
  letter-spacing: -1px;
  color: var(--cream);
  margin-bottom: 28px;
}
.slide-inner p {
  font: 300 22px/1.45 var(--sans);
  color: var(--text);
  max-width: 640px;
}
.slide-inner p + p { margin-top: 1em; }

.slide-inner p.muted {
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 56px;
}
.slide-inner p.lede {
  color: var(--gold);
  font-style: italic;
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  margin-top: 28px;
}
.slide-inner p.cta {
  margin-top: 28px;
  font-size: 16px;
  letter-spacing: 1px;
}
.slide-inner p.cta a {
  color: var(--cream);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 4px;
  pointer-events: auto;
}
.slide-inner p.cta a:hover { color: var(--gold); }

/* slide 1: text bottom-left */
#slide-1 .slide-inner {
  position: absolute;
  left: 7vw;
  bottom: 8vh;
  width: 50vw;
  max-width: 720px;
}

/* slides 2-4: text on the right of the cluster */
#slide-2 .slide-inner,
#slide-3 .slide-inner,
#slide-4 .slide-inner {
  position: absolute;
  top: 22vh;
  left: 50vw;
  width: 44vw;
  max-width: 600px;
}

#slide-2 .slide-inner h2,
#slide-3 .slide-inner h2,
#slide-4 .slide-inner h2 {
  font-size: 68px;
  margin-bottom: 18px;
}
#slide-2 .slide-inner p,
#slide-3 .slide-inner p,
#slide-4 .slide-inner p {
  font-size: 19px;
}

/* ============================================================
   SCROLL HELP + INDICATOR
   ============================================================ */
#scroll-help {
  position: fixed;
  bottom: 28px;
  left: 7vw;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  animation: scroll_help_appear 0.8s ease 1.4s 1 forwards,
             scroll_help_bounce 1.4s ease-in-out 2.4s infinite;
}
.scroll-help-label {
  font: 400 10px/1 var(--sans);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.scroll-help-arrow {
  width: 18px; height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='17' viewBox='0 0 32 17'%3E%3Cpath d='M31.2-20l-.5-.5a.84.84 0 0 0-1.2 0L15.75-6.82 2-20.57a.84.84 0 0 0-1.2 0l-.5.5a.84.84 0 0 0 0 1.2l15.85 14.84a.84.84 0 0 0 1.2 0L31.18-18.87a.84.84 0 0 0 .02-1.13z' transform='translate(0 21)' fill='%23caa544'/%3E%3C/svg%3E");
  background: no-repeat center / contain;
}
@keyframes scroll_help_appear { to { opacity: 1; } }
@keyframes scroll_help_bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
body[data-slide]:not([data-slide="1"]) #scroll-help {
  opacity: 0;
  animation: none;
  transition: opacity 0.3s;
}

#scroll-indicator {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 10000;
  height: 120px;
  width: 12px;
  display: flex;
  justify-content: center;
}
#scroll-indicator .track {
  width: 1px;
  height: 100%;
  background: rgba(245, 239, 226, 0.25);
  display: block;
}
#scroll-indicator .dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(202, 165, 68, 0.6);
  top: 0;
  /* GSAP animates top */
}

/* ============================================================
   WATERMARK BAR
   - sits at the very top of the viewport, above the header
   - flags the build as a sample demo + credits danglaconsulting.com
   ============================================================ */
.watermark-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  border-radius: 0 0 14px 14px;
  background: var(--gold);
  color: var(--navy-deep);
  font: 600 10px/1 var(--sans);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.watermark-label { color: var(--navy-deep); }
.watermark-sep   { opacity: 0.6; }
.watermark-link {
  color: var(--navy-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}
.watermark-link:hover {
  color: var(--navy-deep);
  opacity: 0.7;
}

/* push the header down a hair on slide 1 so it doesn't tuck behind the bar */
header { padding-top: 38px; }

/* ============================================================
   MID-SIZE TYPOGRAPHY
   ============================================================ */
@media (max-width: 1500px) {
  .slide-inner h2                     { font-size: 78px; }
  .slide-inner p                      { font-size: 19px; }
  #slide-2 .slide-inner h2,
  #slide-3 .slide-inner h2,
  #slide-4 .slide-inner h2            { font-size: 52px; }
  #slide-2 .slide-inner p,
  #slide-3 .slide-inner p,
  #slide-4 .slide-inner p             { font-size: 17px; }
  .home-circle h3                     { font-size: 28px; }
  .home-circle.is-active h3           { font-size: 38px; }
  .home-circle p                      { font-size: 17px; }
  .home-circle.is-active p            { font-size: 20px; }
  .logo-full .wordmark                { font-size: 30px; }
}

@media (max-width: 1200px) {
  .slide-inner h2                     { font-size: 60px; }
  #slide-2 .slide-inner h2,
  #slide-3 .slide-inner h2,
  #slide-4 .slide-inner h2            { font-size: 42px; }
  #slide-1 .slide-inner                { width: 55vw; }
  #slide-2 .slide-inner,
  #slide-3 .slide-inner,
  #slide-4 .slide-inner               { width: 42vw; left: 52vw; top: 18vh; }
}

/* ============================================================
   MOBILE / TABLET FALLBACK (<= 980px)
   - GSAP scroll-pin disabled in script; circles stack normally
   ============================================================ */
/* ============================================================
   MOBILE / TABLET (<= 980px)
   editorial-style layout: brand mark + Venn cluster as the hero,
   then each service flows as a numbered, well-spaced section.
   ============================================================ */
@media (max-width: 980px) {

  body {
    overflow-x: hidden;
    background:
      radial-gradient(ellipse 100% 60% at 50% 0%, rgba(202,165,68,0.06) 0%, transparent 70%),
      var(--navy);
  }

  /* === HEADER === */
  header {
    padding: 38px 22px 14px;
    margin-right: 0 !important;
    background: linear-gradient(180deg, var(--navy-deep) 0%, rgba(10,31,61,0.85) 50%, transparent 100%);
  }
  header .logo {
    margin-right: 0;
    opacity: 1 !important;
    width: auto !important;
    font-size: 22px;
  }
  header .logo .mark {
    font-size: 22px;
    color: var(--gold);
    letter-spacing: 1px;
  }
  header .logo .word { display: none; }
  header nav { display: none; }

  /* === WATERMARK BAR === */
  .watermark-bar {
    font-size: 8px;
    padding: 5px 14px;
    letter-spacing: 1.5px;
    gap: 5px;
  }

  /* === STAGE === */
  #home-slides { padding-top: 0; }
  .stage {
    height: auto !important;
    min-height: auto;
    overflow: visible !important;
    position: relative;
    /* room for hero wordmark + cluster (wordmark + spacing + 188px cluster ~190px tall) */
    padding-top: 540px;
  }

  /* === HERO BRAND MARK (top of page) === */
  .logo-full {
    display: block !important;
    position: absolute !important;
    top: 76px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    z-index: 30;
    margin: 0;
  }
  .logo-full .wordmark {
    font: 500 34px/1 var(--display);
    color: var(--gold);
    letter-spacing: 0.5px;
    text-shadow: 0 1px 6px rgba(6,22,41,0.4);
  }
  .logo-full .wordmark .dot { color: var(--cream); margin: 0 4px; }
  .logo-full .established {
    font: 500 9px/1 var(--sans);
    letter-spacing: 4.5px;
    color: var(--cream);
    text-transform: uppercase;
    opacity: 0.55;
    margin-top: 14px;
  }

  /* === STATIC VENN CLUSTER === */
  /* pushed further down so wordmark + subtitle have clean breathing room.
     wordmark sits 76->76+34+14+9 = ~133px area (with margin-bottom).
     start cluster around y=270 to leave a generous 100px gap below subtitle. */
  .home-circle {
    position: absolute !important;
    width: 188px !important;
    height: 188px !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    will-change: auto;
    backface-visibility: visible;
    filter: none !important;
  }
  #home-circle-1 { top: 296px; left: 50%; z-index: 1; }
  #home-circle-2 { top: 422px; left: calc(50% + 60px); z-index: 2; }
  #home-circle-3 { top: 422px; left: calc(50% - 60px); z-index: 3; }

  /* center label on mobile - stacked (3 lines) so it sits compactly in the
     triple-overlap centroid, not stretched as a wide banner */
  #home-circles-label {
    position: absolute !important;
    display: block !important;
    top: 380px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.75 !important;
    font: 600 9px/1.5 var(--sans) !important;
    letter-spacing: 2.2px !important;
    width: 80px !important;
    z-index: 25;
    color: var(--cream);
    text-shadow: 0 1px 3px rgba(6,22,41,0.6);
    text-align: center;
  }
  #home-circles-label .lbl-w {
    display: block !important; /* stack each word on its own line */
  }

  /* circle text placement - shifted MORE outward into each circle's outer
     non-overlap zone so the SEO/Social labels don't sit on top of each other */
  .circle-inner { width: 72% !important; }
  #home-circle-1 .circle-inner { top: 30% !important; left: 50% !important; }
  #home-circle-2 .circle-inner { top: 60% !important; left: 68% !important; }   /* gold (right) - text shifted right */
  #home-circle-3 .circle-inner { top: 60% !important; left: 32% !important; }   /* slate (left) - text shifted left */

  .home-circle h3 {
    font: 600 15px/1.1 var(--sans) !important;
    letter-spacing: 0.2px;
    margin-bottom: 5px;
    opacity: 1 !important;
  }
  /* hide the underline accents on mobile - cluster is decorative */
  .home-circle h3 .underline { display: none; }
  .home-circle p {
    font: 400 10px/1.3 var(--sans) !important;
    opacity: 0.85 !important;
    letter-spacing: 0;
    /* force 2-line wrap so subtitles sit compactly in each circle's outer zone */
    max-width: 84px;
    margin: 0 auto;
  }

  /* === SECTIONS (slide content as flowing scroll) === */
  .slide {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: auto;
    padding: 0;
  }

  /* hero (slide 1) sits right under the cluster */
  #slide-1 {
    padding: 20px 26px 32px;
  }

  /* the three service slides get numbered & spaced like an editorial layout */
  #slide-2, #slide-3, #slide-4 {
    padding: 56px 26px 36px;
    position: relative;
  }
  #slide-2::before, #slide-3::before, #slide-4::before {
    display: block;
    font: 600 11px/1 var(--sans);
    color: var(--gold);
    letter-spacing: 4px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(202,165,68,0.25);
    width: 56px;
  }
  #slide-2::before { content: '01 / WEB'; }
  #slide-3::before { content: '02 / SEO'; }
  #slide-4::before { content: '03 / SOCIAL'; }

  .slide-inner,
  #slide-1 .slide-inner,
  #slide-2 .slide-inner,
  #slide-3 .slide-inner,
  #slide-4 .slide-inner {
    position: relative !important;
    inset: auto !important;
    top: auto !important; left: auto !important; bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* === TYPOGRAPHY === */
  /* hero (slide 1) headline */
  #slide-1 .slide-inner h2 {
    font: 500 38px/1.05 var(--display) !important;
    letter-spacing: -0.5px;
    color: var(--cream);
    margin-bottom: 18px;
  }
  #slide-1 .slide-inner p {
    font: 300 16px/1.55 var(--sans) !important;
    color: var(--text);
    margin-bottom: 28px;
  }
  #slide-1 .slide-inner p.muted {
    font: 500 10px/1 var(--sans) !important;
    letter-spacing: 4px;
    color: var(--text-dim);
    margin-top: 22px;
    margin-bottom: 0;
    position: relative;
    padding-left: 32px;
  }
  #slide-1 .slide-inner p.muted::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 1px;
    background: var(--gold);
    opacity: 0.6;
  }

  /* service section headings */
  #slide-2 .slide-inner h2,
  #slide-3 .slide-inner h2,
  #slide-4 .slide-inner h2 {
    font: 500 32px/1.1 var(--display) !important;
    letter-spacing: -0.4px;
    color: var(--cream);
    margin-bottom: 16px;
    position: relative;
  }
  /* gold underline accent under each service title */
  #slide-2 .slide-inner h2::after,
  #slide-3 .slide-inner h2::after,
  #slide-4 .slide-inner h2::after {
    content: '';
    display: block;
    width: 38px;
    height: 2px;
    background: var(--gold);
    margin-top: 14px;
  }

  #slide-2 .slide-inner p,
  #slide-3 .slide-inner p,
  #slide-4 .slide-inner p {
    font: 300 15px/1.6 var(--sans) !important;
    color: var(--text);
    margin-bottom: 18px;
  }

  /* italic pull quotes */
  .slide-inner p.lede {
    font: 400 italic 18px/1.4 var(--display) !important;
    color: var(--gold);
    margin-top: 22px;
    margin-bottom: 0;
    padding-left: 18px;
    border-left: 2px solid rgba(202,165,68,0.45);
  }

  /* CTA email link in slide 4 */
  .slide-inner p.cta {
    margin-top: 32px;
    font-size: 14px;
    letter-spacing: 0.5px;
  }
  .slide-inner p.cta a {
    display: inline-block;
    color: var(--cream);
    background: linear-gradient(135deg, var(--gold) 0%, #b58d2b 100%);
    color: var(--navy-deep);
    padding: 14px 24px;
    border-radius: 999px;
    font: 600 13px/1 var(--sans);
    letter-spacing: 0.8px;
    text-decoration: none;
    border: none;
    box-shadow: 0 4px 18px rgba(202,165,68,0.25);
  }
  .slide-inner p.cta a:hover {
    color: var(--navy-deep);
    opacity: 0.9;
  }

  /* === HIDE DESKTOP SCROLL AFFORDANCES === */
  #scroll-help, #scroll-indicator { display: none !important; }

  /* footer-ish bottom margin */
  #slide-4 { padding-bottom: 80px; }
}