/* DFT Hibaok-átvilágítás · motion layer v1
   Load after style.css. Needs <html class="m-js"> (one-line script in <head>) and motion.js.
   Animates only transform, opacity, clip-path and stroke-dashoffset (small SVGs).
   Two documented exceptions: the one tapped answer in the phone (colour swap, once)
   and the FAQ panel height (progressive, Chromium only). */

@property --m-n { syntax: "<integer>"; inherits: false; initial-value: 0; }

:root {
  --m-ease: cubic-bezier(.15,.85,.35,1);
  --m-rise: 16px;
  --m-rise-lg: 24px;
  --m-stagger: 80ms;
}
@media (max-width:720px) { :root { --m-rise: 10px; --m-rise-lg: 14px; } }

/* 0 · neutralise the legacy motion rules in style.css (or delete them there) */
.reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
.bar, .dash:not(.in) .bar { transform: scaleX(var(--w)); transition: none; }
.grow, .in .grow { transform: none; transition: none; }
.draw, .in .draw, .draw.in { stroke-dashoffset: 0; transition: none; }
.steps .steps__fill, .steps.in .steps__fill { clip-path: none; transition: none; }

/* 1 · static helpers (always on, also with reduced motion) */
.m-num { --m-n: var(--m-to); counter-reset: m-n var(--m-n); }
.m-num::after { content: counter(m-n); }
.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.m-w { display: inline-block; }
.stats__nodes strong .m-num, .stats__nodes strong .m-sr { font-size: inherit; color: inherit; }

.rank li:nth-child(2) svg { --i: 1; } .rank li:nth-child(3) svg { --i: 2; } .rank li:nth-child(4) svg { --i: 3; }
.rank li:nth-child(5) svg { --i: 4; } .rank li:nth-child(6) svg { --i: 5; } .rank li:nth-child(7) svg { --i: 6; }

.rule__viz li i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--dawn); }
.rule__viz li:nth-child(2) i { background: var(--green); }
.rule__viz li:nth-child(3) i { width: 14px; height: 14px; background: var(--deep); }
.rule__viz li:nth-child(2) { --i: 1; } .rule__viz li:nth-child(3) { --i: 2; }

.layer:nth-child(2) { --i: 1; --m-dur: 1020ms; } .layer:nth-child(3) { --i: 2; --m-dur: 1140ms; }

.threshold i { position: relative; }
.threshold i.on::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #D9D2D6; opacity: 0; }
.threshold > :nth-child(2) { --i: 1; } .threshold > :nth-child(3) { --i: 2; } .threshold > :nth-child(4) { --i: 3; }
.threshold > :nth-child(6) { --i: 4; } .threshold > :nth-child(7) { --i: 5; }

.steps__list .num { z-index: 0; }
.steps__list .num::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #E4DEE2; z-index: -1; opacity: 0; }

.two--eq > .card:nth-child(2) { --d: 90ms; }
.cred > :nth-child(3) { --d: 140ms; }
.cost { --d: 160ms; }

/* header: compact state after the hero (toggled by motion.js, reversible) */
.top::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: -1; }
.top.is-compact { transform: translate3d(0,-6px,0); }
.top.is-compact::before { opacity: .55; }
.top.is-compact .top__in { transform: translate3d(0,3px,0); }
.top.is-compact .brand img { transform: scale(.9); }

/* 2 · keyframes. Most define only `from`: the natural style is the end state,
   and fill-mode `backwards` hands control back to it (hover states keep working). */
@keyframes m-rise   { from { opacity: 0; transform: translate3d(0,var(--m-rise),0); } }
@keyframes m-settle { from { opacity: 0; transform: translate3d(0,var(--m-rise-lg),0) scale(.97); } }
@keyframes m-line   { from { opacity: 0; transform: translate3d(0,var(--m-rise-lg),0); clip-path: inset(-20% -4% calc(var(--m-rise-lg) - 30%) -4%); }
                      to   { opacity: 1; transform: none; clip-path: inset(-20% -4% -30% -4%); } }
@keyframes m-word   { from { transform: translate3d(0,130%,0); clip-path: inset(-30% -5% 100% -5%); }
                      to   { transform: none; clip-path: inset(-30% -5% -30% -5%); } }
@keyframes m-fade   { from { opacity: 0; } }
@keyframes m-wipe   { from { clip-path: inset(-30% 100% -30% 0); } to { clip-path: inset(-30% 0 -30% 0); } }
@keyframes m-draw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-pop    { from { opacity: 0; transform: scale(.4); } }
@keyframes m-land   { from { opacity: 0; transform: scale(1.7); } }
@keyframes m-cell   { from { opacity: 0; transform: scale(.86); } }
@keyframes m-tick   { from { transform: scaleY(0); } }
@keyframes m-lift   { from { transform: scaleY(.2); } }
@keyframes m-grow   { from { transform: scale(.72); } }
@keyframes m-uncover{ from { opacity: 1; } to { opacity: 0; } }
@keyframes m-count  { from { --m-n: 0; } }
@keyframes m-breathe{ 50% { opacity: .3; } }
@keyframes m-tap    { 0% { background: #fff; color: var(--ink); transform: none; }
                      30% { background: var(--green); color: #fff; transform: scale(.965); }
                      100% { background: var(--green); color: #fff; transform: none; } }

/* 3 · choreography. Everything below is skipped with reduced motion → final state. */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }

  /* generic one-time reveal */
  .m-js .reveal:not(.in) { opacity: 0; }
  .m-js .reveal.in { animation: m-rise 900ms var(--m-ease) var(--d,0ms) backwards; }
  .m-js .card.reveal.in, .m-js .cost.reveal.in { animation-name: m-settle; animation-duration: 1000ms; }

  /* text groups: eyebrow → h2 (baseline mask) → copy. Marked by motion.js */
  .m-js .reveal.m-group { opacity: 1; animation: none; }
  .m-js .m-group:not(.in) .m-item { opacity: 0; }
  .m-js .m-group.in .m-item { animation: m-rise 800ms var(--m-ease) calc(var(--i,0) * var(--m-stagger)) backwards; }
  .m-js .m-group.in h2.m-item { animation-name: m-line; animation-duration: 900ms; }

  /* 1 · hero, on load */
  .m-js:not(.m-loaded) .hero__swoosh { opacity: 0; }
  .m-js .hero .chip.in { animation: m-rise 700ms var(--m-ease) backwards; }
  .m-js .hero h1.in { animation: none; }
  .m-js .hero h1.in > span { animation: m-line 900ms var(--m-ease) 80ms backwards; }
  .m-js .hero h1.in > span + span { animation-delay: 160ms; }
  .m-js.m-loaded .hero__swoosh .draw { animation: m-draw 850ms var(--m-ease) 420ms backwards; }
  .m-js .hero .lead.in { animation: m-rise 800ms var(--m-ease) 480ms backwards; }
  .m-js .hero__cta.in { animation: none; }
  .m-js .hero__cta.in .btn { animation: m-rise 700ms var(--m-ease) 560ms backwards; }
  .m-js .hero__cta.in .btn + .btn { animation-delay: 620ms; }
  .m-js .hero .dash.in { animation: m-settle 1000ms var(--m-ease) 600ms backwards; }
  .m-js .hero .phone.in { animation: m-settle 1000ms var(--m-ease) 720ms backwards; }
  .m-js .dash.in .rank svg { animation: m-wipe 760ms var(--m-ease) calc(820ms + var(--i,0) * 60ms) backwards; }
  .m-js .phone.in .ps__opt--on { animation: m-tap 520ms var(--m-ease) 1380ms backwards; }

  /* 2 · rising edge into the stats band, scroll-linked (--p from motion.js) */
  .m-js .hero > .edge path:first-child { clip-path: inset(-20% calc((1 - clamp(0, var(--p,1) / .7, 1)) * 100%) -20% 0); }
  .m-js .hero > .edge path:last-child { transform-box: fill-box; transform-origin: 50% 100%;
    transform: scaleY(calc(.2 + .8 * clamp(0, (var(--p,1) - .2) / .8, 1))); }

  /* 3 · stats: curve scroll-linked on desktop; each node lands when the line reaches it */
  @media (min-width:721px) {
    .m-js .stats__curve svg { clip-path: inset(-10% calc((1 - var(--p,1)) * 100%) -10% 0); }
  }
  @media (max-width:720px) { .m-js .stats__nodes li { --m-d: calc(var(--i,0) * 80ms); } }
  .m-js .stats__nodes li::before { transform-origin: 50% 100%; }
  .m-js .stats__nodes li:not(.is-hit) > * { opacity: 0; }
  .m-js .stats__nodes li:not(.is-hit)::before { transform: scaleY(0); }
  .m-js .stats__nodes li:not(.is-hit)::after { opacity: 0; transform: scale(.4); }
  .m-js .stats__nodes li.is-hit::after { animation: m-pop 520ms var(--m-ease) var(--m-d,0ms) backwards; }
  .m-js .stats__nodes li.is-hit::before { animation: m-tick 420ms var(--m-ease) calc(var(--m-d,0ms) + 80ms) backwards; }
  .m-js .stats__nodes li.is-hit > strong { animation: m-rise 700ms var(--m-ease) calc(var(--m-d,0ms) + 120ms) backwards; }
  .m-js .stats__nodes li.is-hit > span { animation: m-rise 700ms var(--m-ease) calc(var(--m-d,0ms) + 190ms) backwards; }
  .m-js .stats__nodes li.is-hit .m-num { animation: m-count 1000ms var(--m-ease) calc(var(--m-d,0ms) + 160ms) backwards; }

  /* 4 · cost */
  .m-js .cost:not(.in) .cost__value { opacity: 0; }
  .m-js .cost.in .cost__value { animation: m-fade 900ms var(--m-ease) 760ms backwards; }
  .m-js .cost.in .dots { display: inline-block; animation: m-breathe 1400ms cubic-bezier(.45,0,.55,1) 1700ms; }
  .m-js .cost.in svg { animation: m-wipe 1100ms var(--m-ease) 420ms backwards; }

  /* 5 · three layers + the 1·2·3 rule */
  .m-js .layers.in .layer > div { animation: m-rise 800ms var(--m-ease) calc(200ms + var(--i,0) * 220ms) backwards; }
  .m-js .layers.in .layer svg { animation: m-wipe var(--m-dur,900ms) var(--m-ease) calc(280ms + var(--i,0) * 240ms) backwards; }
  .m-js .rule.in .rule__viz .draw { animation: m-draw 1000ms var(--m-ease) 250ms backwards; }
  .m-js .rule.in .rule__viz li { animation: m-fade 600ms var(--m-ease) calc(520ms + var(--i,0) * 200ms) backwards; }
  .m-js .rule.in .rule__viz li i { animation: m-pop 520ms var(--m-ease) calc(520ms + var(--i,0) * 200ms) backwards; }
  .m-js .rule.in .rule__viz li:nth-child(3) i { animation-name: m-land; animation-duration: 700ms; }

  /* 6 · four steps: band fill scroll-linked on desktop; numbers light as the fill reaches them */
  @media (min-width:721px) {
    .m-js .steps .steps__fill { clip-path: inset(-10% calc((1 - var(--p,1)) * 100%) -10% 0); }
  }
  @media (max-width:720px) { .m-js .steps__list li { --m-d: calc(var(--i,0) * 90ms); } }
  .m-js .steps__list li.reveal { opacity: 1; animation: none; }
  .m-js .steps__list .num { transition: transform 600ms var(--m-ease) var(--m-d,0ms); }
  .m-js .steps__list .num::after { transition: opacity 600ms var(--m-ease) var(--m-d,0ms); }
  .m-js .steps__list li:not(.is-lit) .num { transform: scale(.86); }
  .m-js .steps__list li:not(.is-lit) .num::after { opacity: 1; }
  .m-js .steps__list li:not(.is-lit) > :not(.num) { opacity: 0; }
  .m-js .steps__list li.is-lit > :not(.num) { animation: m-rise 800ms var(--m-ease) calc(var(--m-d,0ms) + 120ms) backwards; }

  /* 7 · results: heatmap diagonal wave (--i = row + col, set by motion.js) */
  .m-js .card--dark.in .heat i { animation: m-cell 600ms var(--m-ease) calc(480ms + var(--i,0) * 55ms) backwards; }

  /* 8 · anonymity threshold: 1-2-3-4 (5, 6), pause, line, 5th/6th turn green */
  .m-js .trust.in .threshold > i { animation: m-pop 480ms var(--m-ease) calc(420ms + var(--i,0) * 100ms) backwards; }
  .m-js .trust.in .threshold > i.on { animation: m-pop 480ms var(--m-ease) calc(420ms + var(--i,0) * 100ms) backwards, m-grow 600ms var(--m-ease) 1500ms backwards; }
  .m-js .trust.in .threshold > i.on + i.on { animation-delay: calc(420ms + var(--i,0) * 100ms), 1580ms; }
  .m-js .trust.in .threshold > i.on::after { animation: m-uncover 600ms var(--m-ease) 1500ms backwards; }
  .m-js .trust.in .threshold > i.on + i.on::after { animation-delay: 1580ms; }
  .m-js .trust.in .threshold > b { transform-origin: 50% 100%; animation: m-tick 500ms var(--m-ease) 1300ms backwards; }
  .m-js .trust.in .threshold > span { animation: m-rise 600ms var(--m-ease) 1650ms backwards; }

  /* 9 · credibility: calm fades, the author card stays still */
  .m-js .cred > .card.reveal.in { animation-name: m-fade; }
  .m-js .cred__author.card.reveal { opacity: 1; animation: none; }
  .m-js .cred__years.in .m-num { animation: m-count 1200ms var(--m-ease) 200ms backwards; }
  .m-js .cred__years.in .award { animation: m-rise 800ms var(--m-ease) 380ms backwards; }
  .m-js .cred__years.in svg { animation: m-wipe 1100ms var(--m-ease) 240ms backwards; }

  /* 10 · FAQ */
  .faq__list details::details-content { block-size: 0; overflow: clip; transition: block-size 500ms var(--m-ease), content-visibility 500ms allow-discrete; }
  .faq__list details[open]::details-content { block-size: auto; }
  .m-js .faq__list details[open] p { animation: m-rise 520ms var(--m-ease) 60ms backwards; }
  .faq__list summary span { transition: transform 450ms var(--m-ease); }

  /* 11 · finale */
  .m-js .final .edge--top path:last-child { transform-box: fill-box; transform-origin: 50% 100%; }
  .m-js .final:not(.in) .edge--top path:first-child { clip-path: inset(-20% 100% -20% 0); }
  .m-js .final:not(.in) .edge--top path:last-child { transform: scaleY(.2); }
  .m-js .final.in .edge--top path:first-child { animation: m-wipe 1100ms var(--m-ease) backwards; }
  .m-js .final.in .edge--top path:last-child { animation: m-lift 1200ms var(--m-ease) 120ms backwards; }
  .m-js .final:not(.in) .final__in > .wrap > .eyebrow { opacity: 0; }
  .m-js .final.in .final__in > .wrap > .eyebrow { animation: m-rise 700ms var(--m-ease) 280ms backwards; }
  .m-js .final .final__title.reveal { opacity: 1; animation: none; }
  .m-js .final:not(.in) .m-w { opacity: 0; }
  .m-js .final.in .m-w { animation: m-word 1000ms var(--m-ease) calc(380ms + var(--i,0) * 110ms) backwards; }
  .m-js .final:not(.in) .final__row .btn { opacity: 0; }
  .m-js .final.in .final__row .btn { animation: m-rise 700ms var(--m-ease) 820ms backwards; }

  /* 12 · header */
  .top, .top::before, .top__in, .brand img { transition: transform 500ms var(--m-ease), opacity 500ms var(--m-ease); }
}