/* The D reaches the connection before the button fills from the same side. */
#canva-entrance #gate .db-gate-contour path{
  stroke:#b9a078;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:db-entry-draw var(--gate-draw-duration,2600ms) linear var(--gate-draw-delay,500ms) forwards;
}
#canva-entrance #gate .gate-action-wrap::before{
  width:var(--gate-connection-width,6.8cqw);
  height:1px;
  background:#b9a078;
  transform:scaleX(0);
  transform-origin:left center;
  animation:db-entry-connect var(--gate-connection-duration,300ms) linear var(--gate-junction-delay,2600ms) forwards;
}
#canva-entrance #gate .enter{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#c1a26b18;
  color:#e7e1d5;
  border-color:#c1a26b;
  animation:db-entry-ink 160ms ease var(--gate-ink-delay,3200ms) forwards,
    db-entry-illuminate 300ms ease var(--gate-fill-delay,2900ms) forwards;
}
#canva-entrance #gate .enter::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:#c1a26b;
  transform:scaleX(0);
  transform-origin:left center;
  animation:db-entry-fill var(--gate-fill-duration,600ms) cubic-bezier(.3,0,.2,1) var(--gate-fill-delay,2900ms) forwards;
  pointer-events:none;
}
#canva-entrance #gate .enter:hover{background:transparent}
#canva-entrance #gate .gate-name-word{position:relative;display:inline-block}
#canva-entrance #gate .gate-name-word::after{
  content:"";position:absolute;left:0;right:0;bottom:-.15em;height:1px;
  background:#b9a078;opacity:.75;transform:scaleX(0);transform-origin:left center;
  animation:db-entry-connect 450ms ease var(--gate-fill-delay,2900ms) forwards;
}
@keyframes db-entry-draw{to{stroke-dashoffset:0}}
@keyframes db-entry-connect{to{transform:scaleX(1)}}
@keyframes db-entry-fill{to{transform:scaleX(1)}}
@keyframes db-entry-ink{to{color:#080808}}
@keyframes db-entry-illuminate{to{box-shadow:0 0 18px #c1a26b38}}

/* Return along the same path, starting at the button. */
#canva-entrance #gate.opening .curtain-half{transform:none;transition:none}
#canva-entrance #gate.opening .watermarks{opacity:0;transition:opacity 300ms ease}
#canva-entrance #gate.opening .gate-name-word::after{
  transform:scaleX(var(--gate-current-underline,1));
  animation:db-entry-empty 160ms ease forwards;
}
#canva-entrance #gate.opening .gate-content{
  opacity:1;
  transition:none;
  animation:db-entry-content-off 220ms ease var(--gate-content-off-delay,1760ms) forwards;
}
#canva-entrance #gate.opening .enter{animation:db-entry-button-off 160ms ease forwards}
#canva-entrance #gate.opening .enter::before{
  transform:scaleX(var(--gate-current-fill,1));
  animation:db-entry-empty 160ms ease forwards;
}
#canva-entrance #gate.opening .gate-action-wrap::before{
  transform:scaleX(var(--gate-current-connection,1));
  animation:db-entry-disconnect var(--gate-disconnect-duration,220ms) linear 160ms forwards;
}
#canva-entrance #gate.opening .db-gate-contour path{
  stroke-dashoffset:var(--gate-current-dash,0);
  animation:db-entry-erase var(--gate-erase-duration,1500ms) linear var(--gate-erase-delay,380ms) forwards;
}
@keyframes db-entry-button-off{to{opacity:0}}
@keyframes db-entry-content-off{to{opacity:0}}
@keyframes db-entry-empty{to{transform:scaleX(0)}}
@keyframes db-entry-disconnect{to{transform:scaleX(0)}}
@keyframes db-entry-erase{to{stroke-dashoffset:1}}
@media(prefers-reduced-motion:reduce){
  #canva-entrance #gate .db-gate-contour path{animation:none;stroke-dashoffset:0}
  #canva-entrance #gate .gate-action-wrap::before,
  #canva-entrance #gate .enter::before{animation:none;transform:scaleX(1)}
  #canva-entrance #gate .enter{animation:none;color:#080808}
  #canva-entrance #gate .gate-name-word::after{animation:none;transform:scaleX(1)}
  #canva-entrance #gate.opening .gate-content{animation:none;opacity:0}
  #canva-entrance #gate.opening .db-gate-contour path{animation:none;stroke-dashoffset:1}
  #canva-entrance #gate.opening .gate-action-wrap::before,
  #canva-entrance #gate.opening .enter::before{animation:none;transform:scaleX(0)}
}