/* COOMER — scroll reveals, hero entrance, hovers (static export) */

:root {
  --coomer-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --coomer-ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
  --coomer-reveal-distance: clamp(1rem, 4vw, 2.25rem);
  --coomer-reveal-duration: 0.72s;
}

/* Scroll reveal */
.coomer-reveal {
  opacity: 0;
  transform: translate3d(0, var(--coomer-reveal-distance), 0) scale(0.985);
  transition:
    opacity var(--coomer-reveal-duration) var(--coomer-ease-out),
    transform var(--coomer-reveal-duration) var(--coomer-ease-out);
  transition-delay: var(--coomer-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.coomer-reveal.coomer-reveal--from-left {
  transform: translate3d(calc(var(--coomer-reveal-distance) * -1), 0, 0) scale(0.985);
}

.coomer-reveal.coomer-reveal--from-right {
  transform: translate3d(var(--coomer-reveal-distance), 0, 0) scale(0.985);
}

.coomer-reveal.coomer-reveal--zoom {
  transform: scale(0.92);
}

.coomer-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.coomer-reveal--wood {
  --coomer-reveal-distance: 0.65rem;
  --coomer-reveal-duration: 0.55s;
}

/* Hero load sequence */
.coomer-hero-pending .coomer-hero-bar > * {
  opacity: 0;
  transform: translate3d(0, -0.75rem, 0);
}

.coomer-hero-pending .coomer-hero-title {
  opacity: 0;
  transform: scale(0.88) translate3d(0, 0.5rem, 0);
}

.coomer-hero-pending .coomer-hero-character {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
}

html.coomer-hero-ready .coomer-hero-bar > * {
  animation: coomer-hero-fade-down 0.55s var(--coomer-ease-out) forwards;
  animation-delay: calc(var(--coomer-hero-i, 0) * 70ms + 80ms);
}

html.coomer-hero-ready .coomer-hero-title {
  animation: coomer-hero-pop 0.85s var(--coomer-ease-bounce) forwards;
  animation-delay: 0.2s;
}

html.coomer-hero-ready .coomer-hero-character {
  animation: coomer-hero-rise 0.9s var(--coomer-ease-out) forwards;
  animation-delay: 0.35s;
}

@keyframes coomer-hero-fade-down {
  from {
    opacity: 0;
    transform: translate3d(0, -0.75rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes coomer-hero-pop {
  from {
    opacity: 0;
    transform: scale(0.82) translate3d(0, 0.75rem, 0);
  }
  70% {
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes coomer-hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hovers (pointer devices) */
@media (hover: hover) and (pointer: fine) {
  .coomer-interactive .elementor-button {
    transition:
      transform 0.22s var(--coomer-ease-out),
      filter 0.22s ease,
      box-shadow 0.22s ease;
  }

  .coomer-interactive .elementor-button:hover {
    transform: translate(-3px, -4px) scale(1.02);
    filter: brightness(1.06) saturate(1.05);
  }

  .coomer-interactive .elementor-button:active {
    transform: translate(-1px, -1px) scale(0.99);
    transition-duration: 0.08s;
  }

  .coomer-interactive .elementor-social-icon {
    transition: transform 0.25s var(--coomer-ease-bounce);
  }

  .coomer-interactive .elementor-social-icon:hover,
  .coomer-interactive .coomer-ambient-social:hover {
    animation-play-state: paused;
    transform: translateY(-3px) rotate(-4deg) scale(1.08);
  }

  .coomer-interactive .elementor-element-3e2fd86a .elementor-widget-image img {
    transition: transform 0.35s var(--coomer-ease-out), filter 0.35s ease;
  }

  .coomer-interactive .elementor-element-3e2fd86a .elementor-widget-image:hover img {
    transform: translateY(-6px) scale(1.04) rotate(-1deg);
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.22));
  }

  .coomer-interactive .coomer-hero-title {
    transition: transform 0.4s var(--coomer-ease-out), filter 0.4s ease;
  }

  .coomer-interactive .coomer-hero-title:hover {
    transform: scale(1.02);
    filter: brightness(1.08);
  }
}

/* —— Animaciones continuas (después del hero) —— */
html.coomer-ambient-on .coomer-hero-title {
  animation: coomer-title-idle 3.6s ease-in-out infinite;
}

html.coomer-ambient-on .coomer-hero-character img,
html.coomer-ambient-on .coomer-hero-character picture img {
  animation: coomer-character-float 4.8s ease-in-out infinite;
}

html.coomer-ambient-on .coomer-ambient-social.elementor-social-icon,
html.coomer-ambient-on .coomer-ambient-social .elementor-social-icon {
  animation: coomer-social-sway 2.9s ease-in-out infinite;
  animation-delay: var(--coomer-ambient-delay, 0ms);
}

html.coomer-ambient-on .coomer-ambient-cta .elementor-button {
  animation: coomer-cta-pulse 2.4s ease-in-out infinite;
}

html.coomer-ambient-on .coomer-ambient-token img {
  animation: coomer-token-bob 3.4s ease-in-out infinite;
  animation-delay: var(--coomer-ambient-delay, 0ms);
}

html.coomer-ambient-on .coomer-ambient-buy-footer .elementor-button {
  animation: coomer-cta-pulse 2.6s ease-in-out infinite;
  animation-delay: 0.4s;
}

html.coomer-ambient-on .coomer-ambient-contract .elementor-heading-title {
  animation: coomer-contract-shimmer 3.6s ease-in-out infinite;
}

html.coomer-ambient-on .coomer-ambient-scene {
  animation: coomer-scene-breathe 7s ease-in-out infinite;
  transform-origin: center top;
}

html.coomer-ambient-on .coomer-ambient-wood {
  animation: coomer-wood-pulse 3.2s ease-in-out infinite;
  animation-delay: var(--coomer-ambient-delay, 0ms);
  transform-origin: center center;
}

html.coomer-ambient-on .coomer-ambient-heading {
  animation: coomer-heading-wiggle 3.8s ease-in-out infinite;
  animation-delay: var(--coomer-ambient-delay, 0ms);
}

html.coomer-ambient-on .coomer-ambient-gallery .swiper-slide-active .coomer-gallery-slide-img {
  animation: coomer-gallery-float 3s ease-in-out infinite;
}

html.coomer-ambient-on .coomer-ambient-gallery .elementor-swiper-button-prev,
html.coomer-ambient-on .coomer-ambient-gallery .elementor-swiper-button-next {
  animation: coomer-gallery-arrows 2.2s ease-in-out infinite;
}

html.coomer-ambient-on .coomer-ambient-gallery .elementor-swiper-button-next {
  animation-delay: 0.35s;
}

html.coomer-ambient-on .coomer-ambient-bin {
  animation: coomer-bin-glow 5s ease-in-out infinite;
}

@keyframes coomer-title-idle {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.045);
    filter: brightness(1.14) drop-shadow(0 0 16px rgba(46, 184, 245, 0.45));
  }
}

@keyframes coomer-character-float {
  0%,
  100% {
    transform: translateY(var(--hero-character-nudge, 0))
      scale(var(--hero-character-scale, 1));
  }
  50% {
    transform: translateY(calc(var(--hero-character-nudge, 0px) - 14px))
      scale(calc(var(--hero-character-scale, 1) * 1.02));
  }
}

@keyframes coomer-social-sway {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) rotate(-3deg);
  }
}

@keyframes coomer-cta-pulse {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    box-shadow: none;
    transform: translateY(0);
  }
  50% {
    filter: brightness(1.1) saturate(1.15);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
  }
}

@keyframes coomer-token-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-9px) rotate(3deg) scale(1.04);
  }
}

@keyframes coomer-contract-shimmer {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.92;
    transform: scale(1.02);
  }
}

@keyframes coomer-scene-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.015);
  }
}

@keyframes coomer-wood-pulse {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    transform: scaleY(1);
  }
  50% {
    filter: brightness(1.08) saturate(1.05);
    transform: scaleY(1.04);
  }
}

@keyframes coomer-heading-wiggle {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-0.6deg) scale(1.02);
  }
  75% {
    transform: rotate(0.6deg) scale(1.02);
  }
}

@keyframes coomer-gallery-float {
  0%,
  100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.03) translateY(-5px);
  }
}

@keyframes coomer-gallery-arrows {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.85;
  }
  50% {
    transform: translateX(3px);
    opacity: 1;
  }
}

@keyframes coomer-bin-glow {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.04);
  }
}

/* Footer title subtle glow when visible */
.coomer-footer-join-title.is-visible {
  animation: coomer-footer-glow 2.8s ease-in-out infinite alternate;
}

@keyframes coomer-footer-glow {
  from {
    text-shadow:
      2px 2px 0 #000,
      -2px 2px 0 #000,
      -2px -2px 0 #000,
      2px -2px 0 #000;
  }
  to {
    text-shadow:
      2px 2px 0 #000,
      -2px 2px 0 #000,
      -2px -2px 0 #000,
      2px -2px 0 #000,
      0 0 14px rgba(46, 184, 245, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .coomer-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .coomer-hero-pending .coomer-hero-bar > *,
  .coomer-hero-pending .coomer-hero-title,
  .coomer-hero-pending .coomer-hero-character {
    opacity: 1;
    transform: none;
  }

  html.coomer-hero-ready .coomer-hero-bar > *,
  html.coomer-hero-ready .coomer-hero-title,
  html.coomer-hero-ready .coomer-hero-character {
    animation: none;
  }

  .coomer-interactive .elementor-button,
  .coomer-interactive .elementor-social-icon,
  .coomer-interactive .elementor-element-3e2fd86a .elementor-widget-image img,
  .coomer-interactive .coomer-hero-title {
    transition: none;
  }

  .coomer-footer-join-title.is-visible {
    animation: none;
  }

  html.coomer-ambient-on .coomer-hero-title,
  html.coomer-ambient-on .coomer-hero-character img,
  html.coomer-ambient-on .coomer-hero-character picture img,
  html.coomer-ambient-on .coomer-ambient-social.elementor-social-icon,
  html.coomer-ambient-on .coomer-ambient-social .elementor-social-icon,
  html.coomer-ambient-on .coomer-ambient-cta .elementor-button,
  html.coomer-ambient-on .coomer-ambient-token img,
  html.coomer-ambient-on .coomer-ambient-buy-footer .elementor-button,
  html.coomer-ambient-on .coomer-ambient-contract .elementor-heading-title,
  html.coomer-ambient-on .coomer-ambient-scene,
  html.coomer-ambient-on .coomer-ambient-wood,
  html.coomer-ambient-on .coomer-ambient-heading,
  html.coomer-ambient-on .coomer-ambient-gallery .swiper-slide-active .coomer-gallery-slide-img,
  html.coomer-ambient-on .coomer-ambient-gallery .elementor-swiper-button-prev,
  html.coomer-ambient-on .coomer-ambient-gallery .elementor-swiper-button-next,
  html.coomer-ambient-on .coomer-ambient-bin {
    animation: none;
  }
}