/* ==========================================================================
   VASTU CAFÉ — Animations
   Keyframes, scroll-reveal states and the Vastu Chakra cursor.
   All motion is GPU friendly (transform / opacity only) for 60fps.
   ========================================================================== */

/* ==========================================================================
   1. KEYFRAMES
   ========================================================================== */
@keyframes fade-in      { from { opacity: 0; } to { opacity: 1; } }

@keyframes fade-up      { from { opacity: 0; transform: translate3d(0, 34px, 0); }
                          to   { opacity: 1; transform: translate3d(0, 0, 0); } }

@keyframes fade-down    { from { opacity: 0; transform: translate3d(0, -34px, 0); }
                          to   { opacity: 1; transform: translate3d(0, 0, 0); } }

@keyframes slide-left   { from { opacity: 0; transform: translate3d(56px, 0, 0); }
                          to   { opacity: 1; transform: translate3d(0, 0, 0); } }

@keyframes slide-right  { from { opacity: 0; transform: translate3d(-56px, 0, 0); }
                          to   { opacity: 1; transform: translate3d(0, 0, 0); } }

@keyframes zoom-in      { from { opacity: 0; transform: scale(.86); }
                          to   { opacity: 1; transform: scale(1); } }

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

@keyframes breathe      { 0%, 100% { transform: scale(1); }
                          50%      { transform: scale(1.045); } }

@keyframes halo-pulse   { 0%, 100% { opacity: .55; transform: scale(1); }
                          50%      { opacity: 1;   transform: scale(1.07); } }

@keyframes float-y      { 0%, 100% { transform: translateY(0); }
                          50%      { transform: translateY(-14px); } }

@keyframes float-x      { 0%, 100% { transform: translateX(0); }
                          50%      { transform: translateX(12px); } }

@keyframes marquee      { from { transform: translate3d(0, 0, 0); }
                          to   { transform: translate3d(-50%, 0, 0); } }

@keyframes pulse-dot    { 0%   { box-shadow: 0 0 0 0 rgba(92, 224, 127, .7); }
                          70%  { box-shadow: 0 0 0 9px rgba(92, 224, 127, 0); }
                          100% { box-shadow: 0 0 0 0 rgba(92, 224, 127, 0); } }

@keyframes ring-out     { 0%   { transform: scale(1);   opacity: .8; }
                          100% { transform: scale(1.6); opacity: 0; } }

@keyframes ripple-out   { to { transform: scale(3.4); opacity: 0; } }

@keyframes flip-cycle   { 0%, 28%   { transform: translateY(0); }
                          33%, 61%  { transform: translateY(-1.35em); }
                          66%, 94%  { transform: translateY(-2.7em); }
                          100%      { transform: translateY(0); } }

@keyframes soft-flip    { 0%, 42%  { transform: rotateY(0deg); }
                          50%, 92% { transform: rotateY(180deg); }
                          100%     { transform: rotateY(360deg); } }

@keyframes shimmer      { 0%   { background-position: -220% 0; }
                          100% { background-position: 220% 0; } }

@keyframes glow-throb   { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 46, 106, .45); }
                          50%      { box-shadow: 0 0 26px 6px rgba(22, 46, 106, .28); } }

@keyframes cursor-pulse { 0%, 100% { transform: scale(1);    opacity: .85; }
                          50%      { transform: scale(1.14); opacity: 1; } }

@keyframes cursor-ripple{ 0%   { transform: translate(-50%, -50%) scale(.3); opacity: .9; }
                          100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } }

@keyframes text-rise    { from { transform: translateY(105%); opacity: 0; }
                          to   { transform: translateY(0);    opacity: 1; } }

@keyframes reveal-wipe  { from { clip-path: inset(0 0 0 100%); }
                          to   { clip-path: inset(0 0 0 0); } }

@keyframes tilt-in      { from { opacity: 0; transform: perspective(900px) rotateX(12deg) translateY(30px); }
                          to   { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); } }

/* ==========================================================================
   2. SCROLL REVEAL
   Elements get [data-reveal]; JS adds .is-visible when they enter view.
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity .95s cubic-bezier(.16, 1, .3, 1),
    transform .95s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="fade"]        { transform: none; }
[data-reveal="up"]          { transform: translate3d(0, 44px, 0); }
[data-reveal="down"]        { transform: translate3d(0, -40px, 0); }
[data-reveal="left"]        { transform: translate3d(64px, 0, 0); }
[data-reveal="right"]       { transform: translate3d(-64px, 0, 0); }
[data-reveal="zoom"]        { transform: scale(.88); }
[data-reveal="zoom-out"]    { transform: scale(1.1); }
[data-reveal="tilt"]        { transform: perspective(1000px) rotateX(14deg) translate3d(0, 40px, 0); }
[data-reveal="flip"]        { transform: perspective(1000px) rotateY(28deg) translate3d(40px, 0, 0); }

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotateX(0) rotateY(0);
}

/* Section reveal — the whole block glides up as one unit */
[data-reveal-section] {
  opacity: 0;
  transform: translate3d(0, 60px, 0);
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal-section].is-visible { opacity: 1; transform: none; }

/* Staggered children — JS assigns --reveal-delay per index */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 38px, 0);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }

/* Image reveal — the brand curtain wipes away */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-brand);
  transform-origin: right;
  transform: scaleX(1);
  z-index: 2;
  transition: transform 1.15s cubic-bezier(.76, 0, .24, 1);
}
.img-reveal.is-visible::after { transform: scaleX(0); }
.img-reveal img {
  transform: scale(1.16);
  transition: transform 1.5s cubic-bezier(.16, 1, .3, 1);
}
.img-reveal.is-visible img { transform: scale(1); }

/* Text reveal — line masks rise into place */
.text-reveal { display: block; overflow: hidden; }
.text-reveal > span {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.text-reveal.is-visible > span { transform: translateY(0); opacity: 1; }

/* Word-by-word reveal (JS splits) */
.split-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px) rotate(3deg);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.split-words.is-visible .word { opacity: 1; transform: none; }

/* ==========================================================================
   3. HOVER & MICRO-INTERACTIONS
   ========================================================================== */
.hover-lift { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.hover-lift:hover { transform: translateY(-9px); box-shadow: var(--sh-lg); }

.hover-glow { transition: box-shadow .45s var(--ease), transform .45s var(--ease-out); }
.hover-glow:hover { box-shadow: 0 0 0 1px rgba(22, 46, 106, .38), 0 18px 46px rgba(22, 46, 106, .28); transform: translateY(-4px); }

.hover-tilt { transition: transform .5s var(--ease-out); transform-style: preserve-3d; }
.hover-tilt:hover { transform: perspective(900px) rotateX(4deg) rotateY(-4deg) translateY(-5px); }

.ico-spin { transition: transform .55s var(--ease-out); }
.ico-spin:hover svg,
a:hover > .ico-spin svg { transform: rotate(360deg); }

.ico-bounce svg { transition: transform .4s var(--ease-out); }
.ico-bounce:hover svg { transform: translateY(-4px) scale(1.12); }

.shimmer {
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 45%, transparent 70%);
  background-size: 220% 100%;
  animation: shimmer 3.4s linear infinite;
}

.float { animation: float-y 6.5s ease-in-out infinite; }
.float--slow { animation-duration: 9s; }
.float--x { animation-name: float-x; }

.spin-slow { animation: spin-slow 40s linear infinite; }
.spin-slow--rev { animation-direction: reverse; }

.throb { animation: glow-throb 3.4s ease-in-out infinite; }

/* Light parallax layers — JS sets --py */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0);
}

/* Counters start hidden until animated */
.counter { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4. VASTU CHAKRA CURSOR
   ========================================================================== */
.cursor,
.cursor-dot,
.cursor-ripple { display: none; }

@media (hover: hover) and (pointer: fine) {
  html.has-cursor,
  html.has-cursor body,
  html.has-cursor a,
  html.has-cursor button,
  html.has-cursor input,
  html.has-cursor select,
  html.has-cursor textarea,
  html.has-cursor label,
  html.has-cursor [role="button"],
  html.has-cursor .coin,
  html.has-cursor .gal-item { cursor: none !important; }

  .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 46px; height: 46px;
    margin: -23px 0 0 -23px;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(-100px, -100px, 0) scale(1);
    transition: opacity .3s var(--ease), width .3s var(--ease-out), height .3s var(--ease-out);
    will-change: transform;
    mix-blend-mode: normal;
  }
  .cursor__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(22, 46, 106, .95);
    box-shadow:
      0 0 12px rgba(22, 46, 106, .55),
      inset 0 0 10px rgba(22, 46, 106, .35);
    animation: cursor-pulse 3.2s ease-in-out infinite;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .35s var(--ease-out);
  }
  .cursor__glyph {
    position: absolute;
    inset: 6px;
    background: url("../images/chakra-cursor.svg") center/contain no-repeat;
    opacity: .9;
    animation: spin-slow 9s linear infinite;
    transition: opacity .3s var(--ease);
  }
  .cursor__aura {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 46, 106, .28), transparent 62%);
    filter: blur(5px);
    opacity: .85;
    transition: opacity .3s var(--ease), inset .3s var(--ease);
  }

  .cursor-dot {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--saffron);
    box-shadow: 0 0 10px rgba(22, 46, 106, .9);
    pointer-events: none;
    z-index: 10000;
    transform: translate3d(-100px, -100px, 0);
    will-change: transform;
    transition: opacity .3s var(--ease), transform .1s linear;
  }

  /* Hover states */
  .cursor.is-hover { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
  .cursor.is-hover .cursor__ring {
    border-color: rgba(22, 46, 106, .95);
    border-width: 2px;
    box-shadow: 0 0 26px rgba(22, 46, 106, .6), inset 0 0 18px rgba(22, 46, 106, .3);
  }
  .cursor.is-hover .cursor__glyph { opacity: 1; animation-duration: 4s; }
  .cursor.is-hover .cursor__aura { inset: -18px; opacity: 1; }

  .cursor.is-text { width: 12px; height: 46px; margin: -23px 0 0 -6px; }
  .cursor.is-text .cursor__ring { border-radius: 6px; }
  .cursor.is-text .cursor__glyph { opacity: 0; }

  .cursor.is-down { width: 34px; height: 34px; margin: -17px 0 0 -17px; }

  .cursor.is-hidden,
  .cursor-dot.is-hidden { opacity: 0; }

  /* Click ripple */
  .cursor-ripple {
    display: block;
    position: fixed;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgba(22, 46, 106, .8);
    box-shadow: 0 0 18px rgba(22, 46, 106, .45);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%) scale(.3);
    animation: cursor-ripple .78s cubic-bezier(.16, 1, .3, 1) forwards;
  }

  /* Magnetic targets get a subtle transform from JS */
  [data-magnetic] { transition: transform .35s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
}

/* ==========================================================================
   5. ENTRY ANIMATIONS FOR ABOVE-THE-FOLD CONTENT
   ========================================================================== */
.anim-hero > * { animation: fade-up .95s var(--ease-out) both; }
.anim-hero > *:nth-child(1) { animation-delay: .10s; }
.anim-hero > *:nth-child(2) { animation-delay: .18s; }
.anim-hero > *:nth-child(3) { animation-delay: .26s; }
.anim-hero > *:nth-child(4) { animation-delay: .34s; }
.anim-hero > *:nth-child(5) { animation-delay: .42s; }
.anim-hero > *:nth-child(6) { animation-delay: .50s; }
.anim-hero > *:nth-child(7) { animation-delay: .58s; }
.anim-hero > *:nth-child(8) { animation-delay: .66s; }

.anim-zoom { animation: zoom-in 1.1s var(--ease-out) both; }
.anim-fade { animation: fade-in 1.2s var(--ease) both; }

/* Page enter transition */
body.page-enter main { animation: fade-up .8s var(--ease-out) both; }

/* ==========================================================================
   6. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-reveal-section],
  [data-stagger] > *,
  .text-reveal > span,
  .split-words .word {
    opacity: 1 !important;
    transform: none !important;
  }
  .img-reveal::after { display: none; }
  .img-reveal img { transform: none; }
  .cursor, .cursor-dot, .cursor-ripple { display: none !important; }
  html.has-cursor, html.has-cursor * { cursor: auto !important; }
}