@property --spread {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.2;
}

body {
  background: transparent;
  margin: 0;
  height: 100vh;
}
html {
    scrollbar-width: none;
}

section {
  container-type: inline-size;
  display: grid;
  place-items: center;
  height: 100%;
}

section > * {
  --end-degree: 55deg;
  --gap: 1ch;
  --rivet: 1.5rem;
  --start-degree: -55deg;
  --width: 180px;
  --height: 360px;

  --has-active: 0;
  --is-active: 0;
  --is-before: 0;
  --is-after: 0;
  --before-offset: 0deg;

  background-color: #FFF;
  border-radius: 2em;
  box-shadow: 0.5em 0.5em 1.5em -0.125em #0002;
  display: grid;
  font-family: system-ui, ui-sans-serif, sans-serif;
  grid-area: 1 / -1;
  margin: 0;
  height: var(--height);
  position: relative;
  rotate: calc(
    (
      (var(--start-degree) + (var(--end-degree) - var(--start-degree)) * (sibling-index() - 1) / (sibling-count() - 1))
      * (1 - var(--is-active))
      - var(--is-before) * (var(--end-degree) - var(--start-degree)) * (sibling-index() - 1) / (sibling-count() - 1) * 0.63
      + var(--is-after) * (var(--end-degree) - var(--start-degree)) * (1 - (sibling-index() - 1) / (sibling-count() - 1)) * 0.75
      + var(--before-offset)
    ) * var(--spread)
  );
  row-gap: var(--gap);
  transform-origin: calc(100% - var(--rivet)) calc(100% - var(--rivet));
  transition: rotate .25s linear;
  width: var(--width);
  z-index: calc(sibling-count() - sibling-index());

  /* Cover card */
  &:first-child {
    align-items: start;
    background:
      radial-gradient(ellipse at 50% 60%, #2A3F6E 0%, transparent 50%),
      radial-gradient(ellipse at 50% 65%, #162248 0%, transparent 50%),
      linear-gradient(160deg, #1C2B5A 0%, #213260 100%);
    color: #FFF;
    overflow: hidden;

    .cover-x {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -25%);
      width: 75%;
      opacity: .12;
      pointer-events: none;
    }
    .cover-x svg {
      width: 100%;
      height: auto;
    }

    header {
      position: relative;
      z-index: 1;
      padding: 2.5em 1.5em 1.5em;
      display: flex;
      flex-direction: column;
      gap: .45em;
    }

    header::before {
      content: '';
      width: 28px;
      height: 3px;
      background: linear-gradient(90deg, #52FF09, #0059FF);
      border-radius: 2px;
      margin-bottom: .3em;
    }

    h2 {
      font-size: 1.6rem;
      line-height: .90;
      letter-spacing: -.02em;
      margin: 0;
      padding: 0;
      text-box: normal;
    }

    /* rivet — centered on transform-origin point */
    &::after {
      --rivet-size: 2rem;
      aspect-ratio: 1;
      background: radial-gradient(circle at 35% 35%, #FFF 0%, #F5F5F5 30%, #E8E8E8 60%, #DDD 80%, #E0E0E0 100%);
      border-radius: 50%;
      /* Center the rivet exactly on the transform-origin point */
      bottom: calc(var(--rivet) - var(--rivet-size) / 2);
      right: calc(var(--rivet) - var(--rivet-size) / 2);
      box-shadow:
        0 2px 4px 0 rgba(0,0,0,.3),
        inset 0 -1px 1px 0 #0002,
        inset 0 1px 2px 0 #FFF8;
      content: "";
      display: block;
      height: var(--rivet-size);
      position: absolute;
      width: var(--rivet-size);
      z-index: 100;
    }
  }
}

/* Fan open animation — triggered by parent postMessage */
section.is-open > * {
  --spread: 1;
  transition: rotate 0.8s ease-out;
  transition-delay: calc(sibling-index() * 0.04s);
}
section.is-open.is-settled > * {
  transition: rotate .25s linear;
  transition-delay: 0s;
}

/* State flags via selectors */
section:has(details[open]) > * { --has-active: 1; }
section > :has(~ details[open]) { --is-before: 1; }
details[open] { --is-active: 1; }
details[open] ~ * { --is-after: 1; }

/* All before cards (including cover) shift left by a fixed amount when a card is open */
section:has(details[open]) > :has(~ details[open]) {
  --before-offset: -25deg;
}
section:has(details[open]) > figure {
  --before-offset: -180deg;
}

/* Keep details content always visible */
details::details-content {
  content-visibility: visible;
  display: contents;
}
summary {
  list-style: none;
  &::-webkit-details-marker { display: none; }
}

/* Summary = colored tab/linguetta — minimal height */
:is(figcaption, summary) {
  display: flex;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  justify-content: center;
  text-align: center;
  padding: .5em .4em;
  user-select: none;
  -webkit-user-select: none;
  color: #FFF;
  background-color: var(--tab-color, #999);
  border-radius: 2em 2em 0 0;
  span {
    display: none;
  }
}
figcaption {
  display: none;
}

details[open] summary span {
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  display: grid;
  height: 1.5ch;
  margin-inline-start: 1ch;
  place-content: center;
  text-box: ex alphabetic;
  width: 1.5ch;
  &:hover {
    background: rgba(255,255,255,.5);
  }
}

h2, h3, strong {
  font-weight: 700;
  text-box: cap alphabetic;
  text-transform: uppercase;
}
ul {
  display: contents;
}
li {
  list-style: none;
  font-size: 0;
  line-height: 0;
  height: 0;
  overflow: hidden;
}
/* Category image placeholder — positioned absolutely inside the card */
.card-img {
  position: absolute;
  top: 3.2em;
  left: 20px;
  right: 20px;
  bottom: calc(var(--height) * 0.518);
  border-radius: .8em;
  background: #E8EBF0;
  display: block;
  pointer-events: none;
  z-index: 1;
}
details[open] .card-img {
  pointer-events: auto;
  cursor: pointer;
}