/*
 * Digital Kreativ / homepage-only motion layer
 * Phase 1: narrative reveals; Phase 2: UI micro-interactions;
 * Phase 3: counters, image light pass and signature details.
 * Progressive enhancement: nothing is concealed unless motion.js observes it.
 * No visual/position rules are changed for the existing Elementor layouts.
 */

/* Phase 1 — scroll and hero choreography. Animation with "backwards" fill
   is crucial: after it finishes, native service/project hover transforms win. */
@media (prefers-reduced-motion: no-preference) {
  body.page-id-78 [data-dkm-enter="pending"]:not([data-dkm-kind="image"]):not([data-dkm-kind="border"]) {
    opacity: 0;
    transform: translate3d(0, 19px, 0);
  }
  body.page-id-78 [data-dkm-kind="hero"][data-dkm-enter="pending"] {
    transform: translate3d(0, 26px, 0);
  }
  body.page-id-78 [data-dkm-kind="short"][data-dkm-enter="pending"] {
    transform: translate3d(0, 13px, 0);
  }
  body.page-id-78 [data-dkm-kind="card"][data-dkm-enter="pending"] {
    transform: translate3d(0, 22px, 0);
  }
  body.page-id-78 [data-dkm-enter="pending"]:focus-within {
    opacity: 1 !important;
    transform: none !important;
  }
  body.page-id-78 [data-dkm-enter="visible"]:not([data-dkm-kind="image"]):not([data-dkm-kind="border"]) {
    opacity: 1;
    animation: dkm-rise 660ms cubic-bezier(.2,.72,.25,1) var(--dkm-delay, 0ms) backwards;
  }
  body.page-id-78 [data-dkm-kind="hero"][data-dkm-enter="visible"] {
    animation-name: dkm-hero-rise;
    animation-duration: 780ms;
  }
  body.page-id-78 [data-dkm-kind="short"][data-dkm-enter="visible"] {
    animation-duration: 520ms;
  }
  body.page-id-78 [data-dkm-kind="card"][data-dkm-enter="visible"] {
    animation-duration: 560ms;
  }
  @keyframes dkm-rise {
    from {opacity:0; transform:translate3d(0,19px,0)}
    to {opacity:1; transform:translate3d(0,0,0)}
  }
  @keyframes dkm-hero-rise {
    from {opacity:0; transform:translate3d(0,26px,0)}
    to {opacity:1; transform:translate3d(0,0,0)}
  }

  /* Phase 3 — imagery is never opacity-hidden, nor shifted from approved offsets. */
  body.page-id-78 .dk-about-photo-box[data-dkm-kind="image"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg,transparent 24%,rgba(88,255,238,.16) 50%,transparent 77%);
    transform: translateX(-110%);
  }
  body.page-id-78 .dk-about-photo-box[data-dkm-enter="visible"]::after {
    animation: dkm-image-sweep 940ms ease-out 160ms backwards;
  }
  @keyframes dkm-image-sweep {
    0% {opacity:0;transform:translateX(-110%)}
    32% {opacity:1}
    86% {opacity:.6}
    100% {opacity:0;transform:translateX(110%)}
  }
  body.page-id-78 .dkg-visual[data-dkm-enter="visible"] .dkg-image img {
    animation: dkm-image-illuminate 1100ms ease-out 150ms backwards;
  }
  @keyframes dkm-image-illuminate {
    from {filter:brightness(.88) drop-shadow(0 0 0 transparent)}
    55% {filter:brightness(1.07) drop-shadow(0 0 16px rgba(62,223,208,.18))}
    to {filter:brightness(1) drop-shadow(0 0 0 transparent)}
  }
  body.page-id-78 .dk-about-banner[data-dkm-kind="border"][data-dkm-enter="visible"] {
    animation: dkm-border-glow 1100ms ease-out 250ms backwards;
  }
  @keyframes dkm-border-glow {
    0% {filter:drop-shadow(0 0 0 transparent)}
    55% {filter:drop-shadow(0 0 15px rgba(62,223,208,.24))}
    100% {filter:drop-shadow(0 0 0 transparent)}
  }

  /* Phase 2 — carousel animation does not touch slide identity, hidden,
     ARIA announcements, dots, keyboard handlers or autoplay settings. */
  body.page-id-78 .dkt-v2__carousel.is-ready .dkt-v2__slide:not([hidden]) {
    animation: dkm-review-enter 370ms cubic-bezier(.22,.68,.2,1) both;
  }
  @keyframes dkm-review-enter {
    from {opacity:.1;transform:translate3d(0,8px,0)}
    to {opacity:1;transform:none}
  }

  /* Mobile drawer: preserve fixed positioning, backdrop and close behavior. */
  @media (max-width: 767px) {
    body.page-id-78 .dk2026-header .dk2026-mobile[open] .dk2026-menu-panel {
      animation: dkm-drawer-in 260ms cubic-bezier(.2,.7,.2,1) both;
    }
    @keyframes dkm-drawer-in {
      from {opacity:0;transform:translate3d(0,-9px,0)}
      to {opacity:1;transform:none}
    }
  }
}

/* Phase 2 — responsive, keyboard-friendly UI responses.
   Scope strictly to homepage so References page and other forms are unchanged. */
body.page-id-78 :is(
  .dk-hero-btn-primary, .dk-hero-btn-outline, .dk-services-all,
  .dk-project-cta, .dk-about-banner-btn, .dkg-action
) .elementor-button {
  transition: color .22s ease,background-color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
@media (hover:hover) and (pointer:fine) {
  body.page-id-78 :is(
    .dk-hero-btn-primary, .dk-hero-btn-outline, .dk-services-all,
    .dk-project-cta, .dk-about-banner-btn, .dkg-action
  ) .elementor-button:hover {
    transform: translate3d(0,-2px,0);
    box-shadow: 0 10px 25px rgba(62,223,208,.16);
    filter: brightness(1.055);
  }
  body.page-id-78 .dk2026-header .dk2026-brand {
    transition: filter .25s ease;
  }
  body.page-id-78 .dk2026-header .dk2026-brand:hover {
    filter: drop-shadow(0 2px 9px rgba(62,223,208,.22));
  }

  /* Existing active-menu underline uses ::after; this uses ::before. */
  body.page-id-78 .dk2026-header .dk2026-nav-list > li:not(.dkh-menu-cta) > a::before {
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    bottom: -9px;
    border-radius: 9px;
    background: #3edfd0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .24s cubic-bezier(.2,.7,.2,1);
  }
  body.page-id-78 .dk2026-header .dk2026-nav-list > li:not(.dkh-menu-cta) > a:hover::before,
  body.page-id-78 .dk2026-header .dk2026-nav-list > li:not(.dkh-menu-cta) > a:focus-visible::before {
    transform: scaleX(1);
  }

  body.page-id-78 .dkf-editorial .dkf-social a {
    transition: background-color .22s ease,box-shadow .22s ease,transform .22s ease,color .22s ease;
  }
  body.page-id-78 .dkf-editorial .dkf-social a:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px rgba(62,223,208,.17),0 0 15px rgba(62,223,208,.19);
  }

  body.page-id-78 .dkt-v2 .dkt-v2__arrows button:hover {
    transform: translateY(-2px);
  }
}

/* Arrow travel uses existing pseudo-elements; no new text/markup. */
body.page-id-78 :is(.dk-project-cta,.dk-about-banner-btn,.dkg-action) .elementor-button::after {
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
@media(hover:hover) and (pointer:fine) {
  body.page-id-78 :is(.dk-project-cta,.dk-about-banner-btn,.dkg-action) .elementor-button:hover::after {
    transform: translateX(3px);
  }
}

/* Mobile swipe: preserve native snap geometry and card taps. No entrance
   transforms or image opacity on the card rows at <=767px. */
@media (max-width:767px) {
  body.page-id-78 .dk-services-section .dk-service-card,
  body.page-id-78 .dk-projects-section .dk-project-card {
    scroll-snap-stop: normal;
  }
  body.page-id-78 .dk-services-section .dk-service-card:active,
  body.page-id-78 .dk-projects-section .dk-project-card:active {
    border-color: #3edfd0;
  }
  body.page-id-78 .dk2026-header .dk2026-mobile summary svg {
    transition: transform .22s ease,opacity .22s ease;
  }
  body.page-id-78 .dk2026-header .dk2026-mobile[open] .dk2026-close {
    animation: dkm-close-in 240ms ease-out both;
  }
  @keyframes dkm-close-in {
    from {opacity:0;transform:rotate(-50deg) scale(.84)}
    to {opacity:1;transform:none}
  }
}

/* Form interactions enhance, never replace, CF7 validation or submit UI. */
body.page-id-78 :is(.dk-hero-lead-wrap,.dk-contact-section) :is(
  input[type="text"],input[type="tel"],input[type="email"],textarea
) {
  transition: border-color .22s ease,box-shadow .22s ease,background-color .22s ease !important;
}
body.page-id-78 :is(.dk-hero-lead-wrap,.dk-contact-section) :is(
  input[type="text"],input[type="tel"],input[type="email"],textarea
):focus-visible {
  box-shadow: 0 0 0 3px rgba(62,223,208,.17) !important;
}
body.page-id-78 :is(.dk-hero-lead-wrap,.dk-contact-section) input[type="submit"] {
  transition: transform .19s ease,background-color .19s ease,box-shadow .19s ease !important;
}
body.page-id-78 :is(.dk-hero-lead-wrap,.dk-contact-section) input[type="submit"]:active {
  transform: scale(.986);
}

/* Phase 3 — maintain fixed digit width while the counter animates. */
body.page-id-78 .dks-statistics .dks-value .elementor-heading-title {
  font-variant-numeric: tabular-nums;
}

/* Accessibility: motion is opt-out and never required to see content. */
@media (prefers-reduced-motion: reduce) {
  body.page-id-78 [data-dkm-enter] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  body.page-id-78 .dk-about-photo-box::after,
  body.page-id-78 .dkg-visual .dkg-image img,
  body.page-id-78 .dk-about-banner,
  body.page-id-78 .dkt-v2__slide,
  body.page-id-78 .dk2026-menu-panel,
  body.page-id-78 .dk2026-close,
  body.page-id-78 .dk2026-header .dk2026-brand,
  body.page-id-78 .dkf-editorial .dkf-social a {
    animation: none !important;
    transition: none !important;
  }
  body.page-id-78 :is(
    .dk-hero-btn-primary,.dk-hero-btn-outline,.dk-services-all,
    .dk-project-cta,.dk-about-banner-btn,.dkg-action
  ) .elementor-button,
  body.page-id-78 :is(.dk-hero-lead-wrap,.dk-contact-section) :is(input,textarea) {
    animation: none !important;
    transition: none !important;
  }
}