/* 卓涛首访品牌快闪：宣纸留白、文字快进快出与独立品牌落款。 */
.brand-intro {
  --intro-duration: 15.9s;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #171717;
  background: #f8f5ee;
  font-family: var(--font-serif-cn);
}

.brand-intro.is-active {
  display: grid;
  animation: brand-intro-curtain var(--intro-duration) linear both;
}

.brand-intro::after {
  content: "卓涛  ·  ZHUOTAO";
  position: absolute;
  z-index: 9;
  top: clamp(30px, 5vw, 62px);
  left: clamp(34px, 6vw, 92px);
  color: rgba(23, 23, 23, 0.62);
  font-family: var(--font-en-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
}

body.zt-intro-lock { overflow: hidden; }

.brand-intro-scene,
.brand-intro-finale {
  position: absolute;
  inset: 0;
}

.brand-intro-scene {
  z-index: 4;
  display: grid;
  place-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: clamp(58px, 10vw, 150px);
  text-align: center;
  pointer-events: none;
}

.brand-intro-scene p {
  margin: 0;
  opacity: 0;
  font-size: clamp(32px, 4.6vw, 72px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.025em;
  text-wrap: balance;
  will-change: opacity, transform, filter;
  animation: brand-text-slam 2.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--line-delay);
}

.brand-intro-scene p:last-child { color: #9f1d22; }
.brand-intro-scene p:first-child {
  --line-delay: var(--scene-delay);
  animation-name: brand-text-slam-first;
  animation-duration: 2.85s;
}
.brand-intro-scene p:last-child { --line-delay: calc(var(--scene-delay) + 0.4s); }
.brand-intro-scene-1 { --scene-delay: 0.2s; }
.brand-intro-scene-2 { --scene-delay: 2.75s; }
.brand-intro-scene-3 { --scene-delay: 5.3s; }
.brand-intro-scene-4 { --scene-delay: 7.85s; }
.brand-intro-scene-5 { --scene-delay: 10.8s; }

.brand-intro-scene-4 p:first-child {
  color: #5c574d;
  font-size: clamp(24px, 2.5vw, 38px);
}

.brand-intro-scene-4 p:last-child {
  color: #9f1d22;
  font-size: clamp(42px, 6vw, 92px);
}

.brand-intro .brand-intro-scene-5 p {
  --belief-open-tracking: 0.08em;
  color: #171717;
  max-width: none;
  white-space: nowrap;
  font-family: var(--font-serif-cn);
  font-size: clamp(32px, 4.6vw, 72px);
  font-weight: 700;
  animation:
    brand-belief-reveal 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 10.8s forwards,
    brand-belief-exit 0.55s cubic-bezier(0.4, 0, 1, 1) 13s forwards;
  will-change: opacity, transform, filter, letter-spacing;
}

.brand-intro-belief-accent { color: #9f1d22; }

.brand-intro-belief-tail {
  animation: brand-belief-tail-arrive 0.3s cubic-bezier(0.16, 1, 0.3, 1) 11.02s both;
}

.brand-intro-finale {
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3.5vw, 42px);
  box-sizing: border-box;
  padding: clamp(42px, 8vw, 120px);
  color: #171717;
  background: #f8f5ee;
  opacity: 0;
  animation: brand-finale-slam 2.15s cubic-bezier(0.16, 1, 0.3, 1) 13.65s both;
  will-change: opacity, transform, filter;
}

.brand-intro-finale img {
  width: clamp(92px, 10vw, 140px);
  height: auto;
}

.brand-intro-finale-type { text-align: center; }

.brand-intro-finale-name {
  margin: 0;
  color: #171717;
  font-family: var(--font-sans-cn);
  font-size: clamp(30px, 3.7vw, 54px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
}

.brand-intro-finale-name-en {
  margin: 12px 0 0;
  color: #5c574d;
  font-family: var(--font-en-sans);
  font-size: clamp(10px, 1vw, 14px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
}

@keyframes brand-text-slam-first {
  0% { opacity: 0; transform: scale(2.5) translateY(20px); filter: blur(12px); }
  15.8%, 89.5% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.7); filter: blur(6px); }
}

@keyframes brand-text-slam {
  0% { opacity: 0; transform: scale(2.5) translateY(20px); filter: blur(12px); }
  18.4%, 87.7% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.7); filter: blur(6px); }
}

@keyframes brand-belief-reveal {
  0% {
    opacity: 0;
    letter-spacing: -0.2em;
    transform: scale(0.9);
    filter: blur(12px);
  }
  100% {
    opacity: 1;
    letter-spacing: var(--belief-open-tracking);
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes brand-belief-exit {
  0% {
    opacity: 1;
    letter-spacing: var(--belief-open-tracking);
    transform: scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    letter-spacing: -0.2em;
    transform: scale(0.9);
    filter: blur(12px);
  }
}

@keyframes brand-belief-tail-arrive {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes brand-finale-slam {
  0% { opacity: 0; transform: scale(1.55) translateY(16px); filter: blur(12px); }
  22%, 88% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.96); filter: blur(3px); }
}

@keyframes brand-intro-curtain {
  0%, 97% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (max-width: 640px) {
  .brand-intro::after {
    top: 31px;
    left: 30px;
    font-size: 8px;
    letter-spacing: 0.2em;
  }

  .brand-intro-scene { padding: 64px 28px; }

  .brand-intro-scene p {
    max-width: 11em;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(28px, 8.5vw, 39px);
    line-height: 1.42;
  }

  .brand-intro-scene-4 p:first-child { font-size: 20px; }
  .brand-intro-scene-4 p:last-child { font-size: clamp(38px, 11vw, 50px); }

  .brand-intro .brand-intro-scene-5 p {
    --belief-open-tracking: 0.04em;
    max-width: none;
    font-size: clamp(20px, 5.6vw, 24px);
    line-height: 1.35;
  }
  .brand-intro-finale {
    padding: 56px 28px;
  }

  .brand-intro-finale { gap: 24px; }

  .brand-intro-finale img { width: 92px; }

  .brand-intro-finale-name {
    font-size: clamp(25px, 7.2vw, 32px);
    letter-spacing: 0.05em;
  }

  .brand-intro-finale-name-en {
    margin-top: 9px;
    font-size: 8px;
    letter-spacing: 0.11em;
  }

}