/* ============================================================
   ANIMATIONS.CSS — Keyframes, Transition Helpers, GSAP Classes
   ============================================================ */

/* ── GLOBAL KEYFRAMES ─────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

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

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

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

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

@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(3%, 2%); }
  30%  { transform: translate(-1%, 4%); }
  40%  { transform: translate(4%, -1%); }
  50%  { transform: translate(-3%, 3%); }
  60%  { transform: translate(2%, -4%); }
  70%  { transform: translate(-4%, 2%); }
  80%  { transform: translate(3%, -2%); }
  90%  { transform: translate(-2%, 4%); }
}

@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ── FILM GRAIN OVERLAY ──────────────────────────────────────── */
.grain-overlay {
  position: absolute;
  inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  animation: grain 0.5s steps(1) infinite;
  z-index: var(--z-raised);
}

/* ── PARALLAX BASE ───────────────────────────────────────────── */
.parallax-wrap {
  overflow: hidden;
  position: relative;
}
.parallax-img {
  will-change: transform;
}

/* ── SCROLL REVEAL VARIANTS ──────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  transition-timing-function: var(--ease-luxury);
}
[data-reveal].visible { opacity: 1; transform: none !important; }

[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="down"]  { transform: translateY(-30px); }
[data-reveal="left"]  { transform: translateX(40px); }
[data-reveal="right"] { transform: translateX(-40px); }
[data-reveal="scale"] { transform: scale(0.95); }
[data-reveal="fade"]  { transform: none; }

/* Stagger delays via data attribute */
[data-delay="100"] { transition-delay: 0.1s !important; }
[data-delay="200"] { transition-delay: 0.2s !important; }
[data-delay="300"] { transition-delay: 0.3s !important; }
[data-delay="400"] { transition-delay: 0.4s !important; }
[data-delay="500"] { transition-delay: 0.5s !important; }
[data-delay="600"] { transition-delay: 0.6s !important; }
[data-delay="700"] { transition-delay: 0.7s !important; }
[data-delay="800"] { transition-delay: 0.8s !important; }

/* ── SKELETON LOADING ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--grey-200) 25%,
    var(--grey-100) 50%,
    var(--grey-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── HOVER SCALE ─────────────────────────────────────────────── */
.hover-scale {
  transition: transform var(--transition-smooth);
}
.hover-scale:hover { transform: scale(1.03); }

.hover-lift {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ── CLIP PATH ANIMATIONS ────────────────────────────────────── */
.clip-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease-luxury);
}
.clip-reveal.visible { clip-path: inset(0 0% 0 0); }

.clip-reveal-up {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s var(--ease-luxury);
}
.clip-reveal-up.visible { clip-path: inset(0 0 0 0); }

/* ── LINE DRAW ───────────────────────────────────────────────── */
.draw-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s var(--ease-luxury);
}
.draw-line.visible { stroke-dashoffset: 0; }

/* ── NUMBER COUNT ────────────────────────────────────────────── */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* ── MAGNETIC BUTTON (enhanced by JS) ────────────────────────── */
.btn-magnetic {
  position: relative;
  display: inline-flex;
  overflow: visible !important;
}
.btn-magnetic .magnetic-content {
  transition: transform 0.4s var(--ease-luxury);
  will-change: transform;
}

/* ── PAGE TRANSITION ─────────────────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--champagne-pale);
  z-index: calc(var(--z-preloader) - 1);
  transform: scaleX(0);
  transform-origin: left;
}

/* ── CURSOR TRAIL ────────────────────────────────────────────── */
.cursor-trail {
  position: fixed;
  width: 4px; height: 4px;
  background: var(--champagne);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-preloader);
  opacity: 0.6;
  animation: trailFade 0.8s var(--ease-out) forwards;
}
@keyframes trailFade { to { opacity: 0; transform: scale(0); } }

/* ── TEXT SPLIT CHARS ────────────────────────────────────────── */
.char-wrap {
  display: inline-block;
  overflow: hidden;
}
.char-inner {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.6s var(--ease-luxury);
}
.char-wrap.visible .char-inner { transform: translateY(0); }

/* ── IMAGE HOVER PARALLAX ────────────────────────────────────── */
.img-parallax-wrap {
  overflow: hidden;
  border-radius: inherit;
}
.img-parallax {
  transition: transform 0.8s var(--ease-luxury);
  transform-origin: center;
}
.img-parallax-wrap:hover .img-parallax { transform: scale(1.06); }

/* ── ROTATING TEXT RING ──────────────────────────────────────── */
.rotating-text {
  animation: spin 12s linear infinite;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* ── SWIPER/SLIDER DOTS ──────────────────────────────────────── */
.slider-dots {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-8);
}
.slider-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grey-300);
  cursor: none;
  transition: all var(--transition-smooth);
}
.slider-dot.active {
  width: 24px;
  border-radius: var(--radius-full);
  background: var(--champagne);
}

/* ── ACCORDION ───────────────────────────────────────────────── */
.accordion-item {
  border-bottom: 1px solid var(--border-dark);
}
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-5);
  cursor: none;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--transition-fast);
}
.accordion-header:hover { color: var(--champagne); }
.accordion-icon {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  transition: transform var(--transition-smooth);
}
.accordion-item.open .accordion-icon { transform: rotate(180deg); }
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), padding var(--transition-smooth);
}
.accordion-item.open .accordion-body { max-height: 400px; padding-bottom: var(--sp-5); }
.accordion-content { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* ── RANGE SLIDER ────────────────────────────────────────────── */
.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: var(--grey-200);
  border-radius: var(--radius-full);
  outline: none;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--champagne);
  border-radius: 50%;
  cursor: none;
  box-shadow: 0 0 0 3px var(--champagne-pale);
  transition: transform var(--transition-fast);
}
.range-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* ── CHECKBOX LUXURY ─────────────────────────────────────────── */
.luxury-checkbox {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: none;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}
.luxury-checkbox:hover { color: var(--text-primary); }
.luxury-checkbox input { display: none; }
.luxury-checkbox__box {
  width: 16px; height: 16px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.luxury-checkbox input:checked ~ .luxury-checkbox__box {
  background: var(--champagne);
  border-color: var(--champagne);
}
.luxury-checkbox input:checked ~ .luxury-checkbox__box::after {
  content: '✓';
  font-size: 0.65rem;
  color: white;
}

/* ── STAR RATING ─────────────────────────────────────────────── */
.stars {
  display: flex; gap: 2px; color: var(--champagne); font-size: 0.75rem;
}
.stars--lg { font-size: 1rem; gap: 3px; }

/* ── PRICE TAG ───────────────────────────────────────────────── */
.price {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}
.price__currency { font-size: 0.6em; vertical-align: top; padding-top: 0.2em; }
.price__old {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--grey-400);
  text-decoration: line-through;
  margin-left: var(--sp-2);
}
.price__save {
  font-size: var(--text-xs);
  color: var(--earth-green);
  background: var(--earth-green-pale);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  margin-left: var(--sp-2);
}

/* ── SWATCH COLOR PICKER ─────────────────────────────────────── */
.swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border: 2px solid transparent;
  position: relative;
}
.swatch:hover { transform: scale(1.1); }
.swatch.active {
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--champagne);
}
.swatch[title]::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--obsidian);
  color: var(--cream);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}
.swatch:hover::after { opacity: 1; }