@import url('../global.css');

:root {
  --title-color: var(--color-skiing);
  --skiing-snow: #f7fcff;
  --skiing-snow-blue: #cce8f4;
  --skiing-ice: #8cc9e1;
  --skiing-pine: #174f4b;
  --skiing-pine-dark: #0b3437;
  --skiing-suit: #e74445;
  --skiing-navy: #172c4d;
  --skiing-gold: #ffc84a;
  --skiing-sky-1: #85c9e6;
  --skiing-sky-2: #dff3fa;
  --skiing-sky-3: #f5fbfd;
  --skiing-sky-4: #d5edf6;
  --skiing-piste-1: #fff;
  --skiing-piste-2: #f2faff;
  --skiing-piste-3: #d9edf6;
  --skiing-mountain-1: #c2deeb;
  --skiing-mountain-2: #9fc9dc;
  --skiing-mountain-3: #ecf8fc;
  --skiing-mountain-4: #d8edf5;
  --skiing-bank-1: #eaf7fa;
  --skiing-bank-2: #a8d5e5;
}

.skiing-board[data-visual-theme='arcade'] {
  --skiing-sky-1: #d24fd8;
  --skiing-sky-2: #f5b8f0;
  --skiing-sky-3: #fbe3fa;
  --skiing-sky-4: #e8b3ec;
  --skiing-piste-1: #fbe8fb;
  --skiing-piste-2: #f0c9f0;
  --skiing-piste-3: #d9a8db;
  --skiing-mountain-1: #b769c9;
  --skiing-mountain-2: #8b4aa8;
  --skiing-mountain-3: #f0d0f5;
  --skiing-mountain-4: #d9a8db;
  --skiing-bank-1: #f5d9f5;
  --skiing-bank-2: #c98ad0;
}

.skiing-board[data-visual-theme='midnight'] {
  --skiing-sky-1: #4a6fa5;
  --skiing-sky-2: #7fa8c9;
  --skiing-sky-3: #b9d4e6;
  --skiing-sky-4: #8fb8d4;
  --skiing-piste-1: #dce8f2;
  --skiing-piste-2: #b0cfe0;
  --skiing-piste-3: #7fa0bd;
  --skiing-mountain-1: #395d82;
  --skiing-mountain-2: #274763;
  --skiing-mountain-3: #6f93b3;
  --skiing-mountain-4: #4d7196;
  --skiing-bank-1: #c5dcea;
  --skiing-bank-2: #6f93b3;
}

.skiing-board[data-visual-theme='daylight'] {
  --skiing-sky-1: #a78bfa;
  --skiing-sky-2: #d8c8fb;
  --skiing-sky-3: #f0e9fd;
  --skiing-sky-4: #c9b8f5;
  --skiing-piste-1: #f5f0fd;
  --skiing-piste-2: #e3d6fa;
  --skiing-piste-3: #cbb5f0;
  --skiing-mountain-1: #9678d9;
  --skiing-mountain-2: #7a5cc0;
  --skiing-mountain-3: #e3d6fa;
  --skiing-mountain-4: #c9b8f5;
  --skiing-bank-1: #ece3fb;
  --skiing-bank-2: #b79ceb;
}

.skiing-board[data-visual-theme='amber'] {
  --skiing-sky-1: #e5a836;
  --skiing-sky-2: #f3cc7d;
  --skiing-sky-3: #fbe7b8;
  --skiing-sky-4: #eec27f;
  --skiing-piste-1: #fdf1d6;
  --skiing-piste-2: #f6dda3;
  --skiing-piste-3: #e0ab5a;
  --skiing-mountain-1: #b9781f;
  --skiing-mountain-2: #8a5714;
  --skiing-mountain-3: #f3cc7d;
  --skiing-mountain-4: #eec27f;
  --skiing-bank-1: #f8e2b0;
  --skiing-bank-2: #d19a44;
}

.skiing-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  cursor: crosshair;
  touch-action: none;
  background: linear-gradient(
    180deg,
    var(--skiing-sky-1) 0%,
    var(--skiing-sky-2) 29%,
    var(--skiing-sky-3) 57%,
    var(--skiing-sky-4) 100%
  );
  border: 1px solid color-mix(in srgb, var(--color-skiing) 48%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 68%),
    0 1rem 2.5rem rgb(17 58 88 / 22%);
}

.skiing-track::before {
  position: absolute;
  z-index: 0;
  inset: 26% 6% 0;
  background:
    linear-gradient(
      105deg,
      transparent 0 29%,
      rgb(121 181 207 / 16%) 30% 31%,
      transparent 32% 67%,
      rgb(121 181 207 / 14%) 68% 69%,
      transparent 70%
    ),
    repeating-linear-gradient(174deg, transparent 0 2.6rem, rgb(117 177 203 / 13%) 2.7rem 2.82rem),
    linear-gradient(
      180deg,
      var(--skiing-piste-1) 0%,
      var(--skiing-piste-2) 50%,
      var(--skiing-piste-3) 100%
    );
  clip-path: polygon(31% 0, 69% 0, 100% 100%, 0 100%);
  content: '';
}

.skiing-track::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 18%, rgb(255 255 255 / 90%) 0 0.13rem, transparent 0.18rem),
    radial-gradient(circle at 76% 9%, rgb(255 255 255 / 72%) 0 0.1rem, transparent 0.15rem),
    radial-gradient(circle at 91% 31%, rgb(255 255 255 / 82%) 0 0.12rem, transparent 0.17rem);
  background-size:
    9rem 8rem,
    11rem 10rem,
    13rem 9rem;
  content: '';
  animation: skiing-flurries 2.2s linear infinite;
}

.skiing-mountains {
  position: absolute;
  z-index: -1;
  inset: 0 0 55%;
  background:
    linear-gradient(145deg, transparent 0 48%, var(--skiing-mountain-1) 49% 58%, transparent 59%) 0
      0 / 45% 100%,
    linear-gradient(215deg, transparent 0 47%, var(--skiing-mountain-2) 48% 59%, transparent 60%)
      100% 0 / 48% 100%,
    linear-gradient(145deg, transparent 0 48%, var(--skiing-mountain-3) 49% 64%, transparent 65%)
      25% 100% / 46% 86%,
    linear-gradient(215deg, transparent 0 47%, var(--skiing-mountain-4) 48% 64%, transparent 65%)
      74% 100% / 54% 90%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0.7rem 0.55rem rgb(63 121 150 / 18%));
}

.skiing-course,
.skiing-objects {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.skiing-course__track {
  position: absolute;
  top: 34%;
  bottom: -8%;
  width: 10%;
  border: 0.12rem solid rgb(101 161 189 / 20%);
  border-block: 0;
  border-radius: 50%;
  filter: blur(0.03rem);
}

.skiing-course__track--left {
  left: 35%;
  transform: rotate(8deg);
}
.skiing-course__track--right {
  right: 35%;
  transform: rotate(-8deg);
}

.skiing-snowbank {
  position: absolute;
  z-index: 1;
  top: 21%;
  bottom: 0;
  width: 30%;
  background:
    repeating-linear-gradient(155deg, transparent 0 2.6rem, rgb(129 188 210 / 19%) 2.7rem 2.9rem),
    linear-gradient(180deg, var(--skiing-bank-1), var(--skiing-bank-2));
  filter: drop-shadow(0.4rem 0 0.7rem rgb(56 116 146 / 20%));
}

.skiing-snowbank--left {
  left: -8%;
  clip-path: polygon(0 0, 78% 9%, 100% 100%, 0 100%);
}

.skiing-snowbank--right {
  right: -8%;
  clip-path: polygon(22% 9%, 100% 0, 100% 100%, 0 100%);
  filter: drop-shadow(-0.4rem 0 0.7rem rgb(56 116 146 / 20%));
}

.skiing-player,
.skiing-obstacle,
.skiing-coin {
  position: absolute;
  pointer-events: none;
  will-change: left, top, transform;
}

.skiing-player {
  z-index: 5;
  filter: drop-shadow(0 0.45rem 0.25rem rgb(17 50 77 / 38%));
  transform-origin: 50% 85%;
  transition: transform 90ms ease-out;
}

.skiing-player--carve-left {
  transform: rotate(-13deg) translateX(-3%);
}
.skiing-player--carve-right {
  transform: rotate(13deg) translateX(3%);
}
.skiing-player--carve-straight {
  transform: rotate(-2deg);
}

.skiing-player__head {
  position: absolute;
  z-index: 4;
  top: 4%;
  left: 36%;
  width: 30%;
  height: 25%;
  border: 1px solid #122640;
  border-radius: 55% 55% 45% 45%;
  background: linear-gradient(145deg, #fff 0 18%, #f47d38 20% 72%, #a82d38 74%);
}

.skiing-player__goggles {
  position: absolute;
  z-index: 5;
  top: 13%;
  left: 38%;
  width: 28%;
  height: 8%;
  border: 1px solid #0c203d;
  border-radius: 999px;
  background: linear-gradient(90deg, #173758, #65d8ed 50%, #173758);
  box-shadow: 0 0 0.2rem #8be7f3;
}

.skiing-player__body {
  position: absolute;
  z-index: 3;
  top: 25%;
  left: 28%;
  width: 46%;
  height: 38%;
  border: 1px solid #702d38;
  border-radius: 38% 38% 22% 22%;
  background: linear-gradient(135deg, #f46a54, var(--skiing-suit) 55%, #a92d3b);
}

.skiing-player__body::after {
  position: absolute;
  inset: 43% -3% auto;
  height: 10%;
  background: #fff;
  content: '';
}

.skiing-player__arms {
  position: absolute;
  z-index: 2;
  top: 31%;
  left: 11%;
  width: 78%;
  height: 25%;
  border-top: 0.22rem solid #be3442;
  border-radius: 50%;
}

.skiing-player__arms::before,
.skiing-player__arms::after {
  position: absolute;
  top: -0.25rem;
  width: 1px;
  height: 155%;
  background: #23364f;
  content: '';
}
.skiing-player__arms::before {
  left: 0;
  transform: rotate(9deg);
}
.skiing-player__arms::after {
  right: 0;
  transform: rotate(-9deg);
}

.skiing-player__legs {
  position: absolute;
  z-index: 2;
  top: 58%;
  left: 24%;
  width: 54%;
  height: 27%;
  border-right: 0.3rem solid var(--skiing-navy);
  border-bottom: 0.28rem solid var(--skiing-navy);
  border-left: 0.3rem solid var(--skiing-navy);
  border-radius: 0 0 40% 40%;
}

.skiing-player__skis {
  position: absolute;
  z-index: 1;
  right: 5%;
  bottom: 4%;
  left: 5%;
  height: 6%;
  border-radius: 999px;
  background: #1c3654;
  box-shadow: 0 0.24rem 0 #42b8d0;
  transform: skewX(-10deg);
}

.skiing-player__spray {
  position: absolute;
  z-index: 0;
  right: 7%;
  bottom: -4%;
  left: 7%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0, rgb(255 255 255 / 95%), transparent 68%);
  filter: blur(0.08rem);
  animation: skiing-spray 320ms ease-in-out infinite alternate;
}

.skiing-coin {
  z-index: 4;
  display: grid;
  place-items: center;
  border: 2px solid #fff3a4;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 28%,
    #fff6a9 0 12%,
    var(--skiing-gold) 14% 62%,
    #d87816 64%
  );
  box-shadow: 0 0 0.9rem rgb(255 194 55 / 72%);
  animation: skiing-token 650ms ease-in-out infinite alternate;
}

.skiing-coin__mark {
  width: 42%;
  height: 52%;
  border: 1px solid rgb(126 76 16 / 45%);
  clip-path: polygon(
    50% 0,
    63% 32%,
    100% 38%,
    71% 60%,
    80% 100%,
    50% 76%,
    20% 100%,
    29% 60%,
    0 38%,
    37% 32%
  );
  background: #fff0a0;
}

.skiing-obstacle {
  z-index: 3;
  filter: drop-shadow(0 0.35rem 0.24rem rgb(17 50 77 / 28%));
}

.skiing-obstacle--tree {
  overflow: visible;
}
.skiing-tree__trunk {
  position: absolute;
  bottom: 0;
  left: 43%;
  width: 14%;
  height: 36%;
  border-radius: 0 0 20% 20%;
  background: #5d4031;
}
.skiing-tree__crown {
  position: absolute;
  left: 50%;
  background: linear-gradient(100deg, var(--skiing-pine-dark), var(--skiing-pine) 58%, #2c7665);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}
.skiing-tree__crown::after {
  position: absolute;
  inset: 47% 8% 0;
  background: linear-gradient(150deg, #fff 0 43%, #cbeaf3 45% 62%, transparent 64%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: '';
}
.skiing-tree__crown--lower {
  bottom: 8%;
  width: 100%;
  height: 58%;
}
.skiing-tree__crown--middle {
  bottom: 33%;
  width: 78%;
  height: 48%;
}
.skiing-tree__crown--upper {
  bottom: 57%;
  width: 55%;
  height: 38%;
}

.skiing-obstacle--rock {
  overflow: hidden;
  border: 1px solid #71889a;
  border-radius: 52% 48% 38% 40%;
  background: linear-gradient(145deg, #aebfca 0 25%, #687d8d 27% 68%, #405465 70%);
}
.skiing-rock__snow {
  position: absolute;
  inset: -8% 4% 48%;
  border-radius: 55% 55% 35% 30%;
  background: linear-gradient(155deg, #fff 0 58%, #cde8f2 60%);
}
.skiing-rock__facet {
  position: absolute;
  right: 8%;
  bottom: 7%;
  width: 34%;
  height: 38%;
  background: rgb(36 61 77 / 35%);
  clip-path: polygon(55% 0, 100% 100%, 0 78%);
}

@keyframes skiing-flurries {
  to {
    background-position:
      1rem 8rem,
      -1rem 10rem,
      0.5rem 9rem;
  }
}
@keyframes skiing-token {
  to {
    transform: translateY(-5%) scale(1.05);
    filter: brightness(1.12);
  }
}
@keyframes skiing-spray {
  to {
    transform: scaleX(1.35);
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skiing-track::after,
  .skiing-coin,
  .skiing-player__spray {
    animation: none;
  }
  .skiing-player {
    transition: none;
  }
}