/* Caja - animación del logo SVG */

.caja-logo-motion-svg {
  display: block;
  flex: 0 0 auto;
  height: auto;
  max-width: 100%;
  overflow: visible;
  transform-box: fill-box;
  transform-origin: center;
  width: auto;
}

.caja-logo-motion-svg path {
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}

.caja-logo-motion-svg[data-logo-motion-mode="hero"].caja-logo-motion-ready,
.caja-logo-motion-svg[data-logo-motion-mode="auth"].caja-logo-motion-ready {
  animation: cajaLogoSettle .9s cubic-bezier(.18, .9, .22, 1) both,
             cajaLogoBreath 6.5s ease-in-out 2.25s infinite;
}

.caja-logo-motion-svg[data-logo-motion-mode="hero"].caja-logo-motion-ready path,
.caja-logo-motion-svg[data-logo-motion-mode="auth"].caja-logo-motion-ready path {
  fill: var(--caja-path-fill);
  fill-opacity: 0;
  stroke: var(--caja-path-fill);
  stroke-dasharray: var(--caja-path-length);
  stroke-dashoffset: var(--caja-path-length);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  animation: cajaLogoTrace .95s cubic-bezier(.35, .02, .16, 1) forwards,
             cajaLogoPaint .55s ease forwards;
  animation-delay: var(--caja-path-delay), calc(var(--caja-path-delay) + .34s);
}

.caja-logo-motion-svg[data-logo-motion-mode="hero"].caja-logo-motion-ready path:nth-last-child(-n+2),
.caja-logo-motion-svg[data-logo-motion-mode="auth"].caja-logo-motion-ready path:nth-last-child(-n+2) {
  animation: cajaLogoTrace .95s cubic-bezier(.35, .02, .16, 1) forwards,
             cajaLogoPaint .55s ease forwards,
             cajaLogoArrowKick .8s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: var(--caja-path-delay), calc(var(--caja-path-delay) + .34s), 1.25s;
}

.caja-logo-motion-svg[data-logo-motion-mode="nav"].caja-logo-motion-ready path {
  fill: var(--caja-path-fill);
  opacity: 0;
  transform: translateY(3px) scale(.985);
  animation: cajaLogoNavIn .55s ease forwards;
  animation-delay: var(--caja-path-delay);
}

.caja-logo-story-svg {
  filter: drop-shadow(0 10px 18px rgba(18, 55, 50, .12));
}

.caja-logo-story-svg .caja-logo-story-scene,
.caja-logo-story-svg .caja-logo-story-official,
.caja-logo-story-svg .caja-story-box,
.caja-logo-story-svg .caja-story-object,
.caja-logo-story-svg .caja-story-lid,
.caja-logo-story-svg .caja-story-arrow {
  transform-box: fill-box;
  transform-origin: center;
}

.caja-logo-story-svg .caja-logo-story-scene {
  opacity: 1;
  transform: translateY(2px) scale(.98);
}

.caja-logo-story-svg.caja-logo-motion-ready .caja-logo-story-scene {
  animation: cajaStorySceneSettle 1.15s cubic-bezier(.16, 1, .3, 1) both,
             cajaStorySceneOut .7s ease 2.78s forwards;
}

.caja-logo-story-svg .caja-logo-story-official {
  opacity: 0;
  transform: translateY(2px) scale(.985);
}

.caja-logo-story-svg.caja-logo-motion-ready .caja-logo-story-official {
  animation: cajaStoryOfficialIn .8s cubic-bezier(.16, 1, .3, 1) 2.62s both,
             cajaLogoBreath 6.5s ease-in-out 3.35s infinite;
}

.caja-story-shadow {
  fill: rgba(18, 55, 50, .18);
  opacity: 0;
  transform-origin: center;
}

.caja-logo-story-svg.caja-logo-motion-ready .caja-story-shadow {
  animation: cajaStoryShadow .55s ease .06s both;
}

.caja-story-wall {
  opacity: 0;
  transform: translateY(16px) scale(.9);
}

.caja-story-wall-left {
  fill: #137068;
}

.caja-story-wall-right {
  fill: #478479;
}

.caja-story-wall-back {
  fill: #fffaf1;
  stroke: rgba(19, 112, 104, .35);
  stroke-width: 1;
}

.caja-logo-story-svg.caja-logo-motion-ready .caja-story-wall-left {
  animation: cajaStoryWallIn .55s cubic-bezier(.16, 1, .3, 1) .18s both;
}

.caja-logo-story-svg.caja-logo-motion-ready .caja-story-wall-right {
  animation: cajaStoryWallIn .55s cubic-bezier(.16, 1, .3, 1) .32s both;
}

.caja-logo-story-svg.caja-logo-motion-ready .caja-story-wall-back {
  animation: cajaStoryWallIn .55s cubic-bezier(.16, 1, .3, 1) .46s both;
}

.caja-story-rim {
  fill: none;
  opacity: 0;
  stroke: #d09e21;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.caja-logo-story-svg.caja-logo-motion-ready .caja-story-rim {
  animation: cajaStoryLineDraw .52s ease .58s both;
}

.caja-story-object {
  opacity: 0;
  transform: var(--story-from);
}

.caja-logo-story-svg.caja-logo-motion-ready .caja-story-object {
  animation: cajaStoryObjectIn .72s cubic-bezier(.2, 1.15, .35, 1) var(--story-delay) both;
}

.caja-story-bill rect {
  stroke: rgba(11, 79, 73, .45);
  stroke-width: .8;
}

.caja-story-bill line {
  stroke: rgba(255, 250, 241, .75);
  stroke-linecap: round;
  stroke-width: 1.2;
}

.caja-story-bill-alt {
  opacity: .95;
}

.caja-story-coin {
  fill: #d09e21;
  stroke: #9a7110;
  stroke-width: 1.1;
}

.caja-story-coin-alt {
  fill: #f0c84c;
}

.caja-story-lid {
  fill: #d09e21;
  opacity: 0;
  stroke: rgba(154, 113, 16, .45);
  stroke-linejoin: round;
  stroke-width: 1.1;
  transform: translateY(-30px) rotate(-5deg) scale(.92);
}

.caja-logo-story-svg.caja-logo-motion-ready .caja-story-lid {
  animation: cajaStoryLidClose .72s cubic-bezier(.16, 1, .3, 1) 1.55s both;
}

.caja-story-arrow {
  opacity: 1;
}

.caja-story-arrow-line,
.caja-story-arrow-head {
  fill: none;
  opacity: 0;
  stroke: #137068;
  stroke-dasharray: var(--caja-story-line-length);
  stroke-dashoffset: var(--caja-story-line-length);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.caja-story-arrow-line {
  stroke-width: 3.6;
}

.caja-story-arrow-head {
  stroke: #d09e21;
  stroke-width: 4.2;
}

.caja-logo-story-svg.caja-logo-motion-ready .caja-story-arrow-line {
  animation: cajaStoryLineDraw .68s cubic-bezier(.35, .02, .16, 1) 2.05s both;
}

.caja-logo-story-svg.caja-logo-motion-ready .caja-story-arrow-head {
  animation: cajaStoryLineDraw .48s cubic-bezier(.35, .02, .16, 1) 2.36s both,
             cajaStoryArrowPop .42s cubic-bezier(.16, 1, .3, 1) 2.66s both;
}

.caja-logo-motion-spark {
  fill: #d09e21;
  filter: drop-shadow(0 0 5px rgba(208, 158, 33, .65));
  opacity: 0;
  transform-box: view-box;
  transform-origin: center;
}

.caja-logo-motion-svg[data-logo-motion-mode="hero"].caja-logo-motion-ready .caja-logo-motion-spark,
.caja-logo-motion-svg[data-logo-motion-mode="auth"].caja-logo-motion-ready .caja-logo-motion-spark {
  animation: cajaLogoSpark 1s cubic-bezier(.16, 1, .3, 1) 1.38s both;
}

a:hover .caja-logo-motion-svg[data-logo-motion-mode="nav"] {
  filter: drop-shadow(0 5px 10px rgba(19, 112, 104, .18));
  transform: translateY(-1px) scale(1.04);
  transition: filter .28s ease, transform .28s ease;
}

a:hover .caja-logo-motion-svg[data-logo-motion-mode="nav"] path:nth-last-child(-n+2) {
  transform: translate(1.8px, -1.8px);
  transition: transform .28s ease;
}

@keyframes cajaLogoTrace {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes cajaLogoPaint {
  0% {
    fill-opacity: 0;
    stroke-width: 1.8;
  }

  70% {
    fill-opacity: 1;
  }

  100% {
    fill-opacity: 1;
    stroke-width: .25;
  }
}

@keyframes cajaLogoArrowKick {
  0% {
    filter: drop-shadow(0 0 0 rgba(208, 158, 33, 0));
    transform: translate(-1px, 1px);
  }

  46% {
    filter: drop-shadow(0 5px 8px rgba(208, 158, 33, .36));
    transform: translate(2.8px, -2.8px);
  }

  100% {
    filter: drop-shadow(0 0 0 rgba(208, 158, 33, 0));
    transform: translate(0, 0);
  }
}

@keyframes cajaLogoSettle {
  0% {
    filter: drop-shadow(0 14px 18px rgba(18, 55, 50, 0));
    opacity: .88;
    transform: translateY(7px) rotate(-1.4deg) scale(.96);
  }

  100% {
    filter: drop-shadow(0 9px 16px rgba(18, 55, 50, .12));
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes cajaLogoBreath {
  0%,
  100% {
    filter: drop-shadow(0 9px 16px rgba(18, 55, 50, .12));
    transform: translateY(0) scale(1);
  }

  50% {
    filter: drop-shadow(0 13px 20px rgba(19, 112, 104, .17));
    transform: translateY(-2px) scale(1.015);
  }
}

@keyframes cajaLogoNavIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cajaStorySceneSettle {
  0% {
    filter: drop-shadow(0 0 0 rgba(18, 55, 50, 0));
    transform: translateY(8px) scale(.94);
  }

  100% {
    filter: drop-shadow(0 7px 12px rgba(18, 55, 50, .12));
    transform: translateY(0) scale(1);
  }
}

@keyframes cajaStorySceneOut {
  to {
    opacity: 0;
    transform: translateY(-1px) scale(1.015);
  }
}

@keyframes cajaStoryOfficialIn {
  0% {
    opacity: 0;
    transform: translateY(3px) scale(.975);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cajaStoryShadow {
  0% {
    opacity: 0;
    transform: scaleX(.55);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes cajaStoryWallIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(.9);
  }

  72% {
    opacity: 1;
    transform: translateY(-1px) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cajaStoryLineDraw {
  0% {
    opacity: 0;
    stroke-dashoffset: var(--caja-story-line-length);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes cajaStoryObjectIn {
  0% {
    opacity: 0;
    transform: var(--story-from);
  }

  58% {
    opacity: 1;
  }

  82% {
    transform: var(--story-to) translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: var(--story-to);
  }
}

@keyframes cajaStoryLidClose {
  0% {
    opacity: 0;
    transform: translateY(-30px) rotate(-5deg) scale(.92);
  }

  64% {
    opacity: 1;
    transform: translateY(2px) rotate(1.2deg) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes cajaStoryArrowPop {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(208, 158, 33, 0));
    transform: translate(0, 0) scale(1);
  }

  45% {
    filter: drop-shadow(0 4px 7px rgba(208, 158, 33, .42));
    transform: translate(1.4px, -1.4px) scale(1.08);
  }
}

@keyframes cajaLogoSpark {
  0% {
    opacity: 0;
    transform: translate(-9px, 8px) scale(.45);
  }

  35% {
    opacity: .95;
    transform: translate(4px, -3px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(30px, -25px) scale(.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .caja-logo-motion-svg,
  .caja-logo-motion-svg path {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .caja-logo-motion-svg path {
    fill-opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    stroke-width: 0 !important;
  }

  .caja-logo-motion-spark {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  .caja-logo-story-svg .caja-logo-story-scene {
    display: none !important;
  }

  .caja-logo-story-svg .caja-logo-story-official {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}