/* ==========================================================================
   Dent.AI — motion.css
   Scroll reveals, hover utilities, scroll-progress hairline, mobile menu,
   SVG one-shot animation helpers. Companion file: assets/motion.js.
   Palette: #45C3D6 cyan / #7DDDEC light cyan / #061827 bg / #0C2234 panel
            #1D3A50 line / #EDF4F9 text
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reveal system
   Children of .reveal fade/rise in when motion.js adds .visible; stagger via
   --i (stamped on children of [data-stagger] containers by motion.js).
   .reveal-self is the non-cascading single-element variant.
   -------------------------------------------------------------------------- */
.reveal > * {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.visible > * {
  opacity: 1;
  transform: none;
}

.reveal-self {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-self.visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   2. Hover utilities
   Keep .hover-lift's transform simple — motion.js applies its perspective
   tilt through the style attribute and must be able to override it.
   -------------------------------------------------------------------------- */
.hover-lift {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hover-lift:hover {
  transform: translateY(-3px);
}

/* Links/buttons whose label ends with <span class="arr">→</span> */
.arrow-slide .arr {
  display: inline-block;
  transition: transform .2s ease;
}
.arrow-slide:hover .arr {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   3. Scroll progress hairline (element injected by motion.js)
   -------------------------------------------------------------------------- */
#dai-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #45C3D6, #7DDDEC);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 400;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Mobile menu (markup lives in the HTML; motion.js toggles .open)
   -------------------------------------------------------------------------- */
button.dai-burger {
  display: none; /* desktop: hidden */
}

@media (max-width: 820px) {
  button.dai-burger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  button.dai-burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: #EDF4F9;
  }
}

nav.dai-menu {
  display: none;
}
nav.dai-menu.open {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: fixed;
  top: 64px;
  left: 12px;
  right: 12px;
  background: #0C2234;
  border: 1px solid #1D3A50;
  border-radius: 14px;
  padding: 10px;
  z-index: 300;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .6);
}
nav.dai-menu a {
  color: #EDF4F9;
  text-decoration: none;
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: 9px;
}
nav.dai-menu a:hover {
  background: rgba(69, 195, 214, .1);
}

/* The dropdown is mobile-only — never show it on desktop */
@media (min-width: 821px) {
  nav.dai-menu {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   5. SVG one-shot helpers — motion.js adds .play when scrolled into view.
   Stroke draw-in (.dai-draw path, path.dai-draw, line.dai-draw and anything
   under [data-anim="draw"]) is dash-animated entirely by motion.js;
   no static rules are needed for it here.
   -------------------------------------------------------------------------- */
.dai-scanline {
  opacity: 0;
}
[data-anim="scan"].play .dai-scanline,
.dai-scanline.play {
  opacity: 1;
  animation: dai-scan 1.6s cubic-bezier(.4, 0, .2, 1) 1 both;
}
@keyframes dai-scan {
  from {
    transform: translateX(0);
    opacity: .9;
  }
  60% {
    opacity: .9;
  }
  to {
    transform: translateX(var(--scan-w, 320px));
    opacity: 0;
  }
}

.dai-blink.play {
  animation: dai-blink .9s ease 2;
}
@keyframes dai-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* --------------------------------------------------------------------------
   6. Smooth scrolling
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   7. Reduced motion — keep content visible, drop the choreography.
   Must remain the LAST block so it overrides everything above.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal > *,
  .reveal-self {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hover-lift,
  .arrow-slide .arr {
    transition: none;
  }
  .dai-scanline,
  .dai-blink.play {
    animation: none !important;
    opacity: 0 !important;
  }
}