/* assets/ui.css
   Final UI layer for PRDS Portfolio - Full UI
   Matches header.php, footer.php, style.css, and inc/*.js
   Last updated: Final delivery
*/

/* -------------------------
   Variables (sync with style.css)
   ------------------------- */
:root{
  --brand-gold: #C49A6C;
  --brand-red: #7F0100;
  --card-radius: 14px;
  --ease-soft: cubic-bezier(.2,.9,.2,1);
  --glass-alpha: 0.04;
  --shadow-strong: 0 18px 48px rgba(0,0,0,0.28);
}

/* -------------------------
   Watermark / decorative background
   ------------------------- */
.bg-watermark {
  position:relative;
  z-index:0;
  overflow:visible;
}
.bg-watermark::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 20%, rgba(196,154,108,0.06), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(196,154,108,0.04), transparent 70%),
    linear-gradient(135deg, rgba(0,0,0,0.88), rgba(20,20,20,0.95));
  opacity:1;
  mix-blend-mode:normal;
}
@media (max-width:800px){ .bg-watermark::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 20%, rgba(196,154,108,0.06), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(196,154,108,0.04), transparent 70%),
    linear-gradient(135deg, rgba(0,0,0,0.88), rgba(20,20,20,0.95));
  opacity:1;
  mix-blend-mode:normal;
} }

/* -------------------------
   Card visuals (glass, depth)
   ------------------------- */
.card-inner .card-box {
  border-radius: var(--card-radius);
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,var(--glass-alpha)), rgba(255,255,255,calc(var(--glass-alpha) - 0.01)));
  border: 1px solid rgba(255,255,255,0.02);
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

/* Dark mode tweak (applied via body.dark) */
body.dark .card-inner .card-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(196,154,108,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

/* Reduce blank space visually - tighter content frame */
.card-inner { padding: 6px 0; }

/* -------------------------
   Card entrance & motion helpers
   ------------------------- */
/* used by swipe.js transitions */
.card {
  will-change: transform, opacity;
  transition: transform .36s var(--ease-soft), opacity .28s ease;
  -webkit-tap-highlight-color: transparent;
}

/* utility classes applied during transitions */
.card.prepare { transition: none !important; }
.card.to-top { transform: translateY(-100vh); }
.card.to-bottom { transform: translateY(100vh); }
.card.active { transform: translateY(0); opacity: 1; }

/* subtle parallax on inner elements */
.card-inner > * {
  transform-origin: center;
  transition: transform .4s var(--ease-soft), opacity .28s ease;
}
.card.active .card-inner > * { transform: translateY(0); opacity: 1; }

/* -------------------------
   Buttons & micro-interactions
   ------------------------- */
/* target .btn already defined in style.css; extras here */
.btn { -webkit-tap-highlight-color: transparent; }
.btn.primary { position: relative; overflow: visible; }
.btn.primary::after{
  /* glow pulse on hover; low-impact; disabled for reduced-motion */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
  transform: scale(.96);
}
body.dark .btn.primary::after{ box-shadow: 0 0 18px rgba(196,154,108,0.08); }
body.light .btn.primary::after{ box-shadow: 0 0 18px rgba(127,1,0,0.06); }

.btn.primary:hover::after{ opacity: 1; transform: scale(1); }

/* -------------------------
   Swipe indicator (dots) - refined
   ------------------------- */
.swipe-indicator {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  z-index: 1200;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform .22s ease, background .18s ease, box-shadow .18s ease;
}
body.light .dot{ background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.04); }
.dot.active { background: var(--brand-gold); box-shadow: 0 8px 20px rgba(196,154,108,0.08); transform: scale(1.05); }

/* -------------------------
   Bottom sheet (modal) visuals
   ------------------------- */
.bottom-sheet {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.45);
  transform: translateY(110%);
  transition: transform .36s var(--ease-soft);
  z-index: 1400;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  backdrop-filter: blur(8px) saturate(1.05);
}
body.light .bottom-sheet { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,241,241,0.96)); box-shadow: 0 -8px 24px rgba(0,0,0,0.06); }
.bottom-sheet.open { transform: translateY(0%); }
.sheet-handle { width: 48px; height: 6px; background: rgba(255,255,255,0.12); border-radius: 6px; margin: 8px auto; }

/* sheet action list */
.sheet-actions { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.sheet-actions .btn { width:100%; justify-content:center; }

/* -------------------------
   WhatsApp CTA refinements
   ------------------------- */
.whatsapp-cta {
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  will-change: transform, box-shadow;
  padding: 10px 14px;
  border-radius: 999px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.whatsapp-cta svg { flex-shrink:0; }
.whatsapp-cta:hover { transform: translateY(-4px); box-shadow: 0 20px 56px rgba(0,0,0,0.28); }

/* -------------------------
   Theme toggle & header small refinements
   ------------------------- */
.theme-toggle { backdrop-filter: blur(4px); border-radius: 10px; padding: 6px; }
.theme-toggle button { border: 0; background: transparent; color: inherit; font-size: 16px; }

/* -------------------------
   Particle overlay (desktop-only, optional)
   - Implement JS to create/remove #prds-particles
   ------------------------- */
#prds-particles { position: fixed; inset:0; z-index: 5; pointer-events: none; opacity: .06; mix-blend-mode: screen; }
@media (max-width:900px){ #prds-particles{ display:none; } }

/* -------------------------
   Accessibility & reduced-motion
   ------------------------- */
@media (prefers-reduced-motion: reduce){
  .btn, .dot, .whatsapp-cta, .card { transition: none !important; animation: none !important; }
  .prds-preloader__logo { animation: none !important; }
  #prds-particles { display:none !important; }
}

/* -------------------------
   Responsive tweaks
   ------------------------- */
@media (max-width:600px){
  .sheet-actions .btn { font-size: 14px; padding: 10px 12px; }
  .prds-preloader__logo { width: 140px; height: 140px; }
  .bottom-sheet { padding: 10px 12px; }
}

/* -------------------------
   Small utility helpers
   ------------------------- */
.hidden { display: none !important; }
.center { display:flex; align-items:center; justify-content:center; }
.sr-only { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* End of assets/ui.css */