/* 03 Experience: the Cecii Health journey (experience.js): the route along the top, the intro, a stop
   for each part of the role, and the campaign with its deck (deck.js) */

.ch-work { background: radial-gradient(120% 90% at 70% 40%, #f8eced 0%, var(--blush) 70%); }

/* ---------------------------------------------------------------- the route, with a gut shot travelling along it */
.route { position: absolute; top: 88px; left: 50%; width: min(760px, 78vw); height: 60px; transform: translateX(-50%); z-index: 5;
  opacity: 0; transition: opacity .6s ease .2s; }
.ch-work.is-active .route { opacity: 1; }
.route-line { position: absolute; left: 0; right: 0; top: 21px; height: 2px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--mauve) 18%, transparent); }
.route-fill { position: absolute; inset: 0; background: var(--mauve); transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 1.1s var(--ease); }
.route-shot { position: absolute; top: -17px; left: 0; width: 17px; height: 34px; transform: translateX(-50%); z-index: 2;
  transition: left 1.1s var(--ease); filter: drop-shadow(0 4px 4px rgba(60, 30, 40, .2)); }
.route-shot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.shot-cap { fill: var(--gold); }
.shot-neck { fill: var(--mauve); }
.shot-label { fill: var(--cream); }
.route-stops { list-style: none; padding: 0; }
.route-stops li { position: absolute; top: 14px; transform: translateX(-50%); }
.route-stops button { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 9px;
  font: 500 12px/1 var(--sans); color: var(--ink-soft); white-space: nowrap; }
.route-stops button i { width: 14px; height: 14px; border-radius: 50%; background: var(--blush);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mauve) 35%, transparent); transition: background .4s, box-shadow .4s, transform .4s; }
.route-stops button.is-past i { background: var(--mauve); box-shadow: none; }
.route-stops button[aria-current="true"] i { background: var(--mauve); transform: scale(1.2);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--mauve) 18%, transparent); }
.route-stops button[aria-current="true"] span { color: var(--ink); font-weight: 600; }
.route-stops button:hover span { color: var(--ink); }
.route-stops button:focus-visible { outline: 2px solid var(--mauve); outline-offset: 5px; border-radius: 6px; }

/* ---------------------------------------------------------------- the intro, and the four parts of the role side by side */
.journey-intro { position: absolute; left: 50%; top: 55%; width: min(780px, 88vw); transform: translate(-50%, -50%); text-align: center;
  transition: opacity .7s ease, transform .9s var(--ease); }
.ch-work:not([data-stop="0"]) .journey-intro { opacity: 0; transform: translate(-50%, -58%); pointer-events: none; }
.journey-intro .title { font-size: clamp(64px, 9vw, 148px); margin: 18px 0 16px; color: var(--ink); }
.journey-role { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 22px; font: 500 14px/1.4 var(--sans); color: var(--mauve); }
.journey-role span + span::before { content: "·"; margin: 0 14px 0 -14px; color: color-mix(in srgb, var(--mauve) 55%, transparent); }
.journey-text { max-width: 560px; margin: 18px auto 0; font: 400 17px/1.6 var(--sans); color: var(--ink-soft); }
.journey-hint { margin-top: 28px; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mauve); }
.journey-hint::after { content: ""; display: block; width: 1px; height: 34px; margin: 12px auto 0; background: currentColor;
  transform-origin: top; animation: hint-line 1.8s var(--ease) infinite; }
.journey-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(1100px, 94vw); margin: 26px 0 0 50%;
  transform: translateX(-50%); }
.tile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 15px;
  border-radius: 16px; background: color-mix(in srgb, #fff 62%, transparent); text-align: left;
  box-shadow: 0 10px 26px rgba(70, 40, 50, .08), inset 0 0 0 1px rgba(158, 84, 98, .12);
  transition: transform .35s var(--ease), box-shadow .35s ease, background .35s ease; }
.tile:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 16px 34px rgba(70, 40, 50, .14), inset 0 0 0 1px rgba(158, 84, 98, .2); }
.tile:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }
.tile-kicker { font: 600 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mauve); }
.tile-title { font: italic 400 clamp(17px, 1.45vw, 22px)/1.05 var(--serif); color: var(--ink); white-space: nowrap; }
.tile-brief { font: 400 13px/1.35 var(--sans); color: var(--ink-soft); }
.ch-work.is-active[data-stop="0"] .tile { animation: tile-in .7s var(--ease) var(--d) both; }
@keyframes tile-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------------------------------------------------------------- the stops: what I did on the left, its scene on the right */
.stops { position: absolute; inset: 0; }
.stop { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center;
  gap: clamp(24px, 4vw, 72px); padding: 156px clamp(20px, 6vw, 96px) 56px; pointer-events: none;
  opacity: 0; transform: translateY(44px); transition: opacity .55s ease, transform .8s var(--ease); }
.stop.is-past { transform: translateY(-44px); }
.stop.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .15s; }
.stop-text .kicker, .work-text .kicker { font-weight: 700; font-size: 13px; letter-spacing: .14em; }
.stop-text .title { font-size: clamp(44px, 5.2vw, 86px); margin-top: 14px; color: var(--ink); }
.stop-numbers { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 3vw, 48px); margin: 26px 0 4px; }
.stop-number b { display: block; font: italic 400 clamp(52px, 5.4vw, 88px)/.9 var(--serif); color: var(--mauve); font-variant-numeric: tabular-nums; }
.stop-number span { display: block; margin-top: 8px; white-space: nowrap; font: 500 13px/1.35 var(--sans); color: var(--ink-soft); }
.stop-points { list-style: none; margin-top: 24px; padding: 0; display: grid; gap: 12px; max-width: 470px; }
.stop-points li { position: relative; padding-left: 22px; font: 400 17px/1.5 var(--sans); color: var(--ink);
  opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s var(--ease); }
.stop.is-on .stop-points li { opacity: 1; transform: none; transition-delay: calc(.15s + var(--d)); }
.stop-points li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: var(--mauve); }
/* *highlighted* words: a marker stroke drawn in from the left */
.stop-points mark { color: inherit; background: linear-gradient(transparent 56%, color-mix(in srgb, var(--mauve) 26%, transparent) 56%) no-repeat 0 0 / 0 100%;
  transition: background-size .9s var(--ease); }
.stop.is-on .stop-points mark { background-size: 100% 100%; transition-delay: calc(.6s + var(--d)); }
.stop-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }

/* stop 1: London, a dot for every stockist looked at, a pin for every one that came on board */
.map { width: min(100%, 580px); height: auto; overflow: visible; }
.map-area { fill: color-mix(in srgb, var(--ink) 4%, transparent); stroke: color-mix(in srgb, var(--ink) 20%, transparent);
  stroke-width: 1; stroke-dasharray: 3 3; }
.map-river { fill: none; stroke: #d3d9e4; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.map-label { font: italic 400 20px var(--serif); fill: var(--ink-soft); }
.map-river-label { font: 600 8px var(--sans); letter-spacing: .2em; text-transform: uppercase; fill: #8d95a6; }
.map-dot { fill: color-mix(in srgb, var(--ink) 30%, transparent); opacity: 0; transition: opacity .4s ease; }
.stop.is-on .map-dot { opacity: 1; transition-delay: var(--d); }
.map-pin { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.map-pin circle:first-child { fill: var(--mauve); stroke: #fff; stroke-width: 1.8; }
.map-pin-core { fill: #fff; }
.stop.is-on .map-pin { animation: pin-drop .6s var(--ease) var(--d) both; }
@keyframes pin-drop {
  0% { opacity: 0; transform: translateY(-16px) scale(.3); }
  60% { opacity: 1; transform: translateY(2px) scale(1.15); }
  100% { opacity: 1; transform: none; }
}

/* stop 2: the outreach as a message thread, beside a collaboration on video. The thread plays out as
   data-dm goes from typing to waiting (they're typing) to done (their reply). */
.creator-scene { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 44px); width: 100%; }
.dm { flex: 0 1 360px; width: min(100%, 380px); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(60, 30, 40, .14); }
.dm-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #f1e9eb; font: 500 14px/1 var(--sans); color: var(--ink); }
.dm .avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #f3d6db, #c48896); }
.handle b { filter: blur(4px); font-weight: 600; }   /* (no real names) */
.dm-sub { margin-left: auto; font: 500 12px/1 var(--sans); color: var(--ink-soft); }
.dm-body { display: flex; flex-direction: column; gap: 10px; min-height: 236px; padding: 18px 16px 20px; }
.bubble { max-width: 84%; padding: 10px 14px; border-radius: 18px; font: 400 14.5px/1.45 var(--sans); }
.bubble.out { align-self: flex-end; background: var(--mauve); color: #fff; border-bottom-right-radius: 6px; }
.bubble.in { align-self: flex-start; background: #f4eff1; color: var(--ink); border-bottom-left-radius: 6px; }
.stop-creators:not([data-dm="typing"]):not([data-dm="waiting"]):not([data-dm="done"]) .bubble.out { visibility: hidden; }
.caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.stop-creators:not([data-dm="typing"]) .caret { display: none; }
.bubble.typing, .bubble.reply { display: none; }
.stop-creators[data-dm="waiting"] .bubble.typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: #b9adb2; animation: typing 1s ease-in-out infinite; }
.bubble.typing i:nth-child(2) { animation-delay: .15s; }
.bubble.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { transform: translateY(-3px); opacity: .5; } }
.stop-creators[data-dm="done"] .bubble.reply { display: block; animation: bubble-in .45s var(--ease); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.94); } }

/* stop 3: the market days on video, and what each one was for. (Phone frames: phone.css) */
.stop .phone { opacity: 0; transform: translateY(40px); transition: transform .9s var(--ease), opacity .7s ease; }
.stop.is-on .phone { opacity: 1; transform: none; transition-delay: calc(.2s + var(--d)); }
.stop .phone-frame { height: min(44vh, 430px); }
.stop .phone figcaption { color: var(--ink-soft); }
.stop-phones { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 2vw, 30px); }
.stop-phones .phone:nth-child(2) { margin-bottom: 5vh; }
.goals { list-style: none; display: flex; justify-content: center; gap: 10px; margin-top: 24px; padding: 0; }
.goals li { padding: 10px 15px; border-radius: 999px; background: #fff; box-shadow: 0 10px 22px rgba(60, 30, 40, .1);
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mauve);
  opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .4s ease, transform .5s var(--ease); }
.stop.is-on .goals li { opacity: 1; transform: none; transition-delay: var(--d); }

/* ---------------------------------------------------------------- the last stop: the campaign, and its deck */
.ch-work .work-text, .ch-work .deck { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.ch-work.is-campaign .work-text, .ch-work.is-campaign .deck { opacity: 1; pointer-events: auto; transition-delay: .15s; }
.work-text { position: absolute; left: clamp(20px, 6vw, 96px); top: calc(50% + 30px); transform: translateY(-50%); width: min(30vw, 400px); }
.work-text .title { font-size: clamp(52px, 6.5vw, 104px); margin: 18px 0 6px; color: var(--ink); }
.work-sub { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.2vw, 32px); color: var(--mauve); }
.work-meta { margin: 22px 0 18px; display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.4 var(--sans); color: var(--ink-soft); }
.work-summary { font: 400 16px/1.6 var(--sans); color: var(--ink); }

/* the deck: slides land on a stack, each a little askew; the ones further down sink back. It fits below
   the route (about 150px) with its caption under it, however short the screen: as wide as the height allows */
.deck { position: absolute; right: clamp(20px, 5vw, 80px); top: calc(50% + 45px); width: min(56vw, 960px, (100vh - 230px) * 16 / 9);
  aspect-ratio: 16 / 9; transform: translateY(-50%); }
.deck-slides { position: absolute; inset: 0; }
.deck-slides::before, .deck-slides::after { content: ""; position: absolute; inset: 0; border-radius: 14px; background: #fff;
  box-shadow: 0 20px 40px rgba(60, 30, 40, .12); transform: translate(2.4%, 3.6%) rotate(2.6deg); opacity: 0; transition: opacity .6s ease .3s; }
.deck-slides::after { transform: translate(-1.6%, 2%) rotate(-1.8deg); }
.ch-work.is-campaign .deck-slides::before, .ch-work.is-campaign .deck-slides::after { opacity: 1; }
.slide {
  position: absolute; inset: 0; display: block; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  cursor: pointer; background: #fff;
  box-shadow: 0 30px 60px rgba(60, 30, 40, .18), 0 4px 10px rgba(60, 30, 40, .08);
  transform: translate3d(16%, 115vh, 0) rotate(10deg); transition: transform 1s var(--ease), filter .8s ease;
}
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide.is-on {
  transform: translate3d(calc(var(--depth) * -1.4%), calc(var(--depth) * -2.6%), 0) scale(calc(1 - var(--depth) * .035)) rotate(var(--tilt));
  filter: brightness(calc(1 - var(--depth) * .05));
}
.slide.is-buried { visibility: hidden; transition: transform 1s var(--ease), visibility 0s linear 1s; }
.deck:hover .slide.is-on { filter: brightness(1.02); }
.deck-caption { position: absolute; left: 0; right: 0; top: calc(100% + 26px); display: flex; gap: 14px; align-items: baseline; }
.deck-count { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--mauve); font-variant-numeric: tabular-nums; }
.deck-name { font: 500 15px/1.3 var(--sans); color: var(--ink); }
.deck-prompt { position: absolute; left: 50%; bottom: 7%; z-index: 20; padding: 12px 18px; border-radius: 999px; pointer-events: none;
  transform: translateX(-50%); background: var(--ink); color: var(--cream); white-space: nowrap;
  font: 600 13px/1 var(--sans); box-shadow: 0 14px 30px rgba(31, 36, 51, .3);
  animation: prompt 2.4s ease-in-out infinite; transition: opacity .4s ease; }
.deck-prompt::before { content: "↓"; margin-right: 8px; color: var(--gold); }
.ch-work.has-flipped .deck-prompt { opacity: 0; }

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 900px) {
  .route { top: 68px; width: calc(100% - 48px); }
  .route-stops button { gap: 7px; font-size: 10px; }
  .journey-intro .title { font-size: 64px; margin: 12px 0; }
  .journey-text { font-size: 15px; }
  .journey-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
  .tile { padding: 12px; }
  .tile-title { font-size: 19px; white-space: normal; }
  .stop { grid-template-columns: 1fr; align-content: start; gap: 16px; padding: 136px 16px 20px; }
  .stop-text .title { font-size: 38px; margin-top: 10px; }
  .stop-numbers { margin: 14px 0 0; }
  .stop-number b { font-size: 42px; }
  .stop-number span { font-size: 12px; margin-top: 4px; }
  .stop-points { margin-top: 12px; gap: 6px; }
  .stop-points li { font-size: 14px; }
  .map { max-height: 30vh; }
  .dm { width: 100%; }
  .dm-body { min-height: 0; padding: 12px; }
  .bubble { font-size: 13px; }
  .stop .phone-frame { height: 28vh; border-radius: 22px; padding: 6px; }
  .stop .phone video { border-radius: 17px; }
  .stop .sound { width: 32px; height: 32px; right: 12px; bottom: 12px; }
  .stop .sound svg { width: 15px; height: 15px; }
  .stop .phone figcaption { display: none; }
  .stop-phones .phone:nth-child(2) { margin-bottom: 3vh; }
  .goals { margin-top: 12px; gap: 6px; }
  .goals li { padding: 8px 10px; font-size: 9px; }
  .work-text { left: 16px; right: 16px; top: 14vh; transform: none; width: auto; }
  .work-text .title { font-size: 46px; margin: 10px 0 4px; }
  .work-meta, .work-summary { display: none; }
  .deck { left: 16px; right: 16px; width: auto; top: 49%; transform: translateY(-50%); }
  .deck-caption { top: calc(100% + 18px); flex-wrap: wrap; }
}