/* ==========================================================================
   Chat About Ben – CTA Component
   Shared design system for the primary "Chat About Ben" call-to-action.
   Imported by landing.css and hire-me.css — single source of truth.

   Design tokens (scoped to CTA):
   --cta-max-w:    max width for all CTA-level elements (primary + secondary)
   --cta-radius:   border-radius for the primary button
   --cta-radius-s: border-radius for secondary buttons
   ========================================================================== */

/* -- Design tokens -------------------------------------------------------- */

.hero-cta-section {
  --cta-max-w: min(100%, 28rem);          /* 448px — shared cap for both rows  */
  --cta-radius: 1.85rem;                  /* smooth pill-ish corners           */
  --cta-radius-s: 1.15rem;               /* softer secondary btn corners      */
}

/* -- Section layout ------------------------------------------------------ */

.hero-cta-section {
  display: flex;
  flex-direction: column;
  gap: clamp(0.95rem, 2.2vw, 1.5rem);
  align-items: center;
  text-align: center;
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

.hero-cta {
  display: flex;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  width: 100%;
  justify-content: center;
  align-items: center;
}

.primary-cta {
  justify-content: center;
  max-width: var(--cta-max-w);
  width: 100%;
}

.secondary-cta {
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.55rem, 1.2vw, 0.85rem);
  max-width: var(--cta-max-w);
  width: 100%;
}

/* -- Primary CTA (btn-large) --------------------------------------------- */

.btn-large {
  display: inline-flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  gap: clamp(0.4rem, 0.85vw, 0.65rem);
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.8rem, 4vw, 2.8rem);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  color: #ecf5ff;
  background: linear-gradient(
    140deg,
    rgba(16, 24, 52, 0.97) 0%,
    rgba(28, 24, 68, 0.96) 24%,
    rgba(34, 28, 78, 0.95) 40%,
    rgba(22, 72, 112, 0.92) 68%,
    rgba(18, 130, 162, 0.82) 100%
  );
  border: 1.5px solid rgba(157, 224, 255, 0.32);
  border-radius: var(--cta-radius);
  isolation: isolate;
  contain: paint;
  box-shadow:
    /* inner highlight — top edge catch-light */
    0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
    /* inner shadow — bottom depth */
    0 -2px 4px 0 rgba(8, 14, 32, 0.4) inset,
    /* subtle outer ring */
    0 0 0 1px rgba(100, 160, 230, 0.12),
    /* ambient glow */
    0 0 18px rgba(99, 102, 241, 0.08),
    /* medium offset shadow */
    0 6px 14px rgba(6, 10, 24, 0.28),
    /* deep diffused shadow */
    0 16px 40px rgba(6, 10, 24, 0.38);
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.24s ease,
    box-shadow 0.32s ease;
}

.btn-large > * {
  position: relative;
  z-index: 2;
}

/* Layer 1 — Ambient colour wash (always visible, slowly drifts) */
.btn-large::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 120% 80% at 20% 25%, rgba(129, 140, 248, 0.22), transparent 60%),
    radial-gradient(ellipse 100% 90% at 80% 75%, rgba(34, 211, 238, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(168, 85, 247, 0.1), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
  animation: ctaAmbientDrift 8s ease-in-out infinite alternate;
}

/* Layer 2 — Glass sheen sweep (continuous subtle loop, intensifies on hover) */
.btn-large::after {
  content: '';
  position: absolute;
  inset: -16% -50%;
  border-radius: inherit;
  background:
    linear-gradient(
      108deg,
      transparent 12%,
      rgba(255, 255, 255, 0.005) 24%,
      rgba(255, 255, 255, 0.06) 38%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.06) 62%,
      rgba(255, 255, 255, 0.005) 76%,
      transparent 88%
    ),
    linear-gradient(
      108deg,
      transparent 30%,
      rgba(129, 140, 248, 0.1) 50%,
      transparent 70%
    );
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
  animation: ctaGlassSweep 6s ease-in-out infinite alternate;
}

.btn-large:hover {
  transform: translateY(-3px);
  border-color: rgba(165, 223, 255, 0.55);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.16) inset,
    0 -2px 4px 0 rgba(8, 14, 32, 0.35) inset,
    0 0 0 1px rgba(129, 140, 248, 0.2),
    0 0 24px rgba(99, 102, 241, 0.14),
    0 10px 22px rgba(37, 99, 235, 0.2),
    0 24px 48px rgba(6, 10, 24, 0.35);
}

.btn-large:hover::after {
  opacity: 0.55;
  animation: ctaGlassSweep 3.6s ease-in-out infinite alternate;
}

/* -- CTA internals -------------------------------------------------------- */

.btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 1.3vw, 0.95rem);
  max-width: 100%;
}

.btn-large .btn-icon {
  width: clamp(3.6rem, 8vw, 5rem);
  height: clamp(2.75rem, 5.8vw, 3.6rem);
  flex-shrink: 0;
  filter:
    drop-shadow(0 1px 3px rgba(5, 10, 24, 0.35))
    drop-shadow(0 4px 8px rgba(99, 102, 241, 0.15));
  position: relative;
  z-index: 2;
  color: oklch(0.9 0.07 210);
  overflow: visible;
  stroke-width: 2.15;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.btn-large:hover .btn-icon {
  filter:
    drop-shadow(0 1px 3px rgba(5, 10, 24, 0.3))
    drop-shadow(0 6px 14px rgba(99, 102, 241, 0.25));
  transform: scale(1.06);
}

.cta-logo {
  position: relative;
  display: inline-block;
  padding-right: clamp(2.2rem, 6vw, 3.6rem);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 8px rgba(4, 10, 26, 0.52),
    0 0 14px rgba(56, 189, 248, 0.24);
  transform: translate(2px, -4px);
  max-width: 100%;
}

.cta-logo-strong {
  font-size: clamp(2.2rem, 6.4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(
    138deg,
    oklch(0.82 0.18 280) 0%,
    oklch(0.84 0.22 296) 28%,
    oklch(0.80 0.26 320) 52%,
    oklch(0.84 0.20 252) 76%,
    oklch(0.88 0.14 210) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: rotate(-1deg);
  display: inline-block;
  line-height: 0.95;
}

.cta-logo-script {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 600;
  font-size: clamp(1.7rem, 5.2vw, 2.8rem);
  color: oklch(0.88 0.1 210);
  position: absolute;
  left: 36%;
  top: 78%;
  transform: translate(-14%, -46%) rotate(-10deg);
  text-shadow:
    0 0 18px oklch(0.72 0.16 230 / 0.5),
    0 0 6px oklch(0.86 0.12 210 / 0.4),
    0 3px 8px rgba(4, 10, 26, 0.5);
  white-space: nowrap;
  pointer-events: none;
}

.btn-large:hover .cta-logo-strong {
  animation: logoShimmer 2.6s ease-in-out infinite;
}

.btn-subtitle {
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  font-weight: 400;
  opacity: 0.95;
  font-style: italic;
  position: relative;
  z-index: 2;
  color: oklch(0.82 0.04 215);
  text-shadow: 0 1px 3px rgba(2, 6, 23, 0.4);
  margin-top: clamp(0.3rem, 0.7vw, 0.5rem);
}

/* -- Secondary buttons within hero CTA ------------------------------------ */

.hero-cta-section .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1vw, 0.6rem);
  padding: clamp(0.8rem, 1.6vw, 1.05rem) clamp(1.6rem, 3.2vw, 2.2rem);
  border-radius: var(--cta-radius-s);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 6px rgba(10, 15, 26, 0.16),
    0 2px 6px rgba(6, 10, 24, 0.12),
    0 8px 20px rgba(6, 10, 24, 0.08);
  position: relative;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 -1px 1px rgba(0, 0, 0, 0.35);
  transition:
    color 0.24s ease,
    background-color 0.24s ease,
    box-shadow 0.28s ease,
    border-color 0.24s ease,
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-cta-section .btn-secondary:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 6px rgba(10, 15, 26, 0.12),
    0 4px 12px rgba(6, 10, 24, 0.16),
    0 12px 28px rgba(6, 10, 24, 0.1);
}

.hero-cta-section .btn-secondary svg {
  width: clamp(16px, 2vw, 20px);
  height: clamp(16px, 2vw, 20px);
}

.hero-cta-section .btn-accent {
  --btn-accent-1: rgba(34, 211, 238, 0.16);
  --btn-accent-2: rgba(59, 130, 246, 0.18);
  --btn-accent-3: rgba(244, 114, 182, 0.18);
}

.hero-cta-section .btn-accent::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg,
    var(--btn-accent-1),
    var(--btn-accent-2),
    var(--btn-accent-3));
  opacity: 0;
  transform: translateY(20%) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 0;
}

.hero-cta-section .btn-accent::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(34, 211, 238, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.hero-cta-section .btn-accent:hover {
  color: color-mix(in oklch, var(--accent-purple) 65%, #f8fbff 30%);
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow:
    0 10px 24px rgba(14, 165, 233, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 14px rgba(123, 97, 255, 0.35);
}

.hero-cta-section .btn-accent:hover::before {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-cta-section .btn-accent:hover::after {
  opacity: 1;
}

.hero-cta-section .btn-accent svg,
.hero-cta-section .btn-accent span {
  position: relative;
  z-index: 1;
}

/* -- Focus-visible (WCAG 2.4.7) ------------------------------------------ */

.btn-large:focus-visible {
  outline: 3px solid var(--accent-cyan, oklch(0.82 0.14 210));
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.35);
}

.hero-cta-section .btn-secondary:focus-visible {
  outline: 3px solid var(--accent-cyan, oklch(0.82 0.14 210));
  outline-offset: 3px;
}

/* -- Light theme ---------------------------------------------------------- */

html[data-theme="light"] .btn-large {
  background: linear-gradient(
    140deg,
    rgba(232, 240, 255, 0.98) 0%,
    rgba(222, 232, 252, 0.97) 28%,
    rgba(211, 228, 252, 0.97) 56%,
    rgba(201, 226, 250, 0.96) 78%,
    rgba(194, 222, 248, 0.96) 100%
  );
  color: #162846;
  border-color: rgba(86, 122, 182, 0.36);
  box-shadow:
    /* top catch-light */
    0 1px 0 0 rgba(255, 255, 255, 0.95) inset,
    /* bottom depth */
    0 -2px 4px 0 rgba(88, 116, 168, 0.14) inset,
    /* outer ring */
    0 0 0 1px rgba(114, 145, 201, 0.2),
    /* soft glow */
    0 0 16px rgba(99, 102, 241, 0.06),
    /* medium shadow */
    0 6px 14px rgba(38, 62, 102, 0.14),
    /* deep shadow */
    0 18px 40px rgba(38, 62, 102, 0.18);
}

html[data-theme="light"] .btn-large::before {
  background:
    radial-gradient(ellipse 120% 80% at 20% 25%, rgba(99, 102, 241, 0.12), transparent 60%),
    radial-gradient(ellipse 100% 90% at 80% 75%, rgba(59, 130, 246, 0.1), transparent 55%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(168, 85, 247, 0.06), transparent 70%);
  mix-blend-mode: normal;
  opacity: 0.5;
}

html[data-theme="light"] .btn-large::after {
  background:
    linear-gradient(
      108deg,
      transparent 12%,
      rgba(15, 23, 42, 0.005) 24%,
      rgba(59, 130, 246, 0.06) 38%,
      rgba(99, 102, 241, 0.16) 50%,
      rgba(59, 130, 246, 0.06) 62%,
      rgba(15, 23, 42, 0.005) 76%,
      transparent 88%
    ),
    linear-gradient(
      108deg,
      transparent 30%,
      rgba(79, 70, 229, 0.1) 50%,
      transparent 70%
    );
  opacity: 0.2;
}

html[data-theme="light"] .btn-large:hover {
  border-color: rgba(84, 122, 186, 0.5);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.95) inset,
    0 -2px 4px 0 rgba(88, 116, 168, 0.12) inset,
    0 0 0 1px rgba(99, 102, 241, 0.22),
    0 0 22px rgba(99, 102, 241, 0.1),
    0 12px 24px rgba(38, 62, 102, 0.16),
    0 26px 52px rgba(38, 62, 102, 0.14);
}

html[data-theme="light"] .btn-large:hover::after {
  opacity: 0.45;
}

html[data-theme="light"] .cta-logo-strong {
  background: linear-gradient(
    138deg,
    oklch(0.34 0.27 282) 0%,
    oklch(0.33 0.3 304) 28%,
    oklch(0.31 0.31 328) 52%,
    oklch(0.34 0.28 258) 76%,
    oklch(0.37 0.22 220) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

html[data-theme="light"] .cta-logo-script {
  color: oklch(0.33 0.22 244);
  text-shadow:
    0 0 14px oklch(0.47 0.2 252 / 0.34),
    0 0 5px oklch(0.41 0.16 232 / 0.24),
    0 2px 4px rgba(30, 41, 59, 0.34);
}

html[data-theme="light"] .btn-large .btn-icon {
  color: oklch(0.31 0.18 262);
  filter:
    drop-shadow(0 1px 3px rgba(30, 41, 59, 0.18))
    drop-shadow(0 3px 6px rgba(99, 102, 241, 0.1));
}

html[data-theme="light"] .btn-subtitle {
  color: rgba(22, 44, 84, 0.88);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .hero-cta-section .btn-secondary {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(15, 23, 42, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 6px rgba(15, 23, 42, 0.06),
    0 2px 6px rgba(38, 62, 102, 0.08),
    0 8px 20px rgba(38, 62, 102, 0.06);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 6px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .hero-cta-section .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 6px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(38, 62, 102, 0.12),
    0 14px 32px rgba(38, 62, 102, 0.08);
}

html[data-theme="light"] .hero-cta-section .btn-accent:hover {
  color: color-mix(in oklch, var(--accent-purple) 65%, #0f172a 20%);
}

/* -- Ambient drift keyframe (colour wash movement) ------------------------ */

@keyframes ctaAmbientDrift {
  0% {
    background-position: 0% 0%;
    opacity: 0.4;
  }
  50% {
    opacity: 0.55;
  }
  100% {
    background-position: 100% 100%;
    opacity: 0.4;
  }
}

/* -- Responsive ----------------------------------------------------------- */

@media (max-width: 640px) {
  .hero-cta-section {
    gap: 0.95rem;
  }
}

@media (min-width: 640px) {
  .secondary-cta {
    flex-direction: row;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.2rem);
    max-width: none;
  }

  .secondary-cta .btn {
    flex: 0 1 auto;
  }
}

@media (min-width: 1024px) {
  .hero-cta-section {
    gap: 1.75rem;
  }

  .secondary-cta {
    gap: 1.5rem;
  }
}

/* -- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .btn-large,
  .btn-large::before,
  .btn-large::after {
    animation: none !important;
  }

  .hero-cta-section {
    animation: none !important;
  }
}