.intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: #f2efe7;
  color: #353630;
  opacity: 1;
  transition: opacity 2.8s ease;
}
.intro[hidden] { display: none; }
body.intro-active { overflow: hidden; }
body.intro-active main { visibility: hidden; }
.intro-stage { position: relative; width: min(620px, calc(100% - 48px)); min-height: 240px; }
.intro-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.intro-arrow, .intro-solid, .intro-corruption {
  position: absolute;
  inset: 0;
  background: #6f293e;
  mask: url('brand/vetrivel-mark.png') center / contain no-repeat;
  -webkit-mask: url('brand/vetrivel-mark.png') center / contain no-repeat;
}
.intro-arrow {
  clip-path: inset(0 55% 49% 0);
  transform-origin: 30.5% 34%;
  transition: transform 6.5s cubic-bezier(.45, 0, .15, 1), opacity 2.2s ease;
}
.intro-rest {
  position: absolute;
  inset: 0;
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%, 0 52%, 45% 52%);
  transition: opacity 5.5s ease;
}
.intro-corruption { background: transparent; opacity: .85; transition: opacity 5.5s ease; }
.intro.is-revealing .intro-mark { animation: intro-emerge 7s ease forwards; }
.intro.is-separating .intro-arrow { transform: translate(calc(73px - min(310px, calc(50vw - 24px))), 35px) scale(.72); }
/* Rotate the original masked logo fragment after its glide has settled. */
.intro.is-turning .intro-arrow {
  transform: translate(calc(73px - min(310px, calc(50vw - 24px))), 35px) scale(.72) rotate(30deg);
  transition-duration: 2.8s, 2.2s;
}
.intro.is-closing-text .intro-arrow { opacity: 0; }
.intro.is-separating .intro-rest { opacity: 0; }
.intro.is-separating .intro-corruption { opacity: 0; }
.intro-copy { margin-left: 84px; min-height: 240px; display: flex; align-items: center; opacity: 0; transition: opacity 2s ease; }
.intro.is-typing .intro-copy { opacity: 1; }
.intro.is-typing.is-changing-text .intro-copy { opacity: 0; transition-duration: 1.8s; }
.intro.is-typing.is-closing-text .intro-copy { opacity: 0; }
.intro-line { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(20px, 3vw, 25px); line-height: 1.65; letter-spacing: -.015em; }
.intro-letter { animation: intro-letter 1s ease both; }
.intro-cursor { display: inline-block; width: 1px; height: .85em; margin-left: 4px; background: #6f293e; animation: intro-caret 2.4s ease-in-out infinite; }
.intro.is-finished .intro-cursor { visibility: hidden; }
.intro-purpose {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 3s ease, transform 3s ease, visibility 3s;
}
.intro.is-purpose .intro-purpose { opacity: 1; visibility: visible; transform: translateY(0); }
.intro-purpose-thought { max-width: 560px; font: clamp(25px, 4vw, 34px)/1.5 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; text-wrap: balance; }
.intro.is-purpose .intro-skip { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-skip { position: absolute; right: 32px; bottom: max(28px, env(safe-area-inset-bottom)); padding: 10px 0 10px 12px; border: 0; background: transparent; color: #696b63; font: 11px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; cursor: pointer; }
.intro-skip span { margin-left: 8px; color: #6f293e; }
.intro-skip:hover { color: #6f293e; }
.intro-skip:focus-visible { outline: 1px solid #6f293e; outline-offset: 5px; }
.intro.is-leaving { opacity: 0; pointer-events: none; }
@keyframes intro-emerge {
  0% { opacity: 0; }
  18% { opacity: .08; }
  32% { opacity: .24; }
  41% { opacity: .17; }
  58% { opacity: .48; }
  70% { opacity: .38; }
  87% { opacity: .82; }
  100% { opacity: 1; }
}
@keyframes intro-letter { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: blur(0); } }
@keyframes intro-caret { 0%, 100% { opacity: .65; } 50% { opacity: .08; } }
@media (max-width: 480px) {
  .intro-copy { margin-left: 60px; min-height: 280px; }
  .intro-skip { right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  body.intro-active { overflow: auto; }
  body.intro-active main { visibility: visible; }
}