/* ============================================================
   AMYZA — Maya-level motion layer (anim.css)
   Loaded AFTER style.css / pages.css. Adds cinematic reveals,
   clip-path image curtains, line-mask text, parallax, 3D depth.
   Driven by anim.js via data-attributes + .is-in classes.
   ============================================================ */

/* honor reduced motion: neutralize everything */
@media (prefers-reduced-motion: reduce) {
  [data-reveal-img] .ri-inner,
  [data-split] .line-inner,
  [data-rise],
  [data-parallax],
  .fan-grid > * { transition: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
}

/* ------------------------------------------------------------
   1) CLIP-PATH IMAGE CURTAIN + SCALE ZOOM-OUT REVEAL
   markup: <div data-reveal-img><div class="ri-inner">…bg…</div></div>
   ------------------------------------------------------------ */
[data-reveal-img] {
  position: relative;
  overflow: hidden;
}
[data-reveal-img] .ri-inner {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.25);
  transition:
    clip-path 1.25s cubic-bezier(.16, 1, .3, 1),
    transform 1.6s cubic-bezier(.16, 1, .3, 1);
  will-change: clip-path, transform;
}
[data-reveal-img].is-in .ri-inner {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* directional variants */
[data-reveal-img="left"] .ri-inner { clip-path: inset(0 100% 0 0); }
[data-reveal-img="left"].is-in .ri-inner { clip-path: inset(0 0 0 0); }
[data-reveal-img="right"] .ri-inner { clip-path: inset(0 0 0 100%); }
[data-reveal-img="right"].is-in .ri-inner { clip-path: inset(0 0 0 0); }

/* ------------------------------------------------------------
   2) LINE / WORD MASK TEXT REVEAL
   anim.js wraps each line in <span class="line"><span class="line-inner">…
   ------------------------------------------------------------ */
[data-split] .line {
  display: block;
  overflow: hidden;
}
[data-split] .line-inner {
  display: block;
  transform: translateY(110%) rotate(2deg);
  opacity: 0;
  transition:
    transform 1s cubic-bezier(.16, 1, .3, 1),
    opacity 1s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}
[data-split].is-in .line-inner {
  transform: translateY(0) rotate(0);
  opacity: 1;
}
/* per-line stagger */
[data-split].is-in .line:nth-child(1) .line-inner { transition-delay: .04s; }
[data-split].is-in .line:nth-child(2) .line-inner { transition-delay: .12s; }
[data-split].is-in .line:nth-child(3) .line-inner { transition-delay: .20s; }
[data-split].is-in .line:nth-child(4) .line-inner { transition-delay: .28s; }
[data-split].is-in .line:nth-child(5) .line-inner { transition-delay: .36s; }
[data-split].is-in .line:nth-child(6) .line-inner { transition-delay: .44s; }
[data-split].is-in .line:nth-child(7) .line-inner { transition-delay: .52s; }

/* word-level variant */
[data-split="word"] .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
[data-split="word"] .word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .9s cubic-bezier(.16,1,.3,1);
}
[data-split="word"].is-in .word-inner { transform: translateY(0); opacity: 1; }

/* ------------------------------------------------------------
   3) RISE / FADE (bolder than the old reveal-up)
   ------------------------------------------------------------ */
[data-rise] {
  opacity: 0;
  transform: translateY(64px);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}
[data-rise].is-in { opacity: 1; transform: none; }
[data-rise="scale"] { transform: translateY(40px) scale(.9); }
[data-rise="left"]  { transform: translateX(-70px); }
[data-rise="right"] { transform: translateX(70px); }
[data-rise].is-in { transform: none; }
/* stagger via inline --d set by anim.js */
[data-rise] { transition-delay: var(--d, 0s); }

/* ------------------------------------------------------------
   4) PARALLAX — anim.js writes --py (px) each frame
   ------------------------------------------------------------ */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0);
}

/* ------------------------------------------------------------
   5) 3D CARD FAN-IN (Maya trendingProduct)
   markup: <div class="fan-grid">…cards…</div>
   ------------------------------------------------------------ */
.fan-grid { perspective: 1400px; }
.fan-grid > * {
  opacity: 0;
  transform: perspective(1400px) translateY(60px) rotateY(35deg) scale(.86);
  transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  transform-origin: center center;
  will-change: transform, opacity;
}
.fan-grid.is-in > * { opacity: 1; transform: perspective(1400px) translateY(0) rotateY(0) scale(1); }
.fan-grid.is-in > *:nth-child(1) { transition-delay: .00s; }
.fan-grid.is-in > *:nth-child(2) { transition-delay: .10s; }
.fan-grid.is-in > *:nth-child(3) { transition-delay: .20s; }
.fan-grid.is-in > *:nth-child(4) { transition-delay: .30s; }
.fan-grid.is-in > *:nth-child(5) { transition-delay: .40s; }
.fan-grid.is-in > *:nth-child(6) { transition-delay: .50s; }

/* ------------------------------------------------------------
   6) MARQUEE (reusable, anim.js can add drift)
   ------------------------------------------------------------ */
.amz-marquee {
  overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.amz-marquee .amz-track {
  display: inline-flex; gap: 2.5rem; align-items: center;
  animation: amz-scroll 28s linear infinite;
  will-change: transform;
}
.amz-marquee.fast .amz-track { animation-duration: 16s; }
.amz-marquee .amz-track span {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.6rem, 4vw, 3rem); color: var(--blush); opacity: .85;
}
.amz-marquee .amz-track span::after { content: '✦'; margin-left: 2.5rem; color: rgba(234,172,201,.45); font-style: normal; }
@keyframes amz-scroll { to { transform: translate3d(-50%, 0, 0); } }

/* ------------------------------------------------------------
   7) PINNED MEDIA EXPAND (Maya videoWithTextOverlay)
   markup: section[data-pin-expand] > .pe-media
   anim.js sets --pe (0..1) progress; we map it via calc
   ------------------------------------------------------------ */
[data-pin-expand] { position: relative; }
[data-pin-expand] .pe-media {
  width: calc(58% + 42% * var(--pe, 0));
  height: calc(62vh + 38vh * var(--pe, 0));
  margin: 0 auto;
  border-radius: calc(20px * (1 - var(--pe, 0)));
  overflow: hidden;
  will-change: width, height, border-radius;
}

/* ------------------------------------------------------------
   8) ENHANCED HOVER — image zoom inside fixed frame
   ------------------------------------------------------------ */
.zoom-frame { overflow: hidden; }
.zoom-frame .zoom-bg {
  position: absolute; inset: 0;
  transition: transform 1s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.zoom-frame:hover .zoom-bg,
a:hover .zoom-frame .zoom-bg { transform: scale(1.08); }

/* button sweep fill (Maya button-animated) */
.btn.sweep { position: relative; overflow: hidden; z-index: 0; }
.btn.sweep::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--plum-deep);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.btn.sweep:hover::after { transform: scaleX(1); }
.btn.sweep:hover { color: var(--porcelain) !important; }

/* ------------------------------------------------------------
   9) custom cursor upgrade — blend + label support
   ------------------------------------------------------------ */
body.cursor-hover .cursor-ring { width: 64px; height: 64px; border-color: var(--plum); background: rgba(115,17,87,.04); }

/* scroll hint pulse */
@keyframes amz-bob { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(8px); opacity: 1; } }
.amz-bob { animation: amz-bob 1.8s ease-in-out infinite; }

/* ------------------------------------------------------------
   10) PROJECT GLUE — sizing for reveal-img wrappers + about page
   .ri-inner is absolutely positioned, so wrappers need explicit size.
   ------------------------------------------------------------ */
[data-reveal-img] .ri-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Home heritage image reveal — keep the square look */
.heritage-img-reveal {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 560px;
  border-radius: 6px;
}
.heritage-img-reveal .ri-inner { border-radius: 6px; }