/* ============================================================================
   Perikentro — MOTION & INTERACTION LAYER (exam-prep themed)
   Additive + removable: delete this file + motion.js to remove the whole layer.
   Every rule is gated by .motion-on (added by motion.js only when motion is
   allowed AND the browser actually paints). Transform/opacity ONLY.
   ========================================================================== */

/* ---- S2: count-up settle pop ------------------------------------------- */
.motion-on [data-count].pop { animation: pk-pop .42s var(--ease); }
@keyframes pk-pop { 0% { transform: scale(1); } 38% { transform: scale(1.09); } 100% { transform: scale(1); } }

/* ---- reveal — FLICKER-PROOF version ------------------------------------
   Content is ALWAYS visible by default. JS (motion.js) adds .pk-pre ONLY to
   elements BELOW the viewport at load, so nothing that is already on screen
   is ever hidden — no flash on page load, ever. Scrolling swaps
   .pk-pre -> .is-in for an animated entrance. The .pk-pre animation is a
   JS-independent failsafe: 6s after being hidden (off-screen), the element
   un-hides itself even if all JS dies — content can never stay trapped. */
.motion-on [data-reveal].pk-pre {
  opacity: 0; transform: translateY(24px);
  /* last-resort failsafe only: fires long after normal browsing has revealed
     things via IO / the JS scroll fallback, so entrance animations survive */
  animation: pk-reveal-failsafe .01s linear 45s forwards;
}
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
@keyframes pk-reveal-failsafe { to { opacity: 1; transform: none; } }

/* ---- marquee only animates with motion on ------------------------------ */
.motion-on .marquee-track { animation: marquee 26s linear infinite; }

/* ---- S1: highlighter underline under the hero headline ----------------- */
.hero-title { position: relative; }
.hero-title::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 12px; width: 100%;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  z-index: -1; will-change: transform; pointer-events: none;
}
.motion-on .hero-title.drawn::after { transform: scaleX(1); }
.motion-on .hero-title.draw::after { transition: transform .7s var(--ease) .35s; transform: scaleX(1); }

/* ---- S3: "ΕΠΙΤΥΧΩΝ" stamp ----------------------------------------------- */
.motion-on .honour-hero { position: relative; }
.pk-stamp {
  position: absolute; top: 20px; right: 20px; z-index: 5; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 18px; letter-spacing: .08em; color: var(--color-accent);
  border: 3px solid var(--color-accent); padding: 6px 12px;
  transform: rotate(-13deg) scale(1.7); opacity: 0;
  transition: transform .38s var(--ease), opacity .18s;
}
.pk-stamp.in { transform: rotate(-13deg) scale(1); opacity: .96; }

/* ---- M1: OMR answer bubble on the "why" list --------------------------- */
.pk-omr { display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 2px solid currentColor; flex: none; margin-right: 4px; }
.pk-omr i { display: block; width: 10px; height: 10px; background: var(--color-primary);
  transform: scale(0); transition: transform .4s var(--ease); }
.pk-omr.fill i { transform: scale(1); }

/* ---- M3: red-pen tick on service / framework cards --------------------- */
.motion-on .serv, .motion-on .frame { position: relative; }
.pk-tick {
  position: absolute; top: -14px; left: -14px; width: 34px; height: 34px;
  display: grid; place-items: center; pointer-events: none; z-index: 4;
  background: var(--color-accent); color: var(--color-ink); border: 2px solid var(--color-ink);
  font-weight: 900; font-size: 17px;
  transform: scale(0) rotate(-14deg); opacity: 0;
  transition: transform .3s var(--ease), opacity .18s;
}
.motion-on .serv:hover .pk-tick, .motion-on .frame:hover .pk-tick { transform: scale(1) rotate(-8deg); opacity: 1; }

/* ---- M4: magnetic CTAs (JS sets transform; smooth return) -------------- */
.motion-on .btn--yellow { transition: transform .2s var(--ease); }

/* ---- ST1: syllabus scroll-progress bar --------------------------------- */
.pk-progress { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 200;
  pointer-events: none; background: rgba(43,58,79,.10); }
.pk-progress i { display: block; height: 100%; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left; will-change: transform; }

/* ---- ST2: hide-on-scroll header ---------------------------------------- */
.motion-on .bar { transition: transform .35s var(--ease); }
.bar.pk-hidden { transform: translateY(-100%); }

/* ---- ST3: exam-style section counter ----------------------------------- */
.pk-qcount { position: fixed; left: 18px; bottom: 18px; z-index: 150; pointer-events: none;
  background: var(--color-ink); color: #fff; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px;
  opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.pk-qcount.show { opacity: 1; transform: none; }
.pk-qcount b { color: var(--color-accent); }