/* ============================================================
   ITC Candyman — "Once Upon A Time" case study
   Bespoke components built on the shared design tokens.
   Used only by candyman-storybook.html
   ============================================================ */

/* --- Page rhythm: tighten the editorial block spacing for this
   case study so sections breathe without leaving voids. Scoped to
   this page only (this file is loaded by candyman-storybook.html). --- */
.mxd-project__block {
  margin-top: 9.4rem;
  margin-bottom: 10rem;
}

.mxd-project__block.pre-grid {
  margin-bottom: 7.6rem;
}

@media only screen and (min-width: 768px) {
  .mxd-project__block {
    margin-top: 10.4rem;
    margin-bottom: 11.4rem;
  }
  .mxd-project__block.pre-grid {
    margin-bottom: 9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-project__block {
    margin-top: 11rem;
    margin-bottom: 11.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-project__block {
    margin-top: 13.6rem;
    margin-bottom: 14rem;
  }
  .mxd-project__block.pre-grid {
    margin-bottom: 11.5rem;
  }
}

/* --- How it works: the 5-step "big magic" flow --- */
.cm-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.4rem, 1.4vw, 2rem);
  counter-reset: cmstep;
}

.cm-step {
  counter-increment: cmstep;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 2.8rem 2.2rem 2.6rem;
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(var(--accent-rgb), 0.06) 0%, transparent 50%),
    linear-gradient(165deg, var(--base-tint) 0%, var(--base-shade) 140%);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 22px 48px -34px rgba(0, 0, 0, 0.6);
  transition: transform 0.55s var(--_animbezier),
              border-color 0.55s var(--_animbezier),
              box-shadow 0.55s var(--_animbezier);
}

.cm-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.2rem;
  right: 2.2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.45), transparent);
  opacity: 0.55;
  transition: opacity 0.55s var(--_animbezier);
}

.cm-step:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.65);
}

.cm-step:hover::before { opacity: 1; }

/* connector chevron between steps on wide screens */
.cm-step:not(:last-child)::after {
  content: "\203A";
  position: absolute;
  top: 4.4rem;
  right: calc(-1 * clamp(1.4rem, 1.4vw, 2rem) / 2);
  transform: translate(50%, -50%);
  font: normal var(--fw-medium) 2.2rem/1 var(--_font-default);
  color: rgba(var(--accent-rgb), 0.5);
  z-index: 3;
}

.cm-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  font: normal var(--fw-medium) 1.5rem/1 var(--_font-accent);
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  background: rgba(var(--accent-rgb), 0.09);
}

.cm-step__num::before { content: counter(cmstep, decimal-leading-zero); }

.cm-step i {
  font-size: 2.4rem;
  color: var(--accent);
}

.cm-step strong {
  font: normal var(--fw-medium) 1.8rem/1.25 var(--_font-default);
  color: var(--t-bright);
}

.cm-step span {
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--t-muted);
}

/* --- Framed figure (how-it-works visual, printed book shots) --- */
.cm-figure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background: linear-gradient(165deg, var(--base-tint), var(--base-shade));
}

.cm-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.cm-figure figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.7rem 2.2rem;
  font-size: 1.4rem;
  color: var(--t-muted);
}

.cm-figure figcaption::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
}

/* --- Two story-collection cards --- */
.cm-collections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 1.6vw, 2.6rem);
}

.cm-collection {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(2.6rem, 2.4vw, 3.4rem);
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background:
    radial-gradient(150% 130% at 100% -12%, rgba(var(--accent-rgb), 0.12) 0%, transparent 52%),
    linear-gradient(158deg, var(--base-tint) 0%, var(--base-shade) 150%);
  overflow: hidden;
  transition: transform 0.55s var(--_animbezier),
              border-color 0.55s var(--_animbezier),
              box-shadow 0.55s var(--_animbezier);
}

.cm-collection:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.65);
}

.cm-collection i {
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.cm-collection em {
  font-style: normal;
  font-size: 1.15rem;
  letter-spacing: 0.22rem;
  text-transform: uppercase;
  color: var(--t-muted);
}

.cm-collection strong {
  font: normal var(--fw-medium) clamp(2.2rem, 2.4vw, 2.8rem)/1.2 var(--_font-default);
  color: var(--t-bright);
}

.cm-collection span {
  font-size: 1.45rem;
  line-height: 1.55;
  color: var(--t-muted);
}

/* --- Awards showcase --- */
.cm-awards {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: clamp(1.8rem, 1.6vw, 2.6rem);
  align-items: stretch;
}

.cm-award {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.8rem, 2vw, 2.8rem);
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(var(--accent-rgb), 0.06) 0%, transparent 55%),
    linear-gradient(165deg, var(--base-tint) 0%, var(--base-shade) 145%);
  transition: transform 0.55s var(--_animbezier),
              border-color 0.55s var(--_animbezier),
              box-shadow 0.55s var(--_animbezier);
}

.cm-award:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.65);
}

.cm-award img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  border-radius: calc(var(--_radius-m) - 0.6rem);
}

/* --- Creator / influencer amplification --- */
.cm-influencer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 392px);
  gap: clamp(3rem, 5vw, 6.4rem);
  align-items: center;
}

.cm-influencer__body {
  display: flex;
  flex-direction: column;
}

.cm-influencer__body .ie-case-head {
  margin-bottom: clamp(2.6rem, 3.4vw, 4rem);
}

.cm-influencer__points {
  display: flex;
  flex-direction: column;
}

.cm-influencer__point {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
  padding: clamp(1.6rem, 1.8vw, 2.2rem) 0;
}

.cm-influencer__point + .cm-influencer__point {
  border-top: 1px solid var(--st-muted);
}

.cm-influencer__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  background: rgba(var(--accent-rgb), 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.55s var(--_animbezier),
              border-color 0.55s var(--_animbezier),
              background-color 0.55s var(--_animbezier);
}

.cm-influencer__icon i {
  font-size: 2.1rem;
  line-height: 1;
}

.cm-influencer__point:hover .cm-influencer__icon {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.14);
}

.cm-influencer__point strong {
  display: block;
  margin-bottom: 0.5rem;
  font: normal var(--fw-medium) 1.8rem/1.25 var(--_font-default);
  color: var(--t-bright);
}

.cm-influencer__point span {
  font-size: 1.45rem;
  line-height: 1.6;
  color: var(--t-muted);
}

.cm-influencer__media {
  position: relative;
  width: 100%;
}

.cm-influencer__video {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background: var(--base-shade);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85),
              0 0 0 1px rgba(255, 255, 255, 0.03);
}

.cm-influencer__video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  background: radial-gradient(120% 80% at 50% -10%, rgba(var(--accent-rgb), 0.12) 0%, transparent 55%);
  mix-blend-mode: screen;
  z-index: 2;
}

.cm-influencer__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm-influencer__tag {
  position: absolute;
  top: clamp(1.2rem, 1.4vw, 1.8rem);
  left: clamp(1.2rem, 1.4vw, 1.8rem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.3rem;
  z-index: 4;
  font: normal var(--fw-medium) 1.15rem/1 var(--_font-default);
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--t-bright);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  background: rgba(12, 12, 12, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.cm-influencer__tag i { color: var(--accent); font-size: 1.4rem; }

/* --- In the press --- */
.cm-press {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 1.5vw, 2.4rem);
}

.cm-press__item {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(2.4rem, 2.2vw, 3rem);
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(var(--accent-rgb), 0.05) 0%, transparent 50%),
    linear-gradient(165deg, var(--base-tint) 0%, var(--base-shade) 140%);
  text-decoration: none;
  transition: transform 0.55s var(--_animbezier),
              border-color 0.55s var(--_animbezier),
              box-shadow 0.55s var(--_animbezier);
}

.cm-press__item:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.65);
}

.cm-press__outlet {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font: normal var(--fw-medium) 1.15rem/1.2 var(--_font-default);
  text-transform: uppercase;
  letter-spacing: 0.14rem;
  color: var(--t-muted);
}

.cm-press__outlet i { color: var(--accent); font-size: 1.4rem; }

.cm-press__headline {
  flex: 1 1 auto;
  font: normal var(--fw-medium) 1.7rem/1.35 var(--_font-default);
  color: var(--t-bright);
}

.cm-press__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.35rem;
  color: var(--accent);
}

.cm-press__cta i { transition: transform 0.4s var(--_animbezier); }

.cm-press__item:hover .cm-press__cta i { transform: translate(3px, -3px); }

/* --- Closing CTA banner --- */
.cm-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(3.4rem, 4vw, 5.2rem);
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(var(--accent-rgb), 0.16) 0%, transparent 55%),
    linear-gradient(150deg, var(--base-tint) 0%, var(--base-shade) 150%);
}

.cm-cta__kicker {
  margin-bottom: 1.4rem;
  font: normal var(--fw-medium) 1.2rem/1.2 var(--_font-default);
  text-transform: uppercase;
  letter-spacing: 0.16rem;
  color: var(--t-muted);
}

.cm-cta__title {
  max-width: 18ch;
  margin-bottom: 1.8rem;
  font: normal var(--fw-medium) clamp(2.8rem, 4vw, 4.4rem)/1.1 var(--_font-default);
  color: var(--t-bright);
}

.cm-cta__lead {
  max-width: 52ch;
  margin-bottom: 3rem;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--t-muted);
}

.cm-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .cm-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cm-step:not(:last-child)::after { display: none; }
  .cm-awards {
    grid-template-columns: 1fr;
  }
  .cm-press {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cm-influencer {
    grid-template-columns: 1fr;
    gap: clamp(2.8rem, 6vw, 4rem);
  }
  .cm-influencer__media {
    width: min(340px, 78vw);
    margin-inline: auto;
  }
}

@media (max-width: 575px) {
  .cm-steps,
  .cm-collections,
  .cm-press {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm-step,
  .cm-collection,
  .cm-award {
    transition: none;
  }
}