/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS — about page specific
   ═══════════════════════════════════════════════════════════════ */

/* Hero paragraph visibility — 241.jpg is a busy colorful chart */
.hero-para-visible {
  text-shadow: 0 2px 16px rgba(0,0,0,.82), 0 1px 4px rgba(0,0,0,.65);
  background: rgba(10,18,35,.44);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1rem;
  padding: 1rem 1.75rem;
  display: inline-block;
}

/* Values card — lift + glow on hover */
.values-card {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease !important;
}
.values-card:hover {
  transform: translateY(-10px) scale(1.015) !important;
  box-shadow: 0 24px 64px -16px rgba(14,165,233,.35), 0 6px 20px -8px rgba(0,0,0,.3) !important;
}

/* Icon bounce on card hover */
@keyframes iconBounce {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.18) rotate(-8deg); }
  60%  { transform: scale(.95) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.values-card:hover .icon-badge {
  animation: iconBounce .55s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Team card float on hover */
@keyframes teamFloat {
  0%,100% { box-shadow: 0 4px 20px -8px rgba(23,63,112,.25); transform: translateY(0); }
  50%     { box-shadow: 0 20px 48px -12px rgba(14,165,233,.3); transform: translateY(-6px); }
}
.team-float-card {
  transition: box-shadow .4s ease, transform .4s ease;
}
.team-float-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 52px -14px rgba(14,165,233,.28);
}

/* ── Dark section edge blending ─────────────────────────────────
   Adds a solid→transparent fade at the top and bottom of each
   dark photo section so consecutive dark sections dissolve into
   each other instead of showing a hard cut line.               */
.dark-blend::before,
.dark-blend::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 110px;
  pointer-events: none;
  z-index: 3;
}
.dark-blend::before {
  top: 0;
  background: linear-gradient(to bottom, rgb(15,27,45) 0%, transparent 100%);
}
.dark-blend::after {
  bottom: 0;
  background: linear-gradient(to top, rgb(15,27,45) 0%, transparent 100%);
}

/* Section label pulse (dark variant, animated) */
@keyframes labelLine {
  0%,100% { transform: scaleX(1); opacity:1; }
  50%     { transform: scaleX(.65); opacity:.55; }
}
.section-label-dark::before {
  animation: labelLine 2.8s ease-in-out infinite;
  transform-origin: left center;
}

/* ═══════════════════════════════════════════════════════════════
   about-styles.css  —  About page only (about.html)
   Loaded in addition to styles.css.
   Add all about-page-specific overrides and new components here.
   Do NOT use this file for index.html or future pages.
   ═══════════════════════════════════════════════════════════════ */

/* ── Team card avatar glow on hover ────────────────────────────── */
.team-avatar-wrap {
  position: relative;
}
.team-avatar-wrap::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37,99,168,.45), rgba(14,165,233,.22));
  filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: -1;
}
.group:hover .team-avatar-wrap::after { opacity: 1; }

/* ── Process step vertical connector ───────────────────────────── */
.process-step {
  position: relative;
}
.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 2.2rem;
  left: 1.4rem;
  width: 2px;
  height: calc(100% + 1.25rem);
  background: linear-gradient(to bottom, rgba(37,99,168,.35), rgba(14,165,233,.08));
  pointer-events: none;
}

/* ── Approach feature row ───────────────────────────────────────── */
.approach-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  transition: background .2s ease;
}
.approach-feature:hover {
  background: rgba(255,255,255,.10);
}

/* ── Hero stat pill (about page variant) ───────────────────────── */
.about-stat-pill {
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 1rem;
  padding: .875rem 1.75rem;
  text-align: center;
  transition: background .25s ease, transform .25s ease;
}
.about-stat-pill:hover {
  background: rgba(255,255,255,.20);
  transform: translateY(-3px);
}

/* ══════════════════════════════════════════════════════════════
   ABOUT PAGE — comprehensive animation pass
   ══════════════════════════════════════════════════════════════ */

/* ─── HERO STAT PILLS: spring entrance ─────────────────────── */
.hero-stat-anim {
  opacity: 0;
  transform: translateY(20px) scale(.88);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.hero-stat-anim.visible { opacity: 1; transform: none; }
.hero-stat-anim:hover {
  transform: translateY(-6px) scale(1.06) !important;
  background: rgba(255,255,255,.24) !important;
}

/* ─── STORY IMAGE: periodic auto-glint ray ─────────────────── */
.story-img-glint {
  position: absolute; inset: 0; z-index: 8; border-radius: inherit;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.40) 50%, transparent 72%);
  animation: heroGlint 7s ease-in-out 2.8s infinite;
  pointer-events: none;
}

/* ─── VALUES CARDS: clip-path wipe entrance ─────────────────── */
/* .stagger > * sets opacity:0 (spec 0,1,0); .stagger .values-clip wins (0,2,0) */
.stagger .values-clip {
  clip-path: inset(110% 0 0 0 round 24px);
  opacity: 1;
  transform: none;
  transition: clip-path .7s cubic-bezier(.16,1,.3,1);
}
.stagger.is-visible .values-clip:nth-child(1) { clip-path: inset(0% 0 0 0 round 24px); transition-delay: .00s; }
.stagger.is-visible .values-clip:nth-child(2) { clip-path: inset(0% 0 0 0 round 24px); transition-delay: .10s; }
.stagger.is-visible .values-clip:nth-child(3) { clip-path: inset(0% 0 0 0 round 24px); transition-delay: .20s; }
.stagger.is-visible .values-clip:nth-child(4) { clip-path: inset(0% 0 0 0 round 24px); transition-delay: .30s; }
.stagger.is-visible .values-clip:nth-child(5) { clip-path: inset(0% 0 0 0 round 24px); transition-delay: .40s; }

/* Faint number watermark — ::before is free (::after is ring-gradient border) */
.values-card[data-num]::before {
  content: attr(data-num);
  position: absolute; bottom: .875rem; right: 1.25rem; z-index: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.5rem; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,.07);
  transition: color .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.values-card[data-num]:hover::before {
  color: rgba(56,189,248,.18);
  transform: scale(1.14) translateY(-4px);
}

/* H3 underline draw on hover */
.values-card h3 { position: relative; display: inline-block; }
.values-card h3::after {
  content: ''; position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1.5px;
  background: rgba(56,189,248,.85); border-radius: 1px;
  transition: width .38s cubic-bezier(.16,1,.3,1);
}
.values-card:hover h3::after { width: 100%; }

/* ─── PROCESS STEPS: cursor spotlight + connector draw ──────── */
/* ::before is free; existing ::after = connector line */
.approach-feature { --ax: 50%; --ay: 50%; }
.approach-feature::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: radial-gradient(
    circle at var(--ax) var(--ay),
    rgba(56,189,248,.16) 0%, rgba(37,99,168,.06) 40%, transparent 70%
  );
  opacity: 0; transition: opacity .22s ease; pointer-events: none;
}
.approach-feature:hover::before { opacity: 1; }
.approach-feature > * { position: relative; z-index: 1; }

/* Step number badge: spring pop when IO fires step-active */
.step-num {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.process-step.step-active .step-num {
  animation: stepNumPop .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes stepNumPop {
  0%   { transform: scale(.6) rotate(-14deg); }
  60%  { transform: scale(1.22) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Connector line draws in when step enters viewport */
.process-step:not(:last-child)::after {
  height: 0; opacity: 0;
  transition: height .8s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.process-step.step-active:not(:last-child)::after {
  height: calc(100% + 1.25rem); opacity: 1;
}

/* ─── TEAM CARDS: rotateX flip entrance + cursor spotlight ──── */
.team-flip-card { position: relative; --tx: 50%; --ty: 50%; }

/* Overrides generic .stagger > * (spec 0,1,0) with higher spec (0,2,0) */
.stagger > .team-flip-card {
  opacity: 0;
  transform: perspective(1000px) rotateX(-24deg) translateY(52px) scale(.93);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.stagger.is-visible > .team-flip-card:nth-child(1) { opacity:1; transform:none; transition-delay:.00s; }
.stagger.is-visible > .team-flip-card:nth-child(2) { opacity:1; transform:none; transition-delay:.12s; }
.stagger.is-visible > .team-flip-card:nth-child(3) { opacity:1; transform:none; transition-delay:.24s; }
.stagger.is-visible > .team-flip-card:nth-child(4) { opacity:1; transform:none; transition-delay:.36s; }

/* Cursor spotlight via ::before (::after = ring-gradient border) */
.team-flip-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: radial-gradient(
    circle at var(--tx) var(--ty),
    rgba(56,189,248,.18) 0%, rgba(37,99,168,.09) 40%, transparent 70%
  );
  opacity: 0; transition: opacity .28s ease; pointer-events: none;
}
.team-flip-card:hover::before { opacity: 1; }
.team-flip-card > * { position: relative; z-index: 1; }

/* Name: animated underline on hover */
.team-name { position: relative; display: inline-block; }
.team-name::after {
  content: ''; position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1.5px;
  background: linear-gradient(90deg, #38bdf8, rgba(125,211,252,.45));
  transition: width .38s cubic-bezier(.16,1,.3,1);
}
.team-flip-card:hover .team-name::after { width: 100%; }

/* Role: slide-right spring on hover */
.team-role {
  display: inline-block;
  transition: transform .38s cubic-bezier(.34,1.56,.64,1), letter-spacing .3s ease;
}
.team-flip-card:hover .team-role {
  transform: translateX(4px);
  letter-spacing: .025em;
}

/* ─── ORIGIN / DEST / BUYER CHIPS: wave bounce entrance ─────── */
.origin-chip {
  opacity: 0;
  transform: translateY(14px) scale(.88);
  transition: opacity .42s ease, transform .42s cubic-bezier(.34,1.56,.64,1),
              background .22s ease, box-shadow .22s ease;
}
.origin-chip.visible { opacity: 1; transform: none; }
.origin-chip:hover {
  transform: translateY(-5px) scale(1.07) !important;
  background: rgba(255,255,255,.28) !important;
  box-shadow: 0 8px 24px -6px rgba(14,165,233,.35) !important;
}

/* ─── CERTIFICATION CARDS: rotateY flip-in stagger ─────────── */
.cert-card {
  opacity: 0;
  transform: perspective(700px) rotateY(-52deg) scale(.88);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.cert-card.visible { opacity: 1; transform: none; }
.cert-card:nth-child(1) { transition-delay: .00s; }
.cert-card:nth-child(2) { transition-delay: .10s; }
.cert-card:nth-child(3) { transition-delay: .20s; }
.cert-card:nth-child(4) { transition-delay: .30s; }
.cert-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 18px 40px -10px rgba(14,165,233,.32) !important;
  background: rgba(255,255,255,.20) !important;
}