/**
 * PortalKinetic brand surface tokens — main app + portal-social (synced via scripts).
 * Keep URLs aligned with `BRAND_MARK_SVG` / `BRAND_LOCKUP_SVG` in
 * `packages/core/src/brand/staticUrls.ts` (trust + recognition).
 *
 * SURFACE SCALE:
 *   --filigree (xs/sm/default/panel)  subtle corner watermarks on cards/panels
 *   --watermark                        large centered ghost on empty states / loading boards
 *   --hero-bg                          full-bleed background with mark + aurora mesh
 *   --loading-board                    full-screen centered mark for loading screens
 *   --interface-icon                   mark used as icon replacement in UI slots
 *   --portal-ring                      concentric rings animation on portal surfaces
 */

/* ─── Brand asset URLs ─────────────────────────────────────────────────────── */
:root {
  --pk-brand-mark-svg:    url("/assets/images/brand/portalkinetic-mark.svg");
  --pk-brand-lockup-svg:  url("/assets/images/brand/portalkinetic-lockup.svg");
  --pk-brand-icon-svg:    url("/assets/images/brand/icon_only_logo.png");
  --pk-brand-primary-svg: url("/assets/images/brand/primary_logo.png");
  --pk-brand-vector-svg:  url("/assets/images/brand/vector_logo.png");
  --pk-brand-light-svg:   url("/assets/images/brand/light_background_logo.png");
  --pk-brand-white-bg:    url("/assets/images/brand/logo_white_bg.png");

  /* Brand gradient stops — matches PortalKineticMark SVG gradients */
  --pk-cyan:   #22d3ee;
  --pk-indigo: #6366f1;
  --pk-violet: #7c3aed;
  --pk-violet-deep: #5b21b6;

  /* Brand gradient strings */
  --pk-grad-h: linear-gradient(90deg, var(--pk-cyan) 0%, var(--pk-indigo) 50%, var(--pk-violet) 100%);
  --pk-grad-d: linear-gradient(135deg, var(--pk-cyan) 0%, var(--pk-indigo) 50%, var(--pk-violet) 100%);
  --pk-grad-text: linear-gradient(90deg, var(--pk-cyan) 0%, var(--pk-cyan) 42%, var(--pk-violet) 58%, var(--pk-violet-deep) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. FILIGREE — small corner watermark (cards, panels, inputs, list items)
══════════════════════════════════════════════════════════════════════════════ */
.pk-brand-filigree {
  position: relative;
  overflow: hidden;
}

.pk-brand-filigree::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 4px;
  width: 12px;
  height: 14px;
  background-image: var(--pk-brand-mark-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

.dark .pk-brand-filigree::before { opacity: 0.14; }

@media (prefers-reduced-motion: reduce) {
  .pk-brand-filigree::before { opacity: 0.065; }
}

/* Size variants */
.pk-brand-filigree.pk-brand-filigree--xs::before   { width: 8px;  height: 9px;  right: 3px; bottom: 3px;  opacity: 0.095; }
.pk-brand-filigree.pk-brand-filigree--sm::before   { width: 14px; height: 16px; right: 6px; bottom: 6px;  opacity: 0.10;  }
.pk-brand-filigree.pk-brand-filigree--icon::before {
  right: auto; bottom: auto;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 11px; height: 12px; opacity: 0.1;
}
.pk-brand-filigree.pk-brand-filigree--link::before  { width: 9px;  height: 10px; opacity: 0.05; }
.pk-brand-filigree.pk-brand-filigree--panel::before { width: 18px; height: 21px; right: 10px; bottom: 10px; opacity: 0.06; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. WATERMARK — large ghost centered in empty states, loading boards, voids
   Usage: <div class="pk-brand-watermark"> ... content ... </div>
══════════════════════════════════════════════════════════════════════════════ */
.pk-brand-watermark {
  position: relative;
  overflow: hidden;
}

.pk-brand-watermark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, 70%);
  height: min(320px, 70%);
  background-image: var(--pk-brand-mark-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

.dark .pk-brand-watermark::before { opacity: 0.07; }

/* Larger variant — section backgrounds, hero dividers */
.pk-brand-watermark--lg::before {
  width: min(520px, 85%);
  height: min(520px, 85%);
  opacity: 0.035;
}

/* Full-bleed variant — loading screens, portal void surfaces */
.pk-brand-watermark--full::before {
  width: min(640px, 90vw);
  height: min(640px, 90vw);
  opacity: 0.055;
}

.dark .pk-brand-watermark--full::before { opacity: 0.09; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. HERO BACKGROUND — full-bleed brand surface with aurora + mark
   Usage: <section class="pk-hero-bg"> ... </section>
══════════════════════════════════════════════════════════════════════════════ */
.pk-hero-bg {
  position: relative;
  overflow: hidden;
  background-color: #000;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 30%,  rgba(34,211,238, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 70%,  rgba(99,102,241, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(124,58,237,  0.20) 0%, transparent 50%),
    linear-gradient(180deg, #000005 0%, #050010 100%);
}

/* Large mark in top-right corner — hero identification anchor */
.pk-hero-bg::after {
  content: "";
  position: absolute;
  right: -5%;
  top: -5%;
  width: clamp(220px, 38vw, 560px);
  height: clamp(220px, 38vw, 560px);
  background-image: var(--pk-brand-mark-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

/* Light variant — warm sage surfaces */
.pk-hero-bg--light {
  background-color: #f0fdf8;
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 20%,  rgba(34,211,238, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 80%,  rgba(99,102,241, 0.07) 0%, transparent 55%),
    linear-gradient(180deg, #f0fdf8 0%, #eff6ff 100%);
}

.pk-hero-bg--light::after { opacity: 0.05; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. LOADING BOARD — full-screen loading surface with centered mark + lockup
   Usage: <div class="pk-loading-board"> ... skeleton content ... </div>
══════════════════════════════════════════════════════════════════════════════ */
.pk-loading-board {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background-color: #030712;
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 0%,   rgba(34,211,238, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 15% 80%,  rgba(99,102,241, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse 55% 40% at 85% 60%,  rgba(124,58,237,  0.10) 0%, transparent 50%);
}

/* Centered mark — large, ghosted, behind skeleton content */
.pk-loading-board::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 75vw);
  height: min(480px, 75vw);
  background-image: var(--pk-brand-mark-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* Lockup strip — bottom brand anchor on loading screens */
.pk-loading-board::after {
  content: "";
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 52px;
  background-image: var(--pk-brand-lockup-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

/* Light loading board — daytime / main app loading */
.pk-loading-board--light {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 0%,   rgba(34,211,238, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 15% 80%,  rgba(99,102,241, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 55% 40% at 85% 60%,  rgba(124,58,237,  0.06) 0%, transparent 50%);
}

.pk-loading-board--light::before { opacity: 0.04; }
.pk-loading-board--light::after  { opacity: 0.20; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. INTERFACE ICON — mark used as a decorative UI slot icon
   Usage: <span class="pk-interface-icon pk-interface-icon--md" aria-hidden />
══════════════════════════════════════════════════════════════════════════════ */
.pk-interface-icon {
  display: inline-block;
  background-image: var(--pk-brand-mark-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.pk-interface-icon--xs  { width: 14px;  height: 14px;  }
.pk-interface-icon--sm  { width: 20px;  height: 20px;  }
.pk-interface-icon--md  { width: 28px;  height: 28px;  }
.pk-interface-icon--lg  { width: 40px;  height: 40px;  }
.pk-interface-icon--xl  { width: 56px;  height: 56px;  }
.pk-interface-icon--2xl { width: 80px;  height: 80px;  }
.pk-interface-icon--3xl { width: 120px; height: 120px; }

/* Lockup variant */
.pk-interface-icon--lockup {
  background-image: var(--pk-brand-lockup-svg);
  width: 100px;
  height: 52px;
}

.pk-interface-icon--lockup-lg {
  background-image: var(--pk-brand-lockup-svg);
  width: 160px;
  height: 84px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. PORTAL RING SURFACE — rings decorating portal / technique / session cards
   Usage: <div class="pk-portal-ring-surface"> card content </div>
   Requires portal-ring-spin keyframe (defined in globals.css)
══════════════════════════════════════════════════════════════════════════════ */
.pk-portal-ring-surface {
  position: relative;
  overflow: hidden;
}

/* Outer glow ring */
.pk-portal-ring-surface::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(34,211,238, 0.20) 0%,
    rgba(99,102,241, 0.12) 50%,
    rgba(124,58,237, 0.20) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Inner mark ghost — top-left identity anchor */
.pk-portal-ring-surface::after {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  width: 80px;
  height: 80px;
  background-image: var(--pk-brand-mark-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

.dark .pk-portal-ring-surface::after { opacity: 0.16; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. TECHNIQUE CARD — somatic technique / focus technique surface
   Usage: <div class="pk-technique-card"> ... </div>
══════════════════════════════════════════════════════════════════════════════ */
.pk-technique-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34,211,238, 0.15);
  background: rgba(3,7,18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.pk-technique-card::before {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 96px;
  height: 96px;
  background-image: var(--pk-brand-mark-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.pk-technique-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(34,211,238, 0.06) 0%,
    transparent 50%,
    rgba(124,58,237, 0.06) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. PORTAL INTERFACE BACKGROUND — full-surface portal UI background
   Usage: <div class="pk-portal-interface"> ... </div>
══════════════════════════════════════════════════════════════════════════════ */
.pk-portal-interface {
  position: relative;
  overflow: hidden;
  background-color: #000005;
  background-image:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(34,211,238, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 80%  50% at 0%   50%, rgba(99,102,241, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 80%  50% at 100% 50%, rgba(124,58,237,  0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60%  40% at 50% 110%, rgba(34,211,238, 0.06) 0%, transparent 50%);
}

/* Large centered mark at reduced opacity — portal depth */
.pk-portal-interface::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, 80vw);
  height: min(700px, 80vw);
  background-image: var(--pk-brand-mark-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. BRAND GRADIENT TEXT — utility for wordmark / headline gradient text
   Usage: <span class="pk-grad-text">PortalKinetic</span>
══════════════════════════════════════════════════════════════════════════════ */
.pk-grad-text {
  background: var(--pk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pk-grad-text--h {
  background: var(--pk-grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. BRAND BORDER — subtle gradient border using brand colors
   Usage: <div class="pk-brand-border"> ... </div>
══════════════════════════════════════════════════════════════════════════════ */
.pk-brand-border {
  position: relative;
}

.pk-brand-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(34,211,238, 0.5) 0%,
    rgba(99,102,241, 0.3) 50%,
    rgba(124,58,237, 0.5) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. VECTOR / ICON LOGO BACKGROUNDS — for use in onboarding, pricing, etc.
══════════════════════════════════════════════════════════════════════════════ */
.pk-icon-bg {
  background-image: var(--pk-brand-icon-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.pk-vector-bg {
  background-image: var(--pk-brand-vector-svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. ANIMATION MODIFIER — applies portal-ring-spin to mark pseudoelement
   (keyframe defined in globals.css as @keyframes portal-ring-spin)
══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .pk-loading-board.pk-animate::before {
    animation: portal-ring-spin 24s linear infinite;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  .pk-watermark-breathe::before {
    animation: portal-core-pulse 6s ease-in-out infinite;
  }

  .pk-portal-interface.pk-animate::before {
    animation: portal-ring-spin 40s linear infinite;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(0deg);
  }
}