/* ===========================================================
   Triveni Power - Connect ("Let's Start the Conversation")
   Dark rounded panel · grid backdrop · 4 liquid-glass CTAs
   · large 3D 'T' mark on RHS with warm orange glow.
   =========================================================== */

.connect {
  --ink:        #FFFFFF;
  --ink-80:     rgba(255, 255, 255, 0.82);
  --ink-60:     rgba(255, 255, 255, 0.62);
  --accent:     #F58220;

  position: relative;
  background: #0A0809;                /* matches Stats + Proof */
  color: var(--ink);
  padding: clamp(72px, 9vw, 132px) 0 clamp(56px, 7vw, 96px);
  isolation: isolate;
  overflow: hidden;
}

/* Liquid-ether WebGL canvas - absolute background layer (mirrors .proof / .stats) */
.connect__liquid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
  touch-action: none;
}
/* Soft vignette over the ether to keep edges dark and improve text contrast */
.connect::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(10,8,9,0.55) 100%),
    linear-gradient(180deg, rgba(10,8,9,0.55) 0%, transparent 12%, transparent 88%, rgba(10,8,9,0.55) 100%);
}

.connect__container {
  position: relative;
  z-index: 2;                          /* above ether + vignette */
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* =========================================================
   LAYOUT - content LHS · 'T' visual RHS (no card framing,
   so the liquid-ether reads as the section background)
   ========================================================= */
.connect__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  min-height: clamp(380px, 38vw, 520px);
}
@media (min-width: 1024px) {
  .connect__panel {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

/* =========================================================
   CONTENT - heading, body, CTA cluster
   ========================================================= */
.connect__content {
  position: relative;
  z-index: 2;
  max-width: 56ch;
}

.connect__title {
  font-family: "Raleway", var(--font-display);
  font-size: var(--fs-l);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.12;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFFFFF;
  margin: 0 0 clamp(18px, 1.6vw, 24px);
}
.connect__title em {
  font-style: normal;
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: unset;
  text-shadow: none;
}

.connect__body {
  font-family: var(--font-display);
  font-size: var(--fs-m);
  line-height: 1.65;
  color: #FFFFFF;
  margin: 0 0 clamp(28px, 3vw, 40px);
  max-width: 56ch;
}

/* =========================================================
   CTAs - identical apple liquid-glass treatment to .hero__btn
   (Single source of truth: any tweak should be mirrored across
    hero buttons + connect buttons so the site feels unified.)
   ========================================================= */
.connect__ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

/* Layout-only override - .connect__cta needs to fill its grid cell.
   All visual rules (glass, --accent variant, hover, focus) live in
   css/buttons.css under .btn--ghost / .btn--accent. */
.connect__cta {
  width: 100%;
}

.connect__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.92);
  flex-shrink: 0;
}
.connect__cta-icon svg {
  width: 16px;
  height: 16px;
}

/* .connect__cta--accent visual rules moved to css/buttons.css
   under the canonical .btn--accent kind. */

/* =========================================================
   VISUAL - RHS 3D 'T' mark + glow
   ========================================================= */
.connect__visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(300px, 36vw, 540px);
  perspective: 1200px;        /* enables 3D tilt on the mark */
}

.connect__visual-glow {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(circle at 55% 50%, rgba(245, 130, 32, 0.55) 0%, rgba(245, 130, 32, 0) 62%);
  filter: blur(50px);
  z-index: 0;
  transform-origin: 55% 50%;
  animation: connectGlowPulse 6s ease-in-out infinite;
}

/* Three nested layers so each transform stage is independent:
   .connect__mark-wrap   - slow idle float (translateY only)
   .connect__mark-tilt   - mouse-driven 3D tilt (CSS vars set by connect.js)
   .connect__mark        - hover scale + drop-shadow halo intensify */
.connect__mark-wrap {
  position: relative;
  z-index: 1;
  display: inline-block;
  transform-style: preserve-3d;
  animation: connectMarkFloat 7s ease-in-out infinite;
  will-change: transform;
}

.connect__mark-tilt {
  display: block;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--connect-rx, 0deg))
    rotateY(var(--connect-ry, 0deg))
    rotateZ(var(--connect-rz, 0deg));
  transition: transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
/* While the cursor is moving over the section, drop the easing duration so
   the tilt feels snappy and tracked rather than laggy. JS lerps the values. */
.connect.is-tracking .connect__mark-tilt {
  transition: transform 90ms linear;
}

.connect__mark {
  width: clamp(300px, 38vw, 560px);
  height: auto;
  display: block;
  filter:
    drop-shadow(0 22px 50px rgba(245, 130, 32, 0.45))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  transition:
    transform 600ms var(--ease-out),
    filter 600ms var(--ease-out);
}

.connect.is-tracking .connect__mark {
  transform: scale(1.04);
  filter:
    drop-shadow(0 30px 70px rgba(245, 130, 32, 0.62))
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
}
.connect.is-tracking .connect__visual-glow {
  animation-duration: 3s;       /* faster, livelier pulse while tracking */
}

@keyframes connectMarkFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes connectGlowPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .connect__mark-wrap,
  .connect__visual-glow {
    animation: none !important;
  }
  .connect__mark-tilt,
  .connect__mark {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1023px) {
  .connect__visual {
    order: -1;
    min-height: clamp(220px, 48vw, 340px);
  }
  .connect__mark {
    width: clamp(220px, 48vw, 340px);
  }
}

@media (max-width: 600px) {
  .connect__ctas {
    grid-template-columns: minmax(0, 1fr);
  }
  .connect__cta {
    width: 100%;
    justify-content: center;
  }
}