/**
 * Lyrenza design system.
 *
 * Ported verbatim from the approved build's token layer, component classes and
 * animations. Values are unchanged — this file is the visual contract.
 */

:root {
  --radius: 0.875rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.27 0.04 15);

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.27 0.04 15);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.27 0.04 15);

  --primary: oklch(0.62 0.09 25);
  --primary-foreground: oklch(0.99 0.003 20);

  --secondary: oklch(0.96 0.012 60);
  --secondary-foreground: oklch(0.27 0.04 15);

  --muted: oklch(0.97 0.008 30);
  --muted-foreground: oklch(0.5 0.03 20);

  --accent: oklch(0.91 0.045 10);
  --accent-foreground: oklch(0.27 0.04 15);

  --destructive: oklch(0.6 0.18 25);
  --destructive-foreground: oklch(0.99 0.003 20);

  --border: oklch(0.94 0.012 20);
  --input: oklch(0.94 0.012 20);
  --ring: oklch(0.85 0.05 15);

  /* Brand specifics */
  --pink-soft: #f8dce3;
  --blush: #f4c7d3;
  --beige: #f5eee8;
  --rose-gold: #c9a596;

  --font-serif: "Cormorant Garamond", "Playfair Display", serif;
  --font-display: "Italiana", "Cormorant Garamond", serif;
  --font-sans: "Inter", system-ui, sans-serif;
}

*,
*::before,
*::after {
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
}

body.lyrenza {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.lyrenza h1,
body.lyrenza h2,
body.lyrenza h3,
body.lyrenza h4,
body.lyrenza h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

::selection {
  background: var(--blush);
  color: var(--foreground);
}

/* ---------------------------------------------------------------- Surfaces */

.font-display { font-family: var(--font-display); }
.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }

.glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.glass-pink {
  background: linear-gradient(135deg, rgba(248, 220, 227, 0.45), rgba(255, 255, 255, 0.35));
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.gradient-romance {
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(248, 220, 227, 0.7), transparent 60%),
    radial-gradient(900px 600px at 90% 30%, rgba(244, 199, 211, 0.55), transparent 60%),
    radial-gradient(1000px 700px at 50% 100%, rgba(245, 238, 232, 0.7), transparent 60%),
    #ffffff;
}

.lyrenza-tile-sheen {
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.3),
    transparent,
    rgba(244, 199, 211, 0.3)
  );
}

.lyrenza-custom-gradient {
  background: linear-gradient(to bottom right, #f4c7d3, #f8dce3, #f5eee8);
}

.text-balance { text-wrap: balance; }

.shadow-soft {
  box-shadow:
    0 30px 80px -40px rgba(201, 165, 150, 0.35),
    0 8px 24px -12px rgba(244, 199, 211, 0.25);
}

.shadow-glow {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 20px 60px -20px rgba(244, 199, 211, 0.55);
}

.hover-lift {
  transition:
    transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 100px -50px rgba(201, 165, 150, 0.5);
}

.btn-glow {
  transition: all 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 10px 40px -15px rgba(244, 199, 211, 0.7);
}

.btn-glow:hover {
  box-shadow: 0 20px 60px -10px rgba(244, 199, 211, 1);
  transform: translateY(-2px);
}

.link-underline {
  position: relative;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.link-underline:hover::after { transform: scaleX(1); }

/* -------------------------------------------------------------- Animations */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-18px) translateX(8px); }
}

@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  100% { transform: translate(40px, -120vh) rotate(180deg); opacity: 0; }
}

@keyframes shimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 60px rgba(244, 199, 211, 0.4); }
  50% { box-shadow: 0 0 120px rgba(244, 199, 211, 0.7); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.animate-fade-up { animation: fadeUp 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.animate-fade-in { animation: fadeIn 1.5s ease both; }
.animate-float { animation: float 8s ease-in-out infinite; }
.animate-glow { animation: glowPulse 6s ease-in-out infinite; }
.animate-shimmer { animation: shimmer 4s ease-in-out infinite; }
.animate-marquee { animation: marquee 40s linear infinite; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

/* ---------------------------------------------------------- Reveal & petals */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.petal {
  position: absolute;
  bottom: -40px;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 30% 30%, #f8dce3, #f4c7d3 60%, #c9a596);
  border-radius: 80% 0 80% 0;
  filter: blur(0.3px);
  opacity: 0.65;
  animation: drift linear infinite;
  pointer-events: none;
}

/* ------------------------------------------------------------------ Header */

.lyrenza-header {
  transition:
    background-color 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    backdrop-filter 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    padding 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lyrenza-header.is-scrolled {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 12px 40px -30px rgba(201, 165, 150, 0.6);
}

/* --------------------------------------------------------- Overlays & toast */

.lyrenza-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 500ms;
}

.lyrenza-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.lyrenza-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 120;
  transform: translate(-50%, 1.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lyrenza-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up,
  .animate-fade-in,
  .animate-float,
  .animate-glow,
  .animate-shimmer,
  .animate-marquee,
  .petal {
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html { scroll-behavior: auto; }
}

/* Love Circle atmosphere backdrop ---------------------------------------- */
.lyrenza-orb {
  filter: blur(120px);
  animation: lyrenza-drift 22s ease-in-out infinite;
}

.lyrenza-orb--two {
  filter: blur(140px);
  animation-duration: 28s;
  animation-direction: reverse;
}

@keyframes lyrenza-drift {
  0%,
  100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -3%, 0) scale(1.08); }
}

/* Editorial prose (page.php / single.php) --------------------------------- */
.lyrenza-prose { color: color-mix(in oklab, var(--foreground) 78%, transparent); line-height: 1.85; }
.lyrenza-prose > * + * { margin-top: 1.25rem; }
.lyrenza-prose h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.25rem); color: var(--foreground); margin-top: 2.5rem; }
.lyrenza-prose h3 { font-family: var(--font-serif); font-size: 1.35rem; color: var(--foreground); margin-top: 2rem; }
.lyrenza-prose a { text-decoration: underline; text-underline-offset: 4px; }
.lyrenza-prose blockquote { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; border-left: 1px solid color-mix(in oklab, var(--foreground) 15%, transparent); padding-left: 1.25rem; }
.lyrenza-prose ul, .lyrenza-prose ol { padding-left: 1.25rem; }
.lyrenza-prose li + li { margin-top: .5rem; }
.lyrenza-prose img { border-radius: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .lyrenza-orb { animation: none !important; }
}