/* SEXYLOVER landing page styles */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(ellipse 55% 50% at 50% 38%,
    #360357 0%,
    #300253 8%,
    #2a024a 16%,
    #220140 26%,
    #18002e 40%,
    #100020 55%,
    #0a0017 72%,
    #060010 86%,
    #04000a 100%);
  font-family: 'Playfair Display', Georgia, serif;
  color: #e9d4ff;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8vh 5vw 4vh;
  z-index: 1;
}

.logo-block {
  text-align: center;
  animation: fade-in 1s ease-out 0s both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: clamp(200px, 32%, 300px);
  margin: 14px auto;
  color: #c178cc;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, currentColor 35%, currentColor 65%, transparent 100%);
  opacity: 0.85;
}

.separator-mark {
  font-size: 11px;
  line-height: 1;
  color: #d895e0;
  text-shadow: 0 0 6px rgba(216, 149, 224, 0.55);
}

.welcome {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  letter-spacing: 6px;
  color: #f7b8d8;
  opacity: 0.95;
  text-align: center;
}

.logo {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(48px, 8vw, 96px);
  letter-spacing: 1px;
  line-height: 1;
}

.logo .sexy,
.logo .lover {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.logo .sexy {
  background-image: linear-gradient(180deg, #ffffff 0%, #f3e6f5 100%);
}

.logo .lover {
  background-image: linear-gradient(180deg, #ff4d9d 0%, #ff7eb6 100%);
}

.tagline {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  opacity: 0.95;
  text-align: center;
}

.tagline .prefix {
  color: #d8b4ff;
  font-style: italic;
}

.tagline .cta {
  color: #ff7eb6;
  font-style: normal;
  font-weight: 500;
}

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.star {
  position: absolute;
  width: var(--star-size, 2px);
  height: var(--star-size, 2px);
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.85),
    0 0 10px rgba(255, 220, 240, 0.45);
  opacity: 0;
  animation: twinkle var(--star-duration, 6s) ease-in-out var(--star-delay, 0s) infinite;
}

/* Sparkle stars get a 4-point cross of faint rays */
.star.sparkle::before,
.star.sparkle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.star.sparkle::before {
  width: 1px;
  height: calc(var(--star-size, 2px) * 6);
  transform: translate(-50%, -50%);
}

.star.sparkle::after {
  width: calc(var(--star-size, 2px) * 6);
  height: 1px;
  transform: translate(-50%, -50%);
}

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

.mouth {
  margin: 6vh 0 0;
  width: 56%;
  max-width: 630px;
  align-self: center;
  display: flex;
  justify-content: center;
}

.mouth svg {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: center center;
  filter: drop-shadow(0 0 12px rgba(255, 126, 182, 0.55));
}

.mouth svg path {
  fill: #ff7eb6;
}

.mouth {
  clip-path: inset(0 100% 0 0);
}

.mouth.drawing {
  animation: draw-in 4s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
}

@keyframes draw-in {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes kiss-pulse {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(0.96, 1.03); }
  50%      { transform: scale(1.04, 0.98); }
  75%      { transform: scale(0.96, 1.03); }
}

.mouth.kissing svg {
  animation: kiss-pulse 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .logo-block,
  .star,
  .mouth.drawing,
  .mouth.kissing svg {
    animation: none !important;
  }

  .mouth {
    clip-path: inset(0 0 0 0) !important;
  }

  .star {
    opacity: 0.4;
  }
}