/* Barqa cinematic motion system: progressive enhancement only. */
:root {
  --cinematic-ease: cubic-bezier(.16, 1, .3, 1);
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: barqa-page-out 420ms ease both;
}

::view-transition-new(root) {
  animation: barqa-page-in 760ms var(--cinematic-ease) both;
}

::view-transition-group(*) {
  animation-duration: 860ms;
  animation-timing-function: var(--cinematic-ease);
}

@keyframes barqa-page-out {
  to { opacity: 0; filter: blur(5px); }
}

@keyframes barqa-page-in {
  from { opacity: 0; filter: blur(8px); }
}

@keyframes barqa-header-enter {
  from { opacity: 0; transform: translateY(-18px); }
}

@keyframes barqa-hero-depth {
  from { transform: scale(1.065); filter: saturate(.78) brightness(.78); }
  to { transform: scale(1.01); filter: saturate(1) brightness(1); }
}

@keyframes barqa-shade-enter {
  from { opacity: .45; }
}

@keyframes barqa-mask-enter {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(34px); filter: blur(9px); }
  to { opacity: 1; clip-path: inset(0); transform: translateY(0); filter: blur(0); }
}

@keyframes barqa-line-draw {
  from { transform: scaleX(0); opacity: 0; }
}

@keyframes barqa-search-enter {
  from { opacity: 0; clip-path: inset(0 50% 0 50% round var(--radius)); transform: translateX(-50%) translateY(22px); }
  to { opacity: 1; clip-path: inset(0 round var(--radius)); transform: translateX(-50%) translateY(0); }
}

@keyframes barqa-card-enter {
  from { opacity: 0; transform: translateY(70px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes barqa-panel-uncover {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes barqa-section-enter {
  from { opacity: .2; clip-path: inset(12% 0 0); transform: translateY(54px); filter: blur(7px); }
  to { opacity: 1; clip-path: inset(0); transform: translateY(0); filter: blur(0); }
}

@keyframes barqa-fact-enter {
  from { opacity: 0; transform: translateY(24px); }
}

@keyframes barqa-gallery-enter {
  from { opacity: 0; clip-path: inset(10% 4% 14%); transform: scale(.965); filter: blur(8px); }
  to { opacity: 1; clip-path: inset(0); transform: scale(1); filter: blur(0); }
}

@keyframes barqa-save-pop {
  0% { transform: scale(.82); }
  48% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

@keyframes barqa-form-enter {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
}

@keyframes barqa-mobile-bar-enter {
  from { opacity: 0; transform: translateY(28px); }
}

.site-header,
.detail-header,
.auth-header {
  animation: barqa-header-enter 780ms var(--cinematic-ease) 80ms both;
}

.hero-photo {
  animation: barqa-hero-depth 7s var(--cinematic-ease) both;
  transform-origin: center 58%;
}

.hero-shade {
  animation: barqa-shade-enter 1.8s ease-out both;
}

.hero-content > * {
  animation: barqa-mask-enter 1.05s var(--cinematic-ease) both;
}

.hero-content > :nth-child(1) { animation-delay: 180ms; }
.hero-content > :nth-child(2) { animation-delay: 290ms; }
.hero-content > :nth-child(3) { animation-delay: 420ms; }
.hero-content > :nth-child(4) { animation-delay: 540ms; }

.hero-content .eyebrow::after {
  content: "";
  display: inline-block;
  width: 68px;
  height: 1px;
  margin-left: 14px;
  vertical-align: middle;
  background: currentColor;
  transform-origin: left;
  animation: barqa-line-draw 1.1s var(--cinematic-ease) 720ms both;
}

.search-panel {
  animation: barqa-search-enter 1.15s var(--cinematic-ease) 620ms both;
}

.project-image .tag,
.project-image .save {
  z-index: 2;
}

.save[aria-pressed="true"],
.project-save[aria-pressed="true"] {
  animation: barqa-save-pop 520ms var(--cinematic-ease) both;
}

.form-step:not([hidden]),
.reservation-success:not([hidden]) {
  animation: barqa-form-enter 560ms var(--cinematic-ease) both;
}

.project-hero__copy {
  animation: barqa-mask-enter 1s var(--cinematic-ease) 140ms both;
}

.project-hero__facts > div {
  animation: barqa-fact-enter 760ms var(--cinematic-ease) both;
}

.project-hero__facts > div:nth-child(1) { animation-delay: 260ms; }
.project-hero__facts > div:nth-child(2) { animation-delay: 340ms; }
.project-hero__facts > div:nth-child(3) { animation-delay: 420ms; }
.project-hero__facts > div:nth-child(4) { animation-delay: 500ms; }

.gallery {
  view-transition-name: var(--project-transition-name, none);
  animation: barqa-gallery-enter 1.25s var(--cinematic-ease) 240ms both;
}

.mobile-reserve {
  animation: barqa-mobile-bar-enter 720ms var(--cinematic-ease) 620ms both;
}

.auth-story {
  animation: barqa-mask-enter 1.15s var(--cinematic-ease) both;
}

.auth-panel > * {
  animation: barqa-mask-enter 980ms var(--cinematic-ease) 220ms both;
}

.saved-hero > *,
.saved-heading {
  animation: barqa-mask-enter 920ms var(--cinematic-ease) both;
}

.saved-hero > :nth-child(2) { animation-delay: 100ms; }
.saved-hero > :nth-child(3) { animation-delay: 190ms; }

@supports (animation-timeline: view()) {
  .projects-section .section-heading,
  .map-copy,
  .map-canvas,
  .journey > h2,
  .journey > ol,
  .detail-content > section,
  .reservation-card,
  .saved-project-card,
  .saved-empty {
    animation: barqa-section-enter linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 32%;
  }

  .project-card {
    animation: barqa-card-enter linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }

  .project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--ink);
    transform-origin: right;
    animation: barqa-panel-uncover linear both;
    animation-timeline: view();
    animation-range: entry 2% cover 30%;
  }

  .journey li {
    animation: barqa-card-enter linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 26%;
  }
}

@media (max-width: 600px) {
  .hero-photo { animation-duration: 5s; }
  .hero-content > * { animation-duration: 860ms; }
  .hero-content .eyebrow::after { width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*),
  ::view-transition-group(*) {
    animation: none !important;
  }

  .site-header,
  .detail-header,
  .auth-header,
  .hero-photo,
  .hero-shade,
  .hero-content > *,
  .hero-content .eyebrow::after,
  .search-panel,
  .project-card,
  .project-image::after,
  .project-hero__copy,
  .project-hero__facts > div,
  .gallery,
  .detail-content > section,
  .reservation-card,
  .form-step:not([hidden]),
  .reservation-success:not([hidden]),
  .save[aria-pressed="true"],
  .project-save[aria-pressed="true"],
  .mobile-reserve,
  .auth-story,
  .auth-panel > *,
  .saved-hero > *,
  .saved-heading,
  .saved-project-card,
  .saved-empty,
  .map-copy,
  .map-canvas,
  .journey > h2,
  .journey > ol,
  .journey li {
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}