/* ==========================================================================
   Motion layer (progressive enhancement, no libraries)
   - Everything below is keyed on html.motion, which the inline script in <head> only adds when
     IntersectionObserver + Web Animations exist. No JS, or a failed script (3s failsafe) = no hiding.
   - Only transform (translate / rotate / scale properties) and opacity are animated, plus two small
     one-off exceptions: the lightbox image clip-path and the poster squiggle stroke.
   - Springs come from tokens.css: --spring-settle (damping 1.0) and --spring-pop (damping ~0.72).
   Elementor note: this file and motion.js are optional extras; the page is complete without them.
   ========================================================================== */

/* Elements waiting to be revealed (motion.js adds .is-in as they scroll into view) */
.motion [data-reveal]:not(.is-in) { opacity: 0; }
@media print { .motion [data-reveal]:not(.is-in) { opacity: 1; } }

@keyframes mx-rise { from { opacity: 0; translate: 0 var(--mx-y, 16px); } }
@keyframes mx-word { from { opacity: 0; translate: 0 .4em; } }
@keyframes mx-pop  { from { opacity: 0; scale: var(--mx-s, .6); } }
@keyframes mx-fade { from { opacity: 0; } }
@keyframes mx-fade-out { to { opacity: 0; } }
@keyframes mx-notice { from { opacity: 0; translate: 0 -6px; scale: .98; } }

.hero__title .w { display: inline-block; }

/* ---------- 1. Hero entrance: one-time, about 1s end to end ----------------------------------
   Headline words, lead and buttons start moving at once and finish by ~0.65s, so the message is
   readable immediately. Decorative art overlaps and settles by ~1s. */
@media (prefers-reduced-motion: no-preference) {
  .motion .hero__shape--peach  { --mx-s: .92; animation: mx-pop .8s var(--spring-settle) backwards; }
  .motion .hero__shape--orange { --mx-s: .92; animation: mx-pop .8s var(--spring-settle) .08s backwards; }
  .motion .hero__blob--left    { --mx-s: .85; animation: mx-pop .8s var(--spring-settle) .1s backwards; }
  .motion .hero__ring          { --mx-s: .5;  animation: mx-pop .6s var(--spring-pop) .3s backwards; }
  .motion .hero__mascots       { --mx-y: 48px; animation: mx-rise .8s var(--spring-pop) .15s backwards; }
  .motion .sticker--hero       { --mx-s: .55; animation: mx-pop .45s var(--spring-pop) .55s backwards; }

  .motion .hero__title .w { animation: mx-word .55s var(--spring-settle) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
  .motion .hero__lead { --mx-y: 14px; animation: mx-rise .6s var(--spring-settle) .2s backwards; }
  .motion .hero .btn-row .btn { --mx-y: 12px; animation: mx-rise .55s var(--spring-settle) .28s backwards; }
  .motion .hero .btn-row .btn:nth-child(2) { animation-delay: .34s; }
  .motion .value-row li { --mx-y: 10px; animation: mx-rise .45s var(--spring-settle) backwards; animation-delay: calc(.38s + var(--i, 0) * 45ms); }
  .value-row li:nth-child(1) { --i: 0; } .value-row li:nth-child(2) { --i: 1; }
  .value-row li:nth-child(3) { --i: 2; } .value-row li:nth-child(4) { --i: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .motion .hero__copy, .motion .hero__art { animation: mx-fade .3s ease backwards; }
}

/* ---------- 2. Problem poster: children settle in once the poster is revealed ---------------- */
@keyframes mx-card { from { opacity: 0; rotate: -5deg; scale: .92; } }
@keyframes mx-draw { from { opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .motion .problem__photo.is-in .poster__shape { --mx-s: .9; animation: mx-pop .8s var(--spring-settle) backwards; }
  .motion .problem__photo.is-in .poster__ring { --mx-s: .5; animation: mx-pop .6s var(--spring-pop) .25s backwards; }
  .motion .problem__photo.is-in .poster__card { animation: mx-card .8s var(--spring-pop) .05s backwards; }
  .motion .problem__photo.is-in .poster__line { animation: mx-word .6s var(--spring-settle) backwards; animation-delay: calc(.25s + var(--i, 0) * 90ms); }
  .motion .problem__photo.is-in .poster__squiggle path { animation: mx-draw .6s ease-out .75s backwards; }
  .poster__line--1 { --i: 0; } .poster__line--2 { --i: 1; } .poster__line--3 { --i: 2; } .poster__line--4 { --i: 3; }
}

/* ---------- 3. Execution band: the laptop words tick in one by one ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .execution__art.is-in .laptop__screen span { animation: mx-word .5s var(--spring-settle) backwards; animation-delay: calc(.25s + var(--i, 0) * 100ms); }
  .laptop__screen span:nth-child(1) { --i: 0; } .laptop__screen span:nth-child(2) { --i: 1; }
  .laptop__screen span:nth-child(3) { --i: 2; } .laptop__screen span:nth-child(4) { --i: 3; }
}

/* ---------- 4. Behind the scenes collage: subtle scroll-linked settle (desktop, where supported) --
   Photos start slightly displaced/over-rotated and resolve into the overlapping composition as the
   section scrolls in. Opacity is never touched, so nothing can be hidden. Unsupported browsers and
   mobile get the simple reveal from motion.js instead. */
@keyframes mx-collage { from { translate: var(--cx, 0px) var(--cy, 56px); rotate: var(--cr, 0deg); scale: .95; } }
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .motion .collage__item, .motion .collage__note {
      animation-name: mx-collage; animation-duration: auto; animation-timing-function: var(--ease);
      animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% entry 90%;
    }
    /* Moved by scroll position instead of a one-off fade, so they are never opacity-hidden here */
    .motion .collage__item[data-reveal], .motion .collage__note[data-reveal] { opacity: 1; }
    .collage__item--1 { --cx: -26px; --cy: 60px; --cr: -3deg; }
    .collage__item--2 { --cx: 0px;   --cy: 84px; --cr: 4deg; }
    .collage__item--3 { --cx: 28px;  --cy: 64px; --cr: 3deg; }
    .collage__item--4 { --cx: -18px; --cy: 72px; --cr: -3deg; }
    .collage__item--5 { --cx: 26px;  --cy: 56px; --cr: 3deg; }
    .collage__note    { --cx: -20px; --cy: 48px; --cr: -2deg; }
  }
}

/* ---------- 5. Approach: icons pop, the dotted connector draws ----------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .step.is-in .step__icon { --mx-s: .5; animation: mx-pop .6s var(--spring-pop) .15s backwards; }
  .motion .step:not(:last-child)::after { clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--ease) .35s; }
  .motion .step.is-in:not(:last-child)::after { clip-path: inset(0 0 0 0); }
}

/* ---------- 6. Mobile menu scrim (the panel itself is styled in sections.css) --------------- */
.nav-scrim { display: none; }
@media (max-width: 900px) {
  .js .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(23, 23, 23, .38);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .js.nav-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
}

/* ---------- 7. Inquiry popup ---------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .inquiry[open] { animation: mx-dialog-in .5s var(--spring-settle); }
  .inquiry.is-closing { animation: mx-dialog-out .22s var(--ease-exit) forwards; }
  @keyframes mx-dialog-in { from { opacity: 0; translate: 0 28px; scale: .95; } }
  @keyframes mx-dialog-out { to { opacity: 0; translate: 0 14px; scale: .97; } }

  .inquiry[open] .inquiry__shape { animation: mx-shape .7s var(--spring-pop) .12s backwards; }
  @keyframes mx-shape { from { opacity: 0; rotate: -16deg; scale: .6; } }

  /* Title, intro, fields and button settle in one after another. Errors and notices are excluded:
     they have their own entrance when the hidden attribute is removed. */
  .inquiry[open] .inquiry__form > :not(.inquiry__errors):not(.inquiry__pending):not(.inquiry__close) {
    --mx-y: 12px; animation: mx-rise .5s var(--spring-settle) backwards; animation-delay: calc(.12s + var(--i, 0) * 40ms);
  }
  .inquiry__form > :nth-child(2) { --i: 0; } .inquiry__form > :nth-child(3) { --i: 1; }
  .inquiry__form > :nth-child(5) { --i: 2; } .inquiry__form > :nth-child(6) { --i: 3; }
  .inquiry__form > :nth-child(7) { --i: 4; } .inquiry__form > :nth-child(8) { --i: 5; }
  .inquiry__form > :nth-child(9) { --i: 6; }

  .field__error { animation: mx-notice .3s var(--spring-settle); }
  .inquiry__close { transition: transform .4s var(--spring-pop), background-color .2s; }
  .inquiry__close:active { transform: scale(.9); transition-duration: .1s; }
}
@media (prefers-reduced-motion: reduce) {
  .inquiry[open], .field__error { animation: mx-fade .2s ease; }
  .inquiry.is-closing { animation: mx-fade-out .15s ease forwards; }
}
.inquiry[open]::backdrop { animation: mx-fade .3s ease; }
.inquiry.is-closing::backdrop { animation: mx-fade-out .22s ease forwards; }

/* ---------- 8. Lightbox (image flight is done by main.js; these are the backdrop and close buttons) -- */
.lightbox[open]::backdrop { animation: mx-fade .3s ease; }
.lightbox.is-closing::backdrop { animation: mx-fade-out .28s ease forwards; }
.lightbox__nav, .lightbox__close { transition: transform .4s var(--spring-pop), background-color .2s; }
.lightbox__nav:active, .lightbox__close:active { transform: scale(.9); transition-duration: .1s; }

/* ---------- Reduced transparency: solid chrome instead of frosted glass ---------------------- */
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--cream-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .js .nav-scrim { background: rgba(23, 23, 23, .6); }
}

/* ---------- Reduced motion: no movement, just short opacity changes --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .service-card, .work-tile, .collage__item, .collage__item img, .work-tile__btn img, .btn,
  .service-card__go, .service-card .icon--xl, .btn .icon { transition-property: background-color, color, box-shadow, opacity; }
  .service-card:hover, .work-tile:hover, .collage__item:hover, .btn:hover { transform: none; }
  .service-card:active, .work-tile:active, .btn:active, .service-card__go:active { scale: none; }
  .collage__item:hover img, .work-tile:hover img { transform: none; }
  .service-card:hover .icon--xl, .btn:hover .icon { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .js .site-nav, .js .site-nav.is-open { translate: none; scale: none; transition: opacity .15s linear, visibility 0s linear .15s; }
  .js .site-nav.is-open { transition: opacity .15s linear, visibility 0s; }
  .js .site-nav__list li, .js .site-nav__cta,
  .js .site-nav.is-open .site-nav__list li, .js .site-nav.is-open .site-nav__cta { opacity: 1; translate: none; transition: none; }
}