/* Peyda — the brand's headline face, shared with the mobile app. Loaded on
   top of Dana so the redesigned landing page matches the app's typography. */
@font-face{font-family:Peyda;src:url('../fonts/peyda-extralight.ttf') format('truetype');font-weight:200;font-display:swap}
@font-face{font-family:Peyda;src:url('../fonts/peyda-light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:Peyda;src:url('../fonts/Peyda-Medium.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:Peyda;src:url('../fonts/Peyda-Bold.ttf') format('truetype');font-weight:600 700;font-display:swap}
@font-face{font-family:Peyda;src:url('../fonts/Peyda-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:Peyda;src:url('../fonts/Peyda-Black.ttf') format('truetype');font-weight:900;font-display:swap}

/* Animated dashed path for the "How it works" section */
@keyframes dashmove{
    to{stroke-dashoffset:-140}
}

.font-peyda{font-family:Peyda,Dana,sans-serif}

/* Fixed-track grid layouts for the landing page. Tailwind's arbitrary
   grid-cols-[...] utility doesn't compile multi-token values with this
   project's build (@tailwindcss/vite), so these three layouts are plain CSS
   instead — same values the design specifies. */
@media (min-width: 1024px) {
    .grid-services {
        grid-template-columns: 1.15fr minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
    }
    .grid-testimonials { grid-template-columns: 330px minmax(0, 1fr); }
}

/* The hero's phone column is a fixed 620px in the design, which only leaves a
   usable text column once the page is at least 1280px wide — below that the
   two-column hero collapsed the copy to a ~200px ribbon and clipped the
   mockups. So the split starts at xl with a narrower track and reaches the
   design's 620px at the 1440px the board was drawn for. */
@media (min-width: 1280px) {
    .grid-hero { grid-template-columns: minmax(0, 1fr) 560px; }
}
@media (min-width: 1440px) {
    .grid-hero { grid-template-columns: minmax(0, 1fr) 620px; }
}

/* ─────────────────────── Scroll-reveal animations ───────────────────────
   Sections fade up as they enter the viewport. The motion language matches
   the reference site: long durations (~1.2s), a gentle custom ease, and
   staggered children rather than one block appearing at once.

   `opacity:.001` instead of 0 is deliberate — it keeps the element painted
   so the browser promotes it to its own layer before the animation starts,
   which avoids a flash on the first frame.

   .reveal          → the element to animate (set before JS runs)
   .reveal-in       → added by JS once the element has been seen
   [data-reveal-stagger] → children animate one after another

   Everything degrades safely: without JS, `.no-js-reveal` never applies and
   content stays fully visible. */
@media (prefers-reduced-motion: no-preference) {
    .js-reveal .reveal {
        opacity: .001;
        transform: translateY(24px);
        transition:
            opacity 1.2s cubic-bezier(.12, .23, .5, 1),
            transform 1.2s cubic-bezier(.12, .23, .5, 1);
        will-change: opacity, transform;
    }

    .js-reveal .reveal-in {
        opacity: 1;
        transform: none;
    }

    /* Children of a staggered container start hidden and are released in
       sequence by the delay set inline on each child. */
    .js-reveal [data-reveal-stagger] > * {
        opacity: .001;
        transform: translateY(20px);
        transition:
            opacity 1.1s cubic-bezier(.12, .23, .5, 1),
            transform 1.1s cubic-bezier(.12, .23, .5, 1);
    }

    .js-reveal [data-reveal-stagger].reveal-in > * {
        opacity: 1;
        transform: none;
    }

    /* The hero image settles from a slight zoom, like the reference. */
    .js-reveal .reveal-zoom {
        opacity: .001;
        transform: scale(1.05);
        transition:
            opacity 1.5s cubic-bezier(.12, .23, .5, 1),
            transform 1.5s cubic-bezier(.12, .23, .5, 1);
    }

    .js-reveal .reveal-zoom.reveal-in {
        opacity: 1;
        transform: none;
    }

    /* Once the animation has run, drop the layer promotion hint. */
    .js-reveal .reveal-in,
    .js-reveal [data-reveal-stagger].reveal-in > * {
        will-change: auto;
    }

    /* Hero: plays on load rather than on scroll, since it is already in view.
       Children are released in sequence via the inline delay set by the script,
       matching the reference site's 0.8s → 1.2s cascade.

       Only opacity is animated here — the phone mockups carry their own
       `rotate()` transforms, and animating transform would overwrite them. */
    .js-reveal [data-reveal-hero] > * {
        opacity: .001;
        transition: opacity 1.2s cubic-bezier(.12, .23, .5, 1);
    }

    .js-reveal [data-reveal-hero].reveal-in > * {
        opacity: 1;
    }

    /* The copy column can safely move, so it gets the fade-up treatment. */
    .js-reveal [data-reveal-hero] > .reveal-rise {
        transform: translateY(20px);
        transition:
            opacity 1.2s cubic-bezier(.12, .23, .5, 1),
            transform 1.2s cubic-bezier(.12, .23, .5, 1);
    }

    .js-reveal [data-reveal-hero].reveal-in > .reveal-rise {
        transform: none;
    }

    /* ── "How it works": the five angled step cards ──
       The rotation lives on the outer positioned wrapper, so the entrance is
       animated on the INNER card. Touching the wrapper's transform would wipe
       out its rotate() and collapse the layout.

       Each card lifts and scales in as the trail reaches it, so the section
       reads as a path being walked rather than a block appearing at once. */
    .js-reveal [data-reveal-steps] .step-card {
        opacity: .001;
        transform: translateY(34px) scale(.94);
        transition:
            opacity .9s cubic-bezier(.12, .23, .5, 1),
            transform .9s cubic-bezier(.16, .8, .3, 1);
        will-change: opacity, transform;
    }

    .js-reveal [data-reveal-steps].reveal-in .step-card {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    /* The dashed trail draws itself in before the cards land on it. */
    .js-reveal [data-reveal-steps] .step-path {
        stroke-dasharray: 2600;
        stroke-dashoffset: 2600;
        /* Overrides the looping `dashmove` marquee until the draw finishes. */
        animation: none;
        transition: stroke-dashoffset 2.4s cubic-bezier(.22, .61, .36, 1);
    }

    .js-reveal [data-reveal-steps].reveal-in .step-path {
        stroke-dashoffset: 0;
    }
}