/*  GLOBAL SVG STYLING
    --------------------------------------------------------------- */

svg {
  overflow: visible;
  display: block;
  opacity: 0.5;
  pointer-events: none;
}

text{
  fill: var(--clr-main);
  font-family:  var(--ff);

  font-size: var(--fs-svg);
  letter-spacing: 0px;
  line-height: 1.25;
}

/*  ROOMS
    --------------------------------------------------------------- */

/* make them look clickable (not like background) */
path.surface {
  fill: var(--clr-surface);
}

/* active when overing like links on the website */
.room:hover  path.surface, 
.room:focus  path.surface{
  fill: var(--c3);
  fill-opacity: 1;
}
.room:active path.surface,
.room.active path.surface{
  fill: var(--clr-active);
  fill-opacity: 1;
}

/* text in stroke color (structural element) */
.room text,
#filling text{
  fill: var(--clr-stroke);
}


/*  WALLS (drawed above the rooms)
    --------------------------------------------------------------- */

path.walls{
  fill: none;
  stroke: var(--clr-stroke);
  vector-effect: non-scaling-stroke;
  stroke-width: var(--stroke-width);
}

.filling{
  fill: var(--clr-filling);
}

/* global outline */
.outline {
  fill: var(--clr-back);
  stroke: var(--clr-global-stroke);
  vector-effect: non-scaling-stroke;
  stroke-width: var(--stroke-width);
}


/*  PICTO
    --------------------------------------------------------------- */

.picto{
  fill: transparent;
  stroke: var(--clr-stroke);
  vector-effect: non-scaling-stroke;
  stroke-width: var(--stroke-width);
}


/*  DOOR ANIMATIONS
    --------------------------------------------------------------- */

.room:hover path.door,
.room.active path.door{
  --angle: -45deg;
}

/* the doors with opening animations */
path.door{
  --angle: 45deg;
  transition: transform 1s;

  fill: none;
  stroke: var(--clr-stroke);
  vector-effect: non-scaling-stroke;
  stroke-width: var(--stroke-width);

  transform-box: fill-box;

  /* end up with this position */
  transform: rotate(var(--angle));
}

@keyframes doors-anim {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(var(--angle));
  }
}
@keyframes doors-hover-anim {
  from{
    transform: rotate(var(--angle));
  }
  to{
    transform: rotate(calc(var(--angle) + 360deg));
  }
}

path.door--top-left{
  transform-origin: top left;
  --angle: -45deg;
  animation: doors-anim var(--animation-duration);
}
path.door--top-right{
  transform-origin: top right;
  animation: doors-anim var(--animation-duration);
}
path.door--bottom-right{
  transform-origin: bottom right;
  --angle: -45deg;
  animation: doors-anim var(--animation-duration);
}
path.door--bottom-left{
  transform-origin: bottom left;
  animation: doors-anim var(--animation-duration);
}
path.door--right-top{
  transform-origin: top right;
  --angle: -45deg;
  animation: doors-anim var(--animation-duration);
}
path.door--right-bottom{
  transform-origin: bottom right;
  animation: doors-anim var(--animation-duration);
}
path.door--left-bottom{
  transform-origin: bottom left;
  --angle: -45deg;
  animation: doors-anim var(--animation-duration);
}
path.door--left-top{
  transform-origin: top left;
  animation: doors-anim var(--animation-duration);
}

/* .doors path.door:nth-of-type(1){
  animation-delay: 5s;
} */

/* .room:hover  .door, 
.room:focus  .door, 
.room:active .door{
  animation: doors-hover-anim 1s;
} */