/* ================================================================
   V4 — "Coming Soon" — Ethereal Warmth Design + Premium Animations
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --peach: #FF7F6B;
  --peach-soft: #FF9E59;
  --peach-light: #FFF0ED;
  --lavender: #E8E0F0;
  --rose: #F5C6C6;
  --dark: #1e1e2f;
  --text: #444;
  --text-light: #777;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--sans);
  color: var(--text);
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(-45deg, #fce4ec, #fff3e0, #e8eaf6, #fce4ec, #fff0ed);
  background-size: 500% 500%;
  animation: bgShift 18s ease infinite;
}

@keyframes bgShift {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 100%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 0%; }
  100% { background-position: 0% 50%; }
}

/* ── BACKGROUND ORBS ────────────────────────────── */
.cs-bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
  filter: blur(80px);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.orb-1 {
  width: 500px; height: 500px;
  background: var(--peach);
  top: -150px; right: -100px;
  animation: orbFloat1 12s ease-in-out infinite;
}
.orb-2 {
  width: 400px; height: 400px;
  background: var(--lavender);
  bottom: -100px; left: -100px;
  animation: orbFloat2 14s ease-in-out infinite;
}
.orb-3 {
  width: 300px; height: 300px;
  background: #FFD59E;
  top: 40%; left: 60%;
  animation: orbFloat3 10s ease-in-out infinite;
}
.orb-4 {
  width: 250px; height: 250px;
  background: var(--rose);
  top: 20%; left: 10%;
  animation: orbFloat4 16s ease-in-out infinite;
}
.orb-5 {
  width: 200px; height: 200px;
  background: #c4b5fd;
  bottom: 20%; right: 15%;
  animation: orbFloat5 11s ease-in-out infinite;
}

@keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); }       50% { transform: translate(-40px, 50px) scale(1.1); } }
@keyframes orbFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); }       50% { transform: translate(30px, -40px) scale(1.05); } }
@keyframes orbFloat3 { 0%, 100% { transform: translate(0, 0) scale(1); }       50% { transform: translate(-30px, 30px) scale(1.15); } }
@keyframes orbFloat4 { 0%, 100% { transform: translate(0, 0) scale(1); }       50% { transform: translate(20px, -30px) scale(0.95); } }
@keyframes orbFloat5 { 0%, 100% { transform: translate(0, 0) scale(1); }       50% { transform: translate(-25px, 25px) scale(1.1); } }

/* ── FLOATING PARTICLES ─────────────────────────── */
.cs-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: particleRise linear infinite;
}

@keyframes particleRise {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-100vh) scale(1); }
}

/* ── GRAIN OVERLAY ──────────────────────────────── */
.cs-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
}

/* ── MAIN CONTAINER ─────────────────────────────── */
.cs-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  padding: 60px 24px 40px;
  text-align: center;
}

/* ── HERO LOGO ──────────────────────────────────── */
.cs-logo-wrap {
  margin-bottom: 40px;
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  animation: logoEntrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

@keyframes logoEntrance {
  0%   { opacity: 0; transform: scale(0) rotate(-270deg); filter: blur(12px); }
  50%  { opacity: 1; transform: scale(1.15) rotate(15deg); filter: blur(0); }
  70%  { transform: scale(0.92) rotate(-5deg); }
  85%  { transform: scale(1.04) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}

.cs-logo {
  height: 56px;
  position: relative;
  z-index: 5;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  animation: logoBreathe 5s ease-in-out 2.5s infinite;
}

@keyframes logoBreathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.1); filter: brightness(1.2); }
}

.cs-logo-wrap:hover .cs-logo {
  transform: scale(1.18);
  animation-play-state: paused;
}

/* ── Concentric expanding rings ── */
.logo-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 127, 107, 0.25);
  opacity: 0;
  pointer-events: none;
}

.logo-ring-1 {
  width: 90px; height: 90px;
  animation: ringExpand 3.5s ease-in-out 2s infinite;
}
.logo-ring-2 {
  width: 90px; height: 90px;
  animation: ringExpand 3.5s ease-in-out 2.6s infinite;
}
.logo-ring-3 {
  width: 90px; height: 90px;
  animation: ringExpand 3.5s ease-in-out 3.2s infinite;
}

@keyframes ringExpand {
  0%   { opacity: 0.6; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* Pause rings on hover */
.cs-logo-wrap:hover .logo-ring {
  animation-play-state: paused;
}

/* ── Radial light burst ── */
.logo-burst {
  position: absolute;
  inset: 0; margin: auto;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 158, 89, 0.08) 20deg,
    transparent 40deg,
    rgba(255, 127, 107, 0.06) 80deg,
    transparent 100deg,
    rgba(232, 224, 240, 0.08) 140deg,
    transparent 160deg,
    rgba(255, 158, 89, 0.06) 200deg,
    transparent 220deg,
    rgba(245, 198, 198, 0.08) 260deg,
    transparent 280deg,
    rgba(255, 127, 107, 0.06) 320deg,
    transparent 360deg
  );
  animation: burstSpin 20s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s;
}

/* Burst fades in after logo lands */
.cs-logo-wrap { --burst-ready: 0; }
@keyframes burstFadeIn { to { opacity: 1; } }
.logo-burst {
  animation: burstSpin 20s linear infinite, burstFadeIn 1.5s ease 1.8s forwards;
}

@keyframes burstSpin {
  to { transform: rotate(360deg); }
}

/* ── Inner glow ── */
.logo-glow {
  position: absolute;
  inset: 0; margin: auto;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 127, 107, 0.18) 0%,
    rgba(255, 158, 89, 0.08) 40%,
    transparent 70%
  );
  z-index: 2;
  pointer-events: none;
  animation: glowPulse 5s ease-in-out 2.5s infinite;
  opacity: 0;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* Glow also fades in after logo lands */
.logo-glow {
  animation: glowPulse 5s ease-in-out 2.5s infinite, burstFadeIn 1s ease 1.6s forwards;
}

/* ── BADGE ──────────────────────────────────────── */
.cs-badge {
  display: inline-block;
  padding: 10px 28px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 127, 107, 0.15);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: var(--peach);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 36px;
  opacity: 0;
  animation:
    badgeSlideIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards,
    badgeFloat 6s ease-in-out 2s infinite;
  position: relative;
  overflow: hidden;
}

@keyframes badgeSlideIn {
  from { opacity: 0; transform: translateY(15px) scale(0.9); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Badge shimmer sweep */
.cs-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: badgeShimmer 4s ease-in-out 3s infinite;
}

@keyframes badgeShimmer {
  0%   { left: -100%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}

/* ── HEADLINE ───────────────────────────────────── */
.cs-headline {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: 24px;
}

/* Individual word animation via JS — each .cs-word gets staggered */
.cs-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(40deg);
  filter: blur(6px);
  animation: wordReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: center bottom;
}

@keyframes wordReveal {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0);
  }
}

.cs-headline em {
  font-style: italic;
  color: transparent;
  background: linear-gradient(135deg, var(--peach-soft), var(--peach), #ff6b8a, var(--peach-soft));
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: shimmerGradient 4s ease infinite;
  position: relative;
}

/* When em gets the cs-word class from JS, combine both animations */
.cs-headline em.cs-word {
  animation: wordReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             shimmerGradient 4s ease 1.5s infinite;
}

@keyframes shimmerGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Underline draw on "Extraordinary" */
.cs-headline em::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--peach-soft), var(--peach));
  border-radius: 2px;
  animation: underlineDraw 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2s forwards;
}

@keyframes underlineDraw {
  to { width: 100%; }
}

/* ── DIVIDER ────────────────────────────────────── */
.cs-divider {
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--peach-soft), var(--peach));
  border-radius: 10px;
  margin: 0 auto 28px;
  animation: dividerExpand 1s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
  position: relative;
}

@keyframes dividerExpand {
  to { width: 60px; }
}

/* Glowing dot at the end of the divider */
.cs-divider::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--peach);
  opacity: 0;
  animation: dotAppear 0.4s ease 2.6s forwards, dotPulse 2s ease-in-out 3s infinite;
}

@keyframes dotAppear {
  to { opacity: 1; }
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,127,107,0.4); }
  50%      { transform: scale(1.3); box-shadow: 0 0 12px 4px rgba(255,127,107,0.2); }
}

/* ── SUBTEXT ────────────────────────────────────── */
.cs-subtext {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  line-height: 1.75;
  color: var(--text);
  max-width: 520px;
  margin: 0 auto 40px;
  opacity: 0;
  animation: textFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 2.2s forwards;
}

@keyframes textFadeUp {
  from { opacity: 0; transform: translateY(20px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── EMAIL FORM ─────────────────────────────────── */
.cs-form {
  width: 100%;
  max-width: 480px;
  opacity: 0;
  animation: formReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.6s forwards;
}

@keyframes formReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.cs-form-inner {
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 60px;
  padding: 6px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.3s;
  position: relative;
  overflow: hidden;
}

/* Animated border glow on the form */
.cs-form-inner::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 62px;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(255,127,107,0.3),
    transparent,
    rgba(232,224,240,0.3),
    transparent
  );
  z-index: -1;
  opacity: 0;
  animation: borderRotate 6s linear infinite;
  transition: opacity 0.4s;
}

.cs-form-inner:focus-within::before {
  opacity: 1;
}

@keyframes borderRotate {
  to { transform: rotate(360deg); }
}

.cs-form-inner:focus-within {
  border-color: rgba(255, 127, 107, 0.35);
  box-shadow:
    0 12px 40px rgba(255, 127, 107, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

.cs-form-inner input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 14px 22px;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--dark);
  min-width: 0;
}

.cs-form-inner input::placeholder {
  color: #bbb;
  transition: color 0.3s;
}

.cs-form-inner input:focus::placeholder {
  color: #ddd;
}

.cs-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--peach-soft), var(--peach));
  background-size: 200% 200%;
  color: #fff;
  border: none;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.3s, box-shadow 0.3s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  animation: btnPulse 3s ease-in-out 4s infinite;
}

@keyframes btnPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(255,127,107,0.2); }
  50%      { box-shadow: 0 6px 25px rgba(255,127,107,0.4); }
}

/* Button shine sweep */
.cs-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  animation: btnShine 5s ease-in-out 4s infinite;
}

@keyframes btnShine {
  0%   { left: -100%; }
  30%  { left: 150%; }
  100% { left: 150%; }
}

.cs-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 30px rgba(255, 127, 107, 0.4);
  animation-play-state: paused;
}

.cs-btn:active {
  transform: translateY(0) scale(0.98);
}

.cs-form-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-light);
  margin-top: 14px;
  opacity: 0;
  animation: textFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 3.2s forwards;
}

/* ── SUCCESS STATE ──────────────────────────────── */
.cs-success {
  text-align: center;
  padding: 10px 0;
  animation: successPop 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes successPop {
  0%   { opacity: 0; transform: scale(0.5); filter: blur(8px); }
  60%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.cs-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  animation: checkBounce 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@keyframes checkBounce {
  0%   { transform: scale(0) rotate(-45deg); }
  60%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.cs-success h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: 8px;
}

.cs-success p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
}

.cs-error {
  text-align: center;
  padding: 10px 0;
  animation: successPop 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cs-error h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: #b71c1c;
  margin-bottom: 8px;
}

.cs-error p {
  font-size: 14px;
  color: #7f1d1d;
  line-height: 1.6;
}


/* ── SOCIAL LINKS ───────────────────────────────── */
.cs-socials {
  display: flex;
  gap: 18px;
  margin-top: 40px;
}

.cs-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--text);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  animation: socialPop 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cs-socials a:nth-child(1) { animation-delay: 3.2s; }
.cs-socials a:nth-child(2) { animation-delay: 3.35s; }
.cs-socials a:nth-child(3) { animation-delay: 3.5s; }

@keyframes socialPop {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cs-socials a:hover {
  background: rgba(255, 127, 107, 0.12);
  color: var(--peach);
  border-color: rgba(255, 127, 107, 0.25);
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 8px 20px rgba(255, 127, 107, 0.2);
}

/* ── FOOTER ─────────────────────────────────────── */
.cs-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 20px 24px;
  font-size: 12px;
  color: var(--text-light);
  opacity: 0;
  animation: textFadeUp 1s ease 3.8s forwards;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 600px) {
  .cs-main {
    padding: 40px 20px 30px;
  }

  .cs-form-inner {
    flex-direction: column;
    border-radius: 20px;
    padding: 6px;
  }

  .cs-form-inner input {
    padding: 16px 20px;
    text-align: center;
  }

  .cs-btn {
    padding: 14px 24px;
    border-radius: 14px;
    width: 100%;
  }

  .cs-headline {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .cs-badge {
    font-size: 10px;
    padding: 8px 20px;
    letter-spacing: 1.5px;
  }
}

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}