/* ReciclaGo motion system — overlay only. Does not redefine layout. */

@keyframes rg-fade-down {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rg-header-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rg-logo-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rg-lede-in {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes rg-line-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rg-mark-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes rg-scale-in {
  from {
    opacity: 0;
    transform: scale(0.75);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rg-card-in {
  from {
    opacity: 0;
    transform: translateY(35px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes rg-botanical-in {
  from {
    opacity: 0;
    transform: translate3d(var(--enter-x, 20px), var(--botanical-ty, 0px), 0)
      rotate(var(--botanical-rotate, 0deg)) scaleX(var(--botanical-scale-x, 1)) scale(1.05);
  }
  to {
    opacity: var(--botanical-opacity, 0.1);
    transform: translate3d(0, var(--botanical-ty, 0px), 0) rotate(var(--botanical-rotate, 0deg))
      scaleX(var(--botanical-scale-x, 1)) scale(1);
  }
}

@keyframes rg-rings {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.9;
  }
}

@keyframes rg-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* —— Hero load sequence (only when JS marks the document) —— */

.js .header {
  opacity: 0;
  animation: rg-header-in 650ms 80ms var(--ease-out-premium) both;
}

.js .logo img {
  opacity: 0;
  animation: rg-logo-in 560ms 80ms var(--ease-out-premium) both;
}

.js .hero__lede {
  opacity: 0;
  animation: rg-lede-in 650ms 200ms var(--ease-out-premium) both;
}

.hero-line {
  display: block;
  padding-bottom: 0.08em;
}

.hero-line__inner {
  display: block;
}

.js .hero-line__inner {
  opacity: 0;
  animation: rg-line-in 900ms var(--ease-out-premium) both;
}

.js .hero-line:nth-child(1) .hero-line__inner {
  animation-delay: 280ms;
}

.js .hero-line:nth-child(2) .hero-line__inner {
  animation-delay: 370ms;
}

.js .hero-line:nth-child(3) .hero-line__inner {
  animation-delay: 460ms;
}

.mark {
  position: relative;
  display: inline-block;
  background: transparent;
  vertical-align: baseline;
}

.mark__fill {
  position: absolute;
  inset: 0;
  background: var(--green-soft);
  border-radius: 14px;
  transform: scaleX(1);
  transform-origin: left center;
  z-index: 0;
  pointer-events: none;
}

.mark__text {
  position: relative;
  z-index: 1;
}

.js .reveal .mark__fill {
  transform: scaleX(0);
  transition: transform 550ms 90ms var(--ease-out-premium);
}

.js .reveal.is-in .mark__fill {
  transform: scaleX(1);
}

.js .hero .mark__fill {
  animation: rg-mark-fill 580ms 520ms var(--ease-out-premium) both;
}

.js .float-icon {
  opacity: 0;
  animation: rg-scale-in 500ms var(--ease-out-premium) both;
}

.js .float-icon--leaf {
  animation-delay: 600ms;
}

.js .float-icon--recycle {
  animation-delay: 690ms;
}

.js .float-icon--pin {
  animation-delay: 780ms;
}

.js .float-icon--arrow {
  animation-delay: 860ms;
}

.js .float-icon--coin {
  animation-delay: 940ms;
}

.js .hero-shot {
  opacity: 0;
  animation: rg-card-in 800ms var(--ease-out-premium) both;
}

.js .hero-shot:nth-child(1) {
  animation-delay: 700ms;
}

.js .hero-shot:nth-child(2) {
  animation-delay: 790ms;
}

.js .hero-shot:nth-child(3) {
  animation-delay: 880ms;
}

.js.is-hero-done .header,
.js.is-hero-done .logo img,
.js.is-hero-done .hero__lede,
.js.is-hero-done .hero-line__inner,
.js.is-hero-done .hero .mark__fill,
.js.is-hero-done .hero-shot {
  animation: none;
  opacity: 1;
  transform: none;
}

.js.is-hero-done .hero .mark__fill {
  transform: scaleX(1);
}

.js .float-icon.is-live {
  opacity: 1;
  animation: none;
}

/* —— Botanicals —— */

.botanical {
  --enter-x: 20px;
  --botanical-ty: 0px;
  --botanical-rotate: 0deg;
  --botanical-scale-x: 1;
  --botanical-opacity: 0.1;
  --parallax-y: 0px;
}

.botanical--hero-tl {
  --botanical-rotate: -18deg;
  --botanical-opacity: 0.1;
}

.botanical--hero-br {
  --botanical-rotate: 28deg;
  --botanical-scale-x: -1;
  --botanical-opacity: 0.07;
}

.botanical--purpose {
  --botanical-rotate: 18deg;
  --botanical-ty: -50%;
  --botanical-opacity: 0.1;
}

.botanical--impact {
  --botanical-rotate: -16deg;
  --botanical-opacity: 0.12;
}

.botanical--gallery {
  --botanical-rotate: 14deg;
  --botanical-scale-x: -1;
  --botanical-opacity: 0.14;
}

.js .botanical--hero-tl,
.js .botanical--hero-br {
  opacity: 0;
  animation: rg-botanical-in 1.2s var(--ease-soft) both;
}

.js .botanical--hero-tl {
  animation-delay: 1050ms;
}

.js .botanical--hero-br {
  animation-delay: 1180ms;
}

.js .botanical--purpose,
.js .botanical--impact,
.js .botanical--gallery {
  opacity: 0;
}

.js .botanical.is-play {
  animation: rg-botanical-in 1.25s var(--ease-soft) both;
}

.js .botanical.is-in {
  animation: none;
  opacity: var(--botanical-opacity);
  transform: translate3d(0, var(--parallax-y), 0) translateY(var(--botanical-ty))
    rotate(var(--botanical-rotate)) scaleX(var(--botanical-scale-x));
}

/* —— Scroll reveal —— */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-out-premium),
    transform 700ms var(--ease-out-premium);
}

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

.reveal.stagger {
  opacity: 1;
  transform: none;
}

.stagger > * {
  opacity: 0;
  transform: translateY(var(--reveal-y, 24px));
  transition:
    opacity 700ms var(--ease-out-premium),
    transform 700ms var(--ease-out-premium);
}

.stagger.is-in > * {
  opacity: 1;
  transform: none;
}

.stagger.is-in > *:nth-child(1) {
  transition-delay: 0ms;
}

.stagger.is-in > *:nth-child(2) {
  transition-delay: 80ms;
}

.stagger.is-in > *:nth-child(3) {
  transition-delay: 160ms;
}

.stagger.is-in > *:nth-child(4) {
  transition-delay: 220ms;
}

.purpose__lede {
  --reveal-y: 15px;
}

.purpose__main h2 {
  --reveal-y: 30px;
}

.purpose__actions {
  --reveal-y: 12px;
}

.gallery__intro-copy h2 {
  --reveal-y: 30px;
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity 900ms var(--ease-out-premium),
    transform 900ms var(--ease-out-premium);
}

.reveal--scale.is-in {
  opacity: 1;
  transform: none;
}

.reveal.reveal--image {
  opacity: 0;
  transform: none;
}

.reveal.reveal--image.is-in {
  opacity: 1;
}

img.reveal.reveal--image {
  opacity: 0;
  transform: scale(1.07);
}

img.reveal.reveal--image.is-in {
  opacity: 1;
  transform: scale(1);
}

.reveal--image img,
img.reveal--image {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transform-origin: center;
  scale: 1;
  transition:
    transform 640ms var(--ease-out-premium),
    opacity 560ms var(--ease-out-premium),
    scale 360ms var(--ease-out-premium);
}

.purpose__shot--main img {
  transform-origin: center top;
}

.reveal--image.is-in img,
img.reveal--image.is-in {
  opacity: 1;
  transform: none;
}

.reveal--image.is-settled img,
img.reveal--image.is-settled {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  scale: 1;
  transition: scale 360ms var(--ease-out-premium);
}

.purpose__float {
  opacity: 0;
  transition: opacity 500ms 280ms var(--ease-out-premium);
}

.reveal--image.is-in .purpose__float {
  opacity: 1;
}

#inicio,
#proposito,
#impacto,
#como-funciona,
#comunidad {
  scroll-margin-top: 20px;
}

.stat-value,
.purpose__metric-value {
  font-variant-numeric: tabular-nums;
}

/* —— Marquee —— */

.marquee__track.is-ready {
  animation-duration: var(--marquee-duration, 32s);
}

/* —— EcoPoints rings —— */

.rings {
  transform-origin: center;
  animation: rg-rings 7.2s ease-in-out infinite;
}

/* —— Accordion —— */

.acc-item {
  background: #f1f1ef;
  transition: background-color var(--motion-base) var(--ease-in-out-premium);
}

.acc-item.is-open {
  background: var(--green-soft);
}

.acc-panel {
  transition:
    grid-template-rows 320ms var(--ease-out-premium),
    opacity 280ms var(--ease-out-premium);
}

.acc-item.is-open .acc-panel {
  transition:
    grid-template-rows 420ms var(--ease-out-premium),
    opacity 400ms var(--ease-out-premium);
}

.acc-panel > p {
  transform: translateY(-4px);
  transition: transform 400ms var(--ease-out-premium);
}

.acc-item.is-open .acc-panel > p {
  transform: none;
}

.acc-item .btn-circle svg {
  transition: transform var(--motion-base) var(--ease-out-premium);
}

.acc-item.is-open .btn-circle svg {
  transform: rotate(-90deg);
}

/* —— Dialogs —— */

.sheet,
.lightbox {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition:
    opacity 340ms var(--ease-out-premium),
    transform 340ms var(--ease-out-premium);
}

.sheet[open].is-shown,
.lightbox[open].is-shown {
  opacity: 1;
  transform: none;
}

.sheet.is-leaving,
.lightbox.is-leaving {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity 240ms var(--ease-in-out-premium),
    transform 240ms var(--ease-in-out-premium);
}

.sheet::backdrop,
.lightbox::backdrop {
  background: rgba(0, 0, 0, 0);
  transition:
    background 320ms var(--ease-out-premium),
    backdrop-filter 320ms var(--ease-out-premium);
}

.sheet[open]::backdrop,
.lightbox[open]::backdrop {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
}

.sheet[open].is-leaving::backdrop,
.lightbox[open].is-leaving::backdrop {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
}

@starting-style {
  .sheet[open]::backdrop,
  .lightbox[open]::backdrop {
    background: rgba(0, 0, 0, 0);
  }
}

.point-item,
.challenge-item,
.reward-card {
  transition: background-color var(--motion-base) var(--ease-in-out-premium);
}

.slider__dot {
  transition:
    width var(--motion-base) var(--ease-out-premium),
    background var(--motion-base) var(--ease-out-premium),
    border-radius var(--motion-base) var(--ease-out-premium);
}

.slider__slide img {
  scale: 1;
  transition: scale 360ms var(--ease-out-premium);
}

/* —— Buttons, pills, links: hover only on fine pointers —— */

.btn,
.btn-circle,
.photo-pill,
.chip,
.nav a,
.text-link,
.icon-badge {
  transition:
    transform var(--motion-fast) var(--ease-out-premium),
    background var(--motion-fast) var(--ease-out-premium),
    color var(--motion-fast) var(--ease-out-premium),
    box-shadow var(--motion-base) var(--ease-out-premium),
    opacity var(--motion-fast) var(--ease-out-premium);
}

.btn:active,
.btn-circle:active,
.nav a:active {
  transform: scale(0.98);
}

.btn-circle svg,
.text-link svg,
.nav svg,
.icon-badge svg {
  transition: transform var(--motion-fast) var(--ease-out-premium);
}

.nav a.is-active {
  background: #fff;
  color: var(--text-primary);
}

.footer a:not(.btn) {
  transition:
    color var(--motion-fast) var(--ease-out-premium),
    transform var(--motion-fast) var(--ease-out-premium),
    opacity var(--motion-fast) var(--ease-out-premium);
}

@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover {
    background: #252525;
    transform: scale(1.025);
  }

  .btn--sage:hover,
  .btn--ghost:hover,
  .btn--blue:hover,
  .btn--danger:hover {
    transform: scale(1.025);
  }

  .btn-circle:hover {
    background: var(--green-dark);
    color: #fff;
    transform: none;
  }

  .btn-circle:hover svg {
    transform: translate(2px, -2px);
  }

  .acc-item.is-open .btn-circle:hover svg {
    transform: rotate(-90deg) translate(2px, -2px);
  }

  .nav a:hover {
    background: #e9ede3;
    color: var(--text-primary);
  }

  .nav a:hover svg {
    transform: scale(1.08);
  }

  .nav a.is-active:hover {
    background: #fff;
  }

  .text-link:hover svg {
    transform: translateX(4px);
  }

  .bento-card,
  .impact-card,
  .purpose__pillar,
  .purpose__quote--map {
    transition:
      transform 360ms var(--ease-out-premium),
      box-shadow 360ms var(--ease-out-premium);
  }

  .bento-card:hover,
  .impact-card:hover,
  .purpose__pillar:hover,
  .purpose__quote--map:hover {
    transform: translateY(-5px) scale(1.008);
    box-shadow: var(--shadow-hover);
  }

  .js.is-hero-done .hero-shot:hover {
    transform: translateY(-5px) scale(1.008);
  }

  .bento-card--photo img,
  .bento-card--brand img,
  .hero-shot img,
  .impact-card img,
  .purpose__aside-photo img,
  .participate__orb,
  .app-feature__media img,
  .lightbox__thumb img {
    scale: 1;
    transition: scale 360ms var(--ease-out-premium);
  }

  .bento-card--photo:hover img,
  .bento-card--brand:hover img,
  .hero-shot:hover img,
  .impact-card:hover img,
  .purpose__shot:hover img,
  .purpose__aside-photo:hover img,
  .participate__visuals figure:hover img,
  .participate__orb-wrap:hover .participate__orb,
  .app-feature__media:hover img,
  .slider__slide[data-offset="0"]:hover img,
  .reveal--image.is-settled:hover img,
  img.reveal--image.is-settled:hover,
  .lightbox__thumb:hover img {
    scale: 1.035;
  }

  .bento-card--stat .icon-badge:hover svg,
  .purpose__pillar .icon-badge:hover svg,
  .purpose__quote .icon-badge:hover svg {
    transform: rotate(8deg);
  }

  .footer a:not(.btn):hover {
    color: #fff;
  }

  .footer__nav a:hover svg,
  .footer a:hover svg {
    transform: translateX(2px);
  }

  .footer__btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.025);
  }

  .footer__credit:hover {
    color: var(--green-soft);
  }
}

@media (hover: none) {
  .bento-card:hover,
  .impact-card:hover,
  .btn--ink:hover,
  .btn--sage:hover,
  .btn--ghost:hover,
  .btn--blue:hover,
  .btn--danger:hover,
  .btn-circle:hover,
  .footer__btn-ghost:hover,
  .purpose__quote--map:hover {
    transform: none;
  }

  .purpose__shot:hover img,
  .bento-card--photo:hover img,
  .bento-card--brand:hover img,
  .impact-card:hover img,
  .purpose__aside-photo:hover img,
  .participate__visuals figure:hover img,
  .participate__orb-wrap:hover .participate__orb,
  .app-feature__media:hover img,
  .slider__slide[data-offset="0"]:hover img,
  .reveal--image.is-settled:hover img,
  img.reveal--image.is-settled:hover,
  .lightbox__thumb:hover img {
    scale: 1;
  }
}

/* —— Mobile menu —— */

@media (max-width: 920px) {
  .header {
    overflow: visible;
  }

  .nav {
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -12px, 0);
    transition:
      opacity 280ms var(--ease-out-premium),
      transform 320ms var(--ease-out-premium),
      visibility 0ms 280ms;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 240ms var(--ease-out-premium),
      transform 320ms var(--ease-out-premium),
      visibility 0ms;
  }

  .nav a {
    opacity: 0;
    transform: none;
    transition:
      opacity 220ms var(--ease-out-premium),
      background var(--motion-fast) var(--ease-out-premium),
      color var(--motion-fast) var(--ease-out-premium);
  }

  .nav.is-open a {
    opacity: 1;
  }

  .nav.is-open a:nth-child(1) {
    transition-delay: 60ms;
  }

  .nav.is-open a:nth-child(2) {
    transition-delay: 100ms;
  }

  .nav.is-open a:nth-child(3) {
    transition-delay: 140ms;
  }

  .nav.is-open a:nth-child(4) {
    transition-delay: 180ms;
  }

  .nav-toggle {
    transition:
      background var(--motion-fast) var(--ease-out-premium),
      transform var(--motion-fast) var(--ease-out-premium);
  }

  .nav-toggle[aria-expanded="true"] {
    background: var(--green-soft);
  }

  .js .hero-line:nth-child(1) .hero-line__inner {
    animation-delay: 140ms;
  }

  .js .hero-line:nth-child(2) .hero-line__inner {
    animation-delay: 200ms;
  }

  .js .hero-line:nth-child(3) .hero-line__inner {
    animation-delay: 260ms;
  }

  .js .hero .mark__fill {
    animation-delay: 320ms;
  }

  .js .hero-shot:nth-child(1) {
    animation-delay: 360ms;
  }

  .js .hero-shot:nth-child(2) {
    animation-delay: 420ms;
  }

  .js .hero-shot:nth-child(3) {
    animation-delay: 480ms;
  }

  .stagger.is-in > *:nth-child(2),
  .stagger.is-in > *:nth-child(3),
  .stagger.is-in > *:nth-child(4) {
    transition-delay: 40ms;
  }

  .botanical {
    will-change: auto;
  }
}

/* —— Reduced motion —— */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .header,
  .js .logo img,
  .js .hero__lede,
  .js .hero-line__inner,
  .js .hero .mark__fill,
  .js .float-icon,
  .js .hero-shot,
  .js .botanical,
  .js .botanical--hero-tl,
  .js .botanical--hero-br,
  .js .botanical.is-play,
  .rings,
  .marquee__track,
  .purpose__shot--main img,
  .purpose__float {
    animation: none !important;
  }

  .js .header,
  .js .logo img,
  .js .hero__lede,
  .js .hero-line__inner,
  .js .float-icon,
  .js .hero-shot,
  .reveal,
  .stagger > *,
  .reveal--scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .js .hero .mark__fill,
  .mark__fill,
  .reveal.is-in .mark__fill {
    transform: scaleX(1) !important;
  }

  .js .botanical,
  .js .botanical.is-in,
  .js .botanical.is-play {
    opacity: var(--botanical-opacity, 0.1) !important;
    transform: translateY(var(--botanical-ty, 0px)) rotate(var(--botanical-rotate, 0deg))
      scaleX(var(--botanical-scale-x, 1)) !important;
  }

  .reveal--image img,
  img.reveal--image,
  .reveal--image.is-in img,
  img.reveal--image.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .marquee__track {
    animation: none !important;
    transform: none;
  }

  .marquee__group + .marquee__group {
    display: none;
  }

  .acc-panel,
  .acc-item.is-open .acc-panel,
  .sheet,
  .lightbox,
  .nav,
  .nav a {
    transition: none !important;
  }

  .sheet,
  .lightbox,
  .sheet[open].is-shown,
  .lightbox[open].is-shown {
    opacity: 1;
    transform: none;
  }

  .purpose__float {
    opacity: 1 !important;
  }

  .slider__slide {
    transition: none !important;
  }
}