/* ============================================
   Objections selector
   Composed headline ("We got X for that.") with a vertical
   word-rotator. Active word centers on a dark panel;
   "for that." follows the active word's natural width.
   Right-side panel is a structural section that crossfades
   through cards. Photo background per word crossfades on
   rotation.
   ============================================ */

/* ---------- Hero shell (3 stacked layers) ---------- */
.obj-hero {
  position: relative;
  background: linear-gradient(135deg, #0b0b0a 0%, #1a1a18 100%);
  color: var(--white);
  overflow: hidden;
  min-height: 940px;
  padding: 120px 0 100px;
}
/* Layer 0: background photos */
.obj-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.obj-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Slight saturation boost; no grayscale — let the photo's colors show. */
  filter: saturate(1.08);
  transition: opacity 1.2s var(--ease-soft);
}
.obj-bg-img.is-active { opacity: 0.55; }
/* Layer 1: dark + accent overlay glow */
.obj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 500px at 18% 30%, rgba(var(--accent-rgb), 0.22), transparent 70%),
    radial-gradient(700px 600px at 90% 70%, rgba(var(--accent-rgb), 0.14), transparent 75%),
    linear-gradient(180deg, rgba(11, 11, 10, 0.45) 0%, rgba(11, 11, 10, 0.65) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Layer 2: content */
.obj-hero .container {
  position: relative;
  max-width: 1320px;
  z-index: 2;
}

/* ---------- Layout: lead-in + headline left, absolute pane right ---------- */
/* The right-side pane is positioned absolutely against .obj-hero so it can
   span the section's full vertical edge, like a glass overlay. We reserve
   horizontal space here via padding-right so the headline never extends
   into the pane area. Column direction stacks the lead-in above the headline. */
.obj-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  min-height: 760px;
  padding-right: clamp(380px, 32vw, 500px);
}

/* Conversational lead-in above the rotating headline. Italic at near-full
   white so it reads clearly against the colored photo bg without blending in,
   but slightly transparent + smaller than the headline so it stays a
   secondary voice. */
.obj-lead-in {
  display: block;
  font-size: clamp(22px, 2.2vw, 36px);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.1;
  margin-left: -2vw;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* ---------- Composed headline ---------- */
/* The mask-image is applied on the row (not on .obj-slot) so it spans the
   full width of "We got" → slot → "for that." That way ghost words
   extending rightward past the slot edge still get the vertical fade.
   Static text sits at vertical center where the mask is fully opaque, so
   it renders solid — only the rotating word stack rows actually fade. */
.obj-headline {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  font-family: var(--font);
  font-size: clamp(28px, 4vw, 60px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--white);
  /* Mask clear band centered around the active word at 50%; symmetric fade
     out on both sides so ghost words taper evenly above and below. */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 30%,
    black 70%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 30%,
    black 70%,
    transparent 100%
  );
}
.obj-headline-static {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  z-index: 2; /* above the slot so ghost words can't paint over static text */
}

/* ---------- Word slot ---------- */
/* clip-path: top/bottom hard-bounded so the word stack doesn't bleed
   above and below; right extended -100vw so longer inactive words don't
   clip horizontally when a shorter word is active. The vertical fade
   itself lives on .obj-headline above. */
.obj-slot {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
  height: 8em;
  width: 80px; /* JS resizes to the active word's natural width */
  transition: width 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  clip-path: inset(0 -100vw 0 0);
}
.obj-words {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  /* Active word centered in the slot — keeps the visible stack symmetric
     (ghost words above + active + ghost words below, all fading evenly),
     so the section reads as visually balanced. */
  inset: 50% 0 auto 0;
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.obj-word {
  height: 1.5em;
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.22);
  /* Fraunces italic — modern serif accent against the Zen Kaku sans body. */
  font-family: 'Fraunces', 'Zen Kaku Gothic New', serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color 0.5s var(--ease-soft);
}
.obj-word:hover  { color: rgba(255, 255, 255, 0.55); }
.obj-word.is-active { color: var(--white); }
/* Suppress the browser's default click-focus ring (blue/black outline that
   lingered on the clicked word). Keep a clean accent outline for keyboard
   navigation only via :focus-visible — accessible without the mouse-click
   visual artifact. */
.obj-word:focus { outline: none; }
.obj-word:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.7);
  outline-offset: 3px;
  border-radius: 12px;
}
.obj-word-inner {
  display: inline-flex;
  align-items: center;
  /* Bottom > top: cap-height sits in the upper portion of the line-box,
     so equal vertical padding looks top-heavy. Horizontal is symmetric. */
  padding: 2px 16px 6px;
  border-radius: 10px;
  /* Inactive state: subtle gray-translucent box so each word reads as a
     pill-shaped option, even when not in focus. */
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background 0.45s var(--ease-soft),
              box-shadow 0.45s var(--ease-soft);
}
.obj-word.is-active .obj-word-inner {
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ---------- Right-side pane (full-section-height frosted glass) ---------- */
/* Anchored absolutely to .obj-hero so it spans the section's full vertical
   edge — top to bottom — independent of the grid/container padding above
   it. A thin divider on the left separates the clear photo zone from the
   blurred pane zone. */
.obj-card-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(380px, 32vw, 500px);
  z-index: 2;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  overflow: hidden;
}
.obj-card {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;  /* center content vertically in the tall pane */
  gap: 31px;
  padding: 56px 44px;
  animation: obj-card-fade 0.5s var(--ease-soft);
}
.obj-card.is-active { display: flex; }
@keyframes obj-card-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.obj-card-body {
  font-size: 24px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
  margin: 0;
}
.obj-card-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 14px 28px;
  background: var(--accent);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s var(--ease-soft), background 0.2s var(--ease-soft);
}
.obj-card-cta:hover {
  transform: translateY(-1px);
  background: rgba(var(--accent-rgb), 0.92);
}

/* ---------- In-page modifier ---------- */
/* Tones down the standalone hero treatment when this section sits inside
   another page (e.g. the homepage). Lighter charcoal base, no accent
   radial glow, dimmer photo, hairline seam at the bottom — so adjacent
   dark sections don't visually muddle. */
.obj-hero--inline {
  min-height: 780px;
  padding: 72px 0 56px;
  background: linear-gradient(135deg, #222226 0%, #2a2a30 100%);
}
.obj-hero--inline .obj-grid             { min-height: 640px; }
.obj-hero--inline .obj-bg-img.is-active { opacity: 0.50; }
.obj-hero--inline::before {
  /* Replace the radial accent glow with a softer dark overlay so the
     lighter charcoal base shows through. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.obj-hero--inline::after {
  /* Hairline seam to delineate from the next dark section. */
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(var(--accent-rgb), 0.45) 50%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* ---------- Auto-rotation progress ring ---------- */
/* Lower-left corner; fills over ROTATE_MS while auto-rotating, resets to
   empty when paused (manual jump). Driven via inline transition + dashoffset
   on .obj-progress-fill from objections-selector.js. */
.obj-progress {
  position: absolute;
  left: clamp(20px, 3vw, 56px);
  bottom: clamp(20px, 3vw, 56px);
  width: 36px;
  height: 36px;
  z-index: 3;
  pointer-events: none;
}
.obj-progress-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.obj-progress-track,
.obj-progress-fill {
  fill: none;
  stroke-width: 2;
}
.obj-progress-track { stroke: rgba(255, 255, 255, 0.18); }
.obj-progress-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* ---------- Mobile-only navigation arrows (hidden on desktop) ---------- */
.obj-mobile-controls { display: none; }
.obj-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.2s var(--ease-soft);
}
.obj-arrow:active { background: rgba(255, 255, 255, 0.18); }
.obj-arrow:hover  { background: rgba(255, 255, 255, 0.14); }

/* ---------- Mobile / narrow desktop ---------- */
@media (max-width: 1200px) {
  .obj-hero,
  .obj-hero--inline {
    min-height: 0;
    padding: 80px 0 40px;
  }
  .obj-grid,
  .obj-hero--inline .obj-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    padding-right: 0;
  }
  /* Headline: same inline layout as desktop ("We got [slot] for that." on
     one line), just at a smaller font. flex-wrap allows graceful wrap on
     very narrow phones. */
  .obj-headline {
    flex-wrap: wrap;
    font-size: clamp(22px, 5.6vw, 36px);
  }
  /* Slot stays inline + auto-sized (JS controls width to active word's
     natural width). Just shorter so the ghost stack doesn't dominate the
     phone screen. */
  .obj-slot {
    height: 5em;
  }
  /* Slightly tighter row height on mobile — small visible gap, no flush. */
  .obj-word {
    height: 1.48em;
  }
  .obj-mobile-controls {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 6px;
  }
  /* On mobile, the absolute pane returns to in-flow and stacks below the
     headline. The full-section-height treatment doesn't make sense here;
     revert to a solid translucent card with rounded corners. */
  .obj-card-wrap {
    position: static;
    width: 100%;
    overflow: visible;
    border-left: none;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-top: 12px;
  }
  .obj-card {
    position: relative;
    inset: auto;
    justify-content: flex-start;
    padding: 20px 28px 36px;
    gap: 18px;
  }
  .obj-card-body {
    font-size: 19px;
    line-height: 1.5;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.96);
  }
  .obj-card-cta {
    font-size: 15px;
    padding: 12px 24px;
  }
}