/* ============================================
   CoColour Life — Landing Screen
   ============================================ */

.landing-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-landing);
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease-out);
}

.landing-screen.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xl);
  position: relative;
  z-index: 2;
}

/* Logo */
.landing-logo {
  width: clamp(120px, 25vw, 200px);
  height: clamp(120px, 25vw, 200px);
  margin-bottom: var(--space-2xl);
  cursor: pointer;
  transition: transform 0.5s var(--ease-spring);
  animation: logoFloat 4s ease-in-out infinite;
}

.landing-logo:hover {
  transform: scale(1.05);
}

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

.logo-ring {
  width: 100%;
  height: 100%;
  animation: logoSpin 30s linear infinite;
}

@keyframes logoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Title */
.landing-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xl);
}

.title-co {
  color: var(--white);
}

.title-colour {
  background: var(--gradient-rainbow-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-life {
  color: var(--white);
}

/* Tagline */
.landing-tagline {
  margin-bottom: var(--space-2xl);
}

.tagline-mono {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.4);
  font-weight: var(--weight-light);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.02em;
}

.tagline-colour {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.7);
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
}

/* CTA */
.landing-cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.6rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  animation: ctaPulse 2.5s ease-in-out infinite;
}

.landing-cta:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
  transform: translateY(-2px);
}

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

.cta-arrow {
  transition: transform var(--duration-normal) var(--ease-out);
}

.landing-cta:hover .cta-arrow {
  transform: translateY(-2px);
}

/* Colour burst overlay */
.colour-burst {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

/* Logo glow activation — ring brightens on Enter */
.landing-logo.glow-active {
  animation: logoGlow 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes logoGlow {
  0% {
    filter: brightness(1) drop-shadow(0 0 0px transparent);
  }
  30% {
    filter: brightness(1.6) drop-shadow(0 0 20px rgba(0,201,167,0.35));
  }
  60% {
    filter: brightness(1.8) drop-shadow(0 0 40px rgba(77,166,255,0.3));
  }
  100% {
    filter: brightness(2) drop-shadow(0 0 60px rgba(196,77,255,0.25));
    transform: scale(1.08);
  }
}

/* Soft radial burst — expands gently from center */
.colour-burst.active {
  animation: burstExpand 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes burstExpand {
  0% {
    opacity: 0;
    background: radial-gradient(circle at var(--burst-x, 50%) var(--burst-y, 50%),
      rgba(0,201,167,0.3) 0%,
      rgba(77,166,255,0.2) 10%,
      rgba(255,217,61,0.12) 25%,
      rgba(255,107,107,0.08) 40%,
      rgba(196,77,255,0.05) 55%,
      transparent 75%
    );
    transform: scale(0.3);
    filter: blur(10px);
  }
  20% {
    opacity: 0.7;
    filter: blur(6px);
  }
  50% {
    opacity: 0.5;
    background: radial-gradient(circle at var(--burst-x, 50%) var(--burst-y, 50%),
      rgba(0,201,167,0.2) 0%,
      rgba(77,166,255,0.15) 15%,
      rgba(255,217,61,0.1) 30%,
      rgba(255,107,107,0.08) 50%,
      rgba(196,77,255,0.04) 70%,
      transparent 90%
    );
    transform: scale(1.8);
    filter: blur(15px);
  }
  100% {
    opacity: 0;
    transform: scale(3);
    filter: blur(30px);
  }
}

/* Screen-wide soft light wash — subtle rainbow before fade */
.landing-screen.light-wash::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  animation: lightWash 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lightWash {
  0% {
    opacity: 0;
    background: radial-gradient(ellipse at 50% 45%,
      rgba(255,255,255,0.06) 0%,
      rgba(0,201,167,0.03) 30%,
      rgba(77,166,255,0.02) 50%,
      transparent 80%
    );
  }
  50% {
    opacity: 1;
    background: radial-gradient(ellipse at 50% 45%,
      rgba(255,255,255,0.1) 0%,
      rgba(0,201,167,0.04) 30%,
      rgba(77,166,255,0.03) 50%,
      transparent 80%
    );
  }
  100% {
    opacity: 0;
    background: radial-gradient(ellipse at 50% 45%,
      rgba(255,255,255,0.15) 0%,
      rgba(0,201,167,0.05) 40%,
      transparent 80%
    );
  }
}