/* ─────────────────────────────────────────────
   SpotOn · Animations & Scroll-Reveals
   finlayy-inspired: subtle, intentional, refined
   ───────────────────────────────────────────── */

/* ── Generic reveal (fade up) ── */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Hero line reveal (mask + slide up) ── */

.reveal-line {
    display: block;
    overflow: hidden;
    position: relative;
}

.reveal-line > * {
    display: inline-block;
}

.hero__title .reveal-line {
    opacity: 1;
}

.hero__title .reveal-line::before {
    content: attr(data-text);
}

/* The line itself holds the text; we animate via a child wrapper at JS time.
   Simpler approach: animate the line via transform on inline content. */

.hero__title .reveal-line {
    transform: translateY(110%);
    transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.hero__title.is-visible .reveal-line {
    transform: translateY(0);
}

/* Sub elements: simple fade-up after hero lines */

.hero .reveal:not(.hero__title) {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.hero .reveal.is-visible:not(.hero__title) {
    opacity: 1;
    transform: translateY(0);
}

/* ── Stagger inside groups (cards in bento, steps, pricing, mockups) ── */

.mockups .reveal:nth-child(1) { --reveal-delay: 0ms; }
.mockups .reveal:nth-child(2) { --reveal-delay: 120ms; }
.mockups .reveal:nth-child(3) { --reveal-delay: 240ms; }

.bento .reveal:nth-child(1) { --reveal-delay: 0ms; }
.bento .reveal:nth-child(2) { --reveal-delay: 80ms; }
.bento .reveal:nth-child(3) { --reveal-delay: 160ms; }
.bento .reveal:nth-child(4) { --reveal-delay: 240ms; }
.bento .reveal:nth-child(5) { --reveal-delay: 320ms; }

.steps .reveal:nth-child(1) { --reveal-delay: 0ms; }
.steps .reveal:nth-child(2) { --reveal-delay: 100ms; }
.steps .reveal:nth-child(3) { --reveal-delay: 200ms; }
.steps .reveal:nth-child(4) { --reveal-delay: 300ms; }

.pricing .reveal:nth-child(1) { --reveal-delay: 0ms; }
.pricing .reveal:nth-child(2) { --reveal-delay: 120ms; }
.pricing .reveal:nth-child(3) { --reveal-delay: 240ms; }

.team__grid .reveal:nth-child(1) { --reveal-delay: 0ms; }
.team__grid .reveal:nth-child(2) { --reveal-delay: 120ms; }

.faq__list .reveal:nth-child(1) { --reveal-delay: 0ms; }
.faq__list .reveal:nth-child(2) { --reveal-delay: 60ms; }
.faq__list .reveal:nth-child(3) { --reveal-delay: 120ms; }
.faq__list .reveal:nth-child(4) { --reveal-delay: 180ms; }
.faq__list .reveal:nth-child(5) { --reveal-delay: 240ms; }
.faq__list .reveal:nth-child(6) { --reveal-delay: 300ms; }

.branchen__split .reveal:nth-child(2) { --reveal-delay: 150ms; }

.problem__grid .reveal:nth-child(1) { --reveal-delay: 0ms; }
.problem__grid .reveal:nth-child(2) { --reveal-delay: 80ms; }
.problem__grid .reveal:nth-child(3) { --reveal-delay: 160ms; }
.problem__grid .reveal:nth-child(4) { --reveal-delay: 240ms; }

/* ── Synchronized mockup scroll ── */

.mockup__page {
    transform: translateY(0%);
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.mockups.is-playing .mockup__page {
    animation: mockupScroll 13s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes mockupScroll {
    0%, 22%   { transform: translateY(0%); }
    33%, 55%  { transform: translateY(-33.33%); }
    66%, 88%  { transform: translateY(-66.66%); }
    100%      { transform: translateY(0%); }
}

/* ── Magnetic buttons (transform set in JS, easing here) ── */

.btn[data-magnetic] {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Parallax on mockups (subtle drift) ── */

.mockup[data-parallax] {
    transition: transform 0.1s linear;
    will-change: transform;
}

/* ── Section background drift on enter ── */

.section.is-active .section__head {
    /* hook for future per-section ambient effects */
}

/* ── FAQ smooth open ── */

.faq__item p {
    overflow: hidden;
    animation: faqOpen 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Marquee slows on hover ── */

.marquee:hover .marquee__track { animation-play-state: paused; }

/* ── Logo dot pulse on first paint ── */

@keyframes logoIn {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}

.logo .logo__dot { animation: logoIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ── Hero title — better staggered approach via wrapper spans ── */
/* The HTML wraps each line in <span class="reveal-line">, which we slide up.
   Browsers without JS still see the text because clipping is on the parent. */

.hero__title .reveal-line {
    transform: translateY(100%);
    opacity: 1;
}

.hero__title.is-visible .reveal-line { transform: translateY(0); }

/* ── Cursor-following accent (subtle, for hero only) ── */

.hero::before {
    content: '';
    position: absolute;
    width: 580px;
    height: 580px;
    background: radial-gradient(circle, rgba(196, 80, 45, 0.10) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    left: var(--cursor-x, 80%);
    top: var(--cursor-y, 30%);
    transform: translate(-50%, -50%);
    transition: left 1.4s cubic-bezier(0.22, 1, 0.36, 1), top 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

.hero__inner, .hero__cue { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .mockups.is-playing .mockup__page { animation: none; }
    .hero::before { display: none; }
    .reveal,
    .hero__title .reveal-line,
    .hero .reveal:not(.hero__title) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}