
/*******************************************************************************
* Copyright (C) 2024 JannisMCMXCV
* 
 * Permission is hereby granted, free of charge, to any person obtaining
 * a copy of this software and associated documentation files (the
 * "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish,
 * distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject to
 * the following conditions:
 * 
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

* 
* SPDX-License-Identifier: MIT
*
* ----------------------------------------------------------------------------
* Special Thanks to Kevin Powell
* Inspired by Kevin's work: https://youtu.be/eOJTj_mWJds?si=W68D1bvcTM-Sl-M1
* Website: https://www.kevinpowell.co
* GitHub: https://github.com/kevin-powell
* ----------------------------------------------------------------------------
******************************************************************************/

body {
    display: grid;
    place-content: center;
    min-height: 100vh;
    background-color: black;
}

.content {
    --perspective: 500px;
    --rotationX: 0;
    --rotationY: 0;

    
    grid-column: 1/-1;
    grid-row: 1/-1;
    display: grid;
    place-content: center;
    text-align: center;
    background-color: crimson;
    border-radius: .5rem;
    font-family: sans-serif;
    color: papayawhip;
    padding: 2rem;
    
    transform: 
     perspective(var(--perspective))
     rotateX(var(--rotationX))
     rotateY(var(--rotationY));
    transition: transform 400ms ease;
}

.bg {
    --counterperspective: 500px;
    --counterrotationX: 0;
    --counterrotationY: 0;

    content: "";
    position: fixed;
    top: 0;
    right: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    background-image: url(../images/sale.svg);
    background-repeat: round;
    background-size: 100px;

    transform: 
     perspective(var(--counterperspective))
     rotateX(var(--counterrotationX))
     rotateY(var(--counterrotationY));
    transition: transform 400ms ease;
}

a {
    text-decoration: none;
}

.tilt-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    position: relative;
    align-items: center;
}

.cursor-tracker {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* 1st, 6th, 11th, 16th, 21st */
.cursor-tracker:nth-last-of-type(5n-4) {
 grid-column: 1/2;
}
   
/* 2nd, 7th, 12ed, 17th, 22nd */
.cursor-tracker:nth-last-of-type(5n-3) {
 grid-column: 2/3;
}

/* 3rd, 8th, 13th, 18th, 23rd */
.cursor-tracker:nth-last-of-type(5n-2) {
 grid-column: 3/4;
}

/* 4th, 9th, 14ed, 19th, 24th */
.cursor-tracker:nth-last-of-type(5n-1) {
 grid-column: 4/5;
}

/* 5th, 10th, 15th, 20th, 25th */
.cursor-tracker:nth-last-of-type(5n) {
 grid-column: 5/6;
}





/* 1st - 5th */
.cursor-tracker:nth-child(n+1):nth-child(-n+5) {
 grid-row: 1/2;
}
/* 6th - 10th */
.cursor-tracker:nth-child(n+6):nth-child(-n+10) {
 grid-row: 2/3;
}

/* 11th - 15th */
.cursor-tracker:nth-child(n+11):nth-child(-n+15) {
 grid-row: 3/4;
}

/* 16th - 20th */
.cursor-tracker:nth-child(n+16):nth-child(-n+20) {
 grid-row: 4/5;
}

/* 21st - 25th */
.cursor-tracker:nth-child(n+21):nth-child(-n+25) {
 grid-row: 5/6;
}



/* 1 */
.cursor-tracker:nth-child(2):hover ~ .content {
    --rotationX: -10deg;
    --rotationY: 10deg;
}
/* 2 */
.cursor-tracker:nth-child(1):hover ~ .content {
    --rotationX: -10deg;
    --rotationY: 5deg;
}
/* 3 */
.cursor-tracker:nth-child(5):hover ~ .content {
    --rotationX: -10deg;
    
}
/* 4 */
.cursor-tracker:nth-child(4):hover ~ .content {
    --rotationX: -10deg;
    --rotationY: -5deg;
}
/* 5 */
.cursor-tracker:nth-child(3):hover ~ .content {
    --rotationX: -10deg;
    --rotationY: -10deg;
}
/* 6 */
.cursor-tracker:nth-child(7):hover ~ .content {
    --rotationX: -5deg;
    --rotationY: 10deg;
}
/* 7 */
.cursor-tracker:nth-child(6):hover ~ .content {
    --rotationX: -5deg;
    --rotationY: 5deg;
}
/* 8 */
.cursor-tracker:nth-child(10):hover ~ .content {
    --rotationX: -5deg;
}
/* 9 */
.cursor-tracker:nth-child(9):hover ~ .content {
    --rotationX: -5deg;
    --rotationY: -5deg;
}
/* 10 */
.cursor-tracker:nth-child(8):hover ~ .content {
    --rotationX: -5deg;
    --rotationY: -10deg;
}
/* 11 */
.cursor-tracker:nth-child(12):hover ~ .content {
    --rotationY: 10deg;
}
/* 12 */
.cursor-tracker:nth-child(11):hover ~ .content {
    --rotationY: 5deg;
}
/* 13 */
.cursor-tracker:nth-child(15):hover ~ .content {
    /* center, no transformation */
}
/* 14 */
.cursor-tracker:nth-child(14):hover ~ .content {
    --rotationY: -5deg;
}
/* 15 */ 
.cursor-tracker:nth-child(13):hover ~ .content {
    --rotationY: -10deg;
}
/* 16 */
.cursor-tracker:nth-child(17):hover ~ .content {
    --rotationX: 5deg;
    --rotationY: 10deg;
}
/* 17 */
.cursor-tracker:nth-child(16):hover ~ .content {
    --rotationX: 5deg;
    --rotationY: 5deg;
}
/* 18 */
.cursor-tracker:nth-child(20):hover ~ .content {
    --rotationX: 5deg;
}
/* 19 */
.cursor-tracker:nth-child(19):hover ~ .content {
    --rotationX: 5deg;
    --rotationY: -5deg;
}
/* 20 */
.cursor-tracker:nth-child(18):hover ~ .content {
    --rotationX: 5deg;
    --rotationY: -10deg;
}
/* 21 */
.cursor-tracker:nth-child(22):hover ~ .content {
    --rotationX: 10deg;
    --rotationY: 10deg;
}
/* 22 */
.cursor-tracker:nth-child(21):hover ~ .content {
    --rotationX: 10deg;
    --rotationY: 5deg;
}
/* 23 */
.cursor-tracker:nth-child(25):hover ~ .content {
    --rotationX: 10deg;
}
/* 24 */
.cursor-tracker:nth-child(24):hover ~ .content {
    --rotationX: 10deg;
    --rotationY: -5deg;
}
/* 25 */
.cursor-tracker:nth-child(23):hover ~ .content {
    --rotationX: 10deg;
    --rotationY: -10deg;
}


/* bg1 */
.cursor-tracker:nth-child(2):hover ~ .bg {
    --counterrotationX: 5deg;
    --counterrotationY: -5deg;
}
/* bg2 */
.cursor-tracker:nth-child(1):hover ~ .bg {
    --counterrotationX: 5deg;
    --counterrotationY: -2.5deg;
}
/* bg3 */
.cursor-tracker:nth-child(5):hover ~ .bg {
    --counterrotationX: 5deg;
    
}
/* bg4 */
.cursor-tracker:nth-child(4):hover ~ .bg {
    --counterrotationX: 5deg;
    --counterrotationY: 2.5deg;
}
/* bg5 */
.cursor-tracker:nth-child(3):hover ~ .bg {
    --counterrotationX: 5deg;
    --counterrotationY: 5deg;
}
/* bg6 */
.cursor-tracker:nth-child(7):hover ~ .bg {
    --counterrotationX: 2.5deg;
    --counterrotationY: -5deg;
}
/* bg7 */
.cursor-tracker:nth-child(6):hover ~ .bg {
    --counterrotationX: 2.5deg;
    --counterrotationY: -2.5deg;
}
/* bg8 */
.cursor-tracker:nth-child(10):hover ~ .bg {
    --counterrotationX: 2.5deg;
}
/* bg9 */
.cursor-tracker:nth-child(9):hover ~ .bg {
    --counterrotationX: 2.5deg;
    --counterrotationY: 2.5deg;
}
/* bg10 */
.cursor-tracker:nth-child(8):hover ~ .bg {
    --counterrotationX: 2.5deg;
    --counterrotationY: 5deg;
}
/* bg11 */
.cursor-tracker:nth-child(12):hover ~ .bg {
    --counterrotationY: -5deg;
}
/* bg12 */
.cursor-tracker:nth-child(11):hover ~ .bg {
    --counterrotationY: -2.5deg;
}
/* bg13 */
.cursor-tracker:nth-child(15):hover ~ .bg {
    /* center, no transformation */
}
/* bg14 */
.cursor-tracker:nth-child(14):hover ~ .bg {
    --counterrotationY: 2.5deg;
}
/* bg15 */ 
.cursor-tracker:nth-child(13):hover ~ .bg {
    --counterrotationY: 5deg;
}
/* bg16 */
.cursor-tracker:nth-child(17):hover ~ .bg {
    --counterrotationX: -2.5deg;
    --counterrotationY: -5deg;
}
/* bg17 */
.cursor-tracker:nth-child(16):hover ~ .bg {
    --counterrotationX: -2.5deg;
    --counterrotationY: -2.5deg;
}
/* bg18 */
.cursor-tracker:nth-child(20):hover ~ .bg {
    --counterrotationX: -2.5deg;
}
/* bg19 */
.cursor-tracker:nth-child(19):hover ~ .bg {
    --counterrotationX: -2.5deg;
    --counterrotationY: 2.5deg;
}
/* bg20 */
.cursor-tracker:nth-child(18):hover ~ .bg {
    --counterrotationX: -2.5deg;
    --counterrotationY: 5deg;
}
/* bg21 */
.cursor-tracker:nth-child(22):hover ~ .bg {
    --counterrotationX: -5deg;
    --counterrotationY: -5deg;
}
/* bg22 */
.cursor-tracker:nth-child(21):hover ~ .bg {
    --counterrotationX: -5deg;
    --counterrotationY: -2.5deg;
}
/* bg23 */
.cursor-tracker:nth-child(25):hover ~ .bg {
    --counterrotationX: -5deg;
}
/* bg24 */
.cursor-tracker:nth-child(24):hover ~ .bg {
    --counterrotationX: -5deg;
    --counterrotationY: 2.5deg;
}
/* bg25 */
.cursor-tracker:nth-child(23):hover ~ .bg {
    --counterrotationX: -5deg;
    --counterrotationY: 5deg;
}

