/* ==========================================================================
   UCANDOO Design System — Core
   Shared tokens + utilities for all member-portal pages.
   Brand palette (locked): #7d1260, #cf3e70, #f97899, #f7d778, #fdfdec, #060e0e
   ========================================================================== */

:root {
  /* --- Brand palette (unchanged) --- */
  --plum: #7d1260;
  --pink: #cf3e70;
  --pink-light: #f97899;
  --yellow: #f7d778;
  --cream: #fdfdec;
  --ink: #060e0e;

  /* --- Derived surface colors --- */
  --white: #ffffff;
  --muted: #6b7280;
  --muted-soft: #9ca3af;
  --border: #ece7de;
  --border-strong: #e2ddd0;

  /* --- Gradients (this is where "fresh/3D" starts) --- */
  --grad-brand: linear-gradient(135deg, var(--plum) 0%, var(--pink) 52%, var(--pink-light) 100%);
  --grad-warm: linear-gradient(135deg, var(--pink-light) 0%, var(--yellow) 100%);
  --grad-dusk: radial-gradient(120% 120% at 20% 10%, #a8226f 0%, var(--plum) 35%, var(--ink) 100%);
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(249,120,153,.35), transparent 70%);

  /* --- Elevation (soft, layered — the "3D" cue on flat CSS) --- */
  --shadow-sm: 0 1px 2px rgba(6,14,14,.06), 0 1px 1px rgba(6,14,14,.04);
  --shadow-md: 0 8px 24px -8px rgba(125,18,96,.18), 0 2px 8px rgba(6,14,14,.06);
  --shadow-lg: 0 24px 48px -12px rgba(125,18,96,.28), 0 8px 16px -4px rgba(6,14,14,.08);
  --shadow-glow-pink: 0 12px 32px -8px rgba(207,62,112,.45);
  --shadow-glow-yellow: 0 12px 32px -8px rgba(247,215,120,.5);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* --- Radius / rhythm --- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;

  /* --- Motion --- */
  --ease-out-soft: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .18s;
  --dur-med: .35s;
  --dur-slow: .6s;

  --font-display: 'Catamaran', sans-serif;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body { font-family: var(--font-display); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; }

/* ==========================================================================
   Depth primitives — glassmorphism, tilt cards, floating panels
   ========================================================================== */

/* Frosted glass panel (used over WebGL heroes / gradient backgrounds) */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: var(--shadow-lg);
}
.glass-dark {
  background: rgba(17,26,26,.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.08);
}

/* Layered "floating card" with mouse-reactive tilt (JS adds the transform) */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform var(--dur-med) var(--ease-out-soft), box-shadow var(--dur-med) var(--ease-out-soft);
  will-change: transform;
}
.tilt-card:hover {
  box-shadow: var(--shadow-lg);
}
.tilt-card > * { transform: translateZ(20px); }

/* Generic elevated surface for non-interactive depth (dashboards, etc.) */
.surface {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  transition: transform var(--dur-med) var(--ease-out-soft), box-shadow var(--dur-med) var(--ease-out-soft);
}
.surface:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Floating blob / orb accents used to fake depth behind content */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
  pointer-events: none;
  animation: float-orb 12s var(--ease-out-soft) infinite alternate;
}
@keyframes float-orb {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(24px,-28px) scale(1.08); }
}

/* ==========================================================================
   Scroll-reveal utilities (paired with ucandoo-motion.js)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="scale"] { transform: translateY(0) scale(.92); }
[data-reveal="scale"].is-visible { transform: translateY(0) scale(1); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-visible { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Buttons — shared, replaces per-page duplicated button CSS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  border: none; border-radius: var(--radius-pill); cursor: pointer;
  padding: 14px 28px; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out-soft), background var(--dur-fast);
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--grad-brand); color: var(--white);
  box-shadow: var(--shadow-glow-pink);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(207,62,112,.55); }
.btn-ghost {
  background: transparent; color: var(--muted); border: 2px solid var(--border-strong);
}
.btn-ghost:hover { border-color: var(--pink); color: var(--pink); }
.btn-block { width: 100%; }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.field label { font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea {
  padding: 13px 16px; border: 2px solid var(--border); border-radius: var(--radius-sm);
  font-size: 15px; font-family: var(--font-display); color: var(--ink);
  outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); width: 100%;
  background: var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pink); box-shadow: 0 0 0 4px rgba(207,62,112,.12);
}

/* Nav */
.nav {
  background: var(--grad-brand);
  padding: 0 24px; min-height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  position: relative; z-index: 10;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 26px; width: auto; display: block; }
.nav-link { color: rgba(255,255,255,.85); text-decoration: none; font-size: 14px; font-weight: 700; transition: color var(--dur-fast); white-space: nowrap; }
.nav-link:hover { color: var(--white); }
@media (max-width: 420px) {
  .nav { padding: 12px 20px; }
  .nav-logo img { height: 22px; }
  .nav-link { font-size: 13px; }
}

/* ==========================================================================
   Auth layout — split screen with WebGL/CSS-fallback hero
   ========================================================================== */
.auth-shell {
  min-height: calc(100vh - 68px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
@supports (height: 100dvh) {
  .auth-shell { min-height: calc(100dvh - 68px); }
}
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .hero3d-mount { min-height: 260px; }
}

.hero3d-mount {
  position: relative;
  overflow: hidden;
  background: var(--grad-dusk);
  display: flex; align-items: center; justify-content: center;
}
.hero3d-mount canvas { display: block; }
.hero3d-mount.hero3d-fallback::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-dusk);
}
.hero3d-mount::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(to top, rgba(6,14,14,.75) 0%, rgba(6,14,14,.35) 55%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-4) var(--space-4) var(--space-4);
  color: var(--cream);
  z-index: 2;
  pointer-events: none;
}
.hero-copy h2 {
  font-size: 30px; font-weight: 900; line-height: 1.15; margin-bottom: 10px;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.hero-copy p {
  font-size: 15px; color: rgba(253,253,236,.8); max-width: 380px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--yellow);
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill);
  margin-bottom: 16px;
  backdrop-filter: blur(6px);
}

.auth-panel {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4) var(--space-3);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(247,215,120,.15), transparent 60%),
    var(--cream);
  position: relative;
}

/* Utility */
.text-muted { color: var(--muted); }
.text-center { text-align: center; }