@import "instance";

.hero_ball {
  .main_container {
    @include no-margins;
    min-height: 100vh;

    .hero_ball_section {
      min-height: 100vh;
      padding-top: 50px;

      .rotate_instruction {
        @include transition(opacity $t5);
        @include user-select;
        @include wh(max-content);
        @include gap(20px);
        @include flex;
        @include t1((size: szrem(24),
            transform: uppercase));
        opacity: 1;
        margin-inline: auto;
        padding-block: 10px;

        @include brp($b6) {
          font-size: szrem(18);
        }

        &.hidden {
          @include transition(opacity $t5);
          opacity: 0;
        }
      }

      .main_ball {
        @include position(absolute, 50%, 50%);
        @include whs(min(41.66vw, 800px));
        transform-origin: center center;
        will-change: transform;
        z-index: 3;
        transform: translate(-50%, -50%);

        @include brp($b5) {
          @include whs(min(58.59vw, 600px));
        }

        @include brp($b6) {
          @include whs(min(71.42vw, 700px));
        }

        @include brp($b8) {
          @include whs(80vw);
        }
      }
    }
  }
}