/* studio.lazerkid_v1.36-hero-logo-refined · motion.css
   Motion layer
   ------------------------------------------------------------
   - Motion, reveal, typewriter and microinteraction layer.
   - JS-dependent animations must be gated by .has-motion.
   - Respect prefers-reduced-motion.
*/

/* 01. Tokens */
:root {
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
  --motion-soft: 680ms;
  --motion-slow: 920ms;
  --motion-fast: 240ms;
}

/* 02. Hero geometry
   Fixed from the start so the typewriter does not move the layout. */
@media (min-width: 861px) {
  .has-motion .hero-copy {
    min-width: min(760px, 100%);
  }

  .has-motion .hero-title-split {
    width: max-content;
    max-width: 100%;
  }

  .has-motion .hero .visual-card {
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: layout paint;
  }
}

.hero-title-split {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 2.06em;
}

.hero-title-split [data-hero-line],
.hero-title-split .hero-type-line {
  display: block;
  white-space: nowrap;
  min-height: 1.03em;
  line-height: 1.03;
}

.hero-title-split .hero-type-line + .hero-type-line {
  margin-top: .02em;
}

.hero-grid {
  align-items: center;
}

.hero .visual-card {
  align-self: center;
}

@media (max-width: 860px) {
  .hero-title-split [data-hero-line],
  .hero-title-split .hero-type-line {
    white-space: nowrap;
  }
}


/* v1.23 · mobile hero editorial line breaks */
.hero-line-mobile {
  display: none;
}

@media (min-width: 861px) {
  .hero-line-desktop {
    display: block;
  }
}

@media (max-width: 860px) {
  .hero-title-split {
    min-height: calc(var(--hero-type-lines, 3) * .98em);
  }

  .hero-line-desktop {
    display: none !important;
  }

  .hero-line-mobile {
    display: block;
    white-space: nowrap;
    min-height: .98em;
    line-height: .98;
  }
}


/* v1.24 · mobile hero sequence order */
@media (max-width: 860px) {
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-copy {
    order: 1;
  }

  .hero .visual-card {
    order: 2;
    width: 100%;
    margin-top: clamp(34px, 9vw, 54px);
  }

  .has-motion .hero .visual-card[data-hero-seq="visual"] {
    opacity: 0;
    transform: translateY(8px);
  }

  .has-motion.hero-ready .hero .visual-card[data-hero-seq="visual"] {
    transition:
      opacity 780ms var(--motion-ease),
      transform 780ms var(--motion-ease);
  }

  .has-motion.hero-ready .hero .visual-card[data-hero-seq="visual"].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 03. Hero sequence + typewriter
   Content remains visible without JS. Motion only activates after .has-motion. */
.has-motion [data-hero-seq],
.has-motion [data-hero-type] {
  opacity: 0;
  transform: translateY(10px);
}

.has-motion [data-hero-seq="kicker"] {
  transform: none;
}

.has-motion.hero-ready [data-hero-seq],
.has-motion.hero-ready [data-hero-type] {
  transition:
    opacity 720ms var(--motion-ease),
    transform 720ms var(--motion-ease);
}

.has-motion.hero-ready [data-hero-seq="kicker"] {
  transition: opacity 720ms var(--motion-ease);
}

.has-motion.hero-ready [data-hero-seq].is-visible,
.has-motion.hero-ready [data-hero-type].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.has-motion [data-hero-type].is-typing,
.has-motion [data-hero-type].is-complete {
  opacity: 1;
  transform: translateY(0);
}

.hero-type-cursor {
  display: inline-block;
  width: .08em;
  min-width: 2px;
  height: .82em;
  margin-left: .08em;
  transform: translateY(.08em);
  background: currentColor;
  animation: lzk-cursor-blink 1.05s steps(1) infinite;
}

@keyframes lzk-cursor-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}


/* 04. Oficio title sequence
   Independent from the hero. No typewriter. No layout shift. */
.oficio-title-split {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.oficio-title-split [data-oficio-line] {
  display: block;
}

.has-motion .oficio-title-split [data-oficio-line] {
  opacity: 0;
  transform: translateX(18px);
  transition:
    opacity 820ms var(--motion-ease),
    transform 820ms var(--motion-ease);
  will-change: opacity, transform;
}

.has-motion .oficio-title-split.is-visible [data-oficio-line] {
  opacity: 1;
  transform: translateX(0);
}

.has-motion .oficio-title-split.is-visible [data-oficio-line]:nth-child(2) {
  transition-delay: 180ms;
}

/* 05. General reveal */
.has-motion [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--motion-soft) var(--motion-ease),
    transform var(--motion-soft) var(--motion-ease);
  will-change: opacity, transform;
}

.has-motion [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.has-motion .icon-card[data-reveal],
.has-motion .service-card[data-reveal],
.has-motion .contact-link-card[data-reveal] {
  transition-delay: var(--reveal-delay, 0ms);
}

/* 06. Microinteractions */
.btn,
.service-card,
.icon-card,
.contact-link-card,
.footer-icon-link {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease);
}

@media (hover: hover) {
  .service-card:hover,
  .icon-card:hover,
  .contact-link-card:hover {
    transform: translateY(-2px);
  }

  .btn:hover,
  .footer-icon-link:hover {
    transform: translateY(-1px);
  }
}

/* 07. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal],
  .has-motion [data-hero-seq],
  .has-motion [data-hero-type] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .has-motion .oficio-title-split [data-oficio-line] {
    opacity: 1;
    transform: none;
    transition: none;
  }


  .hero-type-cursor {
    display: none;
  }

  .btn,
  .service-card,
  .icon-card,
  .contact-link-card,
  .footer-icon-link {
    transition: none;
  }
}

/* 08. Service modal motion
   Independent from page motion. Very subtle. */
.service-modal-title-split {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: calc(var(--service-modal-title-lines, 1) * .96em);
}

.service-modal-title-line {
  display: block;
  min-height: .96em;
  line-height: .96;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .service-modal-title-split {
    min-height: calc(var(--service-modal-title-lines, 2) * .96em);
  }

  .service-modal-title-line {
    white-space: nowrap;
    max-width: 100%;
  }
}

.service-modal-type-cursor {
  display: inline-block;
  width: .075em;
  min-width: 2px;
  height: .78em;
  margin-left: .08em;
  transform: translateY(.08em);
  background: currentColor;
  animation: lzk-modal-cursor-blink 1.08s steps(1) infinite;
}

@keyframes lzk-modal-cursor-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.has-motion .service-modal.is-motion-ready .service-modal-label,
.has-motion .service-modal.is-motion-ready .service-modal-title-split,
.has-motion .service-modal.is-motion-ready #service-modal-lead,
.has-motion .service-modal.is-motion-ready .service-modal-mini-card,
.has-motion .service-modal.is-motion-ready .service-modal-visible-card,
.has-motion .service-modal.is-motion-ready .service-modal-chipbox,
.has-motion .service-modal.is-motion-ready .service-modal-accordion,
.has-motion .service-modal.is-motion-ready .service-modal-rich-card,
.has-motion .service-modal.is-motion-ready .service-modal-footer {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 520ms var(--motion-ease),
    transform 520ms var(--motion-ease);
  will-change: opacity, transform;
}

.has-motion .service-modal.is-motion-ready .service-modal-title-split {
  transform: none;
}

.has-motion .service-modal.is-motion-ready .service-modal-label.is-visible,
.has-motion .service-modal.is-motion-ready .service-modal-title-split.is-visible,
.has-motion .service-modal.is-motion-ready .service-modal-title-split.is-typing,
.has-motion .service-modal.is-motion-ready .service-modal-title-split.is-complete,
.has-motion .service-modal.is-motion-ready #service-modal-lead.is-visible,
.has-motion .service-modal.is-motion-ready .service-modal-mini-card.is-visible,
.has-motion .service-modal.is-motion-ready .service-modal-visible-card.is-visible,
.has-motion .service-modal.is-motion-ready .service-modal-chipbox.is-visible,
.has-motion .service-modal.is-motion-ready .service-modal-accordion.is-visible,
.has-motion .service-modal.is-motion-ready .service-modal-rich-card.is-visible,
.has-motion .service-modal.is-motion-ready .service-modal-footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .has-motion .service-modal.is-motion-ready .service-modal-label,
  .has-motion .service-modal.is-motion-ready .service-modal-title-split,
  .has-motion .service-modal.is-motion-ready #service-modal-lead,
  .has-motion .service-modal.is-motion-ready .service-modal-mini-card,
  .has-motion .service-modal.is-motion-ready .service-modal-visible-card,
  .has-motion .service-modal.is-motion-ready .service-modal-chipbox,
  .has-motion .service-modal.is-motion-ready .service-modal-accordion,
  .has-motion .service-modal.is-motion-ready .service-modal-rich-card,
  .has-motion .service-modal.is-motion-ready .service-modal-footer {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .service-modal-type-cursor {
    display: none;
  }
}

/* v1.31 · performance hints without above-the-fold flicker */
.reel-visual,
.map-band {
  content-visibility: auto;
}

.hero .visual-card {
  contain: layout paint;
  will-change: opacity, transform;
}


/* v1.31 · anti-flicker fallback */
.motion-fallback [data-reveal],
.motion-fallback [data-hero-seq],
.motion-fallback [data-hero-type],
.motion-fallback .oficio-title-split [data-oficio-line],
.motion-fallback .service-modal.is-motion-ready .service-modal-label,
.motion-fallback .service-modal.is-motion-ready .service-modal-title-split,
.motion-fallback .service-modal.is-motion-ready #service-modal-lead,
.motion-fallback .service-modal.is-motion-ready .service-modal-mini-card,
.motion-fallback .service-modal.is-motion-ready .service-modal-visible-card,
.motion-fallback .service-modal.is-motion-ready .service-modal-chipbox,
.motion-fallback .service-modal.is-motion-ready .service-modal-accordion,
.motion-fallback .service-modal.is-motion-ready .service-modal-rich-card,
.motion-fallback .service-modal.is-motion-ready .service-modal-footer {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* v1.54 · mobile typewriter stability
   Mobile hero and service-modal titles use fixed editorial lines and reserved height. */