#intro { display: none; }
.intro-on #intro {
  display: block; position: fixed; inset: 0; z-index: 100; overflow: hidden;
  background: #05010d url(/assets/img/wall.webp) center / cover no-repeat;
  transition: opacity .7s, visibility .7s;
}
.intro-on body { overflow: hidden; }
.intro-on.intro-done body { overflow: auto; }
#intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

#intro-lasers, #confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#intro-lasers { z-index: 1; opacity: 0; transition: opacity .5s .3s; }
#intro.is-open #intro-lasers { opacity: 1; }
#confetti { z-index: 6; }

/* 鋼鉄の扉 */
.door {
  position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 3;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%, rgba(0,0,0,.4)),
    repeating-linear-gradient(90deg, #15101f 0 3px, #1b1529 3px 6px);
  transition: transform 1.5s cubic-bezier(.7, 0, .2, 1) .35s;
  box-shadow: 0 0 60px rgba(0,0,0,.8);
}
.door::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 14px var(--pink), 0 0 34px var(--pink), 0 0 70px var(--pink);
  animation: seam-flicker 3.2s infinite;
}
.door-left { left: 0; }
.door-left::after { right: 0; }
.door-right { right: 0; }
.door-right::after { left: 0; }
#intro.is-open .door-left { transform: translateX(-103%); }
#intro.is-open .door-right { transform: translateX(103%); }

.seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 80vmin; margin-left: -40vmin; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,47,168,.45), rgba(58,123,255,.12) 45%, transparent 70%);
  animation: throb 1.2s ease-in-out infinite;
}
#intro.is-open .seam { opacity: 0; transition: opacity .5s; animation: none; }

/* ネオンサイン */
.sign {
  position: absolute; left: 50%; top: 38%; z-index: 5; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 100%; text-align: center;
  animation: sign-on 1.6s steps(1) both;
}
.crown { width: clamp(46px, 12vw, 80px); color: var(--pink-soft); fill: var(--pink-soft); filter: drop-shadow(0 0 6px var(--pink)) drop-shadow(0 0 18px var(--pink)); }
.sign-logo {
  font-family: var(--font-script); font-size: clamp(5.5rem, 30vw, 14rem); line-height: 1; color: #fff; padding: 0 .1em;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--pink), 0 0 28px var(--pink), 0 0 60px var(--pink), 0 0 110px var(--pink);
}
.sign-sub {
  font-family: var(--font-head); font-weight: 800; letter-spacing: .22em; font-size: clamp(.5rem, 2.4vw, .8rem); color: #fff; margin-top: .8rem;
  text-shadow: 0 0 6px var(--blue), 0 0 16px var(--blue), 0 0 34px var(--blue);
}
#intro.is-open .sign { animation: sign-out 1.5s cubic-bezier(.5, 0, .9, .4) .2s forwards; }

.flash { position: absolute; inset: 0; z-index: 7; background: #fff; opacity: 0; pointer-events: none; }
#intro.is-open .flash { animation: flash .9s ease-out; }

.enter-btn {
  position: absolute; left: 50%; bottom: max(11%, 4.5rem); transform: translateX(-50%); z-index: 8;
  font-family: var(--font-head); font-weight: 900; font-size: 1.1rem; letter-spacing: .4em; padding: 1em 2.2em 1em 2.6em; color: #fff;
  background: rgba(5,1,13,.55); border: 2px solid var(--pink); border-radius: 999px; cursor: pointer;
  box-shadow: 0 0 16px var(--pink), inset 0 0 16px rgba(255,47,168,.5);
  animation: pulse 1.4s ease-in-out infinite; transition: opacity .3s;
}
.enter-btn span { text-shadow: 0 0 10px var(--pink); }
.enter-btn:focus-visible { outline: none; }
#intro.is-open .enter-btn { opacity: 0; pointer-events: none; animation: none; }
.skip-btn {
  position: absolute; top: 1rem; right: 1rem; z-index: 9; background: rgba(0,0,0,.55);
  color: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: .4rem 1rem; font-weight: 700; cursor: pointer;
  font-family: var(--font-head); font-weight: 800; font-size: .7rem; letter-spacing: .2em;
}

@keyframes sign-on {
  0% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: .1; } 18% { opacity: 1; } 22% { opacity: .2; }
  40% { opacity: .2; } 44% { opacity: 1; } 52% { opacity: .5; } 56%, 100% { opacity: 1; }
}
@keyframes seam-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 49% { opacity: .35; } 51% { opacity: 1; } 78% { opacity: .6; } 80% { opacity: 1; } }
@keyframes throb { 0%, 100% { opacity: .55; transform: scaleX(.9); } 50% { opacity: 1; transform: scaleX(1.1); } }
@keyframes sign-out {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: brightness(1); }
  25% { transform: translate(-50%, -50%) scale(1.04); filter: brightness(2.2); }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; filter: brightness(1); }
}
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255,47,168,.7), inset 0 0 14px rgba(255,47,168,.4); }
  50% { box-shadow: 0 0 36px rgba(255,47,168,1), 0 0 70px rgba(155,77,255,.8), inset 0 0 22px rgba(255,47,168,.7); }
}

@media (prefers-reduced-motion: reduce) {
  .enter-btn, .seam, .sign, .door::after { animation: none; }
}