/* ===========================================================================
   effects.css — Sakhuthingo Wellness  (v2)
   Component styling for the interactive sections. No ambient motion:
   no 3D, no parallax, no custom cursor, no scroll-scrubbing, no drifting
   shapes. The only animation is a short, optional fade-in on scroll, which
   is disabled entirely under prefers-reduced-motion.
   =========================================================================== */

/* -- Fade-in on scroll (subtle; opacity-led) -------------------------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-group > * { opacity: 0; transform: translateY(10px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.reveal-group.is-in > * { opacity: 1; transform: none; }
.reveal-group.is-in > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-group.is-in > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-group.is-in > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-group.is-in > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-group.is-in > *:nth-child(6) { transition-delay: 0.3s; }

/* -- Pillars: Heard / Supported / Empowered ------------------------- */
.pillars {
    display: grid; gap: 2px;
    background: var(--line); border: 1px solid var(--line);
    border-radius: var(--radius-lg); overflow: hidden;
    grid-template-columns: repeat(3, 1fr);
}
.pillar {
    position: relative; overflow: hidden;
    background: var(--surface);
    padding: clamp(1.75rem, 4vw, 3rem);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pillar__leaf { position: absolute; right: -1.5rem; bottom: -1.5rem; width: 7rem; color: var(--sage); opacity: 0.28; }
.pillar__k { font-family: var(--font-body); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); }
.pillar h3 { font-size: var(--step-2); margin: 0.7rem 0 0; }
.pillar__text { color: var(--text-soft); margin-top: 0.7rem; }
.pillar:hover, .pillar.is-active { background: var(--forest); color: #F1EADB; --text: #F1EADB; }
.pillar:hover .pillar__k, .pillar.is-active .pillar__k { color: var(--clay-bright); }
.pillar:hover .pillar__text, .pillar.is-active .pillar__text { color: #C9D5CC; }
.pillar:hover .pillar__leaf, .pillar.is-active .pillar__leaf { color: var(--sage-soft); opacity: 0.4; }
@media (max-width: 52rem) { .pillars { grid-template-columns: 1fr; } }

/* -- "Our Approach" — static curved path + steps ------------------- */
.approach { background: var(--sand); }
.approach__track { margin-top: clamp(2rem, 6vw, 3.5rem); }
.approach__svg { width: 100%; height: auto; overflow: visible; }
.approach__line { fill: none; stroke: var(--sage); stroke-width: 3; stroke-linecap: round; }
.approach__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 1.5rem; }
.approach__step { text-align: center; }
.approach__step b { display: block; font-family: var(--font-display); font-size: var(--step-1); }
.approach__step span { font-size: var(--step--1); color: var(--text-soft); }
.approach__dot { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--clay); margin: 0 auto 0.6rem; box-shadow: 0 0 0 5px color-mix(in srgb, var(--clay) 22%, transparent); }
@media (max-width: 44rem) { .approach__steps { grid-template-columns: 1fr; gap: 1.5rem; } .approach__svg { display: none; } }

/* -- Services ecosystem (static ring, click to load panel) --------- */
.eco__stage { position: relative; aspect-ratio: 1; max-width: 33rem; margin-inline: auto; display: grid; place-items: center; }
.eco__core {
    width: 42%; aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center; text-align: center;
    background: radial-gradient(circle at 35% 30%, var(--sage), var(--forest));
    color: #fff; font-family: var(--font-display); font-size: var(--step-1);
    box-shadow: var(--shadow-lg);
}
.eco__node {
    position: absolute; left: 50%; top: 50%;
    width: 8.5rem; padding: 0.7rem 0.9rem;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-pill); text-align: center;
    font-size: var(--step--1); font-weight: 650; cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.eco__node:hover, .eco__node.is-active { background: var(--forest); color: #fff; border-color: var(--forest); }
.eco__panel { max-width: 30rem; margin: 2.5rem auto 0; text-align: center; min-height: 6rem; }
.eco__panel h3 { font-size: var(--step-2); }
.eco__panel p { color: var(--text-soft); margin-top: 0.5rem; }
.eco--list { display: none; }
@media (max-width: 48rem) {
    .eco__stage, .eco__panel { display: none; }
    .eco--list { display: grid; gap: 0.6rem; }
    .eco--list details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 1rem 1.25rem; }
    .eco--list summary { font-weight: 650; cursor: pointer; }
    .eco--list p { color: var(--text-soft); margin-top: 0.55rem; }
}

/* -- Corporate capabilities ------------------------------------- */
.capabilities { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(3, 1fr); }
.capability { background: var(--bg); padding: clamp(1.5rem, 3.5vw, 2.4rem); }
.capability__i { width: 2.25rem; height: 2.25rem; color: var(--sage); }
.capability h3 { font-size: var(--step-1); margin: 0.85rem 0 0.3rem; }
.capability p { font-size: var(--step--1); color: var(--text-soft); }
@media (max-width: 52rem) { .capabilities { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .capabilities { grid-template-columns: 1fr; } }

/* -- Wellness ecosystem flow (static) ------------------------- */
.flow { display: grid; gap: 0.5rem; max-width: 22rem; margin-inline: auto; text-align: center; }
.flow__node { padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); font-weight: 650; }
.flow__link { width: 2px; height: 1.6rem; background: var(--sage); margin: 0 auto; }

/* -- Founder portrait (static) ------------------------------ */
.founder .portrait { /* no reveal animation */ }

/* -- Brand story / philosophy -------------------------------- */
.philosophy {
    background: var(--forest); color: #F1EADB; overflow: hidden;
    --text: #F1EADB; --text-soft: #C6D2C8; --line: rgba(255, 255, 255, 0.2);
}
.philosophy .eyebrow { color: var(--clay-bright); }
.philosophy .lede, .philosophy p { color: #C6D2C8; }
.philosophy__grid { display: grid; gap: clamp(2rem, 6vw, 4rem); grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 52rem) { .philosophy__grid { grid-template-columns: 1fr; } }
.philosophy__stage { display: grid; place-items: center; }
.philosophy__stage .mark--img {
    width: min(82%, 22rem); height: auto;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}
.philosophy__stage .mark--svg { width: min(72%, 20rem); height: auto; }
.philosophy__controls { display: grid; gap: 0.7rem; margin-top: 1.5rem; }
.philosophy__item {
    display: grid; gap: 0.2rem;
    padding: 1rem 1.25rem; border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16);
}
.philosophy__item b { font-family: var(--font-display); font-size: var(--step-1); }
.philosophy__item span { font-size: var(--step--1); color: #C6D2C8; }

/* -- The Journey — now a STATIC stepped band ---------------- */
.journey { background: var(--sand); }
.journey__sticky { position: static; min-height: 0; display: block; padding-block: clamp(3.5rem, 9vw, 6rem); background: transparent !important; }
.journey__shape { display: none; }
.journey__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); text-align: center; }
.journey__count { display: none; }
.journey__stages {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.75rem 1.5rem; margin: 0 auto;
}
.journey__stage {
    position: static; opacity: 1; transform: none;
    font-family: var(--font-display); font-size: var(--step-2);
    color: var(--ink); display: flex; align-items: center; gap: 0.75rem 1.5rem;
}
.journey__stage:not(:last-child)::after {
    content: "\2192"; color: var(--clay); font-family: var(--font-body); font-size: 1.1rem;
}
.journey__stage.is-current { color: var(--ink); }
.journey__end { max-width: 34rem; margin: 1.75rem auto 0; color: var(--ink-soft); font-size: var(--step-1); opacity: 1; }
.journey__progress { display: none; }
@media (max-width: 40rem) {
    .journey__stages { flex-direction: column; }
    .journey__stage:not(:last-child)::after { content: "\2193"; }
}

/* -- Final CTA (static) ------------------------------------ */
.cta-final {
    position: relative; overflow: hidden; text-align: center;
    padding-block: clamp(4rem, 12vw, 8rem);
    background: linear-gradient(160deg, var(--forest-deep), var(--forest) 60%, #2b5a44 130%);
    color: #F3EEE2;
    --text: #F3EEE2;
}
.cta-final__orbs { position: absolute; inset: 0; z-index: 0; opacity: 0.4; pointer-events: none; }
.cta-final__orb { position: absolute; border-radius: 50%; filter: blur(8px); }
.cta-final__orb:nth-child(1) { width: 12rem; height: 12rem; left: 6%; top: 16%; background: radial-gradient(circle at 30% 30%, var(--sage), transparent 70%); }
.cta-final__orb:nth-child(2) { width: 9rem; height: 9rem; right: 10%; top: 26%; background: radial-gradient(circle at 30% 30%, var(--clay-bright), transparent 70%); }
.cta-final__orb:nth-child(3) { width: 15rem; height: 15rem; right: 20%; bottom: -8%; background: radial-gradient(circle at 30% 30%, var(--sand), transparent 70%); }
.cta-final .wrap { position: relative; z-index: 1; }
.cta-final h2 { font-size: var(--step-4); }
.cta-final p { color: #C6D2C8; margin-top: 1rem; font-size: var(--step-1); }
.cta-final__btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }

/* -- Reduced motion: no fades at all --------------------- */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .btn:hover { transform: none; }
}