/* ============================================================
   LUXORER — Animations & Extra Styling
   Attach this AFTER your main styles, e.g.:
   <link rel="stylesheet" href="luxorer.css">
   <link rel="stylesheet" href="luxorer-animations.css">

   Some effects need the small JS snippet at the bottom of this
   file's comment block (scroll-reveal). Copy that into your
   existing <script> tag if you want scroll-reveal to work.
   ============================================================ */

/* ---------- 1. Scroll reveal ----------
   Add class="reveal" to any element (section headers, cards,
   atelier copy, etc). It starts hidden + shifted down, then
   fades/rises into place when it enters the viewport.
   Requires the JS snippet at the bottom of this file. */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.18s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.31s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.44s; }

/* ---------- 2. Gold shimmer sweep ----------
   Add class="shimmer" to headings or labels you want to catch
   light, e.g. the hero <em> or a section eyebrow. */
.shimmer{
  position:relative;
  background:linear-gradient(
    100deg,
    currentColor 35%,
    #fff4d6 50%,
    currentColor 65%
  );
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shimmerSweep 5.5s ease-in-out infinite;
}
@keyframes shimmerSweep{
  0%{ background-position:120% 0; }
  50%{ background-position:-20% 0; }
  100%{ background-position:120% 0; }
}

/* ---------- 3. Button shine on hover ----------
   Works on .btn, .nav-cta — no markup change needed, just
   make sure the element has position:relative + overflow:hidden
   (added here automatically via this rule). */
.btn, .nav-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before, .nav-cta::before{
  content:"";
  position:absolute;
  top:0; left:-130%;
  width:60%; height:100%;
  background:linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  transform:skewX(-20deg);
  transition:left .65s ease;
  z-index:1;
  pointer-events:none;
}
.btn:hover::before, .nav-cta:hover::before{ left:130%; }

/* ---------- 4. Image reveal mask ----------
   Add class="img-reveal" to any .frame / .visual wrapper that
   contains an <img> or background photo. On load it wipes open
   from center; on hover the photo breathes with a slow zoom. */
.img-reveal{
  position:relative;
}
.img-reveal::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ink);
  transform-origin:center;
  animation:wipeReveal 1.1s .15s cubic-bezier(.77,0,.18,1) forwards;
  z-index:2;
  pointer-events:none;
}
@keyframes wipeReveal{
  from{ transform:scaleX(1); }
  to{ transform:scaleX(0); }
}
.img-reveal img{
  animation:photoSettle 1.3s ease both;
}
@keyframes photoSettle{
  from{ transform:scale(1.15); filter:brightness(0.7); }
  to{ transform:scale(1); filter:brightness(1); }
}

/* ---------- 5. Floating chain links ----------
   Gives the .chain-link dots from the main stylesheet a slow,
   ambient drift so the page's spine feels alive, not static. */
.chain-link{
  animation:driftLink 6s ease-in-out infinite;
}
.chain-link:nth-of-type(odd){ animation-duration:7.5s; }
.chain-link:nth-of-type(even){ animation-direction:reverse; }
@keyframes driftLink{
  0%,100%{ transform:translate(-50%, 0) scale(1); opacity:0.7; }
  50%{ transform:translate(-50%, 6px) scale(1.25); opacity:1; }
}

/* ---------- 6. Eyebrow underline draw ----------
   Add class="line-draw" next to any .eyebrow to grow a thin
   gold rule beneath it once it scrolls into view (pairs well
   with .reveal on the same element). */
.line-draw{
  display:inline-block;
  position:relative;
  padding-bottom:10px;
}
.line-draw::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:1px;
  width:0;
  background:var(--gold);
  transition:width 1s cubic-bezier(.16,1,.3,1) .2s;
}
.line-draw.in-view::after{ width:48px; }

/* ---------- 7. Hero text entrance polish ----------
   Slightly richer version of the existing hero "rise" keyframes
   — adds a soft blur-in so the headline feels like it's
   resolving into focus rather than just sliding up. */
.hero h1{
  animation-name:riseBlur !important;
}
.hero .eyebrow, .hero p.tag, .hero .cta-row{
  animation-name:riseBlur !important;
}
@keyframes riseBlur{
  from{ opacity:0; transform:translateY(18px); filter:blur(6px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}

/* ---------- 8. Card lift on hover ----------
   Adds a touch of depth to .piece cards beyond the existing
   background change — a gentle lift + shadow. */
.piece{
  transition:background .4s ease, transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.piece:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px -20px rgba(0,0,0,0.6);
}

/* ---------- 9. Reduced motion ----------
   Respect user preference — overrides everything above. */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .shimmer{ animation:none !important; }
  .btn::before, .nav-cta::before{ display:none !important; }
  .img-reveal::after{ display:none !important; }
  .img-reveal img{ animation:none !important; }
  .chain-link{ animation:none !important; }
  .line-draw::after{ transition:none !important; width:48px !important; }
  .hero h1, .hero .eyebrow, .hero p.tag, .hero .cta-row{ animation:none !important; opacity:1 !important; }
  .piece{ transition:background .3s ease; }
}

/* ============================================================
   Optional JS for #1 (scroll reveal) — paste inside your
   existing <script> tag at the bottom of the HTML file:

   const revealEls = document.querySelectorAll('.reveal, .reveal-stagger, .line-draw');
   const revealObserver = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         entry.target.classList.add('in-view');
         revealObserver.unobserve(entry.target);
       }
     });
   }, { threshold: 0.2 });
   revealEls.forEach(el => revealObserver.observe(el));

   Then add class="reveal" (or "reveal-stagger" on a parent like
   .collections, .promise) to the elements you want animated in.
   ============================================================ */