/* ============================================================
   INTEGRASI MOTION SYSTEM
   File: css/animations.css

   Final unified animation architecture.

   Goals:
   - no transform conflicts
   - smooth reveal animations
   - floating application cards
   - JavaScript parallax compatibility
   - hover interactions
   - guide transitions
   - tabs filtering
   - modal transitions
   - search transitions
   - chatbot transitions
   - toast notifications
   - loading states
   - accessibility
   - reduced motion support

   IMPORTANT:
   JavaScript must update CSS variables such as:
   --parallax-x
   --parallax-y
   --pointer-x
   --pointer-y

   JavaScript should NOT directly overwrite transform.
============================================================ */


/* ============================================================
   01. ANIMATABLE CUSTOM PROPERTIES
============================================================ */

@property --float-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --hover-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --reveal-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --reveal-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --motion-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --reveal-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --motion-rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --motion-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}


/* ============================================================
   02. MOTION VARIABLE DEFAULTS
============================================================ */

.motion-element,
[data-parallax],
[data-hero-parallax],
.app-floating,
.floating-card,
.app-status-card {
  --parallax-x: 0px;
  --parallax-y: 0px;

  --pointer-x: 0px;
  --pointer-y: 0px;

  --float-y: 0px;
  --hover-y: 0px;

  --reveal-x: 0px;
  --reveal-y: 0px;

  --motion-scale: 1;
  --reveal-scale: 1;

  --motion-rotate: 0deg;
}


/* ============================================================
   03. COMPOSITE TRANSFORM SYSTEM
============================================================ */

.motion-element,
[data-parallax],
[data-hero-parallax],
.app-floating,
.floating-card,
.app-status-card {
  transform:
    translate3d(
      calc(
        var(--parallax-x, 0px)
        +
        var(--pointer-x, 0px)
        +
        var(--reveal-x, 0px)
      ),
      calc(
        var(--parallax-y, 0px)
        +
        var(--pointer-y, 0px)
        +
        var(--float-y, 0px)
        +
        var(--hover-y, 0px)
        +
        var(--reveal-y, 0px)
      ),
      0
    )
    rotate(
      var(--motion-rotate, 0deg)
    )
    scale(
      calc(
        var(--motion-scale, 1)
        *
        var(--reveal-scale, 1)
      )
    );

  transform-origin: center;
  backface-visibility: hidden;
}


/* ============================================================
   04. BASIC MOTION UTILITIES
============================================================ */

.motion-safe {
  will-change:
    transform,
    opacity;
}

.motion-layer {
  transform-style:
    preserve-3d;

  backface-visibility:
    hidden;
}

.motion-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.motion-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.no-motion {
  animation: none !important;
  transition: none !important;
}

.motion-paused {
  animation-play-state:
    paused !important;
}


/* ============================================================
   05. BASE REVEAL SYSTEM
============================================================ */

.reveal,
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-blur {
  opacity: 0;

  transition:
    opacity
    var(--duration-slow)
    var(--ease-emphasized),

    transform
    var(--duration-slow)
    var(--ease-emphasized),

    filter
    var(--duration-slow)
    var(--ease-emphasized);
}


/* ============================================================
   06. DEFAULT REVEAL
============================================================ */

.reveal {
  --reveal-y: 28px;
}

.reveal.visible,
.reveal.is-visible {
  opacity: 1;

  --reveal-y: 0px;
}


/* ============================================================
   07. REVEAL UP
============================================================ */

.reveal-up {
  --reveal-y: 38px;
}

.reveal-up.visible,
.reveal-up.is-visible {
  opacity: 1;

  --reveal-y: 0px;
}


/* ============================================================
   08. REVEAL DOWN
============================================================ */

.reveal-down {
  --reveal-y: -32px;
}

.reveal-down.visible,
.reveal-down.is-visible {
  opacity: 1;

  --reveal-y: 0px;
}


/* ============================================================
   09. REVEAL LEFT
============================================================ */

.reveal-left {
  --reveal-x: -38px;
}

.reveal-left.visible,
.reveal-left.is-visible {
  opacity: 1;

  --reveal-x: 0px;
}


/* ============================================================
   10. REVEAL RIGHT
============================================================ */

.reveal-right {
  --reveal-x: 38px;
}

.reveal-right.visible,
.reveal-right.is-visible {
  opacity: 1;

  --reveal-x: 0px;
}


/* ============================================================
   11. REVEAL SCALE
============================================================ */

.reveal-scale {
  --reveal-scale: 0.94;
}

.reveal-scale.visible,
.reveal-scale.is-visible {
  opacity: 1;

  --reveal-scale: 1;
}


/* ============================================================
   12. REVEAL BLUR
============================================================ */

.reveal-blur {
  --reveal-y: 18px;

  filter:
    blur(12px);
}

.reveal-blur.visible,
.reveal-blur.is-visible {
  opacity: 1;

  --reveal-y: 0px;

  filter:
    blur(0);
}


/* ============================================================
   13. REVEAL DELAYS
============================================================ */

.delay-1 {
  transition-delay: 60ms;
}

.delay-2 {
  transition-delay: 120ms;
}

.delay-3 {
  transition-delay: 180ms;
}

.delay-4 {
  transition-delay: 240ms;
}

.delay-5 {
  transition-delay: 300ms;
}

.delay-6 {
  transition-delay: 360ms;
}

.delay-7 {
  transition-delay: 420ms;
}

.delay-8 {
  transition-delay: 480ms;
}

.delay-9 {
  transition-delay: 540ms;
}

.delay-10 {
  transition-delay: 600ms;
}


/* ============================================================
   14. GENERIC KEYFRAMES
============================================================ */

@keyframes fadeIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@keyframes fadeOut {

  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}


@keyframes slideUp {

  from {
    opacity: 0;

    transform:
      translateY(24px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


@keyframes slideDown {

  from {
    opacity: 0;

    transform:
      translateY(-24px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


@keyframes slideLeft {

  from {
    opacity: 0;

    transform:
      translateX(24px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}


@keyframes slideRight {

  from {
    opacity: 0;

    transform:
      translateX(-24px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}


@keyframes scaleIn {

  from {
    opacity: 0;

    transform:
      scale(0.94);
  }

  to {
    opacity: 1;

    transform:
      scale(1);
  }
}


@keyframes scaleOut {

  from {
    opacity: 1;

    transform:
      scale(1);
  }

  to {
    opacity: 0;

    transform:
      scale(0.96);
  }
}


/* ============================================================
   15. FLOATING MOTION
============================================================ */

@keyframes floatSoft {

  0%,
  100% {
    --float-y: 0px;
  }

  50% {
    --float-y: -10px;
  }
}


@keyframes floatMedium {

  0%,
  100% {
    --float-y: 0px;
  }

  50% {
    --float-y: -14px;
  }
}


@keyframes floatSmall {

  0%,
  100% {
    --float-y: 0px;
  }

  50% {
    --float-y: -6px;
  }
}


@keyframes floatHorizontal {

  0%,
  100% {
    --pointer-x: 0px;
  }

  50% {
    --pointer-x: 8px;
  }
}


/* ============================================================
   16. PULSE MOTION
============================================================ */

@keyframes pulseSoft {

  0%,
  100% {
    opacity: 0.78;

    --motion-scale: 1;
  }

  50% {
    opacity: 1;

    --motion-scale: 1.035;
  }
}


@keyframes pulseDot {

  0% {
    box-shadow:
      0
      0
      0
      0
      rgba(
        79,
        143,
        114,
        0.42
      );
  }

  70% {
    box-shadow:
      0
      0
      0
      10px
      rgba(
        79,
        143,
        114,
        0
      );
  }

  100% {
    box-shadow:
      0
      0
      0
      0
      rgba(
        79,
        143,
        114,
        0
      );
  }
}


/* ============================================================
   17. DECORATIVE MOTION
============================================================ */

@keyframes glowMove {

  0%,
  100% {
    transform:
      translate3d(
        0,
        0,
        0
      )
      scale(1);
  }

  50% {
    transform:
      translate3d(
        18px,
        -14px,
        0
      )
      scale(1.06);
  }
}


@keyframes rotateSlow {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }
}


@keyframes breathe {

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

  50% {
    transform:
      scale(1.025);
  }
}


/* ============================================================
   18. LOADING KEYFRAMES
============================================================ */

@keyframes shimmer {

  0% {
    background-position:
      -200%
      0;
  }

  100% {
    background-position:
      200%
      0;
  }
}


@keyframes gradientShift {

  0% {
    background-position:
      0%
      50%;
  }

  50% {
    background-position:
      100%
      50%;
  }

  100% {
    background-position:
      0%
      50%;
  }
}


/* ============================================================
   19. HERO ENTRANCE
============================================================ */

.hero-content > * {
  animation:
    heroElementEnter
    760ms
    var(--ease-emphasized)
    both;
}

.hero-content > *:nth-child(1) {
  animation-delay: 50ms;
}

.hero-content > *:nth-child(2) {
  animation-delay: 120ms;
}

.hero-content > *:nth-child(3) {
  animation-delay: 190ms;
}

.hero-content > *:nth-child(4) {
  animation-delay: 260ms;
}

.hero-content > *:nth-child(5) {
  animation-delay: 330ms;
}


@keyframes heroElementEnter {

  from {
    opacity: 0;

    transform:
      translateY(24px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* ============================================================
   20. APPLICATION PREVIEW ENTRANCE
============================================================ */

.app-card,
.app-preview {
  animation:
    appPreviewEnter
    900ms
    220ms
    var(--ease-emphasized)
    both;
}


@keyframes appPreviewEnter {

  from {
    opacity: 0;

    transform:
      translateY(22px)
      scale(0.97);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* ============================================================
   21. NAVIGATOR MOTION
============================================================ */

@keyframes mapCityPulse {
  0%, 100% {
    opacity: 0.92;
    transform: scale(1);
  }

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

@keyframes navigatorCardEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.map-city.is-active .map-city-halo {
  transform-origin: center;
  animation: mapCityPulse 3.8s ease-in-out infinite;
}

.navigator-smart-card {
  animation: navigatorCardEnter 560ms var(--ease-emphasized) both;
}

.navigator-smart-card:nth-child(2) {
  animation-delay: 90ms;
}

.navigator-smart-card:nth-child(3) {
  animation-delay: 180ms;
}

/* ============================================================
   22. FLOATING CARD INTERACTION
============================================================ */

.floating-card,
.app-status-card {
  transition:
    --hover-y
    var(--duration-medium)
    var(--ease-emphasized),

    --motion-scale
    var(--duration-medium)
    var(--ease-emphasized),

    box-shadow
    var(--duration-medium)
    var(--ease-emphasized),

    border-color
    var(--duration-normal)
    var(--ease-standard);
}

.floating-card:hover,
.app-status-card:hover {
  --hover-y: -5px;

  --motion-scale: 1.012;

  border-color:
    var(--border-green);

  box-shadow:
    var(--shadow-lg);
}

/* ============================================================
   23. STATUS DOTS
============================================================ */

.status-dot {
  animation:
    pulseDot
    1.8s
    infinite;
}

.status-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-live::before {
  content: "";

  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  border-radius:
    var(--radius-full);

  background:
    var(--color-success);

  animation:
    pulseDot
    1.8s
    infinite;
}


/* ============================================================
   24. LIVE INFORMATION TICKER
============================================================ */

@keyframes liveTickerScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* ============================================================
   25. STANDARD CARD INTERACTIONS
============================================================ */

.path-card,
.service-card,
.news-card,
.feature-card,
.guide-card,
.info-card,
.event-card,
.counter-card,
.stat-card {
  --hover-y: 0px;
  --motion-scale: 1;

  transition:
    transform
    var(--duration-medium)
    var(--ease-emphasized),

    box-shadow
    var(--duration-medium)
    var(--ease-emphasized),

    border-color
    var(--duration-normal)
    var(--ease-standard);
}

.path-card:hover,
.service-card:hover,
.news-card:hover,
.feature-card:hover,
.guide-card:hover,
.info-card:hover,
.event-card:hover,
.counter-card:hover,
.stat-card:hover {
  transform:
    translateY(-7px);

  box-shadow:
    var(--card-shadow-hover);
}

.path-card:active,
.service-card:active,
.news-card:active,
.feature-card:active,
.guide-card:active,
.info-card:active,
.event-card:active {
  transform:
    translateY(-3px)
    scale(0.995);
}


/* ============================================================
   25. CARD SHINE EFFECT
============================================================ */

.card-shine {
  position: relative;

  overflow: hidden;
}

.card-shine::before {
  content: "";

  position: absolute;

  top: -60%;
  left: -90%;

  width: 42%;
  height: 220%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.52
      ),
      transparent
    );

  transform:
    rotate(20deg);

  transition:
    left
    720ms
    var(--ease-emphasized);

  pointer-events: none;
}

.card-shine:hover::before {
  left: 145%;
}


/* ============================================================
   26. ICON INTERACTIONS
============================================================ */

.icon-tile,
.icon-box,
.app-icon {
  transition:
    transform
    var(--duration-medium)
    var(--ease-emphasized),

    box-shadow
    var(--duration-medium)
    var(--ease-emphasized);
}

.path-card:hover .icon-tile,
.path-card:hover .icon-box,
.service-card:hover .icon-tile,
.service-card:hover .icon-box {
  transform:
    translateY(-3px)
    rotate(-2deg)
    scale(1.04);
}

.icon-tile svg,
.icon-box svg,
.icon-tile img,
.icon-box img {
  transition:
    transform
    var(--duration-medium)
    var(--ease-emphasized);
}

.path-card:hover .icon-tile svg,
.path-card:hover .icon-box svg,
.service-card:hover .icon-tile svg,
.service-card:hover .icon-box svg {
  transform:
    scale(1.07);
}


/* ============================================================
   27. BUTTON INTERACTIONS
============================================================ */

.btn,
.button,
.nav-button,
.contact-form button,
.chatbot-form button {
  transition:
    transform
    var(--duration-normal)
    var(--ease-standard),

    box-shadow
    var(--duration-normal)
    var(--ease-standard),

    background-color
    var(--duration-normal)
    var(--ease-standard),

    border-color
    var(--duration-normal)
    var(--ease-standard),

    color
    var(--duration-normal)
    var(--ease-standard);
}

.btn:hover,
.button:hover,
.nav-button:hover,
.contact-form button:hover,
.chatbot-form button:hover {
  transform:
    translateY(-2px);
}

.btn:active,
.button:active,
.nav-button:active,
.contact-form button:active,
.chatbot-form button:active {
  transform:
    translateY(0)
    scale(0.985);
}


/* ============================================================
   28. NAVIGATION LINKS
============================================================ */

.nav-links a {
  transition:
    color
    var(--transition-default),

    background-color
    var(--transition-default),

    transform
    var(--transition-default);
}

.nav-links a:hover {
  transform:
    translateY(-1px);
}

.nav-links a:not(.nav-button):not(.nav-cta) {
  position: relative;
}

.nav-links a:not(.nav-button):not(.nav-cta)::after {
  content: "";

  position: absolute;

  left: 16px;
  right: 16px;
  bottom: 5px;

  height: 2px;

  border-radius:
    var(--radius-full);

  background:
    var(--green-600);

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform
    var(--duration-medium)
    var(--ease-emphasized);
}

.nav-links a:not(.nav-button):not(.nav-cta):hover::after,
.nav-links a.is-active:not(.nav-button):not(.nav-cta)::after {
  transform:
    scaleX(1);
}


/* ============================================================
   29. LANGUAGE SWITCH
============================================================ */

.languages a,
.lang-switch a {
  transition:
    transform
    var(--transition-default),

    background-color
    var(--transition-default),

    color
    var(--transition-default);
}

.languages a:hover,
.lang-switch a:hover {
  transform:
    translateY(-2px);
}


/* ============================================================
   30. GUIDE PANEL TRANSITION
============================================================ */

.guide-panel {
  transition:
    opacity
    var(--duration-medium)
    var(--ease-emphasized),

    transform
    var(--duration-medium)
    var(--ease-emphasized),

    box-shadow
    var(--duration-medium)
    var(--ease-emphasized);
}

.guide-panel.is-changing {
  opacity: 0;

  transform:
    translateY(10px)
    scale(0.992);
}

.guide-panel.is-ready {
  animation:
    guidePanelReady
    420ms
    var(--ease-emphasized)
    both;
}


@keyframes guidePanelReady {

  from {
    opacity: 0;

    transform:
      translateY(9px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* ============================================================
   31. GUIDE BUTTONS
============================================================ */

.guide-btn,
.guide-step {
  transition:
    transform
    var(--transition-default),

    background-color
    var(--transition-default),

    border-color
    var(--transition-default),

    box-shadow
    var(--transition-default);
}

.guide-btn:hover,
.guide-step:hover {
  transform:
    translateX(4px);
}

.guide-btn.active,
.guide-btn.is-active,
.guide-step.active,
.guide-step.is-active {
  animation:
    guideActive
    360ms
    var(--ease-emphasized)
    both;
}


@keyframes guideActive {

  0% {
    transform:
      scale(0.985);
  }

  60% {
    transform:
      scale(1.012);
  }

  100% {
    transform:
      scale(1);
  }
}


/* ============================================================
   32. GUIDE RESULT STEPS
============================================================ */

.guide-result-step,
.mini-steps article {
  transition:
    transform
    var(--transition-default),

    border-color
    var(--transition-default),

    background-color
    var(--transition-default),

    box-shadow
    var(--transition-default);
}

.guide-result-step:hover,
.mini-steps article:hover {
  transform:
    translateX(4px);

  border-color:
    var(--border-green);

  box-shadow:
    var(--shadow-xs);
}


/* ============================================================
   33. GUIDE STEP ENTRY
============================================================ */

.guide-result-step.filter-in,
.mini-steps article.filter-in {
  animation:
    guideStepEnter
    380ms
    var(--ease-emphasized)
    both;
}


@keyframes guideStepEnter {

  from {
    opacity: 0;

    transform:
      translateX(-10px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}


/* ============================================================
   34. TABS
============================================================ */

.tab,
.tab-btn {
  transition:
    transform
    var(--transition-default),

    background-color
    var(--transition-default),

    color
    var(--transition-default),

    border-color
    var(--transition-default),

    box-shadow
    var(--transition-default);
}

.tab:hover,
.tab-btn:hover {
  transform:
    translateY(-2px);

  box-shadow:
    var(--shadow-xs);
}

.tab.active,
.tab.is-active,
.tab-btn.active,
.tab-btn.is-active {
  animation:
    tabActivate
    300ms
    var(--ease-emphasized)
    both;
}


@keyframes tabActivate {

  0% {
    transform:
      scale(0.96);
  }

  65% {
    transform:
      scale(1.03);
  }

  100% {
    transform:
      scale(1);
  }
}


/* ============================================================
   35. FILTERED CARD ENTRY
============================================================ */

.filter-in {
  animation:
    filterEnter
    420ms
    var(--ease-emphasized)
    both;
}


@keyframes filterEnter {

  from {
    opacity: 0;

    transform:
      translateY(14px)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* ============================================================
   36. FILTERED CARD EXIT
============================================================ */

.filter-out {
  animation:
    filterExit
    230ms
    var(--ease-standard)
    both;
}


@keyframes filterExit {

  from {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

  to {
    opacity: 0;

    transform:
      translateY(8px)
      scale(0.985);
  }
}


/* ============================================================
   37. FAQ
============================================================ */

.faq-list details,
details.faq-item {
  transition:
    box-shadow
    var(--transition-default),

    border-color
    var(--transition-default),

    background-color
    var(--transition-default);
}

.faq-list details[open],
details.faq-item[open] {
  box-shadow:
    var(--shadow-sm);
}

.faq-list details p,
.faq-content {
  animation:
    faqOpen
    320ms
    var(--ease-emphasized)
    both;
}


@keyframes faqOpen {

  from {
    opacity: 0;

    transform:
      translateY(-6px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* ============================================================
   38. FORM INPUTS
============================================================ */

input,
select,
textarea {
  transition:
    border-color
    var(--transition-default),

    box-shadow
    var(--transition-default),

    background-color
    var(--transition-default);
}

.form-success {
  animation:
    formSuccess
    520ms
    var(--ease-emphasized)
    both;
}


@keyframes formSuccess {

  0% {
    transform:
      scale(1);
  }

  45% {
    transform:
      scale(1.008);
  }

  100% {
    transform:
      scale(1);
  }
}


/* ============================================================
   39. FORM ERROR
============================================================ */

.form-error {
  animation:
    formShake
    420ms
    var(--ease-standard)
    both;
}


@keyframes formShake {

  0%,
  100% {
    transform:
      translateX(0);
  }

  20% {
    transform:
      translateX(-5px);
  }

  40% {
    transform:
      translateX(5px);
  }

  60% {
    transform:
      translateX(-3px);
  }

  80% {
    transform:
      translateX(3px);
  }
}


/* ============================================================
   40. INVALID FIELD
============================================================ */

.is-invalid {
  animation:
    invalidField
    360ms
    var(--ease-standard);
}


@keyframes invalidField {

  0%,
  100% {
    transform:
      translateX(0);
  }

  35% {
    transform:
      translateX(-3px);
  }

  70% {
    transform:
      translateX(3px);
  }
}


/* ============================================================
   41. SEARCH OVERLAY
============================================================ */

.search-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity
    var(--duration-medium)
    var(--ease-emphasized),

    visibility
    var(--duration-medium)
    var(--ease-emphasized);
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ============================================================
   42. SEARCH PANEL
============================================================ */

.search-panel {
  opacity: 0;

  transform:
    translateY(-16px)
    scale(0.98);

  transition:
    opacity
    var(--duration-medium)
    var(--ease-emphasized),

    transform
    var(--duration-medium)
    var(--ease-emphasized);
}

.search-overlay.is-open
.search-panel {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* ============================================================
   43. SEARCH RESULTS
============================================================ */

.search-result {
  animation:
    searchResultEnter
    340ms
    var(--ease-emphasized)
    both;
}


@keyframes searchResultEnter {

  from {
    opacity: 0;

    transform:
      translateY(10px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* ============================================================
   44. MODAL OVERLAY
============================================================ */

.modal-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity
    var(--duration-medium)
    var(--ease-emphasized),

    visibility
    var(--duration-medium)
    var(--ease-emphasized);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ============================================================
   45. MODAL CARD
============================================================ */

.modal-card {
  opacity: 0;

  transform:
    translateY(24px)
    scale(0.965);

  transition:
    opacity
    var(--duration-medium)
    var(--ease-emphasized),

    transform
    var(--duration-medium)
    var(--ease-emphasized);
}

.modal-overlay.is-open
.modal-card {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* ============================================================
   46. TOPIC MODAL CONTENT
============================================================ */

.modal-overlay.is-open
.topic-modal-card > * {
  animation:
    modalContentEnter
    460ms
    var(--ease-emphasized)
    both;
}

.modal-overlay.is-open
.topic-modal-card > *:nth-child(2) {
  animation-delay: 40ms;
}

.modal-overlay.is-open
.topic-modal-card > *:nth-child(3) {
  animation-delay: 80ms;
}

.modal-overlay.is-open
.topic-modal-card > *:nth-child(4) {
  animation-delay: 120ms;
}

.modal-overlay.is-open
.topic-modal-card > *:nth-child(5) {
  animation-delay: 160ms;
}


@keyframes modalContentEnter {

  from {
    opacity: 0;

    transform:
      translateY(8px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* ============================================================
   47. CHATBOT BUTTON
============================================================ */

.chatbot-button {
  transition:
    transform
    var(--transition-smooth),

    box-shadow
    var(--transition-smooth),

    background-color
    var(--transition-default);
}

.chatbot-button:hover {
  transform:
    translateY(-4px)
    scale(1.03);

  box-shadow:
    var(--shadow-lg);
}


/* ============================================================
   48. CHATBOT PANEL
============================================================ */

.chatbot-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(18px)
    scale(0.96);

  transform-origin:
    bottom right;

  transition:
    opacity
    var(--duration-medium)
    var(--ease-emphasized),

    visibility
    var(--duration-medium)
    var(--ease-emphasized),

    transform
    var(--duration-medium)
    var(--ease-emphasized);
}

.chatbot-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);
}


/* ============================================================
   49. CHAT MESSAGE
============================================================ */

.chat-message {
  animation:
    chatMessageEnter
    320ms
    var(--ease-emphasized)
    both;
}


@keyframes chatMessageEnter {

  from {
    opacity: 0;

    transform:
      translateY(8px)
      scale(0.98);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* ============================================================
   50. CHAT QUICK ACTIONS
============================================================ */

.chatbot-quick-actions button {
  transition:
    transform
    var(--transition-default),

    background-color
    var(--transition-default),

    border-color
    var(--transition-default);
}

.chatbot-quick-actions button:hover {
  transform:
    translateY(-2px);
}


/* ============================================================
   51. TOAST
============================================================ */

.toast {
  opacity: 0;

  transform:
    translateX(16px)
    scale(0.98);

  transition:
    opacity
    var(--duration-medium)
    var(--ease-emphasized),

    transform
    var(--duration-medium)
    var(--ease-emphasized);
}

.toast.is-visible {
  opacity: 1;

  transform:
    translateX(0)
    scale(1);
}

.toast.is-leaving {
  opacity: 0;

  transform:
    translateX(14px)
    scale(0.985);
}


/* ============================================================
   52. WHATSAPP BUTTON
============================================================ */

.whatsapp,
.floating-whatsapp {
  transition:
    transform
    var(--transition-default),

    box-shadow
    var(--transition-default),

    background-color
    var(--transition-default);
}

.whatsapp:hover,
.floating-whatsapp:hover {
  transform:
    translateY(-4px)
    scale(1.02);

  box-shadow:
    0
    24px
    58px
    rgba(
      37,
      211,
      102,
      0.42
    );
}


/* ============================================================
   53. SCROLL TOP BUTTON
============================================================ */

.scroll-top-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(12px)
    scale(0.92);

  transition:
    opacity
    var(--transition-smooth),

    visibility
    var(--transition-smooth),

    transform
    var(--transition-smooth);
}

.scroll-top-button.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);
}

.scroll-top-button:hover {
  transform:
    translateY(-3px)
    scale(1.03);
}


/* ============================================================
   54. COUNTERS
============================================================ */

.counter-number,
[data-counter] {
  font-variant-numeric:
    tabular-nums;

  transition:
    transform
    var(--transition-default);
}

.counter-number.is-counting,
[data-counter].is-counting {
  animation:
    counterPulse
    650ms
    ease-out;
}


@keyframes counterPulse {

  0% {
    transform:
      scale(0.97);
  }

  55% {
    transform:
      scale(1.035);
  }

  100% {
    transform:
      scale(1);
  }
}


/* ============================================================
   55. SKELETON LOADING
============================================================ */

.skeleton {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      var(--neutral-100)
      25%,

      var(--neutral-50)
      50%,

      var(--neutral-100)
      75%
    );

  background-size:
    200%
    100%;

  animation:
    shimmer
    1.6s
    infinite
    linear;
}


/* ============================================================
   56. LOADING SPINNER
============================================================ */

.loading-spinner {
  width: 28px;
  height: 28px;

  border:
    3px
    solid
    var(--neutral-200);

  border-top-color:
    var(--green-600);

  border-radius:
    var(--radius-full);

  animation:
    rotateSlow
    800ms
    linear
    infinite;
}


/* ============================================================
   57. PAGE ENTRY
============================================================ */

.page-enter {
  animation:
    fadeIn
    500ms
    var(--ease-emphasized)
    both;
}

.page-enter-up {
  animation:
    slideUp
    600ms
    var(--ease-emphasized)
    both;
}

.page-exit {
  animation:
    fadeOut
    260ms
    var(--ease-standard)
    both;
}


/* ============================================================
   58. BACKGROUND BLOBS
============================================================ */

.bg-blob {
  animation:
    glowMove
    12s
    ease-in-out
    infinite;
}

.bg-blob:nth-child(2) {
  animation-delay:
    -4s;
}

.bg-blob:nth-child(3) {
  animation-delay:
    -8s;
}

.bg-ring {
  animation:
    rotateSlow
    42s
    linear
    infinite;
}


/* ============================================================
   59. ARROW LINKS
============================================================ */

.arrow-link {
  transition:
    transform
    var(--transition-default),

    color
    var(--transition-default);
}

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

.arrow-link svg {
  transition:
    transform
    var(--transition-default);
}

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


/* ============================================================
   60. MOBILE MENU
============================================================ */

.mobile-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(-10px)
    scale(0.99);

  transition:
    opacity
    var(--transition-smooth),

    visibility
    var(--transition-smooth),

    transform
    var(--transition-smooth);
}

.site-header.menu-open
.mobile-menu,

.app-header.menu-open
.mobile-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);
}


/* ============================================================
   61. MENU TOGGLE ICON
============================================================ */

.menu-toggle span {
  transition:
    transform
    var(--transition-smooth),

    opacity
    var(--transition-default);
}

.menu-toggle.is-active
span:nth-child(1) {
  transform:
    rotate(45deg);
}

.menu-toggle.is-active
span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-active
span:nth-child(3) {
  transform:
    rotate(-45deg);
}


/* ============================================================
   62. TOOLTIP
============================================================ */

.tooltip {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateX(-50%)
    translateY(5px);

  transition:
    opacity
    var(--transition-default),

    visibility
    var(--transition-default),

    transform
    var(--transition-default);
}

.has-tooltip:hover
.tooltip,

.has-tooltip:focus-within
.tooltip {
  opacity: 1;
  visibility: visible;

  transform:
    translateX(-50%)
    translateY(0);
}


/* ============================================================
   63. PROGRESS BAR
============================================================ */

.progress-bar {
  --progress: 0;

  position: relative;

  overflow: hidden;
}

.progress-bar::after {
  content: "";

  position: absolute;

  inset: 0;

  transform-origin:
    left center;

  transform:
    scaleX(
      var(
        --progress,
        0
      )
    );

  transition:
    transform
    700ms
    var(--ease-emphasized);
}


/* ============================================================
   64. CHECKLIST
============================================================ */

.check-item {
  opacity: 0;

  transform:
    translateX(-10px);
}

.check-item.is-visible {
  animation:
    checklistEnter
    400ms
    var(--ease-emphasized)
    forwards;
}

.check-item:nth-child(2) {
  animation-delay:
    70ms;
}

.check-item:nth-child(3) {
  animation-delay:
    140ms;
}

.check-item:nth-child(4) {
  animation-delay:
    210ms;
}

.check-item:nth-child(5) {
  animation-delay:
    280ms;
}


@keyframes checklistEnter {

  from {
    opacity: 0;

    transform:
      translateX(-10px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}


/* ============================================================
   65. EVENT BADGE
============================================================ */

.event-badge {
  animation:
    pulseSoft
    3.2s
    ease-in-out
    infinite;
}


/* ============================================================
   66. ACTIVE NAVIGATION
============================================================ */

.nav-links a.is-active {
  animation:
    navigationActivate
    320ms
    var(--ease-emphasized)
    both;
}


@keyframes navigationActivate {

  from {
    opacity: 0.75;
  }

  to {
    opacity: 1;
  }
}


/* ============================================================
   67. ONLINE / OFFLINE STATE
============================================================ */

.is-offline
.status-live::before {
  background:
    var(--color-warning);

  animation: none;
}

.is-online
.status-live::before {
  background:
    var(--color-success);
}


/* ============================================================
   68. APP READY TRANSITION
============================================================ */

html:not(.app-ready)
body {
  opacity: 0.98;
}

html.app-ready
body {
  opacity: 1;

  transition:
    opacity
    260ms
    ease;
}


/* ============================================================
   69. PAGE VISIBILITY OPTIMIZATION
============================================================ */

.page-hidden
.app-floating,

.page-hidden
.bg-blob,

.page-hidden
.bg-ring,

.page-hidden
.event-badge,

.page-hidden
.status-dot {
  animation-play-state:
    paused !important;
}


/* ============================================================
   70. FOCUS INTERACTION
============================================================ */

:focus-visible {
  transition:
    outline-offset
    var(--transition-fast);
}

:focus-visible:active {
  outline-offset:
    2px;
}


/* ============================================================
   71. TOUCH DEVICE OPTIMIZATION
============================================================ */

@media
  (hover: none)
  and
  (pointer: coarse) {

  .path-card:hover,
  .service-card:hover,
  .news-card:hover,
  .feature-card:hover,
  .guide-card:hover,
  .info-card:hover,
  .event-card:hover,
  .counter-card:hover,
  .stat-card:hover {

    transform: none;

    box-shadow:
      var(--card-shadow);
  }


  .guide-btn:hover,
  .guide-step:hover {

    transform: none;
  }


  .btn:hover,
  .button:hover,
  .nav-button:hover,
  .contact-form button:hover {

    transform: none;
  }


  .floating-card:hover,
  .app-status-card:hover {

    --hover-y: 0px;

    --motion-scale: 1;
  }


  .card-shine::before {

    display: none;
  }
}


/* ============================================================
   72. REDUCED MOTION
============================================================ */

@media
  (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-delay:
      0ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    transition-delay:
      0ms !important;
  }


  .reveal,
  .reveal-up,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-blur {

    opacity:
      1 !important;

    --reveal-x:
      0px !important;

    --reveal-y:
      0px !important;

    --reveal-scale:
      1 !important;

    filter:
      none !important;
  }


  .app-floating,
  .live-ticker-track,
  .navigator-smart-card {

    --float-y:
      0px !important;

    animation:
      none !important;
  }


  .live-ticker-viewport {

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;
  }


  .live-ticker-list[aria-hidden="true"] {

    display:
      none !important;
  }


  .bg-blob,
  .bg-ring,
  .event-badge,
  .map-city-halo,
  .map-shape,
  .navigator-status i,
  .status-dot {

    animation:
      none !important;
  }


  [data-parallax],
  [data-hero-parallax] {

    --parallax-x:
      0px !important;

    --parallax-y:
      0px !important;

    --pointer-x:
      0px !important;

    --pointer-y:
      0px !important;
  }
}


/* ============================================================
   73. PRINT
============================================================ */

@media print {

  *,
  *::before,
  *::after {

    animation:
      none !important;

    transition:
      none !important;

    transform:
      none !important;

    opacity:
      1 !important;

    filter:
      none !important;
  }
}


/* ============================================================
   74. FINAL MOTION SAFETY
============================================================ */

.motion-disabled
.reveal,

.motion-disabled
.reveal-up,

.motion-disabled
.reveal-down,

.motion-disabled
.reveal-left,

.motion-disabled
.reveal-right,

.motion-disabled
.reveal-scale,

.motion-disabled
.reveal-blur {

  opacity: 1;

  --reveal-x: 0px;

  --reveal-y: 0px;

  --reveal-scale: 1;

  filter: none;
}


.motion-disabled
.app-floating {

  animation: none;

  --float-y: 0px;
}


/* ============================================================
   75. END OF ANIMATIONS.CSS
============================================================ */

/* Keep the active map halo centered while it pulses inside SVG coordinates. */
.map-city.is-active .map-city-halo {
  transform-box: fill-box;
  transform-origin: center;
}

/* ============================================================
   54. CONTACT APP ATTENTION + INTERACTION
============================================================ */

.contact-app {
  animation: contactAppNudge 5.2s ease-in-out infinite;
  transition:
    transform var(--transition-default),
    box-shadow var(--transition-default),
    filter var(--transition-default);
}


.contact-app::after {
  animation: contactAppHalo 5.2s ease-out infinite;
}


.contact-app:hover {
  transform: translateY(-3px) scale(1.025);
  filter: saturate(1.06);
}

.contact-app--whatsapp:hover {
  box-shadow: 0 20px 44px rgba(37, 211, 102, 0.38);
}


.contact-app:active {
  transform: translateY(0) scale(0.97);
}

@keyframes contactAppNudge {
  0%, 68%, 100% {
    transform: translateY(0) scale(1);
  }
  72% {
    transform: translateY(-2px) scale(1.035);
  }
  76% {
    transform: translateY(0) scale(1);
  }
  80% {
    transform: translateY(-1px) scale(1.018);
  }
  84% {
    transform: translateY(0) scale(1);
  }
}

@keyframes contactAppHalo {
  0%, 67%, 100% {
    opacity: 0;
    transform: scale(0.98);
  }
  72% {
    opacity: 0.3;
  }
  82% {
    opacity: 0;
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-app,
  .contact-app::after {
    animation: none !important;
  }
}