html {
  box-sizing: border-box;
}

*,
*:where(::before, ::after) {
  box-sizing: inherit;
}

body {
  background: radial-gradient(#ffffff 50%, #d5d3d5 100%);
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  perspective: 900px;
  visibility: hidden;
}

.box {
  transform-style: preserve-3d;
  position: relative;
  z-index: 2;
  width: 180px;
  height: 249.66px;
  transform-style: preserve-3d;
}

.box__front,
.box__back {
  position: absolute;
  width: 100%;
  height: 100%;
}

.box__left,
.box__right {
  position: absolute;
  top: 0;
  left: calc(50% - 49.239px / 2);
  height: 100%;
  width: 49.239px;
  background: #ececec;
}

.box__flap {
  position: absolute;
  left: calc(50% - 49.239px / 2);
  top: calc(50% - 49.239px / 2);
  width: 49.239px;
  height: 0;
  transform-origin: 50% 100%;
  border-bottom: 49.239px solid #dedede;
  border-left: calc(49.239px / 10) solid transparent;
  border-right: calc(49.239px / 10) solid transparent;
}

.box__lid {
  position: absolute;
  z-index: 0;
  top: calc(50% - 49.239px / 2);
  width: 180px;
  height: 49.239px;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(-49.239px / 2))
    translateY(calc(-249.66px / 2 - 49.239px / 2 + 0.5px)) rotateY(180deg)
    rotateX(90deg);
}

.box__lid-inner {
  position: relative;
  height: 100%;
  z-index: 0;
  transform-style: preserve-3d;
}

.box__lid-top {
  width: 180px;
  height: 49.239px;
  transform-style: preserve-3d;
}

.box__lid-top-logo {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 180px;
  height: 49.239px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/coolclub-logo-full.png)
    white no-repeat center center;
  background-blend-mode: multiply;
  background-size: cover;
  transform: rotateX(0deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.box__lid-top-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 180px;
  height: 49.239px;
  background: #ececec;
  background-image: linear-gradient(
    -145deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(236, 236, 236, 0.5) 72%,
    rgba(255, 255, 255, 0.3) 73%
  );
  transform: rotateX(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.box__lid-flap {
  position: absolute;
  z-index: 0;
  top: calc(50% - 49.239px / 2);
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: translateY(calc(-49.239px + 1px)) rotateX(120deg);
}

.box__lid-flap-shape {
  position: absolute;
  width: 100%;
  height: 190%;
  border-radius: 50%/90%;
  overflow: hidden;
  background: #ececec;
}

.box__lid-flap-shape-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ececec;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0) 65%
  );
}

.box__lid-flap-shape-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ececec;
  transform: rotateX(180deg);
}

.box__flap--left {
  transform: translateX(calc(-180px / 2))
    translateY(calc(-249.66px / 2 - 49.239px / 2)) translateZ(0px)
    rotateY(270deg) rotateX(90deg);
}

.box__flap--right {
  transform: translateX(calc(180px / 2))
    translateY(calc(-249.66px / 2 - 49.239px / 2)) translateZ(0px)
    rotateY(90deg) rotateX(90deg);
}

.box__front {
  transform-style: preserve-3d;
  transform: translateZ(calc(-49.239px / 2));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.box__front:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: #cccbcd;
}

.box__front-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/coolclub-front.png)
    no-repeat left top;
  background-size: cover;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.box__back {
  z-index: 10;
  background: transparent;
  transform: translateZ(calc(49.239px / 2)) rotateY(0deg);
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/coolclub-back-2.png)
    no-repeat left top;
  background-size: cover;
}

.box__left {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/coolclub-left.png)
    no-repeat left top;
  background-size: cover;
  transform: translateX(calc(-180px / 2)) rotateY(-90deg);
}

.box__right {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/coolclub-right.png)
    no-repeat left top;
  background-size: cover;
  transform: translateX(calc(180px / 2)) rotateY(90deg);
}

.box__bottom {
  position: absolute;
  left: 0;
  top: calc(50% - 49.239px / 2);
  width: 100%;
  height: 49.239px;
  background: #ececec;
  transform: translateY(calc(249.66px / 2)) rotateX(-90deg);
}

.card {
  position: absolute;
  left: calc((180px - 162px) / 2);
  top: 3%;
  width: 162px;
  height: 225.8928px;
  background: black;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.card:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/fwa-cards-back.png)
    no-repeat left top;
  background-size: cover;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}

.card--1 {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/fwa-cards-01.png)
    no-repeat left top;
  background-size: cover;
  transform: translateZ(0px) rotateY(180deg);
}

.card--2 {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/fwa-cards-02.png)
    no-repeat left top;
  background-size: cover;
  transform: translateZ(3.6px) rotateY(180deg);
}

.card--3 {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/fwa-cards-03.png)
    no-repeat left top;
  background-size: cover;
  transform: translateZ(7.2px) rotateY(180deg);
}

.card--4 {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/fwa-cards-04.png)
    no-repeat left top;
  background-size: cover;
  transform: translateZ(10.8px) rotateY(180deg);
}

.card--5 {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/fwa-cards-05.png)
    no-repeat left top;
  background-size: cover;
  transform: translateZ(14.4px) rotateY(180deg);
}

.gsap-3-logo {
  width: 20vw;
  max-width: 150px;
  position: fixed;
  bottom: 15px;
  right: 15px;
}

/*  ==========================================================
  Collection Linl
  ========================================================== */
.collection {
  position: fixed;
  z-index: 1000;
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
}

.collection--1 {
  top: 62px;
}

.collection__link {
  position: relative;
  margin-bottom: 16px;
  color: black;
  font-family: Helvetica, sans-serif;
  text-decoration: none;
  font-size: 16px;
}
.collection__link span {
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 1px;
  width: 10%;
  background-color: black;
  content: "";
  transition: width 0.3s;
}
.collection__link:hover span {
  width: 100%;
}

/*test*/
/* =========================================
   ANIMATION CONFIGURATION (FIXED TIMING)
   ========================================= */

:root {
  --loop-dur: 8s; /* Elegant slow speed */
  --intro-dur: 2s;
}

.scene {
  visibility: visible !important;
  -webkit-animation: fadeIn 2s ease-out forwards;
          animation: fadeIn 2s ease-out forwards;
}

/* 1. WRAPPER (Intro) */
.intro-wrapper {
  width: 180px;
  height: 249.66px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-animation: introSequence var(--intro-dur) cubic-bezier(0.25, 1, 0.5, 1)
    forwards;
          animation: introSequence var(--intro-dur) cubic-bezier(0.25, 1, 0.5, 1)
    forwards;
}

/* 2. BOX LOOP */
.box {
  transform-style: preserve-3d !important;
  transform: none;
  -webkit-animation: boxLoop var(--loop-dur) ease-in-out infinite;
          animation: boxLoop var(--loop-dur) ease-in-out infinite;
  -webkit-animation-delay: var(--intro-dur);
          animation-delay: var(--intro-dur);
}

/* 3. CARDS */
.card {
  transform-origin: center bottom;
  -webkit-animation: cardPopup var(--loop-dur) ease-in-out infinite;
          animation: cardPopup var(--loop-dur) ease-in-out infinite;
  -webkit-animation-delay: var(--intro-dur);
          animation-delay: var(--intro-dur);
}

/* 4. LIGHTING */
.box__front-face,
.box__back,
.box__lid-top-logo,
.box__lid-top-back {
  -webkit-animation: none;
          animation: none;
  filter: brightness(1);
}

.box__right {
  filter: brightness(0.5);
  -webkit-animation: lightRight var(--loop-dur) ease-in-out infinite;
          animation: lightRight var(--loop-dur) ease-in-out infinite;
  -webkit-animation-delay: var(--intro-dur);
          animation-delay: var(--intro-dur);
}
.box__left {
  filter: brightness(0.5);
  -webkit-animation: lightLeft var(--loop-dur) ease-in-out infinite;
          animation: lightLeft var(--loop-dur) ease-in-out infinite;
  -webkit-animation-delay: var(--intro-dur);
          animation-delay: var(--intro-dur);
}

/* 5. OPENING SEQUENCE */
.box__lid {
  -webkit-animation: openLid 0.5s ease-in-out forwards;
          animation: openLid 0.5s ease-in-out forwards;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.box__lid-flap {
  -webkit-animation: openLidFlap 0.5s ease-in-out forwards;
          animation: openLidFlap 0.5s ease-in-out forwards;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.box__flap--left {
  -webkit-animation: openFlapLeft 0.5s ease-in-out forwards;
          animation: openFlapLeft 0.5s ease-in-out forwards;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.box__flap--right {
  -webkit-animation: openFlapRight 0.5s ease-in-out forwards;
          animation: openFlapRight 0.5s ease-in-out forwards;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

/* =========================================
   KEYFRAMES (SYNCED)
   ========================================= */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes introSequence {
  0% {
    transform: translateY(100vh) rotateY(-540deg);
  }
  100% {
    transform: translateY(16vh) rotateY(0deg);
  }
}

@keyframes introSequence {
  0% {
    transform: translateY(100vh) rotateY(-540deg);
  }
  100% {
    transform: translateY(16vh) rotateY(0deg);
  }
}

/* 
   TIMELINE (8s Total):
   0-5%: Rest
   5-20%: Rotate to Back (180deg) -> Cards must start HERE
   20-60%: Hold at Back
   60-75%: Rotate to Front (360deg)
*/
@-webkit-keyframes boxLoop {
  0%,
  5% {
    transform: rotateY(0deg);
  }
  20%,
  60% {
    transform: rotateY(180deg);
  }
  75%,
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes boxLoop {
  0%,
  5% {
    transform: rotateY(0deg);
  }
  20%,
  60% {
    transform: rotateY(180deg);
  }
  75%,
  100% {
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes cardPopup {
  /* 
     Fix: Start popping at 15% (during the box rotation), 
     so they are visible immediately when box hits 180deg at 20%.
  */

  /* 1. Hidden inside */
  0%,
  15% {
    transform: translateZ(0px) rotateY(180deg) translateY(0%) translateX(0%)
      rotateZ(0deg);
  }

  /* 2. Pop UP (Vertical) - Done by 25% */
  25% {
    transform: translateZ(0px) rotateY(180deg) translateY(var(--ty))
      translateX(0%) rotateZ(0deg);
  }

  /* 3. Fan OUT (Explode) */
  35%,
  50% {
    transform: translateZ(0px) rotateY(180deg) translateY(var(--ty))
      translateX(var(--tx)) rotateZ(var(--rot));
  }

  /* 4. Fan IN (Collapse) */
  55% {
    transform: translateZ(0px) rotateY(180deg) translateY(var(--ty))
      translateX(0%) rotateZ(0deg);
  }

  /* 5. Drop DOWN - Synced with Box Rotate Back (60%-75%) */
  60% {
    transform: translateZ(0px) rotateY(180deg) translateY(var(--ty))
      translateX(0%) rotateZ(0deg);
  }
  75%,
  100% {
    transform: translateZ(0px) rotateY(180deg) translateY(0%) translateX(0%)
      rotateZ(0deg);
  }
}

@keyframes cardPopup {
  /* 
     Fix: Start popping at 15% (during the box rotation), 
     so they are visible immediately when box hits 180deg at 20%.
  */

  /* 1. Hidden inside */
  0%,
  15% {
    transform: translateZ(0px) rotateY(180deg) translateY(0%) translateX(0%)
      rotateZ(0deg);
  }

  /* 2. Pop UP (Vertical) - Done by 25% */
  25% {
    transform: translateZ(0px) rotateY(180deg) translateY(var(--ty))
      translateX(0%) rotateZ(0deg);
  }

  /* 3. Fan OUT (Explode) */
  35%,
  50% {
    transform: translateZ(0px) rotateY(180deg) translateY(var(--ty))
      translateX(var(--tx)) rotateZ(var(--rot));
  }

  /* 4. Fan IN (Collapse) */
  55% {
    transform: translateZ(0px) rotateY(180deg) translateY(var(--ty))
      translateX(0%) rotateZ(0deg);
  }

  /* 5. Drop DOWN - Synced with Box Rotate Back (60%-75%) */
  60% {
    transform: translateZ(0px) rotateY(180deg) translateY(var(--ty))
      translateX(0%) rotateZ(0deg);
  }
  75%,
  100% {
    transform: translateZ(0px) rotateY(180deg) translateY(0%) translateX(0%)
      rotateZ(0deg);
  }
}

/* Lighting (Adjusted to match rotation timing 5-20% and 60-75%) */
@-webkit-keyframes lightRight {
  0%,
  5% {
    filter: brightness(0.5);
  }
  12% {
    filter: brightness(1.2);
  } /* Peak mid-rotation */
  20%,
  100% {
    filter: brightness(0.5);
  }
}
@keyframes lightRight {
  0%,
  5% {
    filter: brightness(0.5);
  }
  12% {
    filter: brightness(1.2);
  } /* Peak mid-rotation */
  20%,
  100% {
    filter: brightness(0.5);
  }
}

@-webkit-keyframes lightLeft {
  0%,
  60% {
    filter: brightness(0.5);
  }
  67% {
    filter: brightness(1.2);
  } /* Peak mid-rotation */
  75%,
  100% {
    filter: brightness(0.5);
  }
}

@keyframes lightLeft {
  0%,
  60% {
    filter: brightness(0.5);
  }
  67% {
    filter: brightness(1.2);
  } /* Peak mid-rotation */
  75%,
  100% {
    filter: brightness(0.5);
  }
}

/* Standard Openers */
@-webkit-keyframes openLid {
  0% {
    transform: translateZ(calc(-49.239px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2 + 0.5px)) rotateY(180deg)
      rotateX(90deg);
  }
  100% {
    transform: translateZ(calc(-49.239px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2 + 0.5px)) rotateY(180deg)
      rotateX(-135deg);
  }
}
@keyframes openLid {
  0% {
    transform: translateZ(calc(-49.239px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2 + 0.5px)) rotateY(180deg)
      rotateX(90deg);
  }
  100% {
    transform: translateZ(calc(-49.239px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2 + 0.5px)) rotateY(180deg)
      rotateX(-135deg);
  }
}
@-webkit-keyframes openLidFlap {
  0% {
    transform: translateY(calc(-49.239px + 1px)) rotateX(120deg);
  }
  100% {
    transform: translateY(calc(-49.239px + 1px)) rotateX(60deg);
  }
}
@keyframes openLidFlap {
  0% {
    transform: translateY(calc(-49.239px + 1px)) rotateX(120deg);
  }
  100% {
    transform: translateY(calc(-49.239px + 1px)) rotateX(60deg);
  }
}
@-webkit-keyframes openFlapLeft {
  0% {
    transform: translateX(calc(-180px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2)) translateZ(0px)
      rotateY(270deg) rotateX(90deg);
  }
  100% {
    transform: translateX(calc(-180px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2)) translateZ(0px)
      rotateY(270deg) rotateX(-45deg);
  }
}
@keyframes openFlapLeft {
  0% {
    transform: translateX(calc(-180px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2)) translateZ(0px)
      rotateY(270deg) rotateX(90deg);
  }
  100% {
    transform: translateX(calc(-180px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2)) translateZ(0px)
      rotateY(270deg) rotateX(-45deg);
  }
}
@-webkit-keyframes openFlapRight {
  0% {
    transform: translateX(calc(180px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2)) translateZ(0px)
      rotateY(90deg) rotateX(90deg);
  }
  100% {
    transform: translateX(calc(180px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2)) translateZ(0px)
      rotateY(90deg) rotateX(-45deg);
  }
}
@keyframes openFlapRight {
  0% {
    transform: translateX(calc(180px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2)) translateZ(0px)
      rotateY(90deg) rotateX(90deg);
  }
  100% {
    transform: translateX(calc(180px / 2))
      translateY(calc(-249.66px / 2 - 49.239px / 2)) translateZ(0px)
      rotateY(90deg) rotateX(-45deg);
  }
}