/* ============================================================
   WELCOME PAGE — Cinematic logo reveal + breathing pulse
   ============================================================ */

.welcome-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.welcome-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  position: relative;
}

.welcome-enter-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  cursor: pointer;
  transition: transform 0.6s var(--ease-out);
  color: inherit;
  text-decoration: none;
}

.welcome-enter-area:hover {
  transform: translateY(-4px);
}

.welcome-enter-area:active {
  transform: translateY(0);
}

.logo-wrapper {
  width: 100%;
  max-width: 460px;
}

.logo-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   LOGO ANIMATIONS
   ============================================================
   Phase 1 (0-3.5s): Cinematic entrance
   Phase 2 (3.5s+): Continuous breathing pulse
   ============================================================ */

/* AURA */
.logo-aura {
  opacity: 0;
  transform-origin: 290px 270px;
  transform-box: fill-box;
  animation:
    aura-in 1.2s var(--ease-out) 0.2s forwards,
    aura-breathe 7s ease-in-out 3.8s infinite;
}

@keyframes aura-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes aura-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.72; transform: scale(1.08); }
}

/* SPARKLES */
.logo-sparkles circle {
  opacity: 0;
  animation: sparkle-in 0.8s var(--ease-out) forwards;
}

.logo-sparkles circle:nth-child(1) { animation-delay: 1.8s; }
.logo-sparkles circle:nth-child(2) { animation-delay: 2.2s; }
.logo-sparkles circle:nth-child(3) { animation-delay: 2.0s; }
.logo-sparkles circle:nth-child(4) { animation-delay: 2.4s; }
.logo-sparkles circle:nth-child(5) { animation-delay: 2.1s; }
.logo-sparkles circle:nth-child(6) { animation-delay: 2.3s; }

@keyframes sparkle-in {
  from { opacity: 0; }
  to   { /* keep the inline opacity as the target */ }
}

/* SPIRAL — stroke draw-in */
.logo-spiral {
  /* Path length approximately 1070 for this spiral. Use large value to ensure full coverage */
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation:
    spiral-draw 2.4s var(--ease-in-out) 0.6s forwards,
    spiral-shimmer 8s ease-in-out 3.6s infinite;
}

@keyframes spiral-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes spiral-shimmer {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}

/* DIVIDER LINES */
.logo-divider-left line,
.logo-divider-right line {
  opacity: 0;
  animation: divider-in 0.8s var(--ease-out) 2.7s forwards;
}

.logo-divider-left line {
  transform: scaleX(0);
  transform-origin: right center;
  transform-box: fill-box;
  animation-name: divider-in-left;
}

.logo-divider-right line {
  transform: scaleX(0);
  transform-origin: left center;
  transform-box: fill-box;
  animation-name: divider-in-right;
}

@keyframes divider-in-left {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 0.3; transform: scaleX(1); }
}

@keyframes divider-in-right {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 0.3; transform: scaleX(1); }
}

/* DESTELLO — pops in with a scale bounce */
.logo-destello {
  opacity: 0;
  transform: scale(0.2);
  transform-origin: 290px 448px;
  transform-box: fill-box;
  animation:
    destello-in 0.6s var(--ease-out) 2.5s forwards,
    destello-pulse 5.5s ease-in-out 3.8s infinite;
}

@keyframes destello-in {
  0%   { opacity: 0;    transform: scale(0.2) rotate(-20deg); }
  60%  { opacity: 1;    transform: scale(1.2) rotate(5deg); }
  100% { opacity: 0.95; transform: scale(1) rotate(0deg); }
}

@keyframes destello-pulse {
  0%, 100% { opacity: 0.95; transform: scale(1); filter: brightness(1); }
  50%      { opacity: 1;    transform: scale(1.12); filter: brightness(1.2); }
}

/* WORDMARK — fades up letter-by-letter illusion via mask */
.logo-simlev,
.logo-projects {
  opacity: 0;
}

.logo-simlev {
  animation: wordmark-in 1.2s var(--ease-out) 3.0s forwards;
}

.logo-projects {
  animation: wordmark-in 1.2s var(--ease-out) 3.3s forwards;
}

@keyframes wordmark-in {
  from { opacity: 0; letter-spacing: 30px; }
  to   { opacity: 1; }
}

.logo-simlev {
  /* Keep the spacing defined in SVG */
}

/* ============================================================
   ENTER PROMPT
   ============================================================ */

.welcome-prompt {
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: prompt-in 1s var(--ease-out) 4.2s forwards;
}

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

.welcome-prompt-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sl-text-mute);
  transition: color 0.3s var(--ease-out);
}

.welcome-prompt-arrow {
  font-size: 1rem;
  color: var(--sl-accent);
  animation: arrow-bounce 2.5s ease-in-out 4.5s infinite;
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(4px); opacity: 1; }
}

.welcome-enter-area:hover .welcome-prompt-text {
  color: var(--sl-accent);
}

/* ============================================================
   FOOTER
   ============================================================ */

.welcome-footer {
  padding: 2rem 1.5rem;
  text-align: center;
  opacity: 0;
  animation: footer-in 1.2s var(--ease-out) 4.5s forwards;
}

@keyframes footer-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.welcome-meaning {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--sl-text-dim);
  letter-spacing: 0.02em;
}

.welcome-meaning .sep {
  margin: 0 0.625rem;
  opacity: 0.5;
  font-style: normal;
}

/* Language selector fade-in on welcome */
.welcome-body .lang-selector {
  opacity: 0;
  animation: footer-in 1s var(--ease-out) 4.8s forwards;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {
  .lang-selector {
    top: 1.25rem;
    right: 1.5rem;
  }

  .welcome-enter-area {
    gap: 2rem;
  }

  .welcome-meaning {
    font-size: 0.8125rem;
  }
}