/* Motion enhances the static page; content stays visible without JavaScript. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 40;
  pointer-events: none;
}

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 38px, 0);
  transition: opacity .8s var(--motion-ease), transform 1s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal="heading"] {
  transform: translate3d(0, 48px, 0);
  transition-duration: .95s, 1.2s;
}

.motion-ready [data-reveal="panel"] {
  transform: translate3d(0, 42px, 0) scale(.975);
  transition-duration: .85s, 1.15s;
}

.motion-ready [data-reveal="image"] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* A cover keeps the observed image's intersection geometry intact. */
.motion-ready [data-reveal="image"]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--paper);
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 1.35s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.motion-ready [data-reveal="image"].is-revealed::before {
  transform: scaleY(0);
}

.motion-ready .hero-visual > img {
  transform: translate3d(0, var(--photo-shift, 0px), 0) scale(1.1);
  will-change: transform;
}

.motion-ready .hero-stamp {
  transform: rotate(var(--stamp-turn, 12deg));
}

.ink-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.motion-ready [data-reveal]:not(.is-revealed) .ink-draw {
  stroke-dashoffset: 1;
}

.motion-ready [data-reveal].is-revealed .ink-draw {
  transition: stroke-dashoffset 1.5s var(--motion-ease), d .6s var(--motion-ease);
  transition-delay: calc(var(--reveal-delay, 0ms) + 180ms), 0ms;
}

.motion-ready .analysis-panel:not(.is-revealed) .chart-area {
  opacity: 0;
}

.motion-ready .analysis-panel.is-revealed .chart-area {
  animation: area-reveal 1.5s .35s both;
}

.motion-ready .cost-example .cost-bar {
  transform-origin: left;
  transition: width .5s var(--motion-ease), transform 1.2s var(--motion-ease);
}

.motion-ready .cost-example:not(.is-revealed) .cost-bar {
  transform: scaleX(0);
}

.motion-ready .cost-example.is-revealed .cost-bar {
  transform: scaleX(1);
}

.motion-ready .cost-example.is-revealed .optimized {
  transition-delay: 0s, .2s;
}

.button > span, .header-cta > span, .text-link > span, .contact-email > span {
  display: inline-block;
  transition: transform .4s var(--motion-ease);
}

.service-row h3, .service-number, .service-icon {
  transition: transform .5s var(--motion-ease), color .35s ease;
}

.sector-tabs button > span {
  transition: opacity .3s ease, transform .4s var(--motion-ease);
}

.back-top > span, .photo-caption a {
  transition: background .3s ease, transform .4s var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover > span, .header-cta:hover > span, .text-link:hover > span, .contact-email:hover > span {
    transform: translate(4px, -4px);
  }

  .service-row:hover h3 {
    transform: translateX(8px);
  }

  .service-row:hover .service-number {
    color: var(--ink);
    transform: translateX(3px);
  }

  .service-row:hover .service-icon {
    transform: translateY(-4px) rotate(-4deg);
  }

  .sector-tabs button:hover > span {
    opacity: 1;
    transform: translate(3px, -3px);
  }

  .back-top:hover > span {
    transform: translateY(-4px);
    background: var(--lime);
  }

  .photo-caption a:hover {
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .faq-list details[open] > p, .method-steps details[open] > p {
    animation: detail-reveal .4s var(--motion-ease) both;
  }

  dialog[open] {
    animation: detail-reveal .3s var(--motion-ease) both;
  }
}

@keyframes detail-reveal {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes area-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 780px) {
  .motion-ready [data-reveal], .motion-ready [data-reveal="heading"] {
    transform: translate3d(0, 25px, 0);
  }

  .motion-ready [data-reveal="image"], .motion-ready [data-reveal].is-revealed {
    transform: none;
  }

  .reading-progress { height: 2px; }
}

@media (prefers-reduced-motion: reduce), print {
  .reading-progress { display: none; }
  .motion-ready [data-reveal="image"]::before { display: none; }
  .motion-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .motion-ready .hero-visual > img { transform: none; will-change: auto; }
  .motion-ready .hero-stamp { transform: rotate(12deg); }
  .motion-ready [data-reveal] .ink-draw { stroke-dashoffset: 0 !important; }
  .motion-ready .cost-example .cost-bar { transform: none !important; }
  .motion-ready .analysis-panel .chart-area { opacity: 1 !important; }
}