/* =============================================================================
   premium-ui.css — additive premium design layer (Phase 0 foundation)
   -----------------------------------------------------------------------------
   NON-DESTRUCTIVE: loaded AFTER output.css/style.css. Adds design tokens, base
   enhancements, and reusable component classes (prefix `pui-`) without touching
   the existing purged Tailwind build. Safe to remove by unlinking the file.
   Theme-aware (light default, dark via [data-theme="dark"] or system pref).
   ============================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* brand */
  --pui-accent: #0F62FE;
  --pui-accent-2: #8A3FFC;
  --pui-accent-3: #4589FF;
  --pui-accent-grad: linear-gradient(120deg, #0F62FE 0%, #4589FF 45%, #8A3FFC 100%);

  /* surfaces (light) */
  --pui-bg: #f6f7fb;
  --pui-bg-elev: #ffffff;
  --pui-text: #14161c;
  --pui-text-soft: #545967;
  --pui-border: rgba(18, 22, 33, 0.10);

  /* glass */
  --pui-glass-bg: rgba(255, 255, 255, 0.62);
  --pui-glass-brd: rgba(255, 255, 255, 0.7);
  --pui-glass-blur: 16px;

  /* elevation — soft, layered shadows */
  --pui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --pui-shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .10);
  --pui-shadow-lg: 0 8px 24px rgba(16, 24, 40, .10), 0 24px 56px rgba(16, 24, 40, .16);
  --pui-shadow-glow: 0 10px 40px rgba(15, 98, 254, .28);

  /* radii + motion */
  --pui-r-sm: 10px;
  --pui-r-md: 16px;
  --pui-r-lg: 24px;
  --pui-ease: cubic-bezier(.16, 1, .3, 1);
  --pui-ease-out: cubic-bezier(.22, 1, .36, 1);
  --pui-dur: .55s;
}

:root[data-theme="dark"] {
  --pui-bg: #0b0d12;
  --pui-bg-elev: #14171f;
  --pui-text: #eef1f7;
  --pui-text-soft: #9aa2b4;
  --pui-border: rgba(255, 255, 255, 0.10);
  --pui-glass-bg: rgba(20, 23, 31, 0.55);
  --pui-glass-brd: rgba(255, 255, 255, 0.10);
  --pui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --pui-shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
  --pui-shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
  --pui-shadow-glow: 0 10px 44px rgba(69, 137, 255, .35);
}

/* ---------- Base enhancements (layout-safe: no geometry changes) ---------- */
html {
  scroll-behavior: smooth;
  /* Premium ambient gradient painted behind the fixed WebGL canvas so the 3D
     layer shows through page gutters. body is made transparent below. */
  background:
    radial-gradient(1200px 820px at 12% -12%, color-mix(in srgb, var(--pui-accent) 8%, transparent), transparent 58%),
    radial-gradient(1000px 720px at 112% 8%, color-mix(in srgb, var(--pui-accent-2) 7%, transparent), transparent 55%),
    var(--pui-bg);
  background-attachment: fixed;
}
/* Let the fixed #pui-bg3d (z-index:-1) show through; overrides the inline
   `body{background-color:var(--gray-10)}` from meta.php. Section-level
   backgrounds on headers/cards still paint over the 3D where they exist. */
body { background-color: transparent !important; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Refined selection + focus-visible ring (accessibility) */
::selection { background: color-mix(in srgb, var(--pui-accent) 26%, transparent); }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--pui-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Slim modern scrollbar */
@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pui-text-soft) 40%, transparent) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--pui-text-soft) 34%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--pui-text-soft) 55%, transparent); background-clip: content-box; }

/* ---------- Global 3D background canvas host ---------- */
#pui-bg3d {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--pui-ease);
}
#pui-bg3d.pui-ready { opacity: 1; }
/* Dark, content-dense chrome (footer) stays SOLID and above the fixed 3D layer,
   so the newsletter form, links and legal text render crisply with no starfield
   bleed-through. The ambient 3D is meant for the light content zones only. */
footer {
  position: relative;
  z-index: 1;
  background-color: #0f0f0f;   /* matches the footer's bg-[#0f0f0f] */
}

/* Pointer-tracked interactive lighting glow that complements the WebGL layer */
#pui-light {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(600px circle at var(--px, 50%) var(--py, 30%),
              color-mix(in srgb, var(--pui-accent) 12%, transparent), transparent 60%);
  opacity: .0; transition: opacity .6s var(--pui-ease);
}
#pui-light.pui-ready { opacity: 1; }

/* ---------- Reusable components (prefix pui-) ---------- */
.pui-glass {
  background: var(--pui-glass-bg);
  -webkit-backdrop-filter: blur(var(--pui-glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--pui-glass-blur)) saturate(160%);
  border: 1px solid var(--pui-glass-brd);
  border-radius: var(--pui-r-md);
  box-shadow: var(--pui-shadow-md);
}
.pui-card {
  background: var(--pui-bg-elev);
  border: 1px solid var(--pui-border);
  border-radius: var(--pui-r-md);
  box-shadow: var(--pui-shadow-sm);
  transition: transform .4s var(--pui-ease), box-shadow .4s var(--pui-ease), border-color .4s var(--pui-ease);
  will-change: transform;
}
.pui-card:hover { transform: translateY(-4px); box-shadow: var(--pui-shadow-lg); border-color: color-mix(in srgb, var(--pui-accent) 40%, var(--pui-border)); }

.pui-btn {
  --_g: var(--pui-accent-grad);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: var(--pui-r-sm);
  font-weight: 700; color: #fff; background-image: var(--_g); background-size: 160% 160%;
  box-shadow: var(--pui-shadow-glow); border: 0; cursor: pointer;
  transition: transform .25s var(--pui-ease), box-shadow .3s var(--pui-ease), background-position .6s var(--pui-ease);
  will-change: transform;
}
.pui-btn:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 14px 46px rgba(15,98,254,.36); }
.pui-btn:active { transform: translateY(0) scale(.98); }
.pui-btn--ghost {
  color: var(--pui-text); background: transparent; background-image: none;
  border: 1px solid var(--pui-border); box-shadow: none;
}
.pui-btn--ghost:hover { border-color: color-mix(in srgb, var(--pui-accent) 55%, var(--pui-border)); box-shadow: var(--pui-shadow-sm); }

.pui-gradient-text {
  background: var(--pui-accent-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Loading skeleton */
.pui-skeleton {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--pui-text-soft) 14%, transparent);
  border-radius: var(--pui-r-sm);
}
.pui-skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pui-bg-elev) 60%, transparent), transparent);
  animation: pui-shimmer 1.4s infinite;
}
@keyframes pui-shimmer { 100% { transform: translateX(100%); } }

/* ---------- Scroll / reveal primitives (JS-driven, CSS fallbacks) ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); }
[data-reveal].pui-in { opacity: 1; transform: none; transition: opacity .7s var(--pui-ease), transform .7s var(--pui-ease); }

/* Float animation for decorative elements */
@keyframes pui-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.pui-float { animation: pui-float 6s ease-in-out infinite; }

/* =============================================================================
   CSS 3D + advanced motion utilities (transform-only → GPU, 60fps)
   ============================================================================= */

/* Perspective scroll-reveal: settles from a slight 3D tilt to flat */
[data-reveal="3d"] { opacity: 0; transform: perspective(1400px) rotateX(7deg) translateY(28px); transform-origin: 50% 100%; }
[data-reveal="3d"].pui-in { opacity: 1; transform: perspective(1400px) rotateX(0) translateY(0);
  transition: opacity .8s var(--pui-ease), transform .9s var(--pui-ease); }

/* 3D tilt card — JS sets --rx/--ry and glare --mx/--my.
   NOTE: intentionally NO `transform-style:preserve-3d` and NO `mix-blend-mode`
   on the glare — either one, inside an opacity-transitioning ancestor (the
   site's `.reveal`), triggers a browser compositing bug that freezes the
   ancestor's fade-in. The rotateX/Y tilt only needs `perspective()` in the
   transform, so this looks identical without the conflict. */
.pui-tilt { position: relative; transition: transform .5s var(--pui-ease); }
.pui-tilt.pui-tilting { will-change: transform; transition: transform .12s ease-out;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.pui-tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .4s var(--pui-ease); z-index: 3;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.28), transparent 46%); }
.pui-tilt.pui-tilting .pui-tilt-glare { opacity: 1; }

/* Layered depth scene (hero) — JS translates [data-depth-layer] by pointer */
.pui-depth { perspective: 1000px; }
[data-depth-layer] { transition: transform .3s var(--pui-ease); will-change: transform; transform-style: preserve-3d; }

/* 3D flip card */
.pui-flip { perspective: 1400px; }
.pui-flip-inner { position: relative; transform-style: preserve-3d; transition: transform .8s var(--pui-ease); }
.pui-flip:hover .pui-flip-inner, .pui-flip.pui-flipped .pui-flip-inner { transform: rotateY(180deg); }
.pui-flip-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pui-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); }

/* Animated conic gradient border for a featured element */
@property --pui-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pui-glow-border { position: relative; isolation: isolate; }
.pui-glow-border::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--pui-a), var(--pui-accent), var(--pui-accent-2), var(--pui-accent-3), var(--pui-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pui-borderspin 6s linear infinite;
}
@keyframes pui-borderspin { to { --pui-a: 360deg; } }

/* Tactile 3D button press */
.pui-press { transition: transform .14s var(--pui-ease); }
.pui-press:active { transform: perspective(500px) translateZ(-6px) scale(.97); }

/* Heading text reveal (JS wraps words in .pui-word) */
.pui-textreveal .pui-word { display: inline-block; opacity: 0; transform: translateY(0.6em); }
.pui-textreveal.pui-in .pui-word { opacity: 1; transform: none;
  transition: opacity .6s var(--pui-ease), transform .6s var(--pui-ease); }

/* Isometric floating decor (pure CSS 3D) */
.pui-iso { transform-style: preserve-3d; animation: pui-iso 9s ease-in-out infinite; }
@keyframes pui-iso { 0%,100% { transform: rotateX(56deg) rotateZ(-6deg) translateZ(0); }
  50% { transform: rotateX(56deg) rotateZ(6deg) translateZ(16px); } }

/* SVG line-draw (JS sets --pui-len per path) */
[data-draw] :is(path, line, polyline) { stroke-dasharray: var(--pui-len); stroke-dashoffset: var(--pui-len); }
[data-draw].pui-in :is(path, line, polyline) { animation: pui-draw 1.5s var(--pui-ease) forwards; }
@keyframes pui-draw { to { stroke-dashoffset: 0; } }

/* Reduced motion: neutralize the 3D/motion utilities too */
@media (prefers-reduced-motion: reduce) {
  [data-reveal="3d"], .pui-tilt, [data-depth-layer], .pui-flip-inner { transform: none !important; opacity: 1 !important; }
  .pui-glow-border::before, .pui-iso { animation: none !important; }
  .pui-textreveal .pui-word { opacity: 1 !important; transform: none !important; }
  [data-draw] :is(path, line, polyline) { stroke-dashoffset: 0 !important; }
}

/* ---------- Reduced motion + save-data: disable all non-essential motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  #pui-bg3d, #pui-light { display: none !important; }
  .pui-float { animation: none !important; }
}