/* Coastside motion layer (pairs with motion.js).
   Everything here sits inside prefers-reduced-motion: no-preference, so visitors who
   ask for less motion get the plain, fully visible page. Only transform and opacity animate. */

@media (prefers-reduced-motion: no-preference) {
  :root {
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-soft: cubic-bezier(.2, .7, .2, 1);
  }

  /* ---------- Page load: hero and service openings ---------- */
  @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes drift-in { from { opacity: 0; transform: translateX(28px) scale(.97); } to { opacity: 1; transform: none; } }

  .hero-copy > *,
  .service-opening-copy > * {
    animation: rise-in .9s var(--ease-out) both;
    animation-delay: calc(80ms + var(--n, 0) * 90ms);
  }
  .hero-copy > :nth-child(2), .service-opening-copy > :nth-child(2) { --n: 1; }
  .hero-copy > :nth-child(3), .service-opening-copy > :nth-child(3) { --n: 2; }
  .hero-copy > :nth-child(4), .service-opening-copy > :nth-child(4) { --n: 3; }
  .hero-copy > :nth-child(5), .service-opening-copy > :nth-child(5) { --n: 4; }
  .service-opening .back-link { animation: fade-in .6s var(--ease-soft) both; }

  .hero-bottom { animation: fade-in 1s var(--ease-soft) .9s both; }

  @media (min-width: 761px) {
    .wave-scene { animation: drift-in 1.3s var(--ease-out) .15s both; }
    .site-preview, .service-opening .service-art { animation: drift-in 1.1s var(--ease-out) .25s both; }
  }

  /* ---------- Scroll reveals (classes set by motion.js) ---------- */
  [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease-soft), transform .85s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }

  /* Workflow diagrams draw themselves in once their card arrives */
  @keyframes draw-down { from { transform: scaleY(0); } to { transform: none; } }
  .workflow-connector { transform-origin: top; }
  .example.is-in .workflow-connector { animation: draw-down .5s var(--ease-out) both; }
  .example.is-in .workflow-connector:nth-child(2) { animation-delay: .35s; }
  .example.is-in .workflow-connector:nth-child(4) { animation-delay: .7s; }

  /* ---------- Hover and focus polish (pointer devices only) ---------- */
  @media (hover: hover) {
    .example-visual { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
    .example-visual img { transition: transform .8s var(--ease-out); }
    .example:hover .example-visual { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(6, 26, 48, .16); }
    .example:hover .example-visual img { transform: scale(1.035); }

    .service-icon { transition: transform .4s var(--ease-out), color .3s; }
    .service-row:hover .service-icon { transform: translateX(5px) scale(1.06); color: var(--blue); }
    .service-row, .service-row h3 { transition: border-color .3s, color .3s; }
    .service-row:hover { border-top-color: var(--blue); }
    .teaser-item:hover .service-icon { transform: translateY(-3px); }

    .desktop-nav > a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .35s var(--ease-out), color .2s; }
    .desktop-nav > a:hover { background-size: 100% 1px; }
  }

  /* Form feedback */
  input, textarea { transition: border-color .2s, box-shadow .25s, background-color .2s; }
  input:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 4px rgba(7, 89, 248, .14); }
  .topic-choice label { transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease-out); }
  .topic-choice label:active { transform: scale(.97); }
  .form-msg:not([hidden]) { animation: rise-in .45s var(--ease-out) both; }
  .field-error:not([hidden]) { animation: fade-in .3s var(--ease-soft) both; }

  /* ---------- Scroll-linked effects (progressive: Chromium/Safari 26+) ---------- */
  @supports (animation-timeline: scroll()) {
    @keyframes scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    body::before {
      content: ""; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 50; pointer-events: none;
      background: linear-gradient(90deg, var(--blue), var(--cyan));
      transform-origin: 0 50%; transform: scaleX(0);
      animation: scroll-progress linear both; animation-timeline: scroll(root block);
    }

    @keyframes wave-parallax { to { transform: translateY(70px); } }
    @media (min-width: 761px) {
      .home .wave-sculpture { animation: wave-parallax linear both; animation-timeline: scroll(root block); animation-range: 0 700px; }
    }
  }

  /* ---------- Page-to-page transitions (multi-page, same origin) ---------- */
  @view-transition { navigation: auto; }
  #site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
}

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  body::before { display: none; }
}