:root {

    --card-aspect: 0.54;
    --card-radius: 9.1% / 7%;
    --card-edge: hsl(31, 80%, 52%);
    --card-back: hsl(31, 80%, 52%);
    --card-glow: hsl(34, 100%, 90%);

    --sunpillar-1: hsl(2, 100%, 73%);
    --sunpillar-2: hsl(53, 100%, 69%);
    --sunpillar-3: hsl(93, 100%, 69%);
    --sunpillar-4: hsl(176, 100%, 76%);
    --sunpillar-5: hsl(228, 100%, 74%);
    --sunpillar-6: hsl(283, 100%, 73%);

    --sunpillar-clr-1: var(--sunpillar-1);
    --sunpillar-clr-2: var(--sunpillar-2);
    --sunpillar-clr-3: var(--sunpillar-3);
    --sunpillar-clr-4: var(--sunpillar-4);
    --sunpillar-clr-5: var(--sunpillar-5);
    --sunpillar-clr-6: var(--sunpillar-6);

}

.card {

    /* place the card on a new transform layer and
    make sure it has hardward acceleration... we gun'need that! */
    -webkit-transform: translate3d(0px, 0px, 0.01px);
    transform: translate3d(0px, 0px, 0.01px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    pointer-events: none;

    /* make sure the card is above others if it's scaled up */
    z-index: calc(var(--card-scale) * 2);

    /* every little helps! */
    will-change: transform, visibility, z-index;

}

.card,
.card * {
    /* outline is a little trick to anti-alias */
    outline: 1px solid transparent;
}

.card,
.card .card__translater,
.card .card__rotator,
.card .card__shine,
.card .card__shine:before,
.card .card__shine:after,
.card .card__glare,
.card .card__glare:after {
    transition: all 2s ease,
    rotation-x 2s ease-out,
    rotation-y 1s ease-out,
    background-position-x 2s ease-out,
    background-position-y 1s ease-out;

}

.card {
    max-height: 100vh;
    opacity: 0.4;
    position: relative;
    --pointer-x: 400%;
    --pointer-y: 60%;
    --card-opacity: 0.9;
    --rotate-x: 450deg;
    --rotate-y: -39deg;
    --background-x: -42%;
    --background-y: 36%;
    --card-scale: 1.2;
    --translate-x: 100vw;
    --translate-y: -50vh;
    
    /* --card-glow: rgb(145, 90, 39); */
}

.card.shown {
    opacity: 1;
}

.card.shown.card-0 {
  --pointer-x: 20%;
  --pointer-y: -33%;
  --card-scale: 0.95;
  --card-opacity: 0.6;
  --translate-x: 0px;
  --translate-y: 0px;
  --rotate-x: 10deg;
  --rotate-y: 3deg;
  --background-x: 44%;
  --background-y: 36%;
}

.card.shown.card-1 {
  --pointer-x: 2%;
  --pointer-y: -36%;
  --card-scale: 0.93;
  --card-opacity: 0.3;
  --translate-x: 0px;
  --translate-y: 0px;
  --rotate-x: 0deg;
  --rotate-y: -1deg;
  --background-x: 24%;
  --background-y: 33%;
}


.card.shown.card-2 {
  --pointer-x: -20%;
  --pointer-y: -39%;
  --card-scale: 0.95;
  --card-opacity: 0.8;
  --translate-x: 0px;
  --translate-y: 0px;
  --rotate-x: -10deg;
  --rotate-y: 3deg;
  --background-x: 24%;
  --background-y: 36%;
}


.card.shown:hover {
  --rotate-y: 9deg;
  --pointer-y: -19%;
  --background-y: 31%;
}

.card.shown.active {
  --pointer-x: 210% !important;
  --pointer-y: 30% !important;
  --card-scale: 1.5 !important;
  --card-opacity: 0.6 !important;
  --translate-x: 0px !important;
  --translate-y: 0px !important;
  --rotate-x: 360deg !important;
  --rotate-y: 11deg !important;
  --background-x: 144% !important;
  --background-y: 16% !important;
}
.card.shown.active:hover {
  --rotate-x: 363deg !important;
  --rotate-y: 13deg !important;
  --pointer-x: 220% !important;
  --pointer-y: 33% !important;
  --background-y: 10% !important;
}



.card,
.card__rotator {
    aspect-ratio: var(--card-aspect);
    border-radius: var(--card-radius);
}

.card {
    z-index: calc(var(--card-scale) * 120);
}

.card .card__translater,
.card .card__rotator {
    /* prevent pinch/double-tap zooms on card */
    touch-action: none;
}

.card__translater,
.card__rotator {
    display: grid;
    perspective: 600px;
    will-change: transform, box-shadow;

    transform-origin: center;
    -webkit-transform-origin: center;
}

.card__translater {
    width: auto;
    position: relative;

    -webkit-transform: translate3d(var(--translate-x), var(--translate-y), 0.1px) scale(var(--card-scale));
    transform: translate3d(var(--translate-x), var(--translate-y), 0.1px) scale(var(--card-scale));
}

.card__rotator {
    -webkit-transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
    -webkit-transform-style: preserve-3d;
    transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
    transform-style: preserve-3d;

    /* performance */
    pointer-events: auto;
    /* overflow: hidden; <-- this improves perf on mobile, but breaks backface visibility. */
    /* isolation: isolate; <-- this improves perf, but breaks backface visibility on Chrome. */
}

.card:hover .card__rotator,
.card.active .card__rotator {
    box-shadow:
      0 0 3px -1px transparent, 
      0 0 2px 1px transparent,
      0 0 5px 0px transparent,
      0px 10px 20px -5px black,
      0 2px 15px -5px black,
      0 0 20px 0px transparent
}

button.card__rotator {
    /* because the card is a button, there's some default
      browser styles which need to be subdued */
    border: none;
    background: transparent;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}


.card__rotator * {
    width: 100%;
    display: grid;
    grid-area: 1/1;
    aspect-ratio: var(--card-aspect);
    border-radius: var(--card-radius);
    /* image-rendering: optimizeQuality; */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    pointer-events: none;
    overflow: hidden;
}

.card__rotator img {
    height: auto;
    -webkit-transform: translate3d(0px, 0px, 0.01px);
    transform: translate3d(0px, 0px, 0.01px);
}

.card__back {
    background-color: var(--card-back);
    -webkit-transform: rotateY(180deg) translateZ(1px);
    transform: rotateY(180deg) translateZ(1px);
    padding: 1px;
}

.card__back img {
    border-radius: var(--card-radius);
    opacity: 0.7;
}

.card__front,
.card__front * {
    backface-visibility: hidden;
}

.card__front {
    opacity: 1;
    transition: opacity 1.5s ease-out;
    -webkit-transform: translate3d(0px, 0px, 0.01px);
    transform: translate3d(0px, 0px, 0.01px);
}


/**
    
  Shine & Glare Effects
  
  **/

.card__shine {

    display: grid;
    transform: translateZ(1px);
    overflow: hidden;
    z-index: 3;

    background: transparent;
    background-size: cover;
    background-position: center;

    filter: brightness(.85) contrast(2.75) saturate(.65);
    mix-blend-mode: color-dodge;

    opacity: var(--card-opacity);

}

.card__shine:before,
.card__shine:after {

    --sunpillar-clr-1: var(--sunpillar-5);
    --sunpillar-clr-2: var(--sunpillar-6);
    --sunpillar-clr-3: var(--sunpillar-1);
    --sunpillar-clr-4: var(--sunpillar-2);
    --sunpillar-clr-5: var(--sunpillar-3);
    --sunpillar-clr-6: var(--sunpillar-4);

    grid-area: 1/1;
    transform: translateZ(1px);
    border-radius: var(--card-radius);

}

.card__shine:after {

    --sunpillar-clr-1: var(--sunpillar-6);
    --sunpillar-clr-2: var(--sunpillar-1);
    --sunpillar-clr-3: var(--sunpillar-2);
    --sunpillar-clr-4: var(--sunpillar-3);
    --sunpillar-clr-5: var(--sunpillar-4);
    --sunpillar-clr-6: var(--sunpillar-5);

    transform: translateZ(1.2px);

}

.card__glare {

    /* make sure the glare doesn't clip */
    transform: translateZ(1.41px);
    overflow: hidden;

    background-image: radial-gradient(farthest-corner circle at 50% 50%,
            hsla(0, 0%, 100%, 0.8) 5%,
            hsla(0, 0%, 100%, 0.65) 10%,
            hsla(0, 0%, 0%, 0.5) 45%);
            background-size: 200% 200%;
            background-position: 
            calc(50% - var(--pointer-x)) calc(50% - var(--pointer-y));
        
    opacity: var(--card-opacity);
    mix-blend-mode: overlay;

}

/*

  SHINE LAYERS

*/

.card .card__shine {

    --scanlines-space: 1px;
    --scanlines-light: #666;
    --scanlines-dark: black;
  
    --bars: 3%;
    --bar-color: hsla(0, 0%, 70%, 1);
    --bar-bg: hsla(0, 0%, 0%, 1);
  
    clip-path: var(--clip);
  
    background-image: 
      repeating-linear-gradient( 110deg, 
        var(--violet), var(--blue), var(--green), var(--yellow), var(--red), 
        var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
        var(--violet), var(--blue), var(--green), var(--yellow), var(--red)
      ),
      repeating-linear-gradient( 90deg, 
        var(--scanlines-dark) calc(var(--scanlines-space) * 0), var(--scanlines-dark) calc(var(--scanlines-space) * 2),
        var(--scanlines-light) calc(var(--scanlines-space) * 2), var(--scanlines-light) calc(var(--scanlines-space) * 4)
      );
  
    background-position: 
      calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%),
      center center;
  
    background-size: 
      200%;
  
    background-blend-mode: overlay;
    filter: brightness(1.1) contrast(1.1) saturate(1.2);
    mix-blend-mode: color-dodge;
  
  }
  
  .card .card__shine:before {
    
    content: "";
  
    background-image:
      repeating-linear-gradient( 90deg, 
        var(--bar-bg) calc(var(--bars)*2), 
        var(--bar-color) calc(var(--bars)*3), 
        var(--bar-bg) calc(var(--bars)*3.5), 
        var(--bar-color) calc(var(--bars)*4), 
        var(--bar-bg) calc(var(--bars)*5), 
        var(--bar-bg) calc(var(--bars)*14)
      ),
      repeating-linear-gradient( 90deg, 
        var(--bar-bg) calc(var(--bars)*2), 
        var(--bar-color) calc(var(--bars)*3), 
        var(--bar-bg) calc(var(--bars)*3.5), 
        var(--bar-color) calc(var(--bars)*4), 
        var(--bar-bg) calc(var(--bars)*5), 
        var(--bar-bg) calc(var(--bars)*10)
      );
  
    background-position: 
      calc((((50% - var(--background-x)) * 1.65) + 50% ) + (var(--background-y) * 0.5)) var(--background-x), 
      calc((((50% - var(--background-x)) * -0.9) + 50%) - (var(--background-y) * 0.75) ) var(--background-y);
  
    background-size: 
      200%, 200%;
  
    background-blend-mode: screen;
    filter: brightness( 1.15 ) contrast( 1.1 );
    mix-blend-mode: hard-light;
  
  }
  
  .card .card__shine:after {
  
    content: "";
      
    background-image: 
      radial-gradient( 
        farthest-corner circle 
          at 50% 50%, 
          hsla(0, 0%, 90%, 0.8) 0%, 
          hsla(0, 0%, 78%, 0.1) 25%, 
          hsl(0, 0%, 0%) 90% 
      );

      background-size: 
      200% 200%;
    background-position: 
      calc(50% - var(--pointer-x)) calc(50% - var(--pointer-y));
  
    mix-blend-mode: luminosity; 
    filter: brightness(0.6) contrast(4);
  
  }
  
  @media screen and (max-width: 900px) {
    .card .card__shine {
      --scanlines-space: .5px;
    }
  }
  
  
  /*
  
    GLARE LAYERS
  
  */
  
  .card .card__glare {
  
    opacity: calc( var(--card-opacity) * .9 );
    filter: brightness(0.8) contrast(1.5);
    mix-blend-mode: overlay;
  
  }
  
  .card .card__glare:after {
  
    content: "";
  
    background-image: 
      radial-gradient( 
        farthest-corner circle at 50% 50%, 
        hsl(180, 100%, 95%) 2%, 
        hsla(0, 0%, 39%, 0.25) 21%, 
        hsla(0, 0%, 0%, 0.36) 55% 
      );

      background-size: 
          200% 200%;
        
      background-position: 
          calc(50% - var(--pointer-x)) calc(50% - var(--pointer-y));

    mix-blend-mode: overlay;
    filter: brightness(.6) contrast(3);
  
  }


.card {
    --imgsize: cover;

    --red: #f80e35;
    --yellow: #eedf10;
    --green: #21e985;
    --blue: #0dbde9;
    --violet: #c929f1;

    --clip: inset(9% 9% 8% 8%);
}

.card__shine,
.card__glare {

    will-change: transform, opacity, background-image, background-size,
        background-position, background-blend-mode, filter;

}