html
{
    scroll-behavior:    smooth;
    scroll-snap-type:   y mandatory;
}

body
{
    margin:             0;
}

section
{
    width:                100%;
    height:               100vh;

    scroll-snap-align:    start;
    scroll-snap-stop:     always;
}




.button
{
      width:              7rem;
      height:             7rem;

      border-radius:      999px;

      display:            grid;
      place-items:        center;

      transition:         all .5s;
      transform:          scale(1);
      transform-origin:   center;
}

.button:hover
{
      transform:          scale(1.1);

      cursor:             pointer;
}

.button:active
{
      transform:         scale(0.4);
}






.absolute
{
    position:           absolute;
}

.bottom
{
    bottom:             1.5rem;
}

.middle
{
    left:               50%;
    transform:          translateX(-50%);
}

.center
{
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
}




.mouse
{
    position:           fixed;

    top:                0;
    left:               0;

    width:              0rem;
    height:             0rem;

    pointer-events:     none;

    z-index:            1000;
}

.mouse::before
{
    content:            attr(data-text);

    position:           absolute;
    top:                auto;
    bottom:             -1rem;
    left:                1rem;

    margin:             0;

    width:              max-content;
    padding:            2rem 5rem;
    white-space:        nowrap;

    display:            grid;
    place-items:        center;


    font-family:        fredoka-variable, sans-serif;
    font-weight:        550;

    font-size:          2rem;

    color:              var(--sky);

    opacity:            0;
    scale:              0;

    transform-origin:   center;
    transition:
                        opacity 0.25s ease,
                        scale   0.5s  cubic-bezier(0.2, 0.8, 0.2, 1);

    border-radius:      10rem;

    background:         var(--secondary-hover);
}





.emblem
{
    position:           fixed;

    z-index:            5;

    transform:          translate(-50%, var(--emblem-y, calc(100% + 1.5rem)));


    display:            flex;
    flex-direction:     row;
    gap:                1rem;
}

.emblem.is-visible
{
    pointer-events:     auto;
}



.play
{     
    width:              25rem;

    background-color:   var(--primary);
}

.play:hover
{
    background-color:   var(--primary-hover);
}

.play:hover + .contact
{
    transform:          translateX(1.125rem);
}



.contact
{
    background-color:       var(--secondary);
    text-decoration:        none;
}

.contact:hover
{
    background-color:       var(--secondary-hover);

    scale:                  1.2;
}

.emblem:has(.contact:hover) .play
{
    transform:              translateX(-0.35rem);
}


.emblem:has(.contact:hover) + .mouse::before
{
    opacity:                1;
    scale:                  1;
}

.contact .icon
{
    width:                  3.75rem;
    height:                 auto;

    transition:             all .5s;
    transform:              scale(1);
    transform-origin:       center;
}

.contact:hover .icon
{
    transform:              scale(1.1);
}





.banner
{
    position:          relative;
 
    width:             100%;
    height:            100%;
}

.video
{
    position:           absolute;
    inset:              0;

    width:              100%;
    height:             100%;

    object-fit:         cover;
    object-position:    center;

    z-index:            0;
}

.logo
{
    position:           absolute;

    width:              90%;
    max-width:          50rem;

    height:             10rem;

    border-radius:      999rem;

    background-color:   rgba(255, 255, 255, 0.50);

    backdrop-filter:    blur(6.5px);

    z-index:            1;
}





.note
{
    position:               absolute;

    min-width:              20rem;
    height:                 6rem;

    border-radius:          999px;

    background:             rgba(0, 0, 0, 0.50);

    backdrop-filter:        blur(6.5px);

    z-index:                1;



    display:                grid;
    grid-template-columns:  1fr auto 1fr;
    align-items:            center;
    column-gap:             3rem;
}

.note .icon
{
    width:                  1rem;
    height:                 auto;

    opacity:                50%;

    justify-self:           end;

    transform:              translateY(0.1rem);
}

.note h4
{
    grid-column:            2;
}











.statement
{
    width:              70vw;
    height:             70vh;
}

.statement .flex
{
    display:            flex;

    flex-direction:     row;
    flex-wrap:          wrap;

    height:             100%;
}

.statement .block
{
    position:           relative;

    flex:               0.8;
    height:             100%;
}

.statement .grid
{
    flex:                1;

    display:             grid;
    grid-template-rows:  auto auto;

    place-items:         center;
    align-content:       center;

    gap:                 1rem;
}


.statement .blur
{
    position:            absolute;

    top:                 50%;
    left:                50%;
    translate:          -50% -50%;

    width:               90rem;
    aspect-ratio:        1;
    border-radius:       50%;

    background:          radial-gradient(circle, var(--summer) 0%, transparent 70%);

    pointer-events:      none;

    z-index:             -1;


}

.statement h1
{
  
}

.statement p
{
    
}