/*
 * Author: Manoj Mathangadeera
 * Contact: aivotandra@gmail.com / www.aivotandra.com
 * Company: Adeon Bridge Technology - Dubai, UAE / www.adeon.ae
 * Copyright (c) 2026 Manoj Mathangadeera. All rights reserved.
 *
 * Project: JJ Prime Properties
 * Client: ATTESTAR Private Limited - Sri Lanka
 *
 * File Name: assets/css/animations.css
 * File Description: Scroll-reveal, parallax, and micro-interaction animation styles used site-wide.
 */

/* Scroll-reveal, parallax, and small motion-based polish. Everything here
   is skipped/neutralised by main.js and base.css when the visitor has
   prefers-reduced-motion set, and .reveal elements are visible-by-default
   (see .no-js / .js-reveal-ready gating below) so content never depends on
   JavaScript running to be readable. */

/* ---- Scroll reveal -----------------------------------------------------
   Elements start hidden only once JS confirms it can run the reveal
   (the .js-reveal-ready class is added by animations.js on load); if JS
   never runs, .reveal elements simply stay at their natural opacity/position. */

.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard);
}

.js-reveal-ready .reveal--left {
  transform: translateX(-32px);
}

.js-reveal-ready .reveal--right {
  transform: translateX(32px);
}

.js-reveal-ready .reveal--scale {
  transform: scale(0.94);
}

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

/* Stagger helper: apply .reveal-stagger to a grid/list container and each
   direct child gets a small incremental delay as it reveals. */
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger > *:nth-child(6) { transition-delay: 450ms; }

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

/* ---- Parallax ------------------------------------------------------------
   Container clips an oversized image; JS translates the image on scroll.
   Falls back to a normal static image if JS/reduced-motion disable it. */

[data-parallax] {
  position: relative;
  overflow: hidden;
}

[data-parallax] img {
  will-change: transform;
  transform: translateY(0);
}

.js-parallax-active [data-parallax] img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  position: relative;
  top: -9%;
}

/* ---- Micro-interactions -------------------------------------------------- */

.btn {
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(15, 15, 15, 0.45);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
}

/* Value icons: small nudge on hover of the parent item */
.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-sm);
  color: var(--color-gold-deep);
  transition: transform var(--duration-med) var(--ease-standard);
}

.value-icon svg {
  width: 100%;
  height: 100%;
}

.value-list__item:hover .value-icon {
  transform: translateY(-3px) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .value-list__item:hover .value-icon {
    transform: none;
  }
}