<div class="no-support" data-support="css-trig-fns">
  <p>🚨 Your browser does not support the CSS Trigonometric Functions. Therefore, this demo will not work properly. Please try Safari 15.4, Firefox 108, or Chrome 111.</p>
</div>

<form data-has-support="at-property" method="">
  <label for="enable_3d">
    <input type="checkbox" name="enable_3d" id="enable_3d" checked />
    Enable 3D
  </label>
</form>

<div class="wrapper">
  <div id="visual" data-countchildren>
    <span class="dot"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></span>
    <span class="dot"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></span>
    <span class="dot"><img src="https://assets.codepen.io/89905/matroshka-03.svg" alt="" title="" width="222" height="184" draggable="false"></span>
    <span class="dot"><img src="https://assets.codepen.io/89905/matroshka-04.svg" alt="" title="" width="222" height="184" draggable="false"></span>
    <span class="dot"><img src="https://assets.codepen.io/89905/matroshka-05.svg" alt="" title="" width="222" height="184" draggable="false"></span>
  </div>
</div>

<footer>
  <p>This demo is part of <a href="https://goo.gle/css-wrapped-2023" target="_top">#CSSWrapped2023</a></p>
</footer>

@layer base, demo, demosupport;

/* Register --angle. That way we can transition and animate it 😎 */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
/* Initial value for browsers that don’t support @property */
:root {
  --angle: 0deg;
}

/* Keyframes that animates the --angle value */
@keyframes adjust-angle {
  to {
    --angle: 360deg;
  }
}

/* Rotation animation */
:root {
  animation: adjust-angle linear 20s infinite;
}

/* The colored dots */
.dot {
  /* Spread the dots evenly over the circle.
     We do this by dividing 360deg by the number of children.
       E.g. 360 degrees / 3 children = 120 degrees between each child element.  
  */
  --offset-per-child: calc(360deg / (var(--nth-siblings) + 1));

  /* Each child will that offset into account, based its index.
     E.g. - the 1st out of 3 children gets offset by 0 x 120deg = 0deg
          - the 2nd out of 3 children gets offset by 1 x 120deg = 120deg
          - the 3rd out of 3 children gets offset by 2 x 120deg = 240deg
  */
  --angle-offset: calc(var(--nth-child) * var(--offset-per-child));

  /* Size it */
  display: block;
  width: var(--tracksize);
  aspect-ratio: 222/184;

  /* Center it */
  position: absolute;
  left: calc(50% - (var(--tracksize) / 2));
  top: calc(50% - (var(--tracksize) / 2));

  /* Adjust its position based on the --angle, while also taking the --angle-offset into account */
  translate: calc(cos((var(--angle) + var(--angle-offset))) * var(--radius))
    calc(sin((var(--angle) + var(--angle-offset))) * var(--radius) * -1);

  user-select: none;
}

.dot img {
  vertical-align: bottom;
  margin-bottom: 1px;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  transition: all 0.25s;
}

.dot:hover img {
  scale: 1.2;
}

/* 3D */
#visual,
.dot {
  transition: transform 1s linear;
}
.wrapper {
  perspective: 100vmin;
  perspective-origin: bottom;
}
#visual {
  transform-style: preserve-3d;
}
.dot {
  transform-origin: 50% 100%;
}
body:has(#enable_3d:checked) {
  #visual {
    transform: rotateX(45deg);
  }
  .dot {
    transform: rotateX(-50deg) translateY(0px) scale(2);
  }
}

@layer demo {
  @layer visual {
    /* The visualization */
    #visual {
      /* Dimensions of the visualization */
      --radius: 30vmin;
      --tracksize: 8vmin;

      /* Make it a circle, based on the dimensions */
      width: calc(var(--radius) * 2 + var(--tracksize));
      aspect-ratio: 1;
      border-radius: 50%;
      border: var(--tracksize) solid transparent;

      /* Some generic positioning stuff */
      margin: 0 auto;
      position: relative;
    }

    #visual {
      border-color: #e0e0e0;
    }

    /* Inject a dot at the center of the visualization */
    #visual::after {
      content: "";
      --size: calc(var(--tracksize) / 2);

      /* Make it round */
      display: block;
      width: var(--size);
      aspect-ratio: 1;
      border-radius: 50%;

      /* Put it in the center */
      position: absolute;
      left: calc(50% - (var(--size) / 2));
      top: calc(50% - (var(--size) / 2));
      z-index: 2;

      /* Make it black */
      background: #333;
    }
  }
}

@layer demosupport {
  @layer layout {
    label,
    #controls,
    form {
      text-align: center;
    }
  }
}

/* Non-demo styles below */
@layer base {
  @layer reset {
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }
  }
  @layer layout {
    html {
      max-width: 84ch;
      padding: 3rem 2rem;
      margin: auto;
      font-family: "Anybody", sans-serif;
    }
    body {
      display: grid;
      place-content: safe center;
      gap: 3rem;
    }

    footer {
      text-align: center;
      margin: 2rem 0;
    }

    html {
      font-family: Syne, sans-serif;
    }
    input,
    button {
      font-family: inherit;
    }

    a,
    a:visited {
      color: blue;
    }

    h2 {
      margin-top: 2em;
    }

    summary {
      cursor: pointer;
    }

    dd + dt {
      margin-top: 0.5em;
    }

    button {
      cursor: pointer;
    }

    footer {
      text-align: center;
      font-style: italic;
    }
  }

  @layer support {
    .no-support,
    .has-support {
      margin: 1em 0;
      padding: 1em;
      border: 1px solid #ccc;
    }

    .no-support {
      background-color: #ff00002b;
    }
    .no-support[data-level="warn"] {
      background-color: #ffff002b;
    }
    .has-support {
      background-color: #00ff002b;
    }
    .no-support,
    [data-show-when-no-support] {
      display: block !important;
    }
    .has-support,
    [data-show-when-has-support] {
      display: none !important;
    }
    :is(.has-support, .no-support) > :first-child {
      margin-top: 0;
    }
    :is(.has-support, .no-support) > :last-child {
      margin-bottom: 0;
    }

    @property --supports-at-property {
      syntax: "*";
      initial-value: ;
      inherits: true;
    }
    .no-support[data-support="at-property"],
    [data-no-support="at-property"] {
      --value-when-supported: var(--supports-at-property) none;
      --value-when-not-supported: block;
      display: var(
        --value-when-supported,
        var(--value-when-not-supported)
      ) !important;
    }
    .has-support[data-support="at-property"],
    [data-has-support="at-property"] {
      --value-when-supported: var(--supports-at-property) block;
      --value-when-not-supported: none;
      display: var(
        --value-when-supported,
        var(--value-when-not-supported)
      ) !important;
    }

    @supports (transform: scaleX(cos(360deg))) {
      .no-support[data-support="css-trig-fns"] {
        display: none !important;
      }
      .has-support[data-support="css-trig-fns"],
      [data-show-when-has-support="css-trig-fns"] {
        display: block !important;
      }
    }
  }

  @layer nth-child {
    [data-countchildren] > :nth-child(1) {
      --nth-child: 1;
    }
    [data-countchildren] > :nth-child(2) {
      --nth-child: 2;
    }
    [data-countchildren] > :nth-child(3) {
      --nth-child: 3;
    }
    [data-countchildren] > :nth-child(4) {
      --nth-child: 4;
    }
    [data-countchildren] > :nth-child(5) {
      --nth-child: 5;
    }
    [data-countchildren] > :nth-child(6) {
      --nth-child: 6;
    }
    [data-countchildren] > :nth-child(7) {
      --nth-child: 7;
    }
    [data-countchildren] > :nth-child(8) {
      --nth-child: 8;
    }
    [data-countchildren] > :nth-child(9) {
      --nth-child: 9;
    }
    [data-countchildren] > :nth-child(10) {
      --nth-child: 10;
    }

    [data-countchildren]:has(> :nth-child(1):last-child) > * {
      --nth-siblings: 0;
    }
    [data-countchildren]:has(> :nth-child(2):last-child) > * {
      --nth-siblings: 1;
    }
    [data-countchildren]:has(> :nth-child(3):last-child) > * {
      --nth-siblings: 2;
    }
    [data-countchildren]:has(> :nth-child(4):last-child) > * {
      --nth-siblings: 3;
    }
    [data-countchildren]:has(> :nth-child(5):last-child) > * {
      --nth-siblings: 4;
    }
    [data-countchildren]:has(> :nth-child(6):last-child) > * {
      --nth-siblings: 5;
    }
    [data-countchildren]:has(> :nth-child(7):last-child) > * {
      --nth-siblings: 6;
    }
    [data-countchildren]:has(> :nth-child(8):last-child) > * {
      --nth-siblings: 7;
    }
    [data-countchildren]:has(> :nth-child(9):last-child) > * {
      --nth-siblings: 8;
    }
    [data-countchildren]:has(> :nth-child(10):last-child) > * {
      --nth-siblings: 9;
    }
  }
}

// Firefox does not support :has() yet, so we have to set the --nth-siblings count through JS
const supportsComplexHas = CSS.supports("selector(:has(>*))");
if (!supportsComplexHas) {
  const updateChildCount = ($parent) => {
    $parent.querySelectorAll(":scope > *").forEach(($child) => {
      $child.style.setProperty("--nth-siblings", $parent.childElementCount - 1);
    });
  };
  const updateChildCountAll = () => {
    document.querySelectorAll("[data-countchildren]").forEach(($parent) => {
      updateChildCount($parent);
    });
  };
  updateChildCountAll();
}