/* ==========================================================================
   THE DENTAL POINT
   animation.css  |  Keyframes, reveal states, AOS refinements, micro-motion
   ========================================================================== */

/* --------------------------------------------------------------
   1. REGISTERED PROPERTIES (for animatable gradients/angles)
-------------------------------------------------------------- */
@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* --------------------------------------------------------------
   2. CORE KEYFRAMES
-------------------------------------------------------------- */
@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes spinPlain {
  to { transform: rotate(360deg); }
}
@keyframes borderSpin {
  to { --ang: 360deg; }
}
@keyframes loaderGlow {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.94); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes loaderLogo {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 10px 26px rgba(184,134,47,.30)); }
  50%      { transform: translateY(-9px) scale(1.025); filter: drop-shadow(0 22px 44px rgba(184,134,47,.48)); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes floatXY {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(9px, -12px) rotate(1.4deg); }
  66%      { transform: translate(-7px, -6px) rotate(-1deg); }
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,103,.55); }
  70%      { box-shadow: 0 0 0 11px rgba(212,175,103,0); }
}
@keyframes ripple {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.65); opacity: 0; }
}
@keyframes scrollTrail {
  0%   { top: -60%; }
  100% { top: 110%; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.94) translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -160% 0; }
  100% { background-position: 260% 0; }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .5; }
  50%      { transform: scale(1.12); opacity: .85; }
}
@keyframes drawLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --------------------------------------------------------------
   3. GSAP INITIAL STATES
   (applied only when JS is available so no-JS still shows content)
-------------------------------------------------------------- */
.js-ready [data-anim="fade-up"],
.js-ready [data-anim="fade"],
.js-ready [data-anim="fade-left"],
.js-ready [data-anim="fade-right"],
.js-ready [data-anim="scale"],
.js-ready [data-anim="clip"] {
  will-change: transform, opacity;
}
.js-ready [data-anim="fade-up"]    { opacity: 0; transform: translateY(42px); }
.js-ready [data-anim="fade"]       { opacity: 0; }
.js-ready [data-anim="fade-left"]  { opacity: 0; transform: translateX(-46px); }
.js-ready [data-anim="fade-right"] { opacity: 0; transform: translateX(46px); }
.js-ready [data-anim="scale"]      { opacity: 0; transform: scale(.93); }
.js-ready [data-anim="clip"]       { clip-path: inset(0 0 100% 0); }

/* split-text lines */
.split-line { display: block; overflow: hidden; }
.split-line > span { display: block; will-change: transform; }
.js-ready .split-line > span { transform: translateY(105%); }

/* char reveal */
.char { display: inline-block; will-change: transform, opacity; }

/* --------------------------------------------------------------
   4. IMAGE REVEAL (clip wipe)
-------------------------------------------------------------- */
.reveal-img { position: relative; overflow: hidden; }
.reveal-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #FBF5E7, #EFE3C9);
  transform-origin: right;
  z-index: 3;
  pointer-events: none;
}
.js-ready .reveal-img::after { transform: scaleX(1); }
.reveal-img.is-revealed::after {
  transform: scaleX(0);
  transition: transform 1.05s cubic-bezier(.77,0,.18,1);
}
.reveal-img img { transform: scale(1.14); }
.reveal-img.is-revealed img {
  transform: scale(1);
  transition: transform 1.5s cubic-bezier(.16,1,.3,1) .12s;
}

/* --------------------------------------------------------------
   5. AOS REFINEMENTS (softer, more luxurious easing)
-------------------------------------------------------------- */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }

[data-aos^="fade"][data-aos^="fade"] { transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
[data-aos^="zoom"][data-aos^="zoom"] { transition-timing-function: cubic-bezier(.16, 1, .3, 1); }

[data-aos="luxe-up"] {
  opacity: 0;
  transform: translateY(48px);
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
[data-aos="luxe-up"].aos-animate { opacity: 1; transform: none; }

[data-aos="luxe-scale"] {
  opacity: 0;
  transform: scale(.94) translateY(24px);
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
[data-aos="luxe-scale"].aos-animate { opacity: 1; transform: none; }

[data-aos="luxe-blur"] {
  opacity: 0;
  filter: blur(11px);
  transform: translateY(22px);
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
[data-aos="luxe-blur"].aos-animate { opacity: 1; filter: blur(0); transform: none; }

/* --------------------------------------------------------------
   6. MICRO INTERACTIONS
-------------------------------------------------------------- */
/* magnetic wrapper */
.magnetic { display: inline-block; will-change: transform; }

/* underline sweep on any link */
.u-sweep {
  position: relative;
  display: inline-block;
}
.u-sweep::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.u-sweep:hover::after { transform: scaleX(1); transform-origin: left; }

/* shimmering gold text */
.shimmer-gold {
  background: linear-gradient(100deg, #B8862F 22%, #FFF0C4 42%, #D4AF67 52%, #B8862F 68%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}

/* soft breathing halo behind elements */
.halo { position: relative; isolation: isolate; }
.halo::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,103,.24), transparent 66%);
  animation: breathe 7s ease-in-out infinite;
}

/* tilt card base */
.tilt {
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.tilt > * { transform: translateZ(0.01px); }

/* hover lift utility */
.lift { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1); }
.lift:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }

/* --------------------------------------------------------------
   7. PAGE TRANSITION CURTAIN
-------------------------------------------------------------- */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.page-curtain__col {
  background: linear-gradient(180deg, #16130D 0%, #221B10 100%);
  transform: scaleY(0);
  transform-origin: bottom;
}
.page-curtain.is-out .page-curtain__col {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform .62s cubic-bezier(.77,0,.18,1);
}
.page-curtain.is-out .page-curtain__col:nth-child(1) { transition-delay: 0s; }
.page-curtain.is-out .page-curtain__col:nth-child(2) { transition-delay: .06s; }
.page-curtain.is-out .page-curtain__col:nth-child(3) { transition-delay: .12s; }
.page-curtain.is-out .page-curtain__col:nth-child(4) { transition-delay: .18s; }
.page-curtain.is-out .page-curtain__col:nth-child(5) { transition-delay: .24s; }

.page-curtain.is-in .page-curtain__col {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s cubic-bezier(.77,0,.18,1);
}
.page-curtain.is-in .page-curtain__col:nth-child(1) { transition-delay: .24s; }
.page-curtain.is-in .page-curtain__col:nth-child(2) { transition-delay: .18s; }
.page-curtain.is-in .page-curtain__col:nth-child(3) { transition-delay: .12s; }
.page-curtain.is-in .page-curtain__col:nth-child(4) { transition-delay: .06s; }
.page-curtain.is-in .page-curtain__col:nth-child(5) { transition-delay: 0s; }

/* --------------------------------------------------------------
   8. COUNTER FLIP-IN
-------------------------------------------------------------- */
.counter__num { transition: color .5s; }
.counter.is-counting .counter__num { color: var(--gold-700); }

/* --------------------------------------------------------------
   9. SKELETON / LAZY IMAGE FADE
-------------------------------------------------------------- */
img[loading="lazy"] { background: linear-gradient(100deg, #F5F1E8 30%, #FBF7EE 50%, #F5F1E8 70%); background-size: 220% 100%; }
img.is-loaded { animation: fadeIn .7s cubic-bezier(.16,1,.3,1); background: none; }

/* --------------------------------------------------------------
   10. FAQ ACCORDION MOTION
-------------------------------------------------------------- */
.faq-a__in {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .42s cubic-bezier(.16,1,.3,1) .06s, transform .42s cubic-bezier(.16,1,.3,1) .06s;
}
.faq-item.is-open .faq-a__in { opacity: 1; transform: none; }

/* --------------------------------------------------------------
   11. NAV LINK STAGGER ON LOAD
-------------------------------------------------------------- */
.js-ready .nav__menu .nav__link,
.js-ready .nav__cta > * {
  opacity: 0;
  transform: translateY(-12px);
}
.nav.is-entered .nav__menu .nav__link,
.nav.is-entered .nav__cta > * {
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.nav.is-entered .nav__menu .nav__link:nth-child(1) { transition-delay: .05s; }
.nav.is-entered .nav__menu .nav__link:nth-child(2) { transition-delay: .11s; }
.nav.is-entered .nav__menu .nav__link:nth-child(3) { transition-delay: .17s; }
.nav.is-entered .nav__menu .nav__link:nth-child(4) { transition-delay: .23s; }
.nav.is-entered .nav__menu .nav__link:nth-child(5) { transition-delay: .29s; }
.nav.is-entered .nav__menu .nav__link:nth-child(6) { transition-delay: .35s; }
.nav.is-entered .nav__cta > *:nth-child(1) { transition-delay: .40s; }
.nav.is-entered .nav__cta > *:nth-child(2) { transition-delay: .46s; }
.nav.is-entered .nav__cta > *:nth-child(3) { transition-delay: .50s; }

/* --------------------------------------------------------------
   12. 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;
  }
  .js-ready [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js-ready .split-line > span { transform: none !important; }
  .reveal-img::after { display: none; }
  .reveal-img img { transform: none !important; }
  .hero__media { inset: 0 !important; transform: none !important; }
  .marquee__track { animation: none; }
}