/* Bilbo Swash Caps 400 normal latin */
@font-face {
  font-family: 'Bilbo Swash Caps';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/bilbo-swash-caps@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/bilbo-swash-caps@latest/latin-400-normal.woff) format('woff'), url(https://cdn.jsdelivr.net/fontsource/fonts/bilbo-swash-caps@latest/latin-400-normal.ttf) format('ttf');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --spacing: 1em;

  color-scheme: dark;
}

body {
  background: linear-gradient(hsl(240,20%,20%),hsl(240,20%,40%));
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100svw;
  height: 100svh;
  padding: 0;
  grid-template: 1fr / 1fr;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
}

footer {
  margin-top: 20svh;
}

svg {
max-height: 100svh;
}

[href="#bauble"] {
  --scale: calc(
    round(down, 5 - mod(var(--tick), 5), 5) / 5 * 2
    + round(down, 15 - mod(var(--tick), 15), 15) / 15 * 2
    + 3
  );
  transform: 
    rotate(calc(6deg * var(--tick)))
    translate(0px,-495px)
    scale(var(--scale))
    translate(-6px,0px)
  ;
  filter: hue-rotate(calc(12 * 6deg * var(--tick)));
}

text {
  font-family: 'Bilbo Swash Caps';
}

@property --wobble {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --tick {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}

.hand {
  &.wobble {
    animation: wobble 1s;
  }
}

[href="stocking.svg"] {
  transform: rotate(calc(6deg * var(--tick))) skewX(calc(1/60 * var(--wobble) * 0.3turn)) translate(-43px, -380px);
}
[href="christmas-tree.svg"] {
  transform: rotate(calc(6deg * var(--tick))) skewX(calc(1/60 * var(--wobble) * 0.3turn)) translate(-143px, -480px);
}
[href="candy-cane.svg"] {
  --tick: 0;
  transform: rotate(calc(6deg * var(--tick))) skewX(calc(1/60 * var(--wobble) * 0.3turn)) translate(-38px,-480px);

}

@keyframes wobble {
  0% {--wobble: 0;}
  10% {--wobble: 1;}
  20% {--wobble: -0.8;}
  30% {--wobble: 0.6;}
  40% {--wobble: -0.4;}
  50% {--wobble: 0.2;}
  60% {--wobble: 0;}
}

.snowflake {
  counter-reset: snowflake 0;
}

@property --fall {
  initial-value: -2;
  inherits: false;
  syntax: '<number>';  
}

@property --x {
  initial-value: 0px;
  inherits: false;
  syntax: '<number>';  
}

[href="#snowflake"] {
  animation: fall 10s infinite linear;

  transform: 
    translate(
      calc(cos(var(--x) * 10) * 400px + 10svw * cos(var(--x)) * sin(var(--fall) * 5)),
      calc((mod(var(--fall) + sin(var(--x)), 2) - 1) * 2 * 90vh)
    ) 
    rotate(calc(0.1deg * var(--x) * var(--fall))) 
    scale(0.5,0.5)
  ;
  opacity: 0.6;
}

#snowflake > use {
  counter-increment: snowflake 1;
  --flip: 1;
  --turn: 0;
  transform: rotate(calc(var(--turn) * 60deg)) scale(var(--flip),1);
  color: white;
  
  &:nth-child(2n) {
    --flip: -1;
  }

  &:is(:nth-child(2),:nth-child(3)) { --turn: 1; }
  &:is(:nth-child(4),:nth-child(5)) { --turn: 2; }
  &:is(:nth-child(6),:nth-child(7)) { --turn: 3; }
  &:is(:nth-child(8),:nth-child(9)) { --turn: 4; }
  &:is(:nth-child(10),:nth-child(11)) { --turn: 5; }

}

@keyframes fall {
  from { --fall: -1; }
  to { --fall: 1; }
}