/* ═══════════════════════════════════════════════════════════════
   trends-2026.css — the "premium tier" layer (2026-09-25)
   Researched trends applied: film grain, kinetic gold type,
   3D card tilt, magnetic buttons, animated gradient borders,
   ambient gold aurora. All additive.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Film grain overlay (cinematic texture) ────────────────── */
.pv-grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 1500; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: pv-grain-shift 8s steps(10) infinite;
}
@keyframes pv-grain-shift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -6%); }
  20% { transform: translate(-12%, 4%); }
  30% { transform: translate(6%, -14%); }
  40% { transform: translate(-4%, 12%); }
  50% { transform: translate(-12%, 7%); }
  60% { transform: translate(12%, 0%); }
  70% { transform: translate(0%, 12%); }
  80% { transform: translate(3%, 12%); }
  90% { transform: translate(-8%, 4%); }
}

/* ── 2. Kinetic gold headline (mask reveal + sheen) ───────────── */
.pv-kinetic .k-word {
  display: inline-block; overflow: hidden; vertical-align: bottom;
}
.pv-kinetic .k-word > span {
  display: inline-block; transform: translateY(112%);
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
.pv-kinetic.is-in .k-word > span { transform: translateY(0); }
.pv-kinetic .k-word:nth-child(2) > span { transition-delay: .09s; }
.pv-kinetic .k-word:nth-child(3) > span { transition-delay: .18s; }
.pv-kinetic .k-word:nth-child(4) > span { transition-delay: .27s; }

.pv-sheen {
  background: linear-gradient(105deg, #c8a84e 20%, #f7e6b0 38%, #fff8e3 46%, #f7e6b0 54%, #c8a84e 72%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #c8a84e;
  animation: pv-sheen-slide 6.5s ease-in-out infinite;
}
@keyframes pv-sheen-slide {
  0%, 100% { background-position: 130% 0; }
  50% { background-position: -30% 0; }
}

/* ── 3. Ambient gold aurora (visible on phone screens) ────────── */
.pv-aurora {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
.pv-aurora i {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .42;
  will-change: transform;
}
.pv-aurora i:nth-child(1) {
  width: 620px; height: 620px; top: -180px; left: -140px;
  background: radial-gradient(circle, rgba(200, 168, 78, .34), transparent 66%);
  animation: pv-drift-a 26s ease-in-out infinite;
}
.pv-aurora i:nth-child(2) {
  width: 540px; height: 540px; bottom: -160px; right: -120px;
  background: radial-gradient(circle, rgba(200, 168, 78, .26), transparent 64%);
  animation: pv-drift-b 32s ease-in-out infinite;
}
@keyframes pv-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(90px, 70px) scale(1.14); }
}
@keyframes pv-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-110px, -60px) scale(1.1); }
}

/* ── 4. 3D tilt cards (JS sets --rx/--ry) ─────────────────────── */
.pv-tilt {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s;
}
.pv-tilt:hover {
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 46px rgba(200, 168, 78, .22);
}
.pv-tilt .pv-tilt-shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 244, 214, .16), transparent 46%);
  opacity: 0; transition: opacity .45s;
}
.pv-tilt:hover .pv-tilt-shine { opacity: 1; }

/* ── 5. Magnetic buttons (JS offsets toward cursor) ───────────── */
.pv-magnetic {
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s;
  will-change: transform;
}
.pv-magnetic:hover { box-shadow: 0 18px 46px rgba(200, 168, 78, .3); }

/* ── 6. Animated gradient border (hero CTA + agent card) ──────── */
.pv-border-anim {
  position: relative; border: 1px solid transparent;
  background-clip: padding-box;
}
.pv-border-anim::before {
  content: ""; position: absolute; inset: -1.5px; z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--pv-angle, 0deg),
    rgba(200, 168, 78, .0), rgba(200, 168, 78, .75), rgba(240, 215, 140, .25),
    rgba(200, 168, 78, .7), rgba(200, 168, 78, 0));
  animation: pv-rotate-border 7s linear infinite;
}
@keyframes pv-rotate-border {
  to { --pv-angle: 360deg; }
}
@property --pv-angle {
  syntax: "<angle>"; initial-value: 0deg; inherits: false;
}

/* ── 7. Pill badge micro-interactions ─────────────────────────── */
.pv-badge { will-change: transform; }
.pv-badge:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--pv-gold);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 26px var(--pv-glow);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .35s;
}

/* ── 8. Underline draw links (nav + footer) ───────────────────── */
.pv-draw {
  position: relative; text-decoration: none;
}
.pv-draw::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1.5px; background: #c8a84e;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.pv-draw:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── 9. Gallery slides: premium hover (zoom + gold rim) ───────── */
.g-slide { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.g-slide:hover { transform: translateY(-6px); }
.g-slide .g-img { transition: transform .9s cubic-bezier(.16, 1, .3, 1), filter .6s; }
.g-slide:hover .g-img { transform: scale(1.06); filter: saturate(1.12) brightness(1.05); }

/* ── 10. Scroll cue in hero (animated chevron) ────────────────── */
.pv-scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: rgba(236, 238, 245, .68); font-size: .68rem; letter-spacing: .34em;
  text-transform: uppercase; z-index: 5;
}
.pv-scroll-cue .pv-cue-line {
  width: 1.5px; height: 46px;
  background: linear-gradient(180deg, #c8a84e, transparent);
  animation: pv-cue-drop 2.1s ease-in-out infinite;
}
@keyframes pv-cue-drop {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── Reduced motion: kill all of it ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pv-grain, .pv-aurora i, .pv-sheen, .pv-border-anim::before,
  .pv-scroll-cue .pv-cue-line { animation: none !important; }
  .pv-kinetic .k-word > span { transform: none !important; transition: none !important; }
  .pv-tilt, .pv-magnetic, .g-slide, .g-slide .g-img, .pv-badge { transition: none !important; }
  .pv-tilt { transform: none !important; }
}

/* ── Mobile tuning ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .pv-aurora i:nth-child(1) { width: 380px; height: 380px; opacity: .38; }
  .pv-aurora i:nth-child(2) { width: 320px; height: 320px; opacity: .34; }
  .pv-scroll-cue { display: none; }
}