/* ==========================================================================
   AURELLE — Animation & Motion
   Keyframes + the base/target states that scroll-animations.js toggles.
   GSAP drives the actual tweening; CSS only defines start/end states so
   content is never invisible if JavaScript fails to load.
   ========================================================================== */

/* ---------- Generic scroll reveal states ----------
   JS adds .is-inview when an element crosses the trigger point. */
[data-reveal] {
  opacity: 0;
  transition: opacity 1s var(--ease-out-soft), transform 1s var(--ease-out-soft);
}
[data-reveal="fade-up"] { transform: translateY(46px); }
[data-reveal="fade-in"] { transform: none; }
[data-reveal="fade-left"] { transform: translateX(-46px); }
[data-reveal="fade-right"] { transform: translateX(46px); }
[data-reveal="scale-in"] { transform: scale(0.94); }

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

/* stagger children of [data-reveal-group] */
[data-reveal-group] .stagger-item {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease-out-soft), transform 0.9s var(--ease-out-soft);
}
[data-reveal-group].is-inview .stagger-item { opacity: 1; transform: none; }

/* facet-frame reveal mask (used on hero + section imagery) */
.facet-frame .reveal-mask { transform: scaleY(1); }
.facet-frame.is-revealed .reveal-mask { transform: scaleY(0); transition: transform 1.15s var(--ease-luxury); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] .stagger-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .facet-frame .reveal-mask { display: none; }
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  background: var(--c-black);
  color: var(--c-ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.preloader__mark {
  width: 64px;
  height: 64px;
  position: relative;
}
.preloader__mark svg { width: 100%; height: 100%; }
.preloader__mark .facet-outline {
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 1;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
}
.preloader__mark .facet-fill {
  fill: var(--c-gold);
  opacity: 0;
  transform-origin: center;
}

.preloader__word {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  padding-left: 0.5em; /* optically re-center given the tracking */
}

.preloader__bar {
  width: 200px;
  height: 1px;
  background: rgba(247, 243, 236, 0.15);
  position: relative;
  overflow: hidden;
}
.preloader__bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--c-gold);
}

.preloader__count {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: rgba(247, 243, 236, 0.5);
}

.preloader.is-done {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 1.1s var(--ease-luxury);
  pointer-events: none;
}

body.is-loading { overflow: hidden; height: 100vh; }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid var(--border-hair);
  padding-block: 1.4rem;
}
.marquee__track {
  display: inline-flex;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
.marquee__track span {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  padding-inline: 1.75rem;
  color: var(--text-secondary);
}
.marquee__track span::after {
  content: '\2726';
  font-style: normal;
  color: var(--c-gold);
  margin-left: 1.75rem;
  font-size: 0.9rem;
}

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

.bg-inverse .marquee { border-color: var(--border-hair-inverse); }
.bg-inverse .marquee__track span { color: var(--text-inverse-muted); }

/* ---------- Floating decorative particles (hero) ---------- */
.floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.floater {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c-gold-light), var(--c-gold) 65%, transparent 100%);
  opacity: 0.55;
  animation: float-drift ease-in-out infinite;
}
@keyframes float-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(var(--drift-x, 18px), var(--drift-y, -26px)) scale(1.15); }
}

/* small rotating facet accents scattered near headings */
.facet-accent {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--c-gold);
  transform: rotate(45deg);
  animation: spin-slow 9s linear infinite;
}
@keyframes spin-slow {
  from { transform: rotate(45deg); }
  to { transform: rotate(405deg); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .floater, .facet-accent { animation: none; }
}

/* ---------- Shimmer (placeholder art idle state) ---------- */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ---------- Fade utility for JS-toggled UI (toasts, dropdowns) ---------- */
.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity var(--dur-fast) ease; }