/* Create Magic presentation only. All selectors stay on this page. */
body[data-page="create"] .choice-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  padding-bottom: 8px;
  isolation: isolate;
}

body[data-page="create"] .choice-card > img,
body[data-page="create"] .choice-photo {
  flex: none;
  width: 100%;
  height: clamp(230px, 18vw, 320px);
  object-fit: cover;
}

body[data-page="create"] .choice-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

body[data-page="create"] .welcome-photo {
  background-image: linear-gradient(90deg, #072a26a6, #072a2633, #072a26a6), url('/assets/workshop-backgrounds/welcome-960.webp');
}

body[data-page="create"] .cheer-photo {
  background-image: linear-gradient(90deg, #47231488, #47231422, #47231488), url('/assets/workshop-backgrounds/letters-960.webp');
}

body[data-page="create"] .choice-photo > img {
  flex: none;
  width: auto;
  height: calc(100% - 32px);
  max-width: calc(100% - 32px);
  object-fit: contain;
  padding: 5px;
  border: 1px solid #e6c77d;
  border-radius: 6px;
  background: #fff5dd;
  box-shadow: 0 8px 22px #0007;
  transform: rotate(-3deg);
}

body[data-page="create"] .cheer-photo > img {
  transform: rotate(3deg);
}

body[data-page="create"] .choice-card:hover .choice-photo > img {
  transform: rotate(0);
}

/* A little foil and folded ribbon, with a stable line box for every label. */
body[data-page="create"] .choice-card > span {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  min-height: 34px;
  max-width: calc(100% - 48px);
  margin: 22px 24px 0;
  padding: 9px 15px;
  overflow: hidden;
  border: 1px solid #d8b66e;
  border-radius: 5px 12px 5px 12px;
  background: linear-gradient(155deg, #b63a45 0%, #8d182a 44%, #711224 53%, #a62d3b 100%);
  box-shadow: inset 0 1px 0 #ffe9d377, inset 0 -2px 0 #39061333, 0 3px 8px #73132618;
  color: #fff6dc;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .1em;
  text-align: center;
  text-wrap: balance;
}

body[data-page="create"] .choice-card > span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, #fff3d936 42%, #fff9dc80 48%, transparent 68%);
  transform: translateX(-145%);
  transition: transform 850ms cubic-bezier(.2,.65,.3,1);
  pointer-events: none;
}

body[data-page="create"] .choice-card:is(:hover, :focus-visible) > span::before {
  transform: translateX(145%);
}

body[data-page="create"] .choice-card > strong {
  margin: 17px 24px 0;
  font-size: clamp(1.5rem, 1.7vw, 1.9rem);
  line-height: 1.18;
}

body[data-page="create"] .choice-card > p {
  margin: 12px 24px 20px;
  line-height: 1.65;
}

body[data-page="create"] .family-workshop .tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 270px;
  overflow: hidden;
  padding: 28px;
  border-color: #c6ad7e;
  background-color: #18392f;
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 26px #3a281417;
  color: #fff8e9;
  text-decoration: none;
  transition: transform 320ms cubic-bezier(.2,.65,.3,1), box-shadow 320ms cubic-bezier(.2,.65,.3,1);
}

body[data-page="create"] .coloring-tool {
  background-image: linear-gradient(180deg, #09251c03 0%, #09251c66 32%, #09251cf5 78%), url('/assets/workshop-backgrounds/letters-960.webp');
}

body[data-page="create"] .storybook-tool {
  background-image: linear-gradient(180deg, #21130703 0%, #21130766 32%, #211307f5 78%), url('/assets/workshop-backgrounds/keepsakes-960.webp');
}

body[data-page="create"] .kindness-tool {
  background-image: linear-gradient(180deg, #29101803 0%, #29101866 32%, #291018f5 78%), url('/assets/workshop-backgrounds/welcome-960.webp');
}

body[data-page="create"] .family-workshop .tool-card::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 28px;
  width: 32px;
  height: 2px;
  background: #e6c77d;
  box-shadow: 0 0 14px #ffdd8e55;
}

body[data-page="create"] .family-workshop .tool-card h3 {
  margin: 65px 0 10px;
  color: #fff9e9;
  font-size: clamp(1.5rem, 1.9vw, 1.9rem);
  line-height: 1.2;
  text-wrap: balance;
}

body[data-page="create"] .family-workshop .tool-card p {
  max-width: 45ch;
  margin: 0;
  color: #fff4df;
  line-height: 1.65;
}

body[data-page="create"] .family-workshop .tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px #3a281429;
}

body[data-page="create"] :is(.choice-card, .family-workshop .tool-card):focus-visible {
  outline: 3px solid #a2741f;
  outline-offset: 5px;
}

@media (max-width: 1050px) {
  body[data-page="create"] .choice-card > img,
  body[data-page="create"] .choice-photo { height: 280px; }
}

@media (max-width: 600px) {
  body[data-page="create"] .choice-card > img,
  body[data-page="create"] .choice-photo { height: 245px; }
  body[data-page="create"] .choice-card > span { margin: 20px 22px 0; }
  body[data-page="create"] .choice-card > strong { margin-inline: 22px; }
  body[data-page="create"] .choice-card > p { margin-inline: 22px; }
  body[data-page="create"] .family-workshop .tool-card { min-height: 260px; padding: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="create"] .choice-card > span::before,
  body[data-page="create"] .family-workshop .tool-card { transition: none; }
  body[data-page="create"] .choice-card > span::before { transform: none; }
  body[data-page="create"] .family-workshop .tool-card:hover { transform: none; }
  body[data-page="create"] .choice-card:hover .welcome-photo > img { transform: rotate(-3deg); }
  body[data-page="create"] .choice-card:hover .cheer-photo > img { transform: rotate(3deg); }
}

html[data-story-motion="off"] body[data-page="create"] .choice-card > span::before { transform: none; }
html[data-story-motion="off"] body[data-page="create"] .choice-card:hover .welcome-photo > img { transform: rotate(-3deg); }
html[data-story-motion="off"] body[data-page="create"] .choice-card:hover .cheer-photo > img { transform: rotate(3deg); }