/* Interaction layer. Layout, typography, photos and approved A4 button geometry stay in their own stylesheets. */
:root { --motion-ease: cubic-bezier(.22,.75,.2,1); }
.motion-pending { opacity: 0; }
.motion-pending:focus-within { opacity: 1; }
.carousel-controls { padding-bottom: 8px; }
.carousel-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #ffe0a0; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.carousel-controls button, .scene-controls button { transition: background .25s, color .25s, opacity .25s; }
.hero-slide.is-active { z-index: 1; }
.home-hero { touch-action: pan-y pinch-zoom; }
.hero-scroll { transition: background .3s, border-color .3s; }
.hero-scroll span { transition: translate .4s var(--motion-ease); }
.hero-scroll:is(:hover, :focus-visible) span { translate: 0 6px; }
.scene-track { cursor: grab; }
.scene-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.scene-track img { -webkit-user-drag: none; }
.scene-controls button:disabled { opacity: .3; cursor: default; }
.scene-progress { width: min(240px,calc(100% - 40px)); height: 2px; margin: 24px auto 0; background: #103b3c20; overflow: hidden; }
.scene-progress > span { display: block; width: 33.3333%; height: 100%; background: var(--green); }
.faq-list summary { transition: color .25s, background .25s; }
.faq-list summary:is(:hover, :focus-visible) { color: var(--green); background: #103b3c05; }
.faq-list details[data-closing] .faq-toggle { transform: rotate(0); }
.photo-dialog[open]::backdrop { animation: dialog-backdrop-in .3s ease both; }
@keyframes dialog-backdrop-in { from { background-color: rgb(5 31 29 / 0%); } to { background-color: rgb(5 31 29 / 72%); } }

@media (prefers-reduced-motion: no-preference) {
  .job-cards .text-link > span, .topics-card .button-icon { transition: translate .4s var(--motion-ease); }
  .job-cards a:is(:hover,:focus-visible) .text-link > span, .topics-card a:is(:hover,:focus-visible) .button-icon { translate: 5px 0; }
  .home-service-photo { overflow: hidden; border-radius: 5px; }
  .home-service-photo > img { transition: scale .7s var(--motion-ease); }
  .home-service-row:is(:hover,:focus-within) .home-service-photo > img { scale: 1.035; }
  .editorial-index a, .section-navigation a { transition: background .25s, color .25s, box-shadow .25s; }
  .crea-form :is(input:not([type=submit]),textarea,select) { transition: border-color .2s, box-shadow .2s, background .2s; }
}
@media (min-width: 781px) and (prefers-reduced-motion: no-preference) {
  .home-goals-orb, .about-decor, .about-wave, .service-orb, .contact-leaf, .recruit-hero-leaf, .vision-sun, .service-hero-leaf, .topics-leaf { translate: var(--pointer-x,0px) calc(var(--drift,0px) + var(--pointer-y,0px)); }
  .recruit-band-word, .company-hero-word { translate: var(--word-drift,0px) 0; }
  .hero-slides { transform: translateY(var(--photo-drift,0px)) scale(1.085); }

}
@media (prefers-reduced-motion: reduce) {
  .motion-pending { opacity: 1; }
  .photo-dialog[open]::backdrop { animation: none; }
  .carousel-progress { display: none; }
  .hero-scroll span { translate: none; }
}
@media print { .motion-pending { opacity: 1; } }