/* animations.css — Maison Zohora */
/* Motion layer: warm, elevated, cinematic */

/* ─── Page Curtain ─── */

.page-curtain {
  position: fixed;
  inset: 0;
  background: var(--color-surface);
  z-index: var(--z-modal);
  transform: scaleY(1);
  transform-origin: top center;
  pointer-events: none;
  /* Safety: hide after 3s even if GSAP fails */
  animation: curtainSafety 0.01s ease 3s forwards;
}

@keyframes curtainSafety {
  to { display: none; opacity: 0; pointer-events: none; }
}

/* ─── Page Transition Curtain ─── */

.transition-curtain {
  position: fixed;
  inset: 0;
  background: var(--color-accent);
  z-index: var(--z-modal);
  transform: scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
}

/* ─── Custom Cursor ─── */
/* Only hide system cursor AFTER JS confirms custom cursor is active */

.cursor-active {
  cursor: none;
}

.cursor-active a,
.cursor-active button {
  cursor: none;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-modal);
  mix-blend-mode: normal;
  display: none; /* Hidden until JS activates it */
}

.cursor-active .cursor {
  display: block;
}

.cursor__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.cursor__ring {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--color-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

/* ─── Scroll reveal base state ─── */
/* Only hide elements when JS is confirmed loaded */

.js-loaded .reveal {
  opacity: 0;
  transform: translateY(28px);
}

.js-loaded .reveal.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Without JS or if JS fails — everything visible */
.reveal {
  opacity: 1;
  transform: none;
}

/* ─── Word split wrapper ─── */

.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.word {
  display: inline-block;
}

/* ─── Overflow clips for parallax ─── */

.hero__image,
.service-section__image,
.portfolio-preview__item,
.about-hero__image {
  overflow: hidden;
}

.portfolio-preview,
.service-section {
  overflow: hidden;
}

/* ─── Will-change on actively animated elements ─── */

.hero__image img,
.portfolio-preview__item img,
.service-section__image img,
.about-hero__image img {
  will-change: transform;
}

/* ─── Reduced motion overrides ─── */

@media (prefers-reduced-motion: reduce) {
  .page-curtain,
  .transition-curtain {
    display: none !important;
  }

  .reveal,
  .js-loaded .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .cursor {
    display: none !important;
  }

  * {
    animation: none !important;
    transition: none !important;
  }
}