@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700;900&display=swap);
/* === Fonts === */

/* ===== Timing vars ===== */
:root{
  --introDuration: 4s; /* PLANK sequence (letters keep looping individually) */
  --wordStep: 2s;      /* seconds per word in morphing */
}

/* ===== Screen split container ===== */
.landing-split{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
  pointer-events: none; /* 🔧 Dec 18: Allow clicks to pass through to PlusButton */
}

/* 50 / 50 regions */
.landing-top,
.landing-bottom{
  position: relative;
  width: 100%;
  flex: 1 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---------- TOP 50%: PLANK (web-only) ---------- */
.plank-contained{
  position: relative;
  width: 100%;
  height: 100%;
}

.plank-container{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Keep visible in its half; no cross-fade here */
  pointer-events:none;
}

.disappear{
  font-family:'Poppins',sans-serif;
  font-size: min(16vw, 160px);
  font-weight: 900;
  text-transform:uppercase;
  text-align:center;
  line-height:1;
  height:fit-content;
  color: #FFD700; /* base color so you always see something */
}

.disappear span{
  display:inline-block;
  color: transparent;                 /* match original spec */
  text-shadow: 0 0 0 gold;            /* becomes glowing during anim peaks */
  animation-duration: 3s;
  animation-iteration-count: infinite;/* original spec: infinite */
  animation-fill-mode: both;
  letter-spacing: 0.12em;
}

/* Original stagger & directions */
.disappear span:nth-child(1){ animation-name: disappearleft; }
.disappear span:nth-child(2){ animation-name: disappearleft; animation-delay:.3s; }
.disappear span:nth-child(3){ animation-name: disappearight; animation-delay:.6s; }
.disappear span:nth-child(4){ animation-name: disappearleft; animation-delay:.8s; }
.disappear span:nth-child(5){ animation-name: disappearight; animation-delay:1s; }

@keyframes disappearleft{
  0%   { transform: skew(0deg) translateY(0%);    text-shadow: 0 0 0 gold; opacity: 1; }
  50%  { transform: skew(50deg) translateY(-200%); text-shadow: 0 0 50px gold; opacity: 0; }
  100% { transform: skew(50deg) translateY(-200%); text-shadow: 0 0 50px gold; opacity: 0; }
}
@keyframes disappearight{
  0%   { transform: skew(0deg) translateY(0%);     text-shadow: 0 0 0 gold; opacity: 1; }
  50%  { transform: skew(-50deg) translateY(-200%); text-shadow: 0 0 50px gold; opacity: 0; }
  100% { transform: skew(-50deg) translateY(-200%); text-shadow: 0 0 50px gold; opacity: 0; }
}

/* ---------- BOTTOM 50%: MORPHING ---------- */
.morphing-contained{
  position: relative;
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding: 20px;
  box-sizing: border-box;
}

.morphing{
  position:relative;
  font-family:'Roboto Slab',serif;
  color:#fff;
  filter:contrast(25) blur(1px); /* legacy visual */
  width: 100%;
  height: 100%;
  max-width: 90vw;
  max-height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Words: properly centered and contained within bottom half */
.word{
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(36px, 8vw, 84px);
  font-weight: 700;
  line-height:1.2;
  white-space: nowrap;
  padding: 0 20px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: word 16s ease-in-out infinite;
  opacity: 0;
}

/* 8 words stagger (every 2s) */
.word:nth-child(1){ animation-delay: calc(0 * var(--wordStep)); }
.word:nth-child(2){ animation-delay: calc(1 * var(--wordStep)); }
.word:nth-child(3){ animation-delay: calc(2 * var(--wordStep)); }
.word:nth-child(4){ animation-delay: calc(3 * var(--wordStep)); }
.word:nth-child(5){ animation-delay: calc(4 * var(--wordStep)); }
.word:nth-child(6){ animation-delay: calc(5 * var(--wordStep)); }
.word:nth-child(7){ animation-delay: calc(6 * var(--wordStep)); }
.word:nth-child(8){ animation-delay: calc(7 * var(--wordStep)); }

/* Legacy morphing (blur + scale) - improved visibility */
@keyframes word{
  0%   { opacity:0; filter:blur(50px); transform:scale(1.5); }
  6%   { opacity:1; filter:blur(0);    transform:scale(1); }
  12%  { opacity:1; filter:blur(0);    transform:scale(1); }
  18%  { opacity:0; filter:blur(30px); transform:scale(0.8); }
  100% { opacity:0; filter:blur(50px); transform:scale(0.5); }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .disappear { font-size: min(18vw, 120px); }
  .word { 
    font-size: clamp(28px, 7vw, 64px);
    padding: 0 15px;
  }
  .morphing-contained { padding: 15px; }
}

@media (max-width: 480px) {
  .word { 
    font-size: clamp(24px, 6vw, 48px);
    padding: 0 10px;
  }
  .morphing-contained { padding: 10px; }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  .disappear span, .word{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
  }
  .morphing{ filter:none; }
}