/* Split the two voices: homepage intro (creator / twin),
   Advertising + Award School intro (creations / talking work).
   CSS only — this site has no React, so no Framer Motion.
   2.5s: line one, line two, hold, fade. Click or Escape skips. */

.layer-intro{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 4000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px;
  background: #050308;
  cursor: pointer;
}

html.layer-intro-pending .layer-intro,
html.layer-intro-active .layer-intro{
  display: flex;
}

.layer-intro[data-voice="creations"]{
  background: #0B0F1A;
}

.layer-intro-voices{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  opacity: 0;
  animation: layer-intro-in 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.layer-intro-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: scale(0.7);
  animation: layer-intro-dot 1800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.layer-intro-dot--creator{
  background: #00F0FF;
  box-shadow: 0 0 14px rgba(0,240,255,0.7);
  animation-delay: 80ms;
}

.layer-intro-dot--creation{
  background: #2AA8BC;
  box-shadow: 0 0 14px rgba(42,168,188,0.65);
  animation-delay: 720ms;
}

.layer-intro[data-accent="cyan"] .layer-intro-dot--creation{
  background: #00F0FF;
  box-shadow: 0 0 14px rgba(0,240,255,0.7);
}

.layer-intro-line{
  margin: 0;
  max-width: 22ch;
  text-align: center;
  font-family: "Oxanium", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 4.2vw, 36px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #EAF6FF;
  opacity: 0;
  transform: translateY(18px);
  animation: layer-intro-in 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.layer-intro-line--2{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 2.4vw, 20px);
  letter-spacing: 0.04em;
  color: rgba(234,246,255,0.62);
  animation-delay: 720ms;
}

.layer-intro[data-voice="creator"] .layer-intro-line--1{
  color: #00F0FF;
  text-shadow: 0 0 22px rgba(0,240,255,0.35);
}

.layer-intro[data-voice="creations"] .layer-intro-line--1{
  color: #2AA8BC;
}

.layer-intro[data-accent="cyan"] .layer-intro-line--1{
  color: #00F0FF;
  text-shadow: 0 0 22px rgba(0,240,255,0.28);
}

.layer-intro-skip{
  position: absolute;
  bottom: 28px;
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(234,246,255,0.28);
  opacity: 0;
  animation: layer-intro-in 400ms ease 1200ms forwards;
}

.layer-intro--out{
  animation: layer-intro-out 500ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

.layer-intro--out .layer-intro-line,
.layer-intro--out .layer-intro-voices,
.layer-intro--out .layer-intro-skip{
  animation: none;
  opacity: 1;
  transform: none;
}

html.layer-intro-active,
html.layer-intro-pending{
  overflow: hidden;
}

@keyframes layer-intro-in{
  to { opacity: 1; transform: translateY(0); }
}
@keyframes layer-intro-dot{
  0% { transform: scale(0.55); opacity: 0.4; }
  40% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes layer-intro-out{
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce){
  .layer-intro,
  .layer-intro-line,
  .layer-intro-voices,
  .layer-intro-dot,
  .layer-intro-skip,
  .layer-intro--out{
    animation: none;
  }
  .layer-intro-line,
  .layer-intro-voices,
  .layer-intro-skip{ opacity: 1; transform: none; }
  .layer-intro-dot{ transform: none; opacity: 1; }
}