/* ═══════════════════════════════════════════════════════════════════════
   PerpetualShare — Premium FX Layer
   Shared cinematic design system: glass, glow, reveal, motion.
   Namespaced with --px-* / .px-* so it never collides with page tokens.
   Load AFTER the page's own stylesheet.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Accents — warm champagne core, cool violet counterpoint for depth */
  --px-accent: #f2cca4;
  --px-accent-soft: #cba883;
  --px-accent-deep: #c48644;
  --px-neon: #ffd9a8;
  --px-neon-cool: #9d8bff;
  --px-neon-rose: #ff9db1;

  /* Glass */
  --px-glass: rgba(255, 255, 255, 0.045);
  --px-glass-strong: rgba(255, 255, 255, 0.07);
  --px-glass-border: rgba(242, 204, 164, 0.14);
  --px-glass-border-hi: rgba(242, 204, 164, 0.34);
  --px-blur: 22px;

  /* Shape */
  --px-r-sm: 14px;
  --px-r: 18px;
  --px-r-lg: 24px;
  --px-r-xl: 32px;

  /* Elevation — soft, layered, never harsh */
  --px-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.22);
  --px-shadow-2: 0 12px 32px rgba(0, 0, 0, 0.34);
  --px-shadow-3: 0 28px 68px rgba(0, 0, 0, 0.46);
  --px-shadow-glow: 0 0 48px rgba(242, 204, 164, 0.16);

  /* Motion */
  --px-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --px-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --px-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --px-fast: 220ms;
  --px-mid: 480ms;
  --px-slow: 900ms;
}

/* ─────────────────────────────────────────────────────────────
   Cursor glow — a soft light that follows the pointer
   Desktop / fine-pointer only. Pure transform, GPU-composited.
   ───────────────────────────────────────────────────────────── */
.px-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8000;
  opacity: 0;
  background: radial-gradient(circle closest-side,
      rgba(242, 204, 164, 0.10) 0%,
      rgba(242, 204, 164, 0.045) 35%,
      rgba(157, 139, 255, 0.022) 62%,
      transparent 78%);
  transition: opacity 600ms var(--px-ease-soft);
  will-change: transform;
  mix-blend-mode: screen;
}

.px-cursor-glow.px-on { opacity: 1; }

/* Small bright core dot — tracks 1:1, glow lags behind it */
.px-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8001;
  opacity: 0;
  background: var(--px-accent);
  box-shadow: 0 0 14px rgba(242, 204, 164, 0.85);
  transition: opacity 400ms var(--px-ease-soft),
              width 260ms var(--px-spring),
              height 260ms var(--px-spring),
              margin 260ms var(--px-spring),
              background 260ms var(--px-ease-soft);
  will-change: transform;
}

.px-cursor-dot.px-on { opacity: 0.9; }

/* Expands over interactive targets */
.px-cursor-dot.px-hot {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  background: rgba(242, 204, 164, 0.16);
  box-shadow: 0 0 24px rgba(242, 204, 164, 0.35),
              inset 0 0 0 1px rgba(242, 204, 164, 0.55);
}

/* ─────────────────────────────────────────────────────────────
   Scroll progress — hairline at the top of the viewport
   ───────────────────────────────────────────────────────────── */
.px-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 9500;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg,
      rgba(242, 204, 164, 0) 0%,
      var(--px-accent) 45%,
      var(--px-neon-rose) 100%);
  box-shadow: 0 0 12px rgba(242, 204, 164, 0.45);
  will-change: transform;
}

/* ─────────────────────────────────────────────────────────────
   Page transition — fade the document in, veil it out on nav
   ───────────────────────────────────────────────────────────── */
.px-veil {
  position: fixed;
  inset: 0;
  z-index: 9600;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, #14100d 0%, #060406 100%);
  transition: opacity 420ms var(--px-ease-soft);
}

.px-veil.px-on {
  opacity: 1;
}

/* Opacity only — a transform on <body> would become the containing block
   for every position:fixed descendant and detach the nav mid-animation. */
body {
  animation: pxPageIn 620ms var(--px-ease-soft) both;
}

@keyframes pxPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   Scroll reveal — sections fade + rise into view
   Variants via data-reveal="up|left|right|scale|blur"
   ───────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--px-slow) var(--px-ease),
    transform var(--px-slow) var(--px-ease),
    filter var(--px-slow) var(--px-ease);
  transition-delay: var(--px-delay, 0ms);
}

[data-reveal="up"],
[data-reveal=""]      { transform: translate3d(0, 34px, 0); }
[data-reveal="left"]  { transform: translate3d(-38px, 0, 0); }
[data-reveal="right"] { transform: translate3d(38px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="blur"]  { transform: translate3d(0, 22px, 0); filter: blur(9px); }

[data-reveal].px-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Children stagger automatically inside a [data-stagger] parent */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  will-change: opacity, transform;
  transition:
    opacity 760ms var(--px-ease),
    transform 760ms var(--px-ease);
}

[data-stagger].px-in > * {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────────────────────
   Character / word reveal for headlines
   ───────────────────────────────────────────────────────────── */
.px-split-line {
  display: block;
  overflow: hidden;
}

.px-char,
.px-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.7em, 0) rotate(2deg);
  will-change: opacity, transform;
  transition:
    opacity 620ms var(--px-ease),
    transform 780ms var(--px-ease);
}

.px-split.px-in .px-char,
.px-split.px-in .px-word {
  opacity: 1;
  transform: none;
}

/* Preserve spaces inside split text */
.px-char--space { white-space: pre; }

/* ─────────────────────────────────────────────────────────────
   Glass panels
   ───────────────────────────────────────────────────────────── */
.px-glass {
  position: relative;
  background: linear-gradient(155deg,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0.018) 48%,
      rgba(255, 255, 255, 0.035) 100%);
  backdrop-filter: blur(var(--px-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--px-blur)) saturate(1.25);
  border: 1px solid var(--px-glass-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--px-shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Top sheen line shared by premium surfaces */
.px-sheen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(to right,
      transparent,
      rgba(242, 204, 164, 0.42),
      transparent);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   Card lift + pointer-tracked spotlight
   JS writes --px-mx / --px-my (0–100%) on hover.
   ───────────────────────────────────────────────────────────── */
.px-lift {
  transition:
    transform var(--px-mid) var(--px-ease),
    box-shadow var(--px-mid) var(--px-ease),
    border-color var(--px-mid) var(--px-ease);
  will-change: transform;
}

.px-lift:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--px-shadow-3), var(--px-shadow-glow);
  border-color: var(--px-glass-border-hi);
}

.px-spotlight {
  position: relative;
  isolation: isolate;
}

.px-spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  background: radial-gradient(420px circle at var(--px-mx, 50%) var(--px-my, 50%),
      rgba(242, 204, 164, 0.13),
      rgba(242, 204, 164, 0.05) 38%,
      transparent 66%);
  transition: opacity var(--px-mid) var(--px-ease-soft);
}

.px-spotlight:hover::after { opacity: 1; }

/* Card contents must sit above the spotlight wash */
.px-spotlight > * { position: relative; z-index: 2; }

/* 3D tilt — JS sets --px-rx / --px-ry */
.px-tilt {
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--px-rx, 0deg))
    rotateY(var(--px-ry, 0deg))
    translate3d(0, var(--px-ty, 0px), 0);
  transition: transform var(--px-mid) var(--px-ease), box-shadow var(--px-mid) var(--px-ease);
  will-change: transform;
}

.px-tilt.px-tilting {
  transition: transform 90ms linear, box-shadow var(--px-mid) var(--px-ease);
}

/* ─────────────────────────────────────────────────────────────
   Animated conic border — premium accent for featured surfaces
   ───────────────────────────────────────────────────────────── */
@property --px-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.px-border-glow {
  position: relative;
}

.px-border-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--px-angle),
      transparent 0deg,
      rgba(242, 204, 164, 0.65) 40deg,
      rgba(255, 157, 177, 0.45) 70deg,
      transparent 130deg,
      transparent 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: pxSpinBorder 7s linear infinite;
  pointer-events: none;
  opacity: 0.75;
}

@keyframes pxSpinBorder {
  to { --px-angle: 360deg; }
}

/* ─────────────────────────────────────────────────────────────
   Magnetic buttons + light sweep
   JS sets --px-magx / --px-magy in px.
   ───────────────────────────────────────────────────────────── */
.px-magnetic {
  position: relative;
  overflow: hidden;
  transform: translate3d(var(--px-magx, 0px), var(--px-magy, 0px), 0);
  transition: transform 400ms var(--px-spring), box-shadow var(--px-mid) var(--px-ease);
  will-change: transform;
}

.px-magnetic.px-pulling {
  transition: transform 120ms var(--px-ease-soft), box-shadow var(--px-mid) var(--px-ease);
}

.px-magnetic::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(105deg,
      transparent,
      rgba(255, 255, 255, 0.34),
      transparent);
  transform: skewX(-18deg);
  opacity: 0;
}

.px-magnetic:hover::after {
  animation: pxSweep 850ms var(--px-ease-soft);
}

@keyframes pxSweep {
  0%   { left: -60%; opacity: 0; }
  22%  { opacity: 0.85; }
  100% { left: 130%; opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   Gradient / shimmering text
   ───────────────────────────────────────────────────────────── */
.px-gradient-text {
  background: linear-gradient(100deg,
      #f7f2ed 0%,
      var(--px-accent) 28%,
      #ffeacd 46%,
      var(--px-accent) 62%,
      #d9b48d 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pxTextFlow 11s ease-in-out infinite alternate;
}

@keyframes pxTextFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ─────────────────────────────────────────────────────────────
   Ambient background: slow-drifting aurora blobs + fine grid
   Attach .px-ambient to a fixed/absolute layer behind content.
   ───────────────────────────────────────────────────────────── */
.px-ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.px-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}

.px-blob--a {
  width: 46vw; height: 46vw;
  min-width: 340px; min-height: 340px;
  top: -12%; left: -10%;
  background: radial-gradient(circle, rgba(242, 204, 164, 0.20), transparent 66%);
  animation: pxBlobA 26s var(--px-ease-soft) infinite alternate;
}

.px-blob--b {
  width: 38vw; height: 38vw;
  min-width: 280px; min-height: 280px;
  top: 22%; right: -12%;
  background: radial-gradient(circle, rgba(157, 139, 255, 0.13), transparent 66%);
  animation: pxBlobB 32s var(--px-ease-soft) infinite alternate;
}

.px-blob--c {
  width: 42vw; height: 42vw;
  min-width: 300px; min-height: 300px;
  bottom: -14%; left: 18%;
  background: radial-gradient(circle, rgba(255, 157, 177, 0.11), transparent 66%);
  animation: pxBlobC 29s var(--px-ease-soft) infinite alternate;
}

@keyframes pxBlobA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vw, 6vh, 0) scale(1.16); }
}
@keyframes pxBlobB {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-7vw, 9vh, 0) scale(0.92); }
}
@keyframes pxBlobC {
  from { transform: translate3d(0, 0, 0) scale(0.96); }
  to   { transform: translate3d(6vw, -8vh, 0) scale(1.12); }
}

/* Blueprint grid — barely-there structure under the light */
.px-grid-layer {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(242, 204, 164, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 204, 164, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 38%, #000 12%, transparent 76%);
  opacity: 0.6;
  animation: pxGridDrift 44s linear infinite;
}

@keyframes pxGridDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(72px, 72px, 0); }
}

/* ─────────────────────────────────────────────────────────────
   Floating geometry — thin outlined shapes drifting in depth
   ───────────────────────────────────────────────────────────── */
.px-shape {
  position: absolute;
  border: 1px solid rgba(242, 204, 164, 0.16);
  pointer-events: none;
  opacity: 0.5;
  will-change: transform;
}

.px-shape--ring   { border-radius: 50%; }
.px-shape--square { border-radius: 6px; }
.px-shape--pill   { border-radius: 999px; }

.px-float   { animation: pxFloat 9s var(--px-ease-soft) infinite alternate; }
.px-float-s { animation: pxFloat 6.5s var(--px-ease-soft) infinite alternate; }
.px-float-l { animation: pxFloat 13s var(--px-ease-soft) infinite alternate; }

@keyframes pxFloat {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(0, -18px, 0) rotate(8deg); }
}

/* ─────────────────────────────────────────────────────────────
   Parallax — JS writes --px-py from scroll position
   ───────────────────────────────────────────────────────────── */
[data-parallax] {
  transform: translate3d(0, var(--px-py, 0px), 0);
  will-change: transform;
}

[data-parallax-scale] {
  transform: scale(var(--px-ps, 1));
  will-change: transform;
}

/* Mouse-driven depth — JS writes --px-dx / --px-dy */
[data-depth] {
  transform: translate3d(var(--px-dx, 0px), var(--px-dy, 0px), 0);
  transition: transform 700ms var(--px-ease-soft);
  will-change: transform;
}

/* ─────────────────────────────────────────────────────────────
   Loading states
   ───────────────────────────────────────────────────────────── */
.px-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
  border-radius: var(--px-r-sm);
}

.px-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
      transparent,
      rgba(242, 204, 164, 0.10),
      transparent);
  animation: pxShimmer 1.5s infinite;
}

@keyframes pxShimmer {
  to { transform: translateX(100%); }
}

.px-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(242, 204, 164, 0.16);
  border-top-color: var(--px-accent);
  animation: pxSpin 780ms linear infinite;
}

@keyframes pxSpin { to { transform: rotate(360deg); } }

/* Images fade up as they decode */
img.px-lazy {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 800ms var(--px-ease), transform 1100ms var(--px-ease);
}

img.px-lazy.px-loaded {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────────────────────
   Count-up numerals — tabular so digits don't jitter
   ───────────────────────────────────────────────────────────── */
[data-count] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ─────────────────────────────────────────────────────────────
   Accessibility — styles.css disables outlines globally, so
   restore a visible, on-brand focus ring for keyboard users.
   ───────────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(242, 204, 164, 0.85) !important;
  outline-offset: 3px;
  border-radius: 6px;
}

.px-skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 9999;
  background: var(--px-accent);
  color: #17110a;
  font: 600 0.8rem/1 'Outfit', system-ui, sans-serif;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  transition: transform 260ms var(--px-ease);
}

.px-skip-link:focus-visible { transform: translate(-50%, 0); }

/* ─────────────────────────────────────────────────────────────
   Scrollbar
   ───────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(242, 204, 164, 0.28) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(242, 204, 164, 0.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(242, 204, 164, 0.42); background-clip: content-box; }

/* ─────────────────────────────────────────────────────────────
   Reduced motion — everything decorative stops, nothing hides.
   Reveal targets are forced visible so content is never lost.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-stagger] > *,
  .px-char,
  .px-word,
  img.px-lazy {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .px-cursor-glow,
  .px-cursor-dot,
  .px-blob,
  .px-shape,
  .px-grid-layer {
    display: none !important;
  }

  .px-border-glow::before { animation: none; opacity: 0.4; }
}

/* Coarse pointers get no cursor chrome and no tilt */
@media (pointer: coarse), (hover: none) {
  .px-cursor-glow,
  .px-cursor-dot { display: none !important; }
  .px-tilt { transform: none !important; }
}