/* ==========================================================================
   effects-eco.css — Chuyển động chủ đề Bảo vệ Môi trường & Đô thị Xanh
   ========================================================================== */

:root {
  /* Easing mềm mại, nhịp nhàng mô phỏng chuyển động tự nhiên */
  --ease-eco: cubic-bezier(.25, 1, .3, 1);
  --ease-elastic: cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-reduced-motion: no-preference) {

  /* 1. Tiêu đề: Từng chữ mọc vươn lên như mầm cây */
  .w {
    display: inline-block;
    vertical-align: top;
    padding: 0 .08em;
  }

  .w>span {
    display: inline-block;
    opacity: 0;
    filter: blur(12px);
    transform: translateY(18px) scale(0.95);
    letter-spacing: -0.05em;
  }

  .wl-ready .w>span {
    animation: mist-clear 1.1s var(--ease-eco) forwards;
    animation-delay: calc(var(--i) * 65ms + .15s);
  }

  /* .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: .14em 0 .1em;
    margin: -.14em 0 -.1em;
  }

  .w>span {
    display: inline-block;
    transform: translateY(115%) rotate(3deg);
    transform-origin: left bottom;
  }

  .wl-ready .w>span {
    animation: sprout-word 1s var(--ease-eco) forwards;
    animation-delay: calc(var(--i) * 60ms + .1s);
  } */

  /* 2. Màn hình Hero: Hiện dần theo nhịp thở sinh thái */
  .wl-ready .hero__eyebrow,
  .wl-ready .hero .subtitle,
  .wl-ready .hero__actions,
  .wl-ready .hero__note,
  .wl-ready .page-head__lead,
  .wl-ready .crumbs {
    animation: eco-rise .9s var(--ease-eco) both;
  }

  .wl-ready .hero__lead,
  .wl-ready .page-head__lead {
    animation-delay: .3s;
  }

  .wl-ready .hero__actions {
    animation-delay: .45s;
  }

  .wl-ready .hero__note {
    animation-delay: .6s;
  }

  /* Ảnh Hero: Mở ra theo khuôn hình hạt giống/chiếc lá (hình tròn/bo cong) */
  .wl-ready .hero__img {
    animation: leaf-unveil 1.4s var(--ease-eco) .2s both;
  }

  /* Quầng sáng tự nhiên/năng lượng mặt trời */
  .wl-ready .hero__halo {
    animation: sun-glow 2s var(--ease-eco) .2s both;
  }

  /* Zoom thiên nhiên nhẹ nhàng */
  .wl-ready .hero--full .hero__bg img {
    animation: nature-zoom 20s ease-out infinite alternate;
  }

  /* 3. Cuộn trang: Khối thông tin xuất hiện như chiếc lá bung xòe */
  [data-reveal] {
    opacity: 0;
    transform: translateY(30px) scale(.98);
    transition: opacity 1s var(--ease-eco), transform 1s var(--ease-eco);
    transition-delay: var(--d, 0s);
  }

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

  /* Trải nghiệm cắt ảnh dạng Organic Circle/Leaf */
  [data-reveal="leaf"] {
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 1.4s var(--ease-eco);
  }

  [data-reveal="leaf"].is-in {
    clip-path: circle(75% at 50% 50%);
  }

  /* 4. Dải biểu tượng đối tác / Tổ chức sinh thái */
  .marquee__track {
    animation: marquee 35s linear infinite;
  }

  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }

  /* 5. Trợ lý AI / Huy hiệu Chỉ số Xanh (Eco-Badge) */
  /* Nhịp thở Trái Đất (Gia tăng sinh khí) */
  .eco-orb span:nth-child(1) {
    animation: float-sway 6s ease-in-out infinite;
  }

  .eco-orb span:nth-child(2) {
    animation: pulse-glow 3s ease-in-out infinite;
  }

  .eco-orb span:nth-child(3) {
    animation: rotate-slow 20s linear infinite;
  }

  /* 6. Nút bấm sinh thái (Hover hiệu ứng giọt nước / mầm nhú) */
  .btn-eco {
    transition: transform .3s var(--ease-elastic), box-shadow .3s, background-color .3s;
  }

  .btn-eco:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 28px -10px rgba(46, 125, 50, 0.35);
    /* Bóng xanh lá tươi */
  }
}

/* ==========================================================================
   KEYFRAMES TÙY CHỈNH CHO MÔI TRƯỜNG
   ========================================================================== */
@keyframes mist-clear {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    letter-spacing: normal;
  }
}

/* Từ mọc vươn lên kèm chút xoay nghiêng tự nhiên */
@keyframes sprout-word {
  to {
    transform: translateY(0) rotate(0deg);
  }
}

/* Trượt lên mượt như dòng không khí */
@keyframes eco-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* Mở khung ảnh tròn dạng hạt giống / giọt nước */
@keyframes leaf-unveil {
  from {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }

  to {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
  }
}

/* Quầng mặt trời bừng sáng */
@keyframes sun-glow {
  from {
    opacity: 0;
    transform: scale(.7) rotate(-20deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Zoom khung cảnh thiên nhiên chậm rãi */
@keyframes nature-zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

/* Đung đưa nhẹ như chiếc lá trên cành */
@keyframes float-sway {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(3deg);
  }
}

/* Nhịp đập trái tim / năng lượng xanh */
@keyframes pulse-glow {

  0%,
  100% {
    transform: scale(1);
    opacity: .8;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes rotate-slow {
  to {
    transform: rotate(360deg);
  }
}

/* Chuyển trang: Tan mờ mượt như sương sớm */
::view-transition-old(root) {
  animation: .3s ease both eco-out;
}

::view-transition-new(root) {
  animation: .5s var(--ease-eco) both eco-in;
}

@keyframes eco-out {
  to {
    opacity: 0;
    transform: scale(.98);
  }
}

@keyframes eco-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(1.01);
  }
}

.delay-auto {
  animation-delay: calc(var(--i, 0) * 65ms + 0.15s) !important;
  transition-delay: calc(var(--i, 0) * 65ms + 0.15s) !important;
}