/* Shared subtle motion system for Hangar Agencia. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-accent: #00bdac;
}

html { scroll-behavior: smooth; }

.motion-ready .motion-reveal:not(.is-motion-visible) {
  opacity: 0;
  transform: translate3d(0,48px,0) scale(.976);
  filter: blur(6px);
}

.motion-ready .motion-reveal.is-motion-visible {
  animation: hangarElementReveal .92s var(--motion-ease) both;
  animation-delay: var(--motion-delay,0ms);
}

.motion-ready main > section:not(.project-section):not(.hero):not(.about),
.motion-ready main > article,
.motion-ready .footer-panel,
.motion-ready .footer {
  opacity: 1;
  transform: none;
}

.motion-ready main > section:not(.project-section):not(.hero):not(.about).is-motion-visible,
.motion-ready main > article.is-motion-visible,
.motion-ready .footer-panel.is-motion-visible,
.motion-ready .footer.is-motion-visible {
  animation: hangarSectionReveal .82s var(--motion-ease) both;
}

.motion-ready :is(.service-card,.project-card,.contact-data-card,.client-logo,.blog-card,.service-panel,.value-card) {
  transition: scale .38s cubic-bezier(.22,.72,.2,1), opacity .62s ease, transform .62s var(--motion-ease), box-shadow .3s ease, border-color .3s ease;
}

.motion-ready :is(.hero-card,.hero-preview,.glass-card,.process-card,.crew-card,.article-card,main form) {
  transition: opacity .72s ease, transform .82s var(--motion-ease), box-shadow .35s ease, border-color .35s ease;
}

.motion-ready :is(.hero-card,.hero-preview,.glass-card,.process-card,.crew-card,.article-card,main form):hover {
  transform: translateY(-5px);
}

.motion-ready .is-motion-pressed {
  transform: scale(.94) !important;
  transition-duration: .58s !important;
  transition-timing-function: cubic-bezier(.22,.72,.2,1) !important;
}

.site-rotating-cta {
  width: min(1220px,calc(100% - 36px));
  min-height: min(72vh,720px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  margin: clamp(34px,7vw,96px) auto;
  padding: clamp(72px,10vw,150px) clamp(22px,6vw,86px);
  overflow: hidden;
  border-radius: clamp(28px,4vw,54px);
  background: #08111f;
  color: #fff;
  text-align: center;
}

.site-rotating-kicker { color: var(--motion-accent); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.site-rotating-cta h2 { max-width: 1050px; margin: 0; font-size: clamp(3.1rem,8vw,8.8rem); line-height: .88; letter-spacing: -.055em; }
.site-rotating-word { display: block; min-height: .9em; color: var(--motion-accent); opacity: 1; transform: none; transition: opacity .26s ease,transform .32s var(--motion-ease); }
.site-rotating-word.is-changing { opacity: 0; transform: translateY(22px); }

.title-rotating-word {
  display: inline-block;
  color: var(--blue, var(--motion-accent));
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .3s ease, transform .42s var(--motion-ease), filter .3s ease;
}

.title-rotating-word.is-changing {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(5px);
}

.motion-ready .motion-title-reversible.motion-reveal:not(.is-motion-visible) {
  opacity: 0;
  transform: translate3d(0, 54px, 0) scale(.98);
  filter: blur(6px);
  transition: opacity .82s ease, transform 1.04s var(--motion-ease), filter .82s ease;
}

.motion-ready .motion-title-reversible.motion-reveal.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  animation: none;
  transition: opacity .82s ease, transform 1.04s var(--motion-ease), filter .82s ease;
}
.site-rotating-cta p { max-width: 680px; margin: 0; color: rgba(255,255,255,.72); font-size: clamp(1rem,1.4vw,1.22rem); line-height: 1.6; }
.site-rotating-cta a { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 28px; border-radius: 14px; background: #1a6dff; color: #fff; font-weight: 900; text-decoration: none; box-shadow: 0 20px 50px rgba(26,109,255,.3); }

.motion-ready :is(.service-card,.project-card,.contact-data-card,.blog-card,.service-panel,.value-card):hover {
  transform: translateY(-6px);
}

.motion-ready :is(.eyebrow,.section-kicker)::after {
  transform-origin: left center;
  animation: hangarPulseLine 3.8s ease-in-out infinite;
}

.motion-ready :is(.btn,.blue-button,.map-button,.project-modal-site) {
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--motion-ease), box-shadow .25s ease, filter .25s ease;
}

.motion-ready :is(.btn,.blue-button,.map-button,.project-modal-site):hover {
  transform: translateY(-2px);
  filter: saturate(1.08) brightness(1.04);
}

.motion-ready :is(.btn,.blue-button,.map-button,.project-modal-site)::after {
  content: "";
  position: absolute;
  inset: -80% auto -80% -45%;
  width: 32%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform: skewX(-18deg);
  animation: hangarButtonScan 5.2s ease-in-out infinite;
  pointer-events: none;
}

.motion-ready .hero {
  isolation: isolate;
}

.motion-ready .hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(34vw,460px);
  aspect-ratio: 1;
  right: -12%;
  top: -18%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(0,189,172,.12),transparent 68%);
  pointer-events: none;
  animation: hangarAmbient 9s ease-in-out infinite alternate;
}

@keyframes hangarPulseLine {
  0%,100% { opacity: .7; transform: scaleX(.82); }
  50% { opacity: 1; transform: scaleX(1); }
}

@keyframes hangarButtonScan {
  0%,62% { left: -45%; opacity: 0; }
  72% { opacity: .8; }
  92%,100% { left: 125%; opacity: 0; }
}

@keyframes hangarAmbient {
  from { transform: translate3d(0,0,0) scale(.94); opacity: .55; }
  to { transform: translate3d(-7%,10%,0) scale(1.08); opacity: .9; }
}

@keyframes hangarElementReveal {
  from { opacity: 0; transform: translate3d(0,48px,0) scale(.976); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes hangarSectionReveal {
  from { opacity: .01; transform: translateY(72px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* On the homepage each rounded section behaves like a panel sliding upward. */
@supports (animation-timeline: view()) {
  .motion-ready body[data-build^="home-static"] main > section:not(.hero):not(.about):not(.projects).is-motion-visible {
    animation: hangarPanelScroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 46%;
  }

  .motion-ready body[data-build^="home-static"] main > .projects.is-motion-visible {
    animation: hangarProjectExpand linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes hangarPanelScroll {
  from { opacity: 1; transform: translateY(88px) scale(.982); }
  to { opacity: 1; transform: none; }
}

@keyframes hangarProjectExpand {
  0% { transform: scale(.92); border-radius: 46px; box-shadow: 0 24px 80px rgba(7,17,31,.3); }
  22%,78% { transform: scale(1); border-radius: 0; box-shadow: 0 0 0 rgba(7,17,31,0); }
  100% { transform: scale(.92); border-radius: 46px; box-shadow: 0 -24px 80px rgba(7,17,31,.3); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .motion-ready main > section:not(.project-section):not(.hero):not(.about),.motion-ready main > article,.motion-ready .footer-panel,.motion-ready .footer { opacity: 1; transform: none; }
}
/* Nosotros: entradas direccionales ligadas al scroll. */
.motion-ready .team-collab-reveal > .visual-card.motion-reveal:not(.is-motion-visible) {
  opacity: 0;
  transform: translate3d(-112px, 0, 0) scale(.975);
  filter: blur(6px);
  transition: opacity .86s ease, transform 1.08s cubic-bezier(.16, 1, .3, 1), filter .86s ease;
}

.motion-ready .team-collab-reveal > .glass-card.motion-reveal:not(.is-motion-visible) {
  opacity: 0;
  transform: translate3d(112px, 0, 0) scale(.975);
  filter: blur(6px);
  transition: opacity .86s ease, transform 1.08s cubic-bezier(.16, 1, .3, 1), filter .86s ease;
}

.motion-ready .team-collab-reveal > .visual-card.motion-reveal.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  animation: none;
  transition: opacity .86s ease, transform 1.08s cubic-bezier(.16, 1, .3, 1), filter .86s ease;
}

.motion-ready .team-collab-reveal > .glass-card.motion-reveal.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  animation: none;
  transition: opacity .86s ease 70ms, transform 1.08s cubic-bezier(.16, 1, .3, 1) 70ms, filter .86s ease 70ms;
}

.motion-ready .flight-plan-timeline > .glass-card.motion-reveal:not(.is-motion-visible) {
  opacity: 0;
  transform: translate3d(-96px, 0, 0) scale(.982);
  filter: blur(5px);
  transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1), filter .8s ease;
}

.motion-ready .flight-plan-timeline > .glass-card.motion-reveal.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  animation: none;
  transition: opacity .8s ease var(--flight-delay, 0ms), transform 1s cubic-bezier(.16, 1, .3, 1) var(--flight-delay, 0ms), filter .8s ease var(--flight-delay, 0ms);
}

.motion-ready .flight-plan-timeline > .glass-card:nth-child(2) { --flight-delay: 70ms; }
.motion-ready .flight-plan-timeline > .glass-card:nth-child(3) { --flight-delay: 140ms; }
.motion-ready .flight-plan-timeline > .glass-card:nth-child(4) { --flight-delay: 210ms; }
.motion-ready .flight-plan-timeline > .glass-card:nth-child(5) { --flight-delay: 280ms; }

@keyframes hangarRevealFromLeft {
  from { opacity: 0; transform: translate3d(-112px, 0, 0) scale(.975); filter: blur(6px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes hangarRevealFromRight {
  from { opacity: 0; transform: translate3d(112px, 0, 0) scale(.975); filter: blur(6px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes hangarFlightStepReveal {
  from { opacity: 0; transform: translate3d(-96px, 0, 0) scale(.982); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@media (max-width: 640px) {
  .motion-ready .team-collab-reveal > .visual-card.motion-reveal:not(.is-motion-visible),
  .motion-ready .flight-plan-timeline > .glass-card.motion-reveal:not(.is-motion-visible) {
    transform: translate3d(-52px, 0, 0) scale(.985);
  }

  .motion-ready .team-collab-reveal > .glass-card.motion-reveal:not(.is-motion-visible) {
    transform: translate3d(52px, 0, 0) scale(.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .team-collab-reveal > .motion-reveal,
  .motion-ready .flight-plan-timeline > .motion-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}
.services-row.hangar-loop,
.project-rail.hangar-loop {
  display: block !important;
  overflow: hidden !important;
  scroll-snap-type: none !important;
  cursor: grab;
  touch-action: pan-y;
}

.services-row.hangar-loop.is-loop-dragging,
.project-rail.hangar-loop.is-loop-dragging {
  cursor: grabbing;
}

.hangar-loop-track {
  display: flex;
  width: max-content;
  gap: inherit;
  transform: translate3d(0, 0, 0);
}

/* Keep the user-controlled rail feedback available even when the browser or
   operating system requests reduced decorative motion. */
@media (prefers-reduced-motion: reduce) {
  .services-row.hangar-loop .service-card,
  .project-rail.hangar-loop .project-card {
    transition: scale .38s cubic-bezier(.22,.72,.2,1), opacity .62s ease, transform .62s var(--motion-ease), border-color .3s ease !important;
  }
}
