// @import "setup";
$wall: #889199;
$white: #fff;
$none: rgba(#fff, 0);
$wood: #826851;
$blk: #211f1d;
$win: lighten($wall, 20);

html {
  /*  font-size: 1vw;*/
}

html,
body {
  height: 100%;
  margin: 0;
}

div {
  transform-style: preserve-3d;
  perspective: 100rem;
  position: relative;

  *,
  *:before,
  *:after,
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    transform-style: preserve-3d;
    /* backface-visibility: hidden;*/
  }
}

div,
room,
wall {
  width: 100%;
  height: 100%;
}

room {
  transform: translateZ(-50rem) rotateY(0deg);
}

wall {
  background: radial-gradient($wall, darken($wall, 20));
  width: 100rem;
  box-shadow: inset 0 0 2rem darken($wall, 20);
  border: 2px solid darken($wall, 20);
  //skirting board
  &:nth-of-type(1),
  &:nth-of-type(2),
  &:nth-of-type(5) {
    &:after,
    &:before {
      width: 100%;
      height: 1.5rem;
      background: radial-gradient(circle, lighten($wall, 5), darken($wall, 5));
      top: auto;
      bottom: 0;
      transform: translate3d(0, 0, 0.25rem);
      box-shadow: inset 0 0 0.5rem darken($wall, 20);
    }

    &:before {
      transform: translate3d(0, -0.75rem, -0.5rem) rotateX(90deg);
      background: lighten($wall, 5);
    }
  }
  //left
  &:nth-of-type(1) {
    transform: translateX(-50%) rotateY(90deg);
    background: none;
    //window
    & > u {
      width: 100%;
      height: calc(100% - 39rem);
      height: 13%;
      background: radial-gradient($wall, darken($wall, 20));
      background-size: 100% calc(100% + 39rem);
      background-size: 100% 700%;

      &:before {
        width: 100%;
        height: 10rem;
        background: radial-gradient(at top, $wall, lighten($wall, 10));
        transform: translate3d(0, 5rem, -5rem) rotateX(90deg);
        top: auto;
        bottom: 0;
        box-shadow: inset 0 2.5rem 1rem rgba($blk, 0.5);
      }
    }

    & > u:nth-of-type(2) {
      width: calc(100% - 85rem);
      width: 25%;
      height: 100%;
      background-size: calc(100% + 85rem) 100%;
      background-size: 400% 100%;
    }

    & > u:nth-of-type(3) {
      width: calc(100% - 75rem);
      width: 25%;
      height: 100%;
      right: 0;
      left: auto;
      background-size: calc(100% + 75rem) 100%;
      background-size: 400% 100%;
      transform: scaleX(-1);

      &:before {
        transform: rotateY(-90deg);
        width: 9rem;
        height: 100%;
        background: radial-gradient(
          at right,
          lighten($wall, 5),
          lighten($wall, 10)
        );
        left: 63%;
        transform-origin: 100% 0;
        box-shadow: inset 1rem 0 1rem rgba($blk, 0.5);
      }
    }
    //w bottom
    & > u:nth-of-type(4) {
      top: auto;
      bottom: 0;
      height: calc(100% - 33rem);
      height: 27%;
      background-size: 100% calc(100% + 33rem);
      background-size: 100% 400%;
      transform: scaleY(-1);

      &:before {
        transform: translate3d(0, 5rem, -5rem) rotateX(90deg);
        background: radial-gradient(
          at right,
          lighten($wall, 15),
          lighten($wall, 20)
        );
      }
    }
  }
  //right
  &:nth-of-type(2) {
    transform: translateX(50%) rotateY(-90deg);
    left: auto;
    right: 0;
  }
  //top
  &:nth-of-type(3) {
    transform: rotateX(-90deg) translate3d(-1rem, 0, -50rem);
    width: calc(100% + 2rem);
    height: 100rem;
    background: radial-gradient(lighten($wall, 5), darken($wall, 10));
  }
  //bottom
  &:nth-of-type(4) {
    transform: rotateX(90deg) translate3d(0, 0, -50rem);
    top: auto;
    bottom: 0;
    width: 100%;
    height: 100rem;
    background: repeating-linear-gradient(
      to right,
      $none,
      $none 2rem,
      rgba(darken($wood, 10), 0.5) 2.2rem
    ),
      //
      radial-gradient($wood, darken($wood, 20));
    box-shadow: inset 0 1rem 2rem rgba(lighten($wall, 10), 0.5);
  }

  &:nth-of-type(5) {
    transform: translateZ(-49rem);
    width: 100%;
  }
}

// @import "light";
light {
  right: 0;
  margin: auto;
  transform: rotateX(-90deg) translate3d(0, 0, 0) scale(0.7);
  transform-origin: 0 0;
  box-shadow: 2rem 0 1rem rgba($blk, 0.25),
    //
    5rem 0 3rem rgba($blk, 0.1),
    //
    10rem 0 3rem rgba($blk, 0.1),
    //
    15rem 0 5rem rgba($blk, 0.1);

  &,
  &:before,
  &:after,
  & > u:nth-of-type(1),
  & > u:nth-of-type(1):after,
  & > u:nth-of-type(2),
  & > u:nth-of-type(2):before,
  & > u:nth-of-type(2):after,
  & > u:nth-of-type(3),
  & > u:nth-of-type(3):before,
  & > u:nth-of-type(3):after,
  & > u:nth-of-type(4),
  & > u:nth-of-type(4):before {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: linear-gradient(90deg, $blk, $wall, $white, $blk, $wall, $blk);
  }

  &:after {
    transform: translate3d(0, 0, 0.3rem) scale(0.7);
  }

  &:before {
    transform: translate3d(0, 0, 0.2rem);
    background: lighten($blk, 10);
  }

  & > u:nth-of-type(1) {
    transform: translate3d(0, 0, 0.5rem) scale(0.7);
    background: lighten($blk, 10);

    &:before {
      transform: translate3d(0, 0, 5rem);
      transform: translateZ(-5rem);
      background: linear-gradient(90deg, $blk, $wall, $wall, $blk, $wall, $blk);
      height: 10rem;
      width: 1rem;
      transform: rotateX(90deg) translate3d(0, 0, 2rem);
      right: 0;
      margin: auto;
    }

    &:after {
      transform: translate3d(0, 0, 2rem) scale(0.7);
      background: lighten($blk, 10);
    }
  }

  & > u:nth-of-type(2) {
    transform: translate3d(0, 0, 2.9rem);

    &:before {
      transform: translate3d(0, 0, 0.25rem);
      background: lighten($blk, 10);
    }

    &:after {
      transform: translate3d(0, 0, 0.5rem) scale(0.8);
    }
  }

  & > u:nth-of-type(3) {
    transform: translate3d(0, 0, 3.6rem) scale(0.8);

    &:before {
      transform: translate3d(0, 0, 0.25rem);
    }

    &:after {
      transform: translate3d(0, 0, 0.5rem);
    }
  }

  u:nth-of-type(4) {
    transform: translate3d(0, 0, 4.3rem);

    &:before {
      transform: translate3d(0, 0, 0.25rem);
      background: lighten($blk, 10);
    }
  }

  & > u:nth-of-type(5) {
    transform: rotate(0) translate3d(0, 0, 5rem);
    animation: rotate 3s linear infinite;
    right: 0;
    margin: auto;
    width: 5rem;
    height: 5rem;
    background: lighten($blk, 10);
    border-radius: 50%;

    @media (max-width: 400px) {
      animation-play-state: paused;
      transform: rotate(180deg) translate3d(0, 0, 5rem) !important;
    }

    &:after,
    &:before {
      width: 5rem;
      height: 5rem;
      background: lighten($blk, 10);
      border-radius: 50%;
      transform: translate3d(0, 0, 0.25rem);
    }

    &:after {
      transform: translate3d(0, 0, 0.5rem);
    }

    u,
    u:before {
      width: 19rem;
      height: 5rem;
      background: $wood;
      border-radius: 70% 20% 20% 70% / 40% 20% 20% 40%;
      transform: translate3d(2.5rem, 0, 0) rotate(20deg) rotateX(15deg);
      transform-origin: 0;
    }

    u:before {
      transform: rotateX(5deg);
    }

    u {
      animation: rlight 3s -2s linear infinite;
      transition: all 0.2s cubic-bezier(0.5, 2, 0.5, 0.8);

      @media (max-width: 400px) {
        animation-play-state: paused !important;
        transform: translate3d(2.5rem, 0, 0) rotate(20deg) rotateX(15deg)
          rotateY(-45deg);
      }
    }

    u:nth-of-type(2) {
      transform: translate3d(2.5rem, 0, 0) rotate(120deg) rotateX(15deg);
      animation: rlight 3s -1s linear infinite;

      @media (max-width: 220px) {
        transform: translate3d(2.5rem, 0, 0) rotate(120deg) rotateX(15deg)
          rotateY(-70deg);
      }
    }

    u:nth-of-type(3) {
      transform: translate3d(2.5rem, 0, 0) rotate(240deg) rotateX(15deg);
      animation: rlight 3s linear infinite;

      @media (max-width: 220px) {
        transform: translate3d(2.5rem, 0, 0) rotate(240deg) rotateX(15deg)
          rotateY(-90deg);
      }
    }
  }

  @keyframes rlight {
    50% {
      filter: brightness(0.5);
    }
  }

  @keyframes rotate {
    100% {
      transform: rotate(-360deg) translate3d(0, 0, 5rem);
    }
  }
}
// @import "window";
window {
  width: 50%;
  height: 60%;

  transform: translate3d(0, 0, -8rem);
  left: 25%;
  top: 13%;

  &:before {
    width: 100%;
    height: 1rem;
    background: $wall;
  }

  &:after {
    width: 100%;
    height: 1rem;
    background: $win;
    transform: translate3d(0, 0.5rem, -0.5rem) rotateX(90deg);
  }
  //bottom
  u:nth-of-type(1) {
    background: $wall;
    width: 50rem;
    height: 27rem;
    height: 1rem;
    transform: translate3d(0, 0, 0);
    bottom: 0;
    top: auto;

    &:after {
      width: 100%;
      height: 1rem;
      background: $win;
      transform: translate3d(0, -0.5rem, -0.5rem) rotateX(90deg);
    }
  }
  //right
  u:nth-of-type(2) {
    background: $wall;
    width: 1rem;
    height: 100%;
    transform: translate3d(0, 0, 0);
    left: auto;
    right: 0;

    &:after {
      width: 1rem;
      height: 100%;
      background: $win;
      transform: translate3d(0, -0.5rem, -0.5rem) rotateY(90deg);
    }
  }
  //middle
  u:nth-of-type(3) {
    background: $wall;
    width: 1rem;
    height: 100%;
    left: 50%;

    &:after {
      width: 1rem;
      height: 100%;
      background: $win;
      transform: translate3d(0, -0.5rem, -0.5rem) rotateY(90deg);
    }
  }
}

.sig {
  &,
  * {
    height: 9.25em;
    overflow: hidden;
    border-radius: 0.5em;
  }

  position: absolute;
  left: auto;
  right: 1rem;
  top: 1rem;
  font-size: 0.2rem;
  color: $white;
  width: 10em;
  transform: skewX(10deg) scaleY(0.45) rotate(2deg);
  mix-blend-mode: difference;

  &:before,
  *:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5em;
    height: 5em;
    background: currentColor;
    transform: translate3d(-2.5em, 0, 0) rotate(-45deg);
    box-shadow: -3em 3em 0 0 currentColor;
    border-radius: 0.5em 2em 0.5em 2em;
  }

  * {
    width: 5em;
    transform: translate3d(3.75em, 0, 0) scaleY(0.95);
    display: block !important;

    &:before {
      transform: translate3d(-3em, -2em, 0) rotate(-45deg);
      box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
      border-radius: 0.5em;
    }
  }
}

@keyframes flicker {
  0%, 10%, 20%, 100% {
    --light: #ffffdd05;
  }
  5%, 15% {
    --light: #ffffdd01;
  }
}

lamp {
  width: 1rem;
  height: 60%;
  background: 
    linear-gradient(90deg, #fff3, #fff0 80%, #000c),
    #222;
  bottom: 0;
  left: 8rem;
  top: auto;
  transform: translateZ(-30rem);
  // left: 50%;
  // transform: translateZ(0rem);
   
  &:has(input:checked) {
    & top u {
      --light: #ffd8;
    }
    & mast u {
      --light: #ffd5;
    }
    & lightray u {
      --light: #ffffdd05;
      animation: flicker 1s linear 1 forwards;
    }
  }
  
  & lampbase {
    width: 6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #222;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(90deg) translateZ(0.5em);

    & u {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(at 30% 70%, #fff1, #fff0), #222;
      border-radius: 50%;
      
      &:nth-child(1) { transform: translateZ(-0.1em); }
      &:nth-child(2) { transform: translateZ(-0.2em); }
      &:nth-child(3) { transform: translateZ(-0.3em); }
      &:nth-child(4) { transform: translateZ(-0.4em); }
      &:nth-child(5) { transform: translateZ(-0.5em); }
    }
  }
  
  & u {
    &:nth-child(1) { --t: 36deg; }
    &:nth-child(2) { --t: 72deg; }
    &:nth-child(3) { --t: 108deg; }
    &:nth-child(4) { --t: 144deg; }
    &:nth-child(5) { --t: 180deg; }
    &:nth-child(6) { --t: 216deg; }
    &:nth-child(7) { --t: 252deg; }
    &:nth-child(8) { --t: 288deg; }
    &:nth-child(9) { --t: 324deg; }
    
    &:nth-child(11) { --t: 54deg; }
    &:nth-child(12) { --t: 90deg; }
    &:nth-child(13) { --t: 126deg; }
    &:nth-child(14) { --t: 162deg; }
    &:nth-child(15) { --t: 198deg; }
    &:nth-child(16) { --t: 234deg; }
    &:nth-child(17) { --t: 270deg; }
    &:nth-child(18) { --t: 306deg; }
    &:nth-child(19) { --t: 342deg; }
    &:nth-child(20) { --t: 18deg; }
  }
  
  & input {
    --size: 0.4rem;
    appeareance: none;
    -webkit-appearance: none;
    width: var(--size);
    height: 10rem;
    z-index: 999;
    background: red;
    transform: translateX(1rem);
    transition: height 0.25s;
    cursor: pointer;
    background:
      linear-gradient(90deg, #fff5, #0002) 0 100% / 100% 10%,
      linear-gradient(#0000 90%, #edb 0),
      radial-gradient(farthest-side circle, #000 99%, #0000) 0 0 / var(--size) var(--size)
      ;
    
    &:checked {
      height: 13rem;
    }
  }
  


  & mast {
    width: 100%;
    height: 100%;
    
    & u {
      --t: 0deg;
      --light: #fff0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(var(--light), #fff0 80%),
        linear-gradient(90deg, #fff3, #0002),
        #222;
      transform: rotateY(var(--t));
    }
  }
  
  & lightray {
    width: 1800%;
    height: 100%;
    left: 50%;;
    top: 0;
    transform: translateX(-50%);
    pointer-events: none;
    
    & + lightray {
      transform: translate(-50%, -105%) scaleY(-1);
      aopacity: 0.5;
      
      & u {
        height: 70%;
        -webkit-mask: linear-gradient(#fff5, #fff);
        background: linear-gradient(var(--light), #fff0);
       opacity: 0.8; 
        clip-path: polygon(46% 0%, 54% 0%, 100% 100%, 0 100%)
      }
    }
    
    & u {
      --light: #fff0;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transform: rotateY(var(--t));
      background: radial-gradient(50% 120% at 50% 100%, var(--light), #fff0);
      
    }
  }

  & top {
    width: 100%;
    height: 100%;
    
    & u {
      --t: 0deg;
      --light: #fff3;
      width: 5em;
      height: 12em;
      background:ivory;
      left: 50%;
      top: -15%;
      transform: translate(-50%, 0%) rotateY(var(--t)) translateZ(2em) rotateX(15deg);
      transform-origin: 50% 0;
      clip-path: polygon(37% 0, 63% 0, 83.5% 100%, 16.5% 100%);
      background:
        linear-gradient(#0005, #0000, #0003 5%, #0000 0 95%, #fff5 0, #0003 96%, #0000, #0005),
        linear-gradient(#dcc 5%, #0000 0 95%, #fee),
        linear-gradient(90deg, #0002, #0000 10%),
        radial-gradient(farthest-side at 20% 40%, var(--light), #fff0),
        #a98
        ;      
    }
  }
}

@media  (max-width: 300px) {
  lamp {
    left: 50%;
    
    &:has(input:checked) {
      & mast u {
        --light: #ffd0;
      }
    }
    
    & top u {
      clip-path: none;
      background: radial-gradient(at 30% 30%, #fff1, #fff0), #000;
      transform: translate(-50%, 0%) rotateY(var(--t)) translateZ(1em);
      height: 1em;
      width: 1em;
      top: 0;
    }
    
    & lightray {
      display: none;
    }
  }
}