/* Intro splash */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  overflow: hidden;
}
.intro-entering { opacity: 0; }
.intro-showing { opacity: 1; transition: opacity 0.6s ease; }
.intro-exiting {
  opacity: 0;
  transition: opacity 0.9s ease, transform 1s var(--ease-out);
  transform: scale(1.02);
  pointer-events: none;
}

.intro-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(200, 168, 104, 0.08), transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(40, 30, 18, 0.6), transparent 80%),
    var(--bg-0);
}

.intro-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.18'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
}

.intro-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 0 32px;
  text-align: center;
}

.intro-line-wrap {
  height: 1px;
  width: 0;
  overflow: hidden;
}
.intro-showing .intro-line-wrap {
  width: 80px;
  transition: width 1.4s 0.2s var(--ease-out);
}
.intro-line {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--accent);
}

.intro-jp {
  margin: 0;
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: 0.3em;
  color: var(--ink-1);
  display: flex;
  gap: 0;
}
.intro-jp + .intro-jp { margin-top: -16px; }
.intro-jp .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
}
.intro-showing .intro-jp .ch {
  animation: introCh 0.9s var(--ease-out) both;
}
/* Line 1: 一切、妥協しない。 — 9 chars, starts at 0.4s */
.intro-showing .intro-jp:not(.intro-jp-2) .ch:nth-child(1) { animation-delay: 0.40s; }
.intro-showing .intro-jp:not(.intro-jp-2) .ch:nth-child(2) { animation-delay: 0.48s; }
.intro-showing .intro-jp:not(.intro-jp-2) .ch:nth-child(3) { animation-delay: 0.56s; }
.intro-showing .intro-jp:not(.intro-jp-2) .ch:nth-child(4) { animation-delay: 0.64s; }
.intro-showing .intro-jp:not(.intro-jp-2) .ch:nth-child(5) { animation-delay: 0.72s; }
.intro-showing .intro-jp:not(.intro-jp-2) .ch:nth-child(6) { animation-delay: 0.80s; }
.intro-showing .intro-jp:not(.intro-jp-2) .ch:nth-child(7) { animation-delay: 0.88s; }
.intro-showing .intro-jp:not(.intro-jp-2) .ch:nth-child(8) { animation-delay: 0.96s; }
.intro-showing .intro-jp:not(.intro-jp-2) .ch:nth-child(9) { animation-delay: 1.04s; }
/* Line 2: 私立文系専門塾。 — 8 chars, starts at 1.30s */
.intro-showing .intro-jp-2 .ch:nth-child(1) { animation-delay: 1.30s; }
.intro-showing .intro-jp-2 .ch:nth-child(2) { animation-delay: 1.38s; }
.intro-showing .intro-jp-2 .ch:nth-child(3) { animation-delay: 1.46s; }
.intro-showing .intro-jp-2 .ch:nth-child(4) { animation-delay: 1.54s; }
.intro-showing .intro-jp-2 .ch:nth-child(5) { animation-delay: 1.62s; }
.intro-showing .intro-jp-2 .ch:nth-child(6) { animation-delay: 1.70s; }
.intro-showing .intro-jp-2 .ch:nth-child(7) { animation-delay: 1.78s; }
.intro-showing .intro-jp-2 .ch:nth-child(8) { animation-delay: 1.86s; }

@keyframes introCh {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.intro-brand {
  margin: 0;
  font-family: var(--serif-en);
  font-size: clamp(38px, 7vw, 88px);
  letter-spacing: 0.18em;
  color: var(--ink-0);
  font-weight: 500;
  opacity: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.intro-brand-logo {
  display: inline-flex;
  width: clamp(48px, 7vw, 88px);
  height: clamp(48px, 7vw, 88px);
  color: var(--accent);
}
.intro-brand-logo svg { width: 100%; height: 100%; }
.intro-brand-dot { color: var(--accent); }
.intro-showing .intro-brand {
  animation: introBrand 1.4s 2.2s var(--ease-out) forwards;
}
@keyframes introBrand {
  from { opacity: 0; transform: translateY(20px); letter-spacing: 0.4em; filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); letter-spacing: 0.18em; filter: blur(0); }
}

.intro-tag {
  margin: 0;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.15em;
  color: var(--accent);
  opacity: 0;
}
.intro-showing .intro-tag {
  animation: introFade 1s 2.8s var(--ease-out) forwards;
}
@keyframes introFade {
  to { opacity: 1; }
}

/* corners */
.intro-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1px solid var(--accent);
  opacity: 0;
}
.intro-showing .intro-corner {
  animation: introCorner 1s 3s var(--ease-out) forwards;
}
@keyframes introCorner {
  to { opacity: 0.5; }
}
.intro-corner.tl { top: 32px; left: 32px; border-right: none; border-bottom: none; }
.intro-corner.tr { top: 32px; right: 32px; border-left: none; border-bottom: none; }
.intro-corner.bl { bottom: 32px; left: 32px; border-right: none; border-top: none; }
.intro-corner.br { bottom: 32px; right: 32px; border-left: none; border-top: none; }

@media (max-width: 600px) {
  .intro-jp { letter-spacing: 0.18em; }
  .intro-corner { width: 24px; height: 24px; }
  .intro-corner.tl, .intro-corner.tr { top: 20px; }
  .intro-corner.tl, .intro-corner.bl { left: 20px; }
  .intro-corner.tr, .intro-corner.br { right: 20px; }
  .intro-corner.bl, .intro-corner.br { bottom: 20px; }
}