/* partners.css — page-specific styles for partners.html */
/* Global shared styles live in assets/css/veloryn.css */

/* ── Base typography ── */
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-family: 'Sora', sans-serif;
}

/* ════════════════════════════════════════════════
   EYEBROW — shared token for all section eyebrows
   Applies to: Our Belief, The Right Fit,
               How It Works, Get Started
════════════════════════════════════════════════ */

.partners-eyebrow {
  line-height: 1;
  padding-top: 6px;
  padding-bottom: 6px;
  color: #AEB6D3;
  font-family: 'Inter', sans-serif;
}

/* ════════════════════════════════════════════════
   P1: HERO
════════════════════════════════════════════════ */

/* Hero background — responsive, set by JS */
.partners-hero {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Tablet: shift image left so subject remains visible */
@media (max-width: 1024px) {
  .partners-hero {
    background-position: 80% top;
  }
}

/* Mobile: shift image further left */
@media (max-width: 767px) {
  .partners-hero {
    background-position: 70% top;
  }
}

/* Technical grid overlay */
.technical-grid {
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, rgba(30, 95, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 95, 255, 0.05) 1px, transparent 1px);
}

/* Hero fade-up entrance animations */
@keyframes partnersFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.partners-fade-up {
  opacity: 0;
  animation: partnersFadeUp 0.7s ease-out forwards;
}

.partners-fade-up-1 { animation-delay: 0.10s; }
.partners-fade-up-2 { animation-delay: 0.30s; }
.partners-fade-up-3 { animation-delay: 0.50s; }

/* Primary CTA button — matches index.html btn-radius + bg-primary + hover:bg-blue-500 */
.partners-btn-primary {
  background-color: #1E5FFF;
  border-radius: 5px;
  transition: background-color 0.25s ease-out, transform 0.25s ease-out;
  box-shadow: 0 8px 24px rgba(30, 95, 255, 0.20);
}

.partners-btn-primary:hover {
  background-color: #4AA3FF;
  transform: scale(1.02);
}

.partners-btn-primary:focus-visible {
  outline: 2px solid rgba(30, 95, 255, 0.65);
  outline-offset: 3px;
  border-radius: 5px;
}

/* ════════════════════════════════════════════════
   SCROLL REVEAL (all sections below hero)
════════════════════════════════════════════════ */

.partners-scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.partners-scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.partners-reveal-delay-1 { transition-delay: 0.15s; }
.partners-reveal-delay-2 { transition-delay: 0.30s; }
.partners-reveal-delay-3 { transition-delay: 0.45s; }
.partners-reveal-delay-4 { transition-delay: 0.60s; }

/* ════════════════════════════════════════════════
   P2: OUR BELIEF — justified two-column body
════════════════════════════════════════════════ */

.partners-justified {
  text-align: justify;
  text-justify: inter-word;
}

/* ════════════════════════════════════════════════
   P3: THE RIGHT FIT — cards
════════════════════════════════════════════════ */

/* Card hover: h3 heading glow */
.partners-right-fit-card.heading-glow:hover h3 {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.60);
}

/* Animated blue icon tiles — staggered float */
@keyframes partnersIconFloat {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-3px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

.partners-card-icon {
  display: inline-block;
  will-change: transform;
  animation: partnersIconFloat 3.6s ease-in-out infinite;
}

.partners-card-icon-1 { animation-delay: 0s; }
.partners-card-icon-2 { animation-delay: 0.40s; }
.partners-card-icon-3 { animation-delay: 0.80s; }
.partners-card-icon-4 { animation-delay: 1.20s; }

/* Callout button arrow slide on hover */
.partners-btn-arrow {
  transition: transform 0.2s ease;
}

.partners-btn-primary:hover .partners-btn-arrow {
  transform: translateX(4px);
}

/* ════════════════════════════════════════════════
   P4: HOW IT WORKS — vertical timeline
════════════════════════════════════════════════ */

/* Step node: scales and glows on group hover */
.partners-step-node {
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.partners-step.group:hover .partners-step-node {
  transform: scale(1.12);
  box-shadow: 0 0 40px rgba(46, 230, 214, 0.65) !important;
}

/* Final-stage node: aqua fill, stronger glow on hover — transition inherited from .partners-step-node */

.partners-step.group:hover .partners-step-node-final {
  transform: scale(1.12);
  box-shadow: 0 0 50px rgba(46, 230, 214, 0.80) !important;
}

/* Icon inside node: grows on hover */
.partners-step-icon {
  display: inline-block;
  transition: font-size 250ms ease;
}

.partners-step.group:hover .partners-step-icon {
  font-size: 36px !important;
}

/* Step label: aqua glow on hover */
.partners-step-label {
  transition: text-shadow 250ms ease;
}

.partners-step.group:hover .partners-step-label {
  text-shadow: 0 0 14px rgba(46, 230, 214, 0.80);
}

/* ════════════════════════════════════════════════
   P5: GET STARTED — closing CTA button
   Matches platform.html .btn-cta-scale
════════════════════════════════════════════════ */

.partners-cta-btn {
  transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.partners-cta-btn:hover {
  transform: scale(1.05);
  background-color: #4AA3FF;
  box-shadow: 0 0 32px rgba(30, 95, 255, 0.40);
}

.partners-cta-btn:focus-visible {
  outline: 2px solid rgba(30, 95, 255, 0.65);
  outline-offset: 3px;
  border-radius: 5px;
}

.partners-cta-arrow {
  transition: transform 0.2s ease;
}

.partners-cta-btn:hover .partners-cta-arrow {
  transform: translateX(4px);
}

/* ════════════════════════════════════════════════
   P4: HOW IT WORKS — mobile step layout
   Icon 48px left, top-aligned; label + title + body right
════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .partners-step {
    align-items: flex-start;
  }

  .partners-step-node,
  .partners-step-node-final {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    flex-shrink: 0;
    /* Shift node down by 2px to optically align top of circle with top of text */
    margin-top: 2px;
  }

  .partners-step-icon {
    font-size: 20px !important;
  }
}

/* ════════════════════════════════════════════════
   REDUCED MOTION — single merged block
════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .partners-fade-up {
    opacity: 1 !important;
    animation: none !important;
  }

  .partners-scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .partners-card-icon {
    animation: none !important;
  }

  .partners-step-node,
  .partners-step-node-final,
  .partners-step-icon,
  .partners-step-label {
    transition: none !important;
  }
}

/* ── Hero text stroke (global standard) ── */
.hero-headline,
.hero-sub,
.partners-hero h1,
.partners-hero p {
}

