/* ============================================
   ENTRY — The Neon Crossing (First View)
   concrete-jungle.jp
   Depends on: tokens.css
   ============================================ */

.entry {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-primary);
}

/* --- Background Buildings --- */
.entry__bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  align-items: end;
  padding-bottom: 20%;
  opacity: 0.3;
  z-index: 0;
}

.entry__building {
  position: relative;
  display: flex;
  justify-content: center;
  background-image: linear-gradient(180deg, transparent 0%, var(--color-bg-concrete) 30%);
}

.entry__building--1 { height: 70%; align-self: end; }
.entry__building--2 { height: 90%; align-self: end; }
.entry__building--3 { height: 60%; align-self: end; }
.entry__building--4 { height: 80%; align-self: end; }

.entry__sign {
  position: absolute;
  top: 20%;
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vw, 2rem);
  font-weight: 700;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: var(--ls-wide);
}

/* --- Main Content --- */
.entry__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-xl);
}

.entry__logo {
  position: relative;
  font-size: var(--fs-hero);
  margin-bottom: var(--space-lg);
  animation: neon-flicker 3s ease-in-out infinite alternate;
}

/* Glitch pseudo-elements */
.entry__logo::before,
.entry__logo::after {
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.entry__logo::before {
  color: var(--color-neon-cyan);
  animation: glitch-1 2s infinite linear alternate-reverse;
  clip-path: inset(40% 0 20% 0);
}

.entry__logo::after {
  color: var(--color-neon-purple);
  animation: glitch-2 3s infinite linear alternate-reverse;
  clip-path: inset(60% 0 10% 0);
}

/* --- Tagline (delayed fade-in after loader) --- */
.entry__tagline {
  opacity: 0;
  animation: fade-in 1s ease forwards 3.5s;
}

/* --- Scroll Hint --- */
.entry__scroll-hint {
  position: absolute;
  bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  animation: float 2s ease-in-out infinite;
}

.entry__scroll-arrow {
  width: 2px;
  height: 30px;
  background-image: linear-gradient(180deg, var(--color-neon-pink), transparent);
}

/* --- Keyframes --- */
@keyframes neon-flicker {
  0%   { opacity: 1; }
  5%   { opacity: 0.8; }
  10%  { opacity: 1; }
  15%  { opacity: 0.9; }
  20%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes glitch-1 {
  0%   { transform: translate(0); }
  20%  { transform: translate(-3px, 3px); }
  40%  { transform: translate(-3px, -3px); }
  60%  { transform: translate(3px, 3px); }
  80%  { transform: translate(3px, -3px); }
  100% { transform: translate(0); }
}

@keyframes glitch-2 {
  0%   { transform: translate(0); }
  20%  { transform: translate(3px, -3px); }
  40%  { transform: translate(3px, 3px); }
  60%  { transform: translate(-3px, -3px); }
  80%  { transform: translate(-3px, 3px); }
  100% { transform: translate(0); }
}

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

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