/* intro v28 — Arc diagonal-split: clip split, floating rings, ransom-note words, grayscale hover, click burst */

/* Diagonal split zone */
.intro-arc2__split {
    clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
    opacity: 0.6;
}

/* Floating rings / donuts (fixed size — no BS w-N/h-N utility) */
.intro-arc2__ring { width: 10rem; height: 10rem; animation: intro-arc2-float 7s ease-in-out infinite; }
.intro-arc2__ring--2 { width: 6rem; height: 6rem; animation-duration: 9s; animation-delay: 1s; }
@keyframes intro-arc2-float {
    50% { transform: translateY(-1.2rem) rotate(20deg); }
}

/* Serif accent (paired with sans body) */
.intro-arc2__serif { font-family: ui-serif, Georgia, "Times New Roman", serif; }

/* Hero image grayscale → colour reveal on hover */
.intro-arc2__figure { aspect-ratio: 4 / 3; }
.intro-arc2__img {
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 420ms ease;
}
.intro-arc2__figure:hover .intro-arc2__img { filter: grayscale(0); }

/* Ransom-note mixed letters: alternate rotation, weight, family (no colour) */
.intro-arc2__word {
    display: inline-block;
    margin-right: 0.25em;
}
.intro-arc2__word:nth-child(3n+1) { transform: rotate(-4deg); font-weight: 900; }
.intro-arc2__word:nth-child(3n+2) { transform: rotate(3deg);  font-family: ui-serif, Georgia, serif; font-style: italic; }
.intro-arc2__word:nth-child(3n+3) { transform: rotate(-1deg); font-weight: 700; text-transform: uppercase; }

/* Click burst spark (inherits the button's primary colour via currentColor) */
.intro-arc2__react { position: relative; overflow: visible; }
.intro-arc2__spark {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    animation: intro-arc2-burst 640ms ease-out forwards;
}
@keyframes intro-arc2-burst {
    to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4) rotate(160deg); }
}

@media (prefers-reduced-motion: reduce) {
    .intro-arc2__ring { animation: none; }
}

/* v12 - Accordion Steps: chevron rotate animation (no BS analog for transform/transition) */
.steps-notion-accordion__chevron {
    transition: transform 200ms ease;
}

.steps-notion-accordion__chevron.is-open {
    transform: rotate(180deg);
}

.timeline-emblem {
    width: 5rem;
    height: 5rem;
}

.timeline-spark {
    width: 0.75rem;
    height: 0.75rem;
}

.timeline-cloud-left {
    width: 16rem;
    height: 16rem;
}

.timeline-cloud-right {
    width: 20rem;
    height: 20rem;
    animation-delay: 1s;
}

.timeline-cloud-center {
    width: 24rem;
    height: 24rem;
    animation-delay: 2s;
}

.timeline-outline-square {
    width: 5rem;
    height: 5rem;
    animation-duration: 3s;
}

.timeline-outline-orb {
    width: 4rem;
    height: 4rem;
    animation-duration: 4s;
    animation-delay: 1s;
}

.timeline-halo-start {
    width: 8rem;
    height: 8rem;
    animation-duration: 20s;
}

.timeline-halo-end {
    width: 10rem;
    height: 10rem;
    animation-duration: 25s;
    animation-direction: reverse;
}

.timeline-spark-side {
    animation-delay: 0.5s;
}

.timeline-spark-center {
    animation-delay: 1s;
}

.timeline-cloud-left,
.timeline-cloud-right,
.timeline-cloud-center {
    animation-name: timeline-cloud__pulse;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.timeline-outline-square,
.timeline-outline-orb {
    animation-name: timeline-outline__bounce;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.timeline-halo-start,
.timeline-halo-end {
    animation-name: timeline-halo__spin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.timeline-spark-top,
.timeline-spark-side,
.timeline-spark-center {
    animation-name: timeline-spark__ping;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    animation-iteration-count: infinite;
}

@keyframes timeline-cloud__pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes timeline-outline__bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25%); }
}

@keyframes timeline-halo__spin {
    to { transform: rotate(360deg); }
}

@keyframes timeline-spark__ping {
    0% { transform: scale(1); opacity: 1; }
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* Hover — поза @sem; TW і BS */
.stats-card-hover {
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.stats-card-hover:hover {
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  transform: scale(1.05);
}