/* ============================================================
   reveal.css — the entrance vocabulary, driven by reveal.js.

   Put [data-reveal] on a block; mark the things inside that should move:

     .r-up        fade up 40  (the 3SC default: opacity 0 -> 1, y 40 -> 0)
     .r-hl        a highlight that wipes in behind the words
     .r-pop       a sticker that pops on, after the highlight lands
     --k: <n>     stagger index on a child (0, 1, 2 …)

   Self-contained and token-independent (fallbacks throughout), so it renders
   on any ground. No prefers-reduced-motion branch — KompanyOS ships one
   experience.
   ============================================================ */

/* ---------- fade up 40 ---------- */
.r-up {
  opacity: 0;
  transform: translateY(40px);
}
.reveal-in .r-up,
.reveal-in.r-up {
  opacity: 1;
  transform: none;
  /* 3SC's transition: duration .7, delay .3 (+ .1 per staggered child). The
     y-curve is the site's standard decelerate; opacity runs a touch shorter so
     the text is legible before it finishes settling. */
  transition:
    opacity .55s ease calc(.3s + var(--k, 0) * .1s),
    transform .7s cubic-bezier(0.22, 1, 0.36, 1) calc(.3s + var(--k, 0) * .1s);
}

/* ---------- highlight wipe ----------
   The marker is painted as a background GRADIENT (see stickers.css on why it
   can't be a plain background box), so it animates on background-size: the
   colour sweeps left-to-right behind the words. background-size is the only
   animatable handle here, and it composites fine because nothing reflows. */
.r-hl {
  background-size: 0 100%;
}
.reveal-in .r-hl {
  background-size: 100% 100%;
  transition: background-size .5s cubic-bezier(0.22, 1, 0.36, 1) calc(.62s + var(--k, 0) * .1s);
}

/* ---------- sticker pop ----------
   Lands after the highlight it hangs off, so the two read as one gesture.
   The resting transform must keep the sticker's own tilt (stickers.css drives
   it from --kos-sticker-tilt), or a popped sticker snaps back to 0deg. */
.r-pop {
  opacity: 0;
}
.reveal-in .r-pop {
  animation: kos-reveal-pop .6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(1.02s + var(--k, 0) * .1s) both;
}
@keyframes kos-reveal-pop {
  from { opacity: 0; transform: rotate(var(--kos-sticker-tilt, 0deg)) scale(.4); }
  to   { opacity: 1; transform: rotate(var(--kos-sticker-tilt, 0deg)) scale(1); }
}

/* ---------- underline draw ----------
   The hand-drawn 3SC rule (an SVG stroke as a background) wipes in the same
   direction as the marker wipe, so a page mixing both reads consistently. */
.r-rule {
  background-size: 0 .5em;
}
.reveal-in .r-rule {
  background-size: 100% .5em;
  transition: background-size .6s cubic-bezier(0.22, 1, 0.36, 1) calc(.62s + var(--k, 0) * .1s);
}

/* ============================================================
   COMPONENT-ACCURATE ENTRANCES

   The classes above are the page's general vocabulary. These three sections
   play their components' own motion instead, transcribed from the 3SC source
   so School Run arrives the way the live case study does:

     SectionHeader.tsx   wrapper  opacity 0, x -20        .5s
                         plate    rotate 0 -> -3deg       .5s
     ChallengeSection    grid     opacity 0, y 40    .7s, delay .3
                                  (+ the staggerChildren .1 it declares)
     BaseCard.tsx        card     opacity 0, y 40    .7s, delay .3
     FeatureCard.tsx              second column instead delays .6
     FAQSection.tsx      header   opacity 0, y 30         .5s
                         list     opacity 0, y 20    .5s, delay .15
     FAQItemCard.tsx     item     opacity 0, y 16   .35s, delay n * .055

   framer's default tween ease is easeOut, so that is the curve throughout
   rather than the site's usual decelerate.
   ============================================================ */
:root { --fm-ease-out: cubic-bezier(0, 0, 0.58, 1); }

/* ---------- SectionHeader: in from the left, and the plate tilts ---------- */
.r-head { opacity: 0; transform: translateX(-20px); }
.reveal-in .r-head,
.reveal-in.r-head { opacity: 1; transform: none; transition: opacity .5s var(--fm-ease-out), transform .5s var(--fm-ease-out); }
/* the plate settles INTO its angle — it is flat until the header arrives */
.r-tilt { transform: rotate(0deg); }
.reveal-in .r-tilt,
.reveal-in.r-tilt { transform: rotate(var(--r-tilt-to, -3deg)); transition: transform .5s var(--fm-ease-out); }

/* ---------- ChallengeSection: the grid as one block ----------
   Its children carry --k so they also honour the staggerChildren: .1 the
   component asks for (framer drops it, because the cards declare no variants
   of their own — but the intent is in the source, and it reads better). */
.r-grid { opacity: 0; transform: translateY(40px); }
.reveal-in .r-grid,
.reveal-in.r-grid { opacity: 1; transform: none; transition: opacity .7s var(--fm-ease-out) .3s, transform .7s var(--fm-ease-out) .3s; }

/* ---------- BaseCard: y 40, .7s — second column a beat later ---------- */
.r-card { opacity: 0; transform: translateY(40px); }
.reveal-in .r-card,
.reveal-in.r-card { opacity: 1; transform: none; transition: opacity .7s var(--fm-ease-out) var(--r-delay, .3s), transform .7s var(--fm-ease-out) var(--r-delay, .3s); }

/* ---------- FAQSection ---------- */
.r-faq-head { opacity: 0; transform: translateY(30px); }
.reveal-in .r-faq-head,
.reveal-in.r-faq-head { opacity: 1; transform: none; transition: opacity .5s var(--fm-ease-out), transform .5s var(--fm-ease-out); }
.r-faq-list { opacity: 0; transform: translateY(20px); }
.reveal-in .r-faq-list,
.reveal-in.r-faq-list { opacity: 1; transform: none; transition: opacity .5s var(--fm-ease-out) .15s, transform .5s var(--fm-ease-out) .15s; }
.r-faq-item { opacity: 0; transform: translateY(16px); }
.reveal-in .r-faq-item,
.reveal-in.r-faq-item { opacity: 1; transform: none; transition: opacity .35s var(--fm-ease-out) calc(var(--k, 0) * .055s), transform .35s var(--fm-ease-out) calc(var(--k, 0) * .055s); }