/* ============================================================
   NOORÉ — Motion layer
   Cursor, page veil, hero entrance, parallax.
   ============================================================ */

/* ---------- Custom cursor ---------- */
.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}

.cursor {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--espresso);
  transition: opacity 0.3s, width 0.3s var(--ease), height 0.3s var(--ease),
              margin 0.3s var(--ease), background 0.3s;
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(30, 23, 18, 0.28);
  transition: opacity 0.3s, width 0.45s var(--ease), height 0.45s var(--ease),
              margin 0.45s var(--ease), border-color 0.35s, background 0.35s;
}

body.cursor-active .cursor-ring {
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-color: rgba(30, 23, 18, 0.5);
}

body.cursor-active .cursor {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
}

body.has-cursor,
body.has-cursor a,
body.has-cursor button,
body.has-cursor .card,
body.has-cursor .tile {
  cursor: none;
}

@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-ring { display: none !important; }
  body.has-cursor, body.has-cursor a { cursor: auto; }
}

/* ---------- Page transition veil ---------- */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background: var(--espresso);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease);
}

.page-veil.is-in {
  transform: scaleY(1);
  transform-origin: bottom;
}

/* ---------- Bag pulse ---------- */
[data-bag-btn] { transition: color 0.3s; }
[data-bag-btn].is-pulse { color: var(--champagne); }

/* ---------- Hero entrance ---------- */
.hero [data-hero] {
  opacity: 0;
  transform: translateY(24px);
  animation: heroIn 1.05s var(--ease) forwards;
}

.hero [data-hero="1"] { animation-delay: 0.18s; }
.hero [data-hero="2"] { animation-delay: 0.34s; }
.hero [data-hero="3"] { animation-delay: 0.5s; }
.hero [data-hero="4"] { animation-delay: 0.66s; }

@keyframes heroIn {
  to { opacity: 1; transform: none; }
}

/* Hero image curtain */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transform: scale(1.1);
  animation: heroZoom 2.4s var(--ease) 0.1s forwards;
}

@keyframes heroZoom {
  to { transform: scale(1); }
}

/* ---------- Subtle image parallax ---------- */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ---------- Marquee hover ---------- */
.marquee__track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }