/* Reusable reveal + dual-surface system. Sections opt in via classes/attributes. */

/* ============ SURFACES ============ */
/* Dark holographic "ink" panel */
.section--ink { background: #0E2B2A; color: var(--canvas); position: relative; overflow: hidden; }
.section--ink::before {
  content: ''; position: absolute; inset: -30% -12% auto -12%; height: 78%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(48% 60% at 72% 0%, rgba(127,200,160,.13), transparent 70%),
    radial-gradient(40% 52% at 10% 18%, rgba(200,153,104,.12), transparent 72%);
  animation: hg-drift 24s ease-in-out infinite alternate;
}
.section--ink > .container { position: relative; z-index: 1; }
.section--ink .eyebrow { color: var(--bronze); }
.section--ink .section-head h2 { color: #fff; }
.section--ink .lede { color: rgba(242,235,220,.74); }
.section--ink .lede em { font-style: normal; color: #fff; box-shadow: inset 0 -2px 0 var(--bronze); padding-bottom: 1px; }

/* Light "mist" panel — pale sage, not cream; subtle glow so it's never a flat block */
.section--mist { background: #E8EFEA; color: #0E2B2A; position: relative; overflow: hidden; }
.section--mist::before {
  content: ''; position: absolute; inset: -30% -12% auto -12%; height: 80%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 56% at 78% 0%, rgba(31,78,74,.08), transparent 70%),
    radial-gradient(40% 50% at 8% 12%, rgba(200,153,104,.09), transparent 72%);
}
.section--mist > .container { position: relative; z-index: 1; }
.section--mist .eyebrow { color: #1F4E4A; }
.section--mist .section-head h2 { color: #0E2B2A; }
.section--mist .lede { color: #3c4d49; }

/* ============ REVEAL (dialled up: travel + scale + blur-in) ============ */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(8px); transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1), filter .8s ease; }
  [data-reveal].in { opacity: 1; transform: none; filter: none; }
  [data-reveal="left"]  { transform: translateX(-52px); filter: blur(8px); }
  [data-reveal="right"] { transform: translateX(52px);  filter: blur(8px); }

  [data-reveal-group] > * { opacity: 0; transform: translateY(44px) scale(.97); filter: blur(8px); transition: opacity .75s cubic-bezier(.16,.8,.24,1), transform .75s cubic-bezier(.16,.8,.24,1), filter .75s ease; transition-delay: calc(var(--i,0) * 110ms); }
  [data-reveal-group].in > * { opacity: 1; transform: none; filter: none; }

  /* Icon pop — springs in just after its card */
  [data-reveal-group] .brain-icon, [data-reveal-group] .practice-icon { opacity: 0; transform: scale(.4) rotate(-14deg); transition: transform .6s cubic-bezier(.2,1.35,.4,1), opacity .5s ease; transition-delay: calc(var(--i,0) * 110ms + 180ms); }
  [data-reveal-group].in .brain-icon, [data-reveal-group].in .practice-icon { opacity: 1; transform: none; }
}

/* ============ COUNT-UP + headline underline draw ============ */
.count-num { color: var(--bronze); font-weight: 600; font-variant-numeric: tabular-nums; }
.section--mist .count-num { color: #b07a3e; }
.section--ink .section-head .hl { background-image: linear-gradient(var(--bronze), var(--bronze)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size .85s ease .5s; }
.section--ink .section-head.in .hl { background-size: 100% 2px; }

/* ============ HOVER-LIFT on the dark surface (light handled by base styles) ============ */
.section--ink .brain-card { background: rgba(255,255,255,.035); border: 1px solid rgba(242,235,220,.10); box-shadow: none; }
.section--ink .brain-icon { background: rgba(127,200,160,.14); color: #cfe6d8; }
.section--ink .brain-title { color: #fff; }
.section--ink .brain-desc { color: rgba(242,235,220,.66); }
.section--ink .brain-card:hover { transform: translateY(-6px); border-color: rgba(127,200,160,.45); box-shadow: 0 26px 56px rgba(0,0,0,.45); }

/* Numbered cards on dark (Operator Trap) — left light by default, dark variant here if ever needed */
.section--ink .trap-item { background: rgba(255,255,255,.03); border: 1px solid rgba(242,235,220,.10); }
.section--ink .trap-num { background: linear-gradient(135deg, var(--bronze), #a87c4f); color: #0E2B2A; }
.section--ink .trap-title { color: #fff; }
.section--ink .body-md { color: rgba(242,235,220,.66); }

/* Compare cards on dark (The Gap) — the "right answer" column glows */
.section--ink .gap-card--filled { background: rgba(255,255,255,.04); border: 1px solid rgba(242,235,220,.12); }
.section--ink .gap-card--outlined { background: rgba(127,200,160,.05); border: 1px dashed rgba(127,200,160,.42); box-shadow: 0 0 0 1px rgba(127,200,160,.08), 0 24px 60px rgba(0,0,0,.35); }
.section--ink .gap-card h3 { color: #fff; }
.section--ink .gap-card li { color: rgba(242,235,220,.8); }
.section--ink .gap-card li::before { background: var(--bronze); }
.section--ink .gap-card--outlined li::before { background: #7fc8a0; }

/* Phased steps on dark */
.section--ink .phase { background: rgba(255,255,255,.035); border: 1px solid rgba(242,235,220,.10); }
.section--ink .phase-num { background: linear-gradient(135deg, var(--bronze), #a87c4f); color: #0E2B2A; }
.section--ink .phase-when { color: var(--bronze); }
.section--ink .phase-title { color: #fff; }
.section--ink .phase-desc { color: rgba(242,235,220,.66); }

/* Pricing strip on dark */
.section--ink .pricing-strip h2, .section--ink .pricing-strip .h2 { color: #fff; }
.section--ink .pricing-strip .lede { color: rgba(242,235,220,.74); }
.section--ink .pricing-strip .eyebrow { color: var(--bronze); }

/* ============ PYRAMID build (signature) ============ */
@media (prefers-reduced-motion: no-preference) {
  .pyramid-svg svg { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(.16,.8,.24,1); }
  .pyramid-svg.in svg { clip-path: inset(0 0 0 0); }
  /* badges fade in bottom -> top, after the wipe */
  .pyramid-svg svg > g > g { opacity: 0; transition: opacity .5s ease; }
  .pyramid-svg.in svg > g > g:nth-child(1) { opacity: 1; transition-delay: .55s; }
  .pyramid-svg.in svg > g > g:nth-child(2) { opacity: 1; transition-delay: .9s; }
  .pyramid-svg.in svg > g > g:nth-child(3) { opacity: 1; transition-delay: 1.25s; }
  .pyramid-svg.in svg > g > g:nth-child(4) { opacity: 1; transition-delay: 1.6s; }
  .pyramid-svg.in svg > g > g:nth-child(5) { opacity: 1; transition-delay: 1.95s; }
}

/* ============ CTA band — holographic close ============ */
.cta-band::after {
  content: ''; position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 80% 8%, rgba(200,153,104,.22), transparent 70%),
    radial-gradient(44% 54% at 12% 92%, rgba(127,200,160,.18), transparent 72%);
  animation: hg-drift 22s ease-in-out infinite alternate;
}
.cta-band-inner { position: relative; z-index: 1; }

/* ============ AI neural network canvas ============ */
.ai-net { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.section--ink[data-ai-network] > .container { position: relative; z-index: 1; }

/* ============ Film grain on dark sections (barely-there tech texture) ============ */
.section--ink::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}

/* sheen disabled for the stepped pyramid */
.pyramid-svg::after { display: none; }
/* ============ Pyramid iridescent sheen ============ */
.pyramid-svg { position: relative; }
.pyramid-svg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(50% 2.1%, 98.3% 91.1%, 1.7% 91.1%);
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.40) 50%, rgba(200,153,104,.20) 56%, transparent 64%);
  background-size: 300% 100%; background-position: 130% 0; opacity: 0;
}
.pyramid-svg.in::after { opacity: 1; animation: pyr-sheen 6.5s ease-in-out 2.4s infinite; }
@keyframes pyr-sheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }

/* ============ Holographic hover-edge on the AI cards (teal -> bronze) ============ */
.brain-card { position: relative; }
.brain-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0;
  background: linear-gradient(135deg, rgba(127,200,160,.75), rgba(200,153,104,.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .3s ease;
}
.brain-card:hover::after { opacity: 1; }
.section--ink .brain-card:hover { box-shadow: 0 0 24px rgba(127,200,160,.16), 0 26px 56px rgba(0,0,0,.45); }