:root {
   --red: #d62e3a;
   --red-dark: #b3202c;
   --gold: #f9cb11;
   --green: #3ec46d;
}

html {
   min-height: 100%;
   background: linear-gradient(#081428, #16365c) fixed;
}

.title,
.subtitle {
   color: #fff;
}

.label {
   color: var(--gold);
   font-size: 1.6rem;
   text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Cadre sucre d'orge : rayures en tuile, décalées d'une tuile pour boucler sans saut */
.candy {
   display: inline-block;
   padding: 6px;
   border-radius: 999px;
   background: linear-gradient(45deg, var(--red) 25%, #fff 25%, #fff 50%, var(--red) 50%, var(--red) 75%, #fff 75%) 0 0 / 34px 34px;
   box-shadow: 0 0 24px rgba(249, 203, 17, 0.45);
   animation: candy 2s linear infinite;
}

@keyframes candy {
   to {
      background-position: 34px 0;
   }
}

.candy select,
.candy select:focus {
   min-width: 15rem;
   padding-left: 2.5em;
   text-align: center;
   text-align-last: center;
   border: 0;
   border-radius: 999px;
   background-color: #1e6b3a;
   color: #fff;
   font-weight: 700;
   box-shadow: none;
}

.candy select:focus-visible {
   outline: 3px solid var(--gold);
   outline-offset: 2px;
}

.candy option {
   background: #fff;
   color: #363636;
}

.candy .select:not(.is-multiple):not(.is-loading)::after {
   border-color: var(--gold);
}

.title img {
   height: 1em;
   vertical-align: -0.1em;
}

#reveal .subtitle {
   margin-top: 2rem;
}

/* Neige : deux couches de flocons répétés qui descendent d'une tuile, en boucle */
body::before,
body::after {
   content: "";
   position: fixed;
   top: calc(-1 * var(--tile));
   left: 0;
   right: 0;
   height: calc(100% + var(--tile));
   pointer-events: none;
   background-image:
      radial-gradient(circle at 20% 15%, #fff 2px, transparent 3px),
      radial-gradient(circle at 70% 35%, #fff 1.5px, transparent 2.5px),
      radial-gradient(circle at 40% 60%, #fff 2.5px, transparent 3.5px),
      radial-gradient(circle at 85% 80%, #fff 1.5px, transparent 2.5px),
      radial-gradient(circle at 10% 90%, #fff 2px, transparent 3px);
   background-size: var(--tile) var(--tile);
   animation: snow var(--speed) linear infinite;
}

body::before {
   --tile: 180px;
   --speed: 9s;
   opacity: 0.8;
}

body::after {
   --tile: 290px;
   --speed: 15s;
   opacity: 0.5;
}

@keyframes snow {
   to {
      transform: translateY(var(--tile));
   }
}

.gift {
   position: relative;
   display: block;
   width: 240px;
   height: 270px;
   margin: 0 auto;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   font: inherit;
}

.gift:not(.open) {
   transform-origin: 50% 100%;
   animation: wobble 2s ease-in-out infinite;
}

.gift:focus-visible {
   outline: 3px dashed var(--gold);
   outline-offset: 8px;
}

.gift-box,
.gift-lid {
   position: absolute;
   left: 50%;
   border-radius: 6px;
   background-color: var(--red);
   background-image: linear-gradient(90deg, transparent 43%, var(--gold) 43%, var(--gold) 57%, transparent 57%);
}

.gift-box {
   bottom: 0;
   z-index: 2;
   width: 150px;
   height: 110px;
   margin-left: -75px;
   box-shadow: inset 0 14px 0 rgba(0, 0, 0, 0.15);
}

.gift-lid {
   bottom: 110px;
   z-index: 3;
   width: 170px;
   height: 30px;
   margin-left: -85px;
   background-color: var(--red-dark);
   transition: transform 0.5s ease-out, opacity 0.5s;
}

.gift-lid::before,
.gift-lid::after {
   content: "";
   position: absolute;
   bottom: calc(100% - 6px);
   left: 50%;
   width: 40px;
   height: 28px;
   border: 7px solid var(--gold);
   border-radius: 50%;
}

.gift-lid::before {
   margin-left: -38px;
   transform: rotate(-20deg);
}

.gift-lid::after {
   margin-left: -2px;
   transform: rotate(20deg);
}

.gift-card {
   position: absolute;
   left: 50%;
   bottom: 20px;
   z-index: 1;
   width: 230px;
   margin-left: -115px;
   padding: 1rem;
   border: 3px solid var(--gold);
   border-radius: 10px;
   background: #fff;
   color: #363636;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
   opacity: 0;
   transform: translateY(20px) scale(0.5);
   transition: transform 0.6s 0.25s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.3s 0.25s;
}

.gift-card strong {
   display: block;
   font-size: 1.8rem;
   line-height: 1.2;
   color: var(--red);
}

.gift-burst {
   position: absolute;
   left: 50%;
   bottom: 125px;
   z-index: 4;
}

.gift-burst i {
   position: absolute;
   width: 8px;
   height: 14px;
   margin: -7px -4px;
   border-radius: 2px;
   background: var(--gold);
   opacity: 0;
}

.gift-burst i:nth-child(3n) {
   background: #fff;
}

.gift-burst i:nth-child(3n + 1) {
   background: var(--green);
}

.gift.open .gift-lid {
   opacity: 0;
   transform: translate(70px, -130px) rotate(35deg);
}

.gift.open .gift-card {
   opacity: 1;
   transform: translateY(-140px) scale(1);
}

.gift.open .gift-burst i {
   animation: burst 1s ease-out forwards;
}

.gift.open + .hint {
   visibility: hidden;
}

.hint {
   margin-top: 0.75rem;
   color: #fff;
   opacity: 0.8;
}

@keyframes wobble {
   0%, 60%, 100% {
      transform: rotate(0);
   }
   70% {
      transform: rotate(-5deg);
   }
   80% {
      transform: rotate(5deg);
   }
   90% {
      transform: rotate(-3deg);
   }
}

@keyframes burst {
   from {
      opacity: 1;
      transform: rotate(var(--angle)) translateY(0);
   }
   to {
      opacity: 0;
      transform: rotate(var(--angle)) translateY(-140px) rotate(270deg);
   }
}

@media (prefers-reduced-motion: reduce) {
   *,
   ::before,
   ::after {
      animation: none !important;
      transition: none !important;
   }
}