/* ============================================================
   Pinter — Luxury Animation Layer
   Four systems: scroll reveal · button shimmer · sparkles · 3D ring
   Pure CSS + vanilla JS (IntersectionObserver).
   Respects prefers-reduced-motion throughout.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. SCROLL REVEAL — fade-up + subtle scale
   ─────────────────────────────────────────────────────────────
   Apply .anim-reveal to any card or section wrapper.
   JS (pinter-animations.js) adds .is-visible on viewport entry.
   Stagger siblings with data-delay="1..5".
───────────────────────────────────────────────────────────── */

.anim-reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.984);
  transition:
    opacity   0.9s cubic-bezier(0.22, 0.00, 0.08, 1.00),
    transform 0.9s cubic-bezier(0.22, 0.00, 0.08, 1.00);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.anim-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger shorthands */
.anim-reveal[data-delay="1"] { --reveal-delay:  80ms; }
.anim-reveal[data-delay="2"] { --reveal-delay: 160ms; }
.anim-reveal[data-delay="3"] { --reveal-delay: 240ms; }
.anim-reveal[data-delay="4"] { --reveal-delay: 320ms; }
.anim-reveal[data-delay="5"] { --reveal-delay: 400ms; }


/* ─────────────────────────────────────────────────────────────
   2. CTA BUTTON SHIMMER — diagonal gold sweep on hover
   ─────────────────────────────────────────────────────────────
   A semi-transparent gold gradient sweeps left→right in 0.55 s.
   Applied via ::before on every .btn-pill-* variant, plus the
   utility class .btn-shimmer for any custom CTA.
───────────────────────────────────────────────────────────── */

.btn-pill-dark,
.btn-pill-magenta,
.btn-pill-ghost,
.btn-shimmer {
  overflow: hidden !important;
  position: relative !important;
}

.btn-pill-dark::before,
.btn-pill-magenta::before,
.btn-pill-ghost::before,
.btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    108deg,
    transparent                    0%,
    rgba(212, 176, 122, 0.40)     50%,
    transparent                   100%
  );
  transform: translateX(-140%) skewX(-10deg);
  pointer-events: none;
  /* No z-index — pseudo renders below flex content in tree order */
}

.btn-pill-dark:hover::before,
.btn-pill-magenta:hover::before,
.btn-pill-ghost:hover::before,
.btn-shimmer:hover::before {
  animation: goldShimmerSweep 0.55s cubic-bezier(0.25, 0, 0.30, 1) forwards;
}

@keyframes goldShimmerSweep {
  from { transform: translateX(-140%) skewX(-10deg); }
  to   { transform: translateX(250%)  skewX(-10deg); }
}


/* ─────────────────────────────────────────────────────────────
   3. HERO SPARKLE PARTICLES
   ─────────────────────────────────────────────────────────────
   pinter-animations.js injects a .sparkle-field div into every
   .page-hero element (subpages). The field contains 8 .sparkle
   dots that drift upward, fade in/out, with CSS variables for
   position, size, timing, and peak opacity.
───────────────────────────────────────────────────────────── */

.sparkle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.sparkle {
  position: absolute;
  width:  var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  background: var(--color-brand-gold, #B8965A);
  opacity: 0;
  animation: sparkleDrift var(--dur, 9s) var(--delay, 0s) ease-in-out infinite;
  will-change: transform, opacity;
}

/* Soft radial glow halo behind each dot */
.sparkle::before {
  content: '';
  position: absolute;
  inset: -160%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 150, 90, 0.55) 0%, transparent 60%);
  pointer-events: none;
}

/* Star variant — 4-pointed cross-hatch */
.sparkle.star {
  border-radius: 1px;
  transform-origin: center;
}
.sparkle.star::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  transform: rotate(45deg);
}

@keyframes sparkleDrift {
  0%   {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }
  18%  {
    opacity: var(--peak-op, 0.55);
  }
  52%  {
    opacity: calc(var(--peak-op, 0.55) * 0.50);
    transform: translate(var(--tx,   8px), -30px) scale(1.10);
  }
  85%  {
    opacity: calc(var(--peak-op, 0.55) * 0.10);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx2, -5px), -60px) scale(0.75);
  }
}


/* ─────────────────────────────────────────────────────────────
   4. 3D ROTATING GOLD RING
   ─────────────────────────────────────────────────────────────
   .ring-stage  — outer wrapper (position context + glow)
   .ring-perspective — CSS perspective container
   .ring-orbit  — rotates on Y axis (+ fixed X tilt so the ring
                  never collapses to a flat hairline)
   .ring-band   — the visible ring: thick border-radius:50% div
                  with directional border colours, inset shadows,
                  and a top-face highlight via ::before
   .ring-glow   — ambient floor glow beneath the ring
   .ring-label  — micro-uppercase caption below stage
───────────────────────────────────────────────────────────── */

.ring-stage {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 210px;
  gap: 0;
}

.ring-perspective {
  perspective: 560px;
  perspective-origin: 50% 38%;
  flex-shrink: 0;
}

.ring-orbit {
  width: 148px;
  height: 148px;
  transform-style: preserve-3d;
  animation: ringRotateY 7s linear infinite;
}

@keyframes ringRotateY {
  from { transform: rotateX(22deg) rotateY(  0deg); }
  to   { transform: rotateX(22deg) rotateY(360deg); }
}

/* The band itself */
.ring-band {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border-style: solid;
  border-width: 18px;
  /* Directional light: top-left source → bright top, dark bottom-right */
  border-top-color:    #ECD57A;   /* direct highlight */
  border-left-color:   #C8A460;   /* mid-light        */
  border-right-color:  #A07838;   /* mid-shadow       */
  border-bottom-color: #7A5220;   /* deep shadow      */
  position: relative;
  box-shadow:
    /* concave inner-face depth */
    inset  0  8px 20px rgba(220, 176,  90, 0.42),
    inset  0 -8px 20px rgba( 45,  22,   4, 0.42),
    /* outer ambient halo */
    0  0  28px rgba(184, 150, 90, 0.15),
    0 18px 48px rgba(140, 100, 40, 0.14);
}

/* Top-face highlight — bright arc on the nearest surface edge */
.ring-band::before {
  content: '';
  position: absolute;
  top:  -18px;
  left: 14%;
  width: 72%;
  height: 18px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(
    to right,
    transparent                    0%,
    rgba(255, 248, 208, 0.70)     22%,
    rgba(255, 255, 235, 0.96)     50%,
    rgba(255, 248, 208, 0.70)     78%,
    transparent                   100%
  );
  pointer-events: none;
}

/* Inner-hollow rim shadow */
.ring-band::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0  0  16px rgba(35, 18, 4, 0.28),
    inset 0  8px 22px rgba(200, 155, 70, 0.16);
  pointer-events: none;
}

/* Ambient floor glow */
.ring-glow {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 30px;
  background: radial-gradient(
    ellipse at center,
    rgba(184, 150, 90, 0.40) 0%,
    transparent 70%
  );
  filter: blur(10px);
  pointer-events: none;
  animation: ringGlowBreath 3.5s ease-in-out infinite alternate;
}

@keyframes ringGlowBreath {
  from { opacity: 0.50; transform: translateX(-50%) scaleX(0.80); }
  to   { opacity: 1.00; transform: translateX(-50%) scaleX(1.20); }
}

/* Engraving label */
.ring-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--color-brand-gold, #B8965A);
  opacity: 0.65;
  white-space: nowrap;
  margin-top: 10px;
  font-family: var(--font-sans, sans-serif);
}

/* ─── News hero grid (text + ring two-column) ─── */
.news-hero-ring-grid {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 48px;
  align-items: center;
}

@media (max-width: 820px) {
  .news-hero-ring-grid {
    grid-template-columns: 1fr;
  }
  .news-hero-ring-grid .ring-stage {
    display: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   5. PAGE HERO TITLE — letter-by-letter fade-up
   JS in PageHero (_shell.jsx) wraps each character with .hero-letter.
   Mirrors the SplitWord animation on the homepage.
───────────────────────────────────────────────────────────── */

.hero-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  animation: heroLetterFadeUp 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: opacity, transform;
}

@keyframes heroLetterFadeUp {
  to { opacity: 1; transform: translateY(0); }
}


/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION — show final states, kill all running anims
───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  .anim-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .sparkle {
    animation: none !important;
    opacity: 0 !important;
  }

  .ring-orbit {
    animation: none !important;
    /* Park at a flattering angle instead of vanishing */
    transform: rotateX(22deg) rotateY(-25deg) !important;
  }

  .ring-glow {
    animation: none !important;
    opacity: 0.6 !important;
  }

  .btn-pill-dark::before,
  .btn-pill-magenta::before,
  .btn-pill-ghost::before,
  .btn-shimmer::before {
    display: none !important;
  }

}