/* ============================================================
   AUTBERRY · Connected page experience
   Native cross-document View Transitions with graceful fallback.
   ============================================================ */

:root {
  --autberry-route-duration: 640ms;
  --autberry-route-ease: cubic-bezier(.77, 0, .175, 1);
  --autberry-route-ease-out: cubic-bezier(.23, 1, .32, 1);
}

@view-transition {
  navigation: auto;
}

html.autberry-forward .topnav,
html.autberry-backward .topnav {
  view-transition-name: autberry-navigation;
}

::view-transition {
  background: #0b0710;
}

::view-transition-group(root) {
  animation-duration: var(--autberry-route-duration);
  animation-timing-function: var(--autberry-route-ease);
}

::view-transition-image-pair(root) {
  isolation: isolate;
  overflow: visible;
}

::view-transition-old(root),
::view-transition-new(root) {
  backface-visibility: hidden;
  mix-blend-mode: normal;
  transform-origin: center;
}

html.autberry-forward::view-transition-old(root) {
  z-index: 1;
  animation: autberry-route-old-left var(--autberry-route-duration) var(--autberry-route-ease) both;
}

html.autberry-forward::view-transition-new(root) {
  z-index: 2;
  animation: autberry-route-new-right var(--autberry-route-duration) var(--autberry-route-ease) both;
  box-shadow:
    -1px 0 rgba(200, 162, 76, .72),
    -36px 0 110px rgba(124, 45, 138, .3);
}

html.autberry-backward::view-transition-old(root) {
  z-index: 1;
  animation: autberry-route-old-right var(--autberry-route-duration) var(--autberry-route-ease) both;
}

html.autberry-backward::view-transition-new(root) {
  z-index: 2;
  animation: autberry-route-new-left var(--autberry-route-duration) var(--autberry-route-ease) both;
  box-shadow:
    1px 0 rgba(200, 162, 76, .72),
    36px 0 110px rgba(124, 45, 138, .3);
}

::view-transition-group(autberry-navigation) {
  z-index: 20;
  animation-duration: 240ms;
  animation-timing-function: var(--autberry-route-ease-out);
}

::view-transition-image-pair(autberry-navigation) {
  isolation: isolate;
}

::view-transition-old(autberry-navigation) {
  animation: autberry-route-nav-out 180ms var(--autberry-route-ease-out) both;
  mix-blend-mode: normal;
}

::view-transition-new(autberry-navigation) {
  animation: autberry-route-nav-in 220ms var(--autberry-route-ease-out) 40ms both;
  mix-blend-mode: normal;
}

@keyframes autberry-route-old-left {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  to { transform: translate3d(-14vw, 0, 0) scale(.985); opacity: .68; }
}

@keyframes autberry-route-new-right {
  from { transform: translate3d(100%, 0, 0); opacity: 1; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes autberry-route-old-right {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  to { transform: translate3d(14vw, 0, 0) scale(.985); opacity: .68; }
}

@keyframes autberry-route-new-left {
  from { transform: translate3d(-100%, 0, 0); opacity: 1; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes autberry-route-nav-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes autberry-route-nav-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes autberry-route-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes autberry-route-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Branded fallback for engines that do not yet expose cross-document events. */
html.autberry-fallback-in,
html.autberry-fallback-out {
  overflow: hidden;
}

html.autberry-fallback-in::after,
html.autberry-fallback-out::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background:
    radial-gradient(circle at 72% 20%, rgba(124, 45, 138, .28), transparent 38%),
    #0b0710;
  pointer-events: all;
  will-change: transform;
}

html:is(.autberry-fallback-in, .autberry-fallback-out) .topnav {
  z-index: 9999;
}

html.autberry-fallback-out main,
html.autberry-fallback-in main {
  will-change: transform;
}

html.autberry-fallback-out.autberry-fallback-forward::after {
  animation: autberry-curtain-cover-right 260ms var(--autberry-route-ease-out) both;
  box-shadow: -1px 0 rgba(200, 162, 76, .72), -36px 0 110px rgba(124, 45, 138, .3);
}

html.autberry-fallback-out.autberry-fallback-backward::after {
  animation: autberry-curtain-cover-left 260ms var(--autberry-route-ease-out) both;
  box-shadow: 1px 0 rgba(200, 162, 76, .72), 36px 0 110px rgba(124, 45, 138, .3);
}

html.autberry-fallback-in.autberry-fallback-forward::after {
  animation: autberry-curtain-reveal-left 420ms cubic-bezier(.32, .72, 0, 1) both;
  box-shadow: 1px 0 rgba(200, 162, 76, .72), 36px 0 110px rgba(124, 45, 138, .3);
}

html.autberry-fallback-in.autberry-fallback-backward::after {
  animation: autberry-curtain-reveal-right 420ms cubic-bezier(.32, .72, 0, 1) both;
  box-shadow: -1px 0 rgba(200, 162, 76, .72), -36px 0 110px rgba(124, 45, 138, .3);
}

html.autberry-fallback-out.autberry-fallback-forward main {
  animation: autberry-fallback-old-left 260ms var(--autberry-route-ease-out) both;
}

html.autberry-fallback-out.autberry-fallback-backward main {
  animation: autberry-fallback-old-right 260ms var(--autberry-route-ease-out) both;
}

html.autberry-fallback-in.autberry-fallback-forward main {
  animation: autberry-fallback-new-right 420ms cubic-bezier(.32, .72, 0, 1) both;
}

html.autberry-fallback-in.autberry-fallback-backward main {
  animation: autberry-fallback-new-left 420ms cubic-bezier(.32, .72, 0, 1) both;
}

@keyframes autberry-curtain-cover-right {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes autberry-curtain-cover-left {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes autberry-curtain-reveal-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

@keyframes autberry-curtain-reveal-right {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100%, 0, 0); }
}

@keyframes autberry-fallback-old-left {
  to { transform: translate3d(-8vw, 0, 0); }
}

@keyframes autberry-fallback-old-right {
  to { transform: translate3d(8vw, 0, 0); }
}

@keyframes autberry-fallback-new-right {
  from { transform: translate3d(8vw, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes autberry-fallback-new-left {
  from { transform: translate3d(-8vw, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Keep the captured state clean when the mobile drawer or cursor was open. */
html.autberry-vt-capture .mobile-menu-panel,
html.autberry-vt-capture .mobile-menu-backdrop,
html.autberry-vt-capture #cursor-dot,
html.autberry-vt-capture #cursor-ring {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none !important;
}

/* ============================================================
   SALTO DESDE EL MENÚ MÓVIL
   ------------------------------------------------------------
   El deslizamiento lateral de las demás rutas no encaja aquí: el menú ya
   ocupa la pantalla entera, así que hacerlo desaparecer para después
   deslizar la página producía dos movimientos seguidos que no se hablaban.

   Con `.autberry-from-menu` el panel se queda como superficie que cubre, y
   la página nueva se abre con el mismo círculo desde la esquina superior
   derecha con el que se abre el menú. Un solo gesto, de principio a fin.
   ============================================================ */
html.autberry-from-menu.autberry-vt-capture .mobile-menu-panel,
html.autberry-from-menu.autberry-vt-capture .mobile-menu-backdrop {
  visibility: visible !important;
  opacity: 1 !important;
}

/* La instantánea antigua se queda quieta debajo mientras la nueva se abre.
   Sin esto, la animación por defecto la desvanecería y se vería el hueco. */
html.autberry-from-menu::view-transition-old(root) {
  z-index: 1;
  animation: autberry-menu-hold 720ms linear both;
  box-shadow: none;
}

html.autberry-from-menu::view-transition-new(root) {
  z-index: 2;
  animation: autberry-menu-open 720ms var(--autberry-route-ease-out) both;
  box-shadow: none;
}

/* El nav no debe cruzar por encima con su propia animación en este modo. */
html.autberry-from-menu .topnav { view-transition-name: none; }

@keyframes autberry-menu-hold {
  from { opacity: 1; }
  to { opacity: 1; }
}

@keyframes autberry-menu-open {
  from { clip-path: circle(0% at 100% 0); }
  to { clip-path: circle(150% at 100% 0); }
}

/* Camino de reserva: al salir no se dibuja cortina —el panel ya cubre—, y al
   llegar la cortina se retira con el mismo círculo, invertido. */
html.autberry-fallback-in.autberry-from-menu::after {
  animation: autberry-menu-curtain-lift 720ms var(--autberry-route-ease-out) both;
  box-shadow: none;
}

html.autberry-fallback-in.autberry-from-menu main {
  animation: autberry-menu-content-in 620ms var(--autberry-route-ease-out) 60ms both;
}

@keyframes autberry-menu-curtain-lift {
  from { clip-path: circle(150% at 100% 0); }
  to { clip-path: circle(0% at 100% 0); }
}

@keyframes autberry-menu-content-in {
  from { opacity: .55; transform: scale(.985); }
  to { opacity: 1; transform: none; }
}

/* The page-level movement is the only entrance animation during a route change. */
html:is(.route-from-home, .route-from-portfolio, .route-from-project) .pricing-page .pricing-hero :is(
  .pricing-route-back,
  .eyebrow,
  h1,
  .lead,
  .actions,
  .hero-proof
) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

html.route-from-pricing #loader,
html.route-from-portfolio #loader,
html.route-from-project #loader {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

html:is(.route-from-home, .route-from-pricing, .route-from-portfolio) .portfolio-page .case-hero :is(
  .case-route-back,
  .case-kicker,
  h1,
  .case-summary,
  .case-meta
),
html:is(.route-from-home, .route-from-pricing, .route-from-project) .portfolio-page :is(.portfolio-hero, .portfolio-index-hero) :is(
  .case-route-back,
  .portfolio-route-back,
  .portfolio-overline,
  .portfolio-kicker,
  h1,
  .portfolio-intro
) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Avoid capturing a destination anchor while its scroll reveal is still hidden. */
html.autberry-vt-arrival .pricing-page [data-reveal],
html.autberry-vt-arrival .portfolio-page [data-reveal],
html.autberry-vt-arrival .home-pricing-section.pricing-motion-ready :is(
  .home-pricing-intro,
  .home-pricing-card,
  .home-pricing-care,
  .home-pricing-closer
) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Press feedback for the deliberate bridges between both documents. */
a[data-page-transition] {
  transform-origin: left center;
  transition: transform 140ms var(--autberry-route-ease-out);
}

a[data-page-transition]:active {
  transform: scale(.985);
}

@media (max-width: 720px) {
  :root { --autberry-route-duration: 520ms; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --autberry-route-duration: 120ms; }

  html.autberry-forward::view-transition-old(root),
  html.autberry-backward::view-transition-old(root) {
    animation: autberry-route-fade-out 120ms var(--autberry-route-ease-out) both;
  }

  html.autberry-forward::view-transition-new(root),
  html.autberry-backward::view-transition-new(root) {
    animation: autberry-route-fade-in 120ms var(--autberry-route-ease-out) both;
    box-shadow: none;
  }

  ::view-transition-old(autberry-navigation),
  ::view-transition-new(autberry-navigation) {
    animation-duration: 120ms;
    animation-delay: 0ms;
  }

  ::view-transition-group(autberry-navigation) { animation-duration: 120ms; }

  a[data-page-transition] { transition: none; }
  a[data-page-transition]:active { transform: none; }

  html.autberry-fallback-in::after,
  html.autberry-fallback-out::after,
  html.autberry-fallback-in main,
  html.autberry-fallback-out main {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  html.autberry-from-menu::view-transition-old(root) {
    animation: autberry-route-fade-out 120ms var(--autberry-route-ease-out) both;
  }

  html.autberry-from-menu::view-transition-new(root) {
    animation: autberry-route-fade-in 120ms var(--autberry-route-ease-out) both;
    clip-path: none;
  }
}