.contee-intro-overlay{
  position:fixed;
  z-index:12000;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#2d2825;
  background-color:var(--porcelain,#fbfaf7);
  background-image:
    linear-gradient(rgba(45,40,37,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(45,40,37,.038) 1px,transparent 1px);
  background-size:36px 36px;
  opacity:0;
  transition:opacity .24s ease;
}
.contee-intro-overlay.is-playing{opacity:1}
.contee-intro-overlay.is-leaving{opacity:0;pointer-events:none}
.contee-intro{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.contee-intro:before{
  content:"";
  position:absolute;
  z-index:-2;
  width:min(72vw,760px);
  aspect-ratio:1;
  border:1px solid rgba(201,120,91,.2);
  border-radius:50%;
  opacity:0;
  transform:scale(.74);
}
.contee-intro-overlay.is-playing .contee-intro:before{
  animation:contee-intro-ring 1.05s ease .1s both;
}
.contee-intro-aura{
  position:absolute;
  z-index:-1;
  width:min(54vw,580px);
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(201,120,91,.09);
  filter:blur(54px);
  opacity:0;
  transform:scale(.65);
}
.contee-intro-overlay.is-playing .contee-intro-aura{
  animation:contee-intro-aura 1.45s ease both;
}
.contee-intro-stage{
  width:min(92vw,760px);
  display:grid;
  place-items:center;
  transform:translateY(-2vh);
}
.contee-intro-logo{
  width:min(62vw,390px);
  height:min(62vw,390px);
  overflow:hidden;
  opacity:0;
  transform:scale(.96);
}
.contee-intro-overlay.is-playing .contee-intro-logo{
  animation:contee-intro-logo-in .34s ease .04s forwards;
}
.contee-intro-logo svg{
  display:block;
  width:100%;
  height:100%;
  transform:scale(1.04);
  transform-origin:center;
}
.contee-intro-copy{
  margin-top:-24px;
  text-align:center;
  opacity:0;
  transform:translateY(12px);
}
.contee-intro-overlay.is-playing .contee-intro-copy{
  animation:contee-intro-copy-in .42s cubic-bezier(.16,1,.3,1) 1.08s forwards;
}
.contee-intro-copy p{
  margin:0 0 10px;
  color:#70665f;
  font:650 11px/1.3 var(--font,Inter,sans-serif);
  letter-spacing:.13em;
  text-transform:uppercase;
}
.contee-intro-copy h1{
  margin:0;
  font:600 clamp(34px,5vw,58px)/1 var(--font-display,Georgia,serif);
  letter-spacing:-.025em;
}
.contee-intro-copy h1 em{color:var(--terracotta,#c9785b);font-weight:500}
.contee-intro-skip{
  position:absolute;
  z-index:3;
  top:max(18px,env(safe-area-inset-top));
  right:max(18px,env(safe-area-inset-right));
  min-width:78px;
  min-height:44px;
  border:1px solid #e3ddd6;
  border-radius:13px;
  background:rgba(255,254,252,.9);
  color:#2d2825;
  font:750 13px var(--font,Inter,sans-serif);
  box-shadow:0 8px 28px rgba(45,40,37,.08);
  backdrop-filter:blur(10px);
}
.contee-intro-skip:hover,.contee-intro-skip:focus-visible{
  border-color:#c9785b;
  outline:0;
  box-shadow:0 0 0 4px rgba(201,120,91,.16);
}
@keyframes contee-intro-ring{
  0%{opacity:0;transform:scale(.74)}
  55%{opacity:1}
  100%{opacity:0;transform:scale(1.08)}
}
@keyframes contee-intro-aura{
  0%{opacity:0;transform:scale(.65)}
  48%{opacity:1}
  100%{opacity:.18;transform:scale(1.22)}
}
@keyframes contee-intro-logo-in{to{opacity:1;transform:scale(1)}}
@keyframes contee-intro-copy-in{to{opacity:1;transform:none}}
