/* Copyright (c) 2026 Nomad Designz.
   Copyright (c) 2026 Jonathan Allen Zehner. Created by Jonathan Allen Zehner.
   Refined public motion. Approved identity assets are never animated or altered.
   Load after responsive.css. Photograph, mist, and interface motion are separate. */

@media screen {
  /* A quiet, consistently placed preference control; the entire 48px disc is a
     touch target. It stays below navigation and native dialog top layers. */
  .motion-control {
    position: fixed;
    z-index: 45;
    inset-inline-end: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border: 1px solid #b3c0bc;
    border-radius: 50%;
    background: #f3f5f4;
    color: #1f2a2b;
    box-shadow: 0 3px 16px #1020221a;
    touch-action: manipulation;
    cursor: pointer;
  }
  .motion-control:focus-visible {
    outline: 3px solid #216c79;
    outline-offset: 4px;
  }
  .motion-control[aria-disabled="true"] { cursor: default; }
  .motion-control-icon,
  .motion-control-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
  }
  .motion-tooltip {
    position: absolute;
    inset-inline-end: calc(100% + 10px);
    top: 50%;
    width: max-content;
    max-width: min(240px, calc(100vw - 96px));
    padding: 9px 12px;
    border: 1px solid #53615b;
    border-radius: 3px;
    background: #1f2a2b;
    color: #f3f5f4;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    text-align: start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .motion-tooltip:after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 100%;
    width: 12px;
  }
  .motion-control:focus-visible .motion-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .motion-control[data-tooltip-dismissed="true"] .motion-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
  }

  /* Keep the original contrast overlay above both independent mist planes.
     No continuous motion is applied to copy, navigation, controls, or logos. */
  .hero .hero-landscape {
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 60% 45%;
    will-change: auto;
  }
  .hero:before { z-index: -1; }
  .hero .hero-fog { display: none !important; }
  .hero-mist {
    position: absolute;
    z-index: -2;
    inset: -18% -22%;
    pointer-events: none;
    opacity: .26;
    will-change: auto;
  }
  .hero-mist-far {
    background:
      radial-gradient(ellipse 35% 16% at 70% 30%, #eaf2f0b8 0%, #eaf2f064 28%, #eaf2f00f 58%, transparent 76%),
      radial-gradient(ellipse 29% 12% at 43% 42%, #e2eeecad 0%, #e2eeec54 30%, transparent 72%),
      radial-gradient(ellipse 25% 11% at 88% 47%, #f3f5f4a6 0%, #f3f5f433 35%, transparent 76%);
  }
  .hero-mist-near {
    background:
      radial-gradient(ellipse 42% 19% at 64% 73%, #edf3f2d1 0%, #edf3f26b 28%, #edf3f214 58%, transparent 78%),
      radial-gradient(ellipse 34% 14% at 20% 86%, #dfeceab8 0%, #dfecea57 30%, transparent 74%);
    opacity: .3;
  }
  .js .hero .hero-landscape {
    animation: nomad-hero-pan 26s cubic-bezier(.45, 0, .55, 1) infinite alternate;
    animation-play-state: paused;
  }
  .js .hero-mist-far {
    animation: nomad-mist-far 21s cubic-bezier(.45, 0, .55, 1) infinite alternate;
    animation-play-state: paused;
  }
  .js .hero-mist-near {
    animation: nomad-mist-near 17s cubic-bezier(.45, 0, .55, 1) infinite alternate;
    animation-play-state: paused;
  }
  html.js[data-motion="running"][data-page-visible="visible"] .hero:not([data-in-view="false"]) .hero-landscape,
  html.js[data-motion="running"][data-page-visible="visible"] .hero:not([data-in-view="false"]) .hero-mist {
    animation-play-state: running;
    will-change: transform, opacity;
  }
  html.js[data-page-visible="hidden"] .hero-landscape,
  html.js[data-page-visible="hidden"] .hero-mist,
  html.js .hero[data-in-view="false"] .hero-landscape,
  html.js .hero[data-in-view="false"] .hero-mist {
    animation-play-state: paused !important;
    will-change: auto;
  }
  html.js[data-motion="paused"] .hero-landscape,
  html.js[data-motion="paused"] .hero-mist { will-change: auto; }

  /* A short stagger makes groups arrive together, not one prolonged sequence.
     Pending is applied only by the initialized client to below-fold content. */
  .reveal {
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.js[data-motion="running"] .reveal.pending {
    opacity: 0;
    transform: translateY(24px);
  }
  html.js[data-motion="paused"] .reveal {
    transition: none;
    transition-delay: 0ms;
  }
  html.js[data-motion="paused"] .reveal.pending {
    opacity: 1;
    transform: none;
  }

  /* Clear space for the preference disc at the end of every public page.
     Actual mobile virtual-keyboard overlap still requires rendered QA. */
  .site-footer { padding-bottom: max(84px, calc(72px + env(safe-area-inset-bottom, 0px))); }
  .button, .store-card, .service-card, .project-art {
    transition: background .22s, color .22s, border-color .22s, box-shadow .28s, transform .28s cubic-bezier(.22, .61, .36, 1);
  }
  .studio-image > img,
  .project-art:not(.identity) > img {
    transition: transform .85s cubic-bezier(.22, .61, .36, 1);
  }
  /* Nomad identity samples remain exactly still, even on pointer hover. */
  .project-art.identity:hover img { transform: none !important; }
  html.js[data-motion="paused"] .button:hover,
  html.js[data-motion="paused"] .store-card:hover,
  html.js[data-motion="paused"] .service-card:hover,
  html.js[data-motion="paused"] .project-art:hover,
  html.js[data-motion="paused"] .project-art:hover img,
  html.js[data-motion="paused"] .studio-image:hover > img,
  html.js[data-motion="paused"] .service-card:hover .service-arrow,
  html.js[data-motion="paused"] .text-link:hover svg {
    transform: none !important;
  }
  html.js[data-motion="paused"] .button,
  html.js[data-motion="paused"] .store-card,
  html.js[data-motion="paused"] .service-card,
  html.js[data-motion="paused"] .project-art,
  html.js[data-motion="paused"] .studio-image > img,
  html.js[data-motion="paused"] .project-art > img { transition: none; }
}

@keyframes nomad-hero-pan {
  from { transform: translate3d(-.8%, .4%, 0) scale(1.055); }
  to { transform: translate3d(.8%, -.8%, 0) scale(1.12); }
}
@keyframes nomad-mist-far {
  from { transform: translate3d(-5%, 1%, 0) scale(1.02); opacity: .24; }
  to { transform: translate3d(5%, -2%, 0) scale(1.04); opacity: .33; }
}
@keyframes nomad-mist-near {
  from { transform: translate3d(5%, 2%, 0) scale(1.03); opacity: .32; }
  to { transform: translate3d(-6%, -1%, 0) scale(1.05); opacity: .24; }
}

@media screen and (min-width: 768px) {
  .hero .hero-landscape { transform-origin: 68% 45%; }
  .motion-control { inset-inline-end: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}
@media screen and (hover: hover) and (pointer: fine) {
  .motion-control:hover { background: #fff; border-color: #7a8f5a; }
  .motion-control:hover .motion-tooltip { opacity: 1; visibility: visible; pointer-events: auto; }
  html.js[data-motion="running"] .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px #10202217;
  }
  html.js[data-motion="running"] .button:active { transform: translateY(0); }
  html.js[data-motion="running"] .store-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px #10202212;
  }
  html.js[data-motion="running"] .service-card:hover { background: #edf3f0; }
  html.js[data-motion="running"] .project-art:not(.identity):hover {
    box-shadow: 0 10px 24px #10202212;
  }
  html.js[data-motion="running"] .project-art:not(.identity):hover > img { transform: scale(1.04); }
  html.js[data-motion="running"] .studio-image:hover > img { transform: scale(1.035); }
}
@media screen and (hover: none) {
  .button:hover, .store-card:hover, .project-art:hover img,
  .service-card:hover .service-arrow, .text-link:hover svg { transform: none !important; }
}
@media screen and (prefers-reduced-motion: reduce) {
  .js .hero .hero-landscape, .js .hero-mist {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  .hero-mist-far { opacity: .24; }
  .hero-mist-near { opacity: .24; }
  .reveal, .reveal.pending { opacity: 1 !important; transform: none !important; transition: none !important; }
  .button:hover, .store-card:hover, .project-art:hover img,
  .studio-image:hover > img, .service-card:hover .service-arrow,
  .text-link:hover svg { transform: none !important; }
}
@media print {
  .motion-control, .hero-mist { display: none !important; }
}