/* ARCHZI signature entrance • edit this file to change welcome typography or animation.
   The actual ARCHZI arch and square are reused from the official logo artwork. */
:root{--intro-ink:#242722}
.intro-arch-home{isolation:isolate}
.intro-inner{gap:clamp(7px,1.15vw,12px)}
.intro-name{font-family:var(--sans);font-weight:500;letter-spacing:.17em;line-height:1.08}
/* Oversized-to-finished, one letter at a time. The wrapped I must be targeted separately. */
.intro-letter,
.intro-name > .intro-i-wrap > .intro-letter{
  display:inline-block;
  opacity:0;
  filter:blur(7px);
  transform:translateY(-16px) scale(4.5);
  transform-origin:50% 52%;
  animation:archzi-letter-settle 1.06s cubic-bezier(.16,1,.28,1) both;
  animation-play-state:paused;
  will-change:transform,opacity,filter;
}
.intro-gate.is-playing .intro-letter{animation-play-state:running}
.intro-name > .intro-letter:nth-child(1){animation-delay:.66s}
.intro-name > .intro-letter:nth-child(2){animation-delay:.84s}
.intro-name > .intro-letter:nth-child(3){animation-delay:1.02s}
.intro-name > .intro-letter:nth-child(4){animation-delay:1.20s}
.intro-name > .intro-letter:nth-child(5){animation-delay:1.38s}
.intro-name > .intro-i-wrap > .intro-letter{animation-delay:1.56s}
@keyframes archzi-letter-settle{
  0%{opacity:0;filter:blur(9px);transform:translateY(-16px) scale(4.5)}
  35%{opacity:.94}
  76%{filter:blur(.1px)}
  100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
}
/* A small dot briefly sits above the I before returning to the official logo's upper-left square. */
.intro-square{animation:archzi-dot-home 1.8s cubic-bezier(.16,.88,.24,1) 2.56s both;animation-play-state:paused}
.intro-gate.is-playing .intro-square{animation-play-state:running}
@keyframes archzi-dot-home{
  0%{opacity:0;transform:translate(var(--sq-dx,0px),var(--sq-dy,0px)) scale(.17)}
  13%{opacity:1;transform:translate(var(--sq-dx,0px),var(--sq-dy,0px)) scale(.25)}
  47%{opacity:1;transform:translate(var(--sq-dx,0px),var(--sq-dy,0px)) scale(.25)}
  100%{opacity:1;transform:translate(0,0) scale(1)}
}
/* Same sans-serif family as ARCHZI. Larger than before and proportionally scaled for each screen. */
.intro-motto{
  font-family:var(--sans);
  font-size:clamp(21px,2.15vw,29px);
  font-weight:400;
  letter-spacing:.035em;
  line-height:1.22;
  text-transform:none;
  white-space:nowrap;
  width:max-content;
  max-width:none;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  opacity:0;
  clip-path:inset(0 100% 0 0);
  animation:none;
}
.intro-gate.is-playing .intro-motto{
  animation:archzi-motto-type 1.45s steps(17,end) 4.54s both;
}
@keyframes archzi-motto-type{
  from{opacity:1;clip-path:inset(0 100% 0 0)}
  to{opacity:1;clip-path:inset(0 0 0 0)}
}
.intro-bottom{animation:rise .7s ease 6.10s both;animation-play-state:paused}
.intro-gate.is-playing .intro-bottom{animation-play-state:running}
@media(max-width:760px){
  .intro-inner{gap:clamp(6px,1.9vw,10px)}
  .intro-name{font-size:clamp(25px,6.6vw,38px)}
  .intro-motto{font-size:clamp(16px,4.5vw,23px);letter-spacing:.01em}
}
@media(max-width:380px){
  .intro-name{font-size:clamp(22px,6.4vw,30px)}
  .intro-motto{font-size:clamp(15px,4.45vw,18px)}
}
@media(prefers-reduced-motion:reduce){
  .intro-arch-home{opacity:1;transform:none;animation:none!important}
  .intro-letter,.intro-name > .intro-i-wrap > .intro-letter{animation:none!important;opacity:1;filter:none;transform:none}
  .intro-square{animation:none!important;opacity:1;transform:none!important}
  .intro-motto{animation:none!important;opacity:1;clip-path:none}
  .intro-bottom{animation:none!important;opacity:1;transform:none}
}