/**
 * 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/portalkinetic-mark.svg");
  /* Legacy var name retained for back-compat; now points at the canonical lockup SVG. */
  --pk-brand-primary-svg: url("/assets/images/brand/portalkinetic-lockup.svg");
  --pk-brand-vector-svg: url("/assets/images/brand/portalkinetic-lockup.svg");
  --pk-brand-light-svg: url("/assets/images/brand/portalkinetic-light.svg");
  --pk-brand-white-bg: url("/assets/images/brand/portalkinetic-lockup.svg");

  /* ─── PortalKinetic official palette (logo / marketing identity) ───────────
     Single SoT for brand chrome. Product Soft Nature `--ro-*` remains for
     in-product relief CTAs until a separate product-token migration.
  */
  --pk-navy: #101a2d; /* Midnight Navy — depth, trust, dark experiences */
  --pk-indigo: #6c63ff; /* Calm Electric Indigo — primary kinetic signal */
  --pk-cyan: #58d7e7; /* Soft Aurora Cyan — clarity / Kinetic energy */
  --pk-lavender: #a98bff; /* Soft Lavender — transitional gradient warmth */
  --pk-coral: #ff7a8a; /* Warm Coral — tiny focal / completion only */
  --pk-mist: #f8fafc; /* Cloud White — breathing room */
  --pk-night: var(--pk-navy);

  /* Back-compat aliases — DEPRECATED.
     Do not use --pk-teal / --pk-sage / --pk-gold for new work.
     Soft Nature product CTAs must use --ro-teal (or Soft Nature tokens).
     Brand chrome must use --pk-indigo / --pk-cyan / --pk-lavender. */
  --pk-teal: var(--pk-indigo);
  --pk-sage: var(--pk-lavender);
  --pk-gold: var(--pk-cyan);
  --pk-teal-bright: #8b84ff;
  --pk-sage-bright: #c4b0ff;
  --pk-gold-bright: #7ee6f0;

  /* Wordmark — Portal (navy/cloud) + Kinetic (cyan) */
  --pk-wordmark-portal: var(--pk-navy);
  --pk-wordmark-kinetic: var(--pk-cyan);
  --pk-wordmark-portal-dark: var(--pk-mist);
  --pk-wordmark-kinetic-dark: var(--pk-cyan);

  /* Identity gradients */
  --pk-grad-h: linear-gradient(
    90deg,
    var(--pk-indigo) 0%,
    var(--pk-cyan) 100%
  );
  --pk-grad-d: linear-gradient(
    135deg,
    var(--pk-lavender) 0%,
    var(--pk-indigo) 45%,
    var(--pk-cyan) 100%
  );
  --pk-grad-text: linear-gradient(
    90deg,
    var(--pk-wordmark-portal) 0%,
    var(--pk-wordmark-portal) 58%,
    var(--pk-wordmark-kinetic) 58%,
    var(--pk-wordmark-kinetic) 100%
  );

  --pk-violet: var(--pk-lavender);
  --pk-violet-deep: var(--pk-indigo);
}

.dark {
  --pk-wordmark-portal: var(--pk-mist);
  --pk-wordmark-kinetic: var(--pk-cyan);
  --pk-grad-h: linear-gradient(
    90deg,
    var(--pk-indigo) 0%,
    var(--pk-cyan) 100%
  );
  --pk-grad-d: linear-gradient(
    135deg,
    var(--pk-lavender) 0%,
    var(--pk-indigo) 45%,
    var(--pk-cyan) 100%
  );
}

/* ─── Motion concept: the portal breathes ─────────────────────────────────────
   Brand spec: "Animation should communicate release, not productivity."
   Scale 0.96 → 1.00, 2400ms, ease-in-out, infinite. Respect reduced motion. */
@keyframes pk-wheel-breathe {
  0%,
  100% {
    transform: scale(0.96);
  }
  50% {
    transform: scale(1);
  }
}
.pk-wheel-breathe {
  animation: pk-wheel-breathe 2400ms ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .pk-wheel-breathe {
    animation: none;
    transform: scale(1);
  }
}

/* ─── Org logo reveal (white-label) ──────────────────────────────────
   Used by OrgBrandedMark whenever an organization logo replaces the default
   PortalKinetic mark. One-shot fade + slight rise so the tenant brand feels
   delivered, then settles into the shared `pk-wheel-breathe` motion. */
@keyframes pk-org-logo-reveal {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.92);
    filter: blur(2px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.pk-org-logo-reveal {
  animation: pk-org-logo-reveal 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: center;
  will-change: transform, opacity, filter;
}
@media (prefers-reduced-motion: reduce) {
  .pk-org-logo-reveal {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   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.1;
}
.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.2) 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.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 40% at 85% 60%,
      rgba(124, 58, 237, 0.1) 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.2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   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.2) 0%,
    rgba(99, 102, 241, 0.12) 50%,
    rgba(124, 58, 237, 0.2) 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.1;
  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.1) 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);
  }
}