/* LZK_BLUESKY — motion.css
   MOTION 04
   Adds PRO/LAB hero reveals, minimal hero stagger, and a very short page-enter for iframe content,
   while preserving the quieter MOTION 03 language.
*/

:root {
  --motion-fast: .16s;
  --motion-base: .42s;
  --motion-slow: .70s;
  --motion-hero: .60s;
  --motion-ease-standard: cubic-bezier(.22,.61,.36,1);
  --motion-ease-soft: cubic-bezier(.22,.61,.36,1);
  --motion-ease-fade: cubic-bezier(.20,.80,.20,1);
  --motion-distance-xs: 6px;
  --motion-distance-sm: 10px;
  --motion-distance-md: 24px;
  --motion-hover-lift: -2px;
  --motion-modal-backdrop: .18s;
  --motion-modal-panel: .22s;
  --motion-tap: .12s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* --- Logo dot: almost imperceptible ambient gradient drift --- */
  .logo::before {
    background-size: 132% 132%;
    background-position: 34% 36%;
    animation: lzk-dot-idle 10s ease-in-out infinite;
    will-change: transform, filter, background-position;
  }

  .logo:hover::before,
  .logo:focus-visible::before {
    animation-duration: 6.5s;
  }

  @keyframes lzk-dot-idle {
    0%, 100% {
      transform: translate3d(0, 0, 0) scale(1);
      background-position: 34% 36%;
      filter: saturate(1) brightness(1);
    }
    38% {
      transform: translate3d(0, -.35px, 0) scale(1.018);
      background-position: 42% 40%;
      filter: saturate(1.02) brightness(1.015);
    }
    72% {
      transform: translate3d(0, 0, 0) scale(.992);
      background-position: 50% 47%;
      filter: saturate(.99) brightness(.995);
    }
  }

  /* --- Page enter: short, quiet iframe-content settle --- */
  body:not(.shell) main {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance-xs), 0);
    transition:
      opacity .32s var(--motion-ease-fade),
      transform .32s var(--motion-ease-standard);
    will-change: opacity, transform;
  }

  body:not(.shell).motion-page-in main {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* --- Shared hero reveal family: HOME / PRO / LAB --- */
  body.home .hero .hero-kicker,
  body.home .hero h1,
  body.home .hero .hero-sub,
  body.home .hero .hero-desc,
  body.home .hero .hero-divider,
  body.home .hero .hero-cta,
  body.pro .hero .hero-kicker,
  body.pro .hero h1,
  body.pro .hero .hero-sub,
  body.pro .hero .hero-desc,
  body.pro .hero .hero-divider,
  body.pro .hero .hero-cta,
  body.lab-page .hero .hero-kicker,
  body.lab-page .hero h1,
  body.lab-page .hero .hero-sub,
  body.lab-page .hero .hero-desc,
  body.lab-page .hero .hero-divider,
  body.lab-page .hero .hero-cta {
    opacity: 0;
    transform: translate3d(var(--motion-distance-md), 0, 0);
    transition:
      opacity var(--motion-hero) var(--motion-ease-standard),
      transform var(--motion-hero) var(--motion-ease-standard);
    transition-delay: var(--motion-delay, 0s);
    will-change: opacity, transform;
  }

  body.home .hero.motion-in .hero-kicker,
  body.home .hero.motion-in h1,
  body.home .hero.motion-in .hero-sub,
  body.home .hero.motion-in .hero-desc,
  body.home .hero.motion-in .hero-divider,
  body.home .hero.motion-in .hero-cta,
  body.pro .hero.motion-in .hero-kicker,
  body.pro .hero.motion-in h1,
  body.pro .hero.motion-in .hero-sub,
  body.pro .hero.motion-in .hero-desc,
  body.pro .hero.motion-in .hero-divider,
  body.pro .hero.motion-in .hero-cta,
  body.lab-page .hero.motion-in .hero-kicker,
  body.lab-page .hero.motion-in h1,
  body.lab-page .hero.motion-in .hero-sub,
  body.lab-page .hero.motion-in .hero-desc,
  body.lab-page .hero.motion-in .hero-divider,
  body.lab-page .hero.motion-in .hero-cta {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  body.home .hero .hero-kicker { --motion-delay: .04s; }
  body.home .hero h1 { --motion-delay: .12s; }
  body.home .hero .hero-sub { --motion-delay: .18s; }
  body.home .hero .hero-desc { --motion-delay: .24s; }
  body.home .hero .hero-divider { --motion-delay: .28s; }
  body.home .hero .hero-cta { --motion-delay: .32s; }

  body.pro .hero .hero-kicker { --motion-delay: .02s; }
  body.pro .hero h1 { --motion-delay: .08s; }
  body.pro .hero .hero-sub { --motion-delay: .12s; }
  body.pro .hero .hero-desc:nth-of-type(1) { --motion-delay: .16s; }
  body.pro .hero .hero-desc:nth-of-type(2) { --motion-delay: .20s; }
  body.pro .hero .hero-divider { --motion-delay: .24s; }
  body.pro .hero .hero-cta { --motion-delay: .28s; }

  body.lab-page .hero .hero-kicker { --motion-delay: .03s; }
  body.lab-page .hero h1 { --motion-delay: .10s; }
  body.lab-page .hero .hero-sub { --motion-delay: .16s; }
  body.lab-page .hero .hero-desc { --motion-delay: .22s; }
  body.lab-page .hero .hero-divider { --motion-delay: .26s; }
  body.lab-page .hero .hero-cta { --motion-delay: .30s; }

  /* --- Soft reveal blocks/cards/thumbs --- */
  .motion-item {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance-sm), 0);
    transition:
      opacity var(--motion-base) var(--motion-ease-fade),
      transform var(--motion-base) var(--motion-ease-standard),
      box-shadow var(--motion-base) var(--motion-ease-standard),
      background-color var(--motion-fast) var(--motion-ease-standard),
      border-color var(--motion-fast) var(--motion-ease-standard),
      filter var(--motion-base) var(--motion-ease-standard);
    transition-delay: var(--motion-delay, 0s);
    will-change: opacity, transform;
  }

  .motion-item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .service-card,
  .card,
  .exp-card,
  .portfolio-item.has-thumb,
  .picon,
  .btn,
  .nav a,
  .nav button {
    transition:
      transform var(--motion-fast) var(--motion-ease-standard),
      opacity var(--motion-base) var(--motion-ease-fade),
      background-color var(--motion-fast) var(--motion-ease-standard),
      border-color var(--motion-fast) var(--motion-ease-standard),
      box-shadow var(--motion-base) var(--motion-ease-standard),
      filter var(--motion-base) var(--motion-ease-standard);
  }

  .service-card:hover,
  .card:hover,
  .exp-card:hover {
    transform: translate3d(0, var(--motion-hover-lift), 0);
    box-shadow: 0 12px 26px rgba(0,0,0,.08);
  }

  html[data-skin="black"] .service-card:hover,
  html[data-skin="black"] .card:hover,
  html[data-skin="black"] .exp-card:hover,
  html[data-skin="blueberry"] .service-card:hover,
  html[data-skin="blueberry"] .card:hover,
  html[data-skin="blueberry"] .exp-card:hover,
  html[data-skin="red"] .service-card:hover,
  html[data-skin="red"] .card:hover,
  html[data-skin="red"] .exp-card:hover {
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
  }

  .portfolio-item.has-thumb {
    transform-origin: center center;
  }

  .portfolio-item.has-thumb:hover {
    transform: translate3d(0, calc(var(--motion-hover-lift) * .75), 0);
    filter: brightness(1.015);
  }

  .btn:hover,
  .nav a:hover,
  .nav button:hover {
    transform: translate3d(0, -1px, 0);
  }

  /* --- Modal open: quiet backdrop + panel settle --- */
  .modal.is-open,
  .modal[aria-hidden="false"],
  .ag-modal.is-open,
  .gm2-modal.is-open {
    animation: lzk-modal-fade-in var(--motion-modal-backdrop) var(--motion-ease-fade) both;
  }

  .modal .modal__backdrop {
    opacity: 0;
    transition: opacity var(--motion-modal-backdrop) var(--motion-ease-fade);
  }

  .modal.is-open .modal__backdrop,
  .modal[aria-hidden="false"] .modal__backdrop {
    opacity: 1;
  }

  .modal .modal__panel,
  .ag-modal .ag-modal__panel,
  .gm2-modal .gm2-dialog {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance-sm), 0) scale(.995);
    transition:
      opacity var(--motion-modal-panel) var(--motion-ease-fade),
      transform var(--motion-modal-panel) var(--motion-ease-standard);
    will-change: opacity, transform;
  }

  .modal.is-open .modal__panel,
  .modal[aria-hidden="false"] .modal__panel,
  .ag-modal.is-open .ag-modal__panel,
  .ag-modal[aria-hidden="false"] .ag-modal__panel,
  .gm2-modal.is-open .gm2-dialog {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  @keyframes lzk-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* --- Control feedback: play / close / fullscreen --- */
  .ag-btn,
  .pfc-play,
  .nav-fs-btn,
  .modal__navbtn,
  .modal [data-close="1"],
  .btn.secondary[data-close="1"],
  .btn.secondary[data-gm-close],
  .btn.secondary[data-gm2-close] {
    transition:
      transform var(--motion-tap) var(--motion-ease-standard),
      opacity var(--motion-fast) var(--motion-ease-fade),
      background-color var(--motion-fast) var(--motion-ease-standard),
      border-color var(--motion-fast) var(--motion-ease-standard),
      filter var(--motion-fast) var(--motion-ease-standard);
    transform-origin: center center;
    will-change: transform;
  }

  .ag-btn:hover,
  .pfc-play:hover,
  .nav-fs-btn:hover,
  .modal__navbtn:hover,
  .modal [data-close="1"]:hover,
  .btn.secondary[data-close="1"]:hover,
  .btn.secondary[data-gm-close]:hover,
  .btn.secondary[data-gm2-close]:hover {
    transform: translate3d(0, -1px, 0) scale(1.04);
  }

  .ag-btn:active,
  .pfc-play:active,
  .nav-fs-btn:active,
  .modal__navbtn:active,
  .modal [data-close="1"]:active,
  .btn.secondary[data-close="1"]:active,
  .btn.secondary[data-gm-close]:active,
  .btn.secondary[data-gm2-close]:active,
  .ag-btn.is-pressing,
  .pfc-play.is-pressing,
  .nav-fs-btn.is-pressing,
  .modal__navbtn.is-pressing,
  .modal [data-close="1"].is-pressing,
  .btn.secondary[data-close="1"].is-pressing,
  .btn.secondary[data-gm-close].is-pressing,
  .btn.secondary[data-gm2-close].is-pressing {
    transform: translate3d(0, 0, 0) scale(.96);
  }

}