So many stuphs

public/css/site.css

@@ -1,14 +1,140 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
-/*Bulma variables override*/
+/*Bulma variables override and hacks*/
 :root{
     --bulma-primary-h: 50deg;
     --bulma-primary-l: 50%;
+    --bulma-scheme-h: 0;
+    --bulma-scheme-s: 0%;
+    --bulma-scheme-l: 6%;
+    --bulma-body-line-height: 1;
+    --bulma-black-h: 0;
+    --bulma-black-s: 0%;
+    --bulma-black-l: 6%;
 }
+.has-text-weight-bold {
+    font-weight: 600 !important;
+}
+.has-text-weight-bolder {
+    font-weight: 1000 !important;
+}
+html{
+    scroll-behavior: smooth;
+    scrollbar-color: var(--bulma-background) var(--bulma-primary);
+}
+body{
+    --cursor-x:0;
+    --cursor-y:0;
+}
+#nav{
+    --bulma-navbar-item-img-max-height: 2.5rem;
+}
+#hero{
+    justify-content:center;
+}
+#hero .hero-body{
+    flex-direction: column;flex-grow:0;
+}
+/* -----------------------------------------------*/
 
 /*Custom classes*/
-video{
+#nav{
+    background: transparent;
+    mix-blend-mode: difference;
+}
+
+#hero::before{
+    background:url('/assets/pattern.svg');
+    content:'';
+    position:absolute;
+    top:-100px;
+    left:-100px;
+    width:calc(100% + 200px);
+    height:calc(100% + 200px);
+    opacity:0.04;
+}
+
+#reel{
     width:100%;
+    height:100vh;
+    position: relative;
+    background: none;
+}
+video{
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height:100vh;
+    width:100%;
+    object-fit: cover;
+    z-index:-20;
+}
+.squircle{
+    border-radius: 50%;
+    corner-shape: squircle;
+    aspect-ratio: 1;
+}
+#gallery{
+    position:relative;
+}
+.photo{
+    background: var(--bulma-white);
+    padding:1rem;
+    cursor:pointer;
+}
+.photo.full{
+    position:absolute;
+    top:0;
+    height:100vh;
+    padding:2rem;
+}
+/*#tournaments*/
+.tournament-block{
+    display:grid;
+    place-items: center;
+    transition: transform 0.3s ease-out;
+}
+.tournament-block img{
+    transition: transform 0.3s ease-out;
+}
+.tournament-block:hover img{
+    transform: scale(1.2);
+}
+.tournament-block:hover{
+    transform: scale(0.9);
+}
+
+/*Twist animation*/
+.twist{
+    /* 3D transform pivot on Y axis*/
+    /*transition: transform ease-out;*/
+    transform-style: preserve-3d;
+    transform-origin: center center -100px;
+    transform: translateZ(-500px) rotateY(calc(20deg * var(--cursor-x))) rotateX(calc(-10deg * var(--cursor-y)));
+    /*perspective: 1000px;*/
+    /*perspective-origin: center;*/
+}
+.twist.middle{
+    transform: translateZ(0px) rotateY(calc(20deg * var(--cursor-x))) rotateX(calc(-10deg * var(--cursor-y)));
+}
+.twist-fore{
+    transform: translateZ(-100px);
+}
+/*.twist::after{*/
+/*    content: '';*/
+/*    position: absolute;*/
+/*    top: 50%;*/
+/*    left: 50%;*/
+/*    background: red;*/
+/*    height:20px;*/
+/*    width:20px;*/
+/*    pointer-events: none;*/
+/*    transform: translateZ(200px);*/
+/*}*/
+.twist-fore{
+    transform: translateZ(200px);
 }
 
 /*View transition experiments*/