/* Pictures, charts and illustrations on the text-heavy slides (#steps, #aeo, #try, #check). Round 5.
   Everything here animates transform and opacity only, plays once (js/media.js adds .m-in),
   and sits still for prefers-reduced-motion. */

.mv { pointer-events: none; }
.mv text { font-family: var(--sans, "Geist", system-ui, sans-serif); }

/* ---------- Bar rows (step 2 chart + check benchmark) ---------- */
.mb { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; }
.mb span { color: var(--ink-2, rgba(241,250,249,.8)); font-size: .82rem; }
.mb b { font: 500 1.05rem/1 var(--serif); color: #A8EDE4; }
.mb i { grid-column: 1 / -1; display: block; height: 7px; border-radius: 99px; background: rgb(255 255 255 / .09); position: relative; overflow: hidden; }
.mb i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #2FA89C, #5FD6C8 70%, #A8EDE4);
  transform-origin: left; transform: scaleX(var(--v));
}

/* ================= #steps: one picture per step ================= */
#steps .xpanel { position: relative; }
#steps .mv { margin: 0 0 14px; }

/* Step 1: map with pins, yours lands last */
.mv-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.mv-map .m-bg { fill: rgb(255 255 255 / .045); stroke: rgb(255 255 255 / .14); }
.mv-map .m-sea { fill: rgb(95 214 200 / .12); }
.mv-map .m-rd { fill: none; stroke: rgb(255 255 255 / .1); stroke-width: 7; stroke-linecap: round; }
.mv-map .m-rd2 { fill: none; stroke: rgb(255 255 255 / .06); stroke-width: 3; stroke-linecap: round; }
.mv-map .m-q rect { fill: rgb(4 22 27 / .72); stroke: rgb(255 255 255 / .2); }
.mv-map .m-q circle, .mv-map .m-q path { fill: none; stroke: #5FD6C8; stroke-width: 2; stroke-linecap: round; }
.mv-map .m-q text { fill: #F1FAF9; font-size: 12px; font-weight: 500; }
.mv-map .m-pin path { fill: rgb(241 250 249 / .38); }
.mv-map .m-pin .hole { fill: rgb(6 34 40 / .9); }
.mv-map .m-you .m-pin path { fill: #F6D27A; }
.mv-map .m-you .pulse { fill: none; stroke: #F6D27A; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mv-map .tag rect { fill: #F6D27A; }
.mv-map .tag text { fill: #2A1A00; font-size: 11.5px; font-weight: 700; text-anchor: middle; }

/* Step 2: chart */
.mv-chart { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: rgb(255 255 255 / .045); border: 1px solid rgb(255 255 255 / .14); }
.mv-chart small, .bench small { color: var(--ink, #F1FAF9); font-weight: 600; font-size: .84rem; }
.mv-chart em, .bench em { font-style: normal; color: var(--ink-3, rgba(241,250,249,.5)); font-size: .7rem; }

/* Step 3: WhatsApp-style chat */
.mv-chat { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 16px; background: rgb(255 255 255 / .045); border: 1px solid rgb(255 255 255 / .14); }
.mv-chat p { margin: 0; padding: 8px 12px; border-radius: 14px; font-size: .84rem; line-height: 1.25; max-width: 86%; }
.mv-chat .b-in { justify-self: start; background: rgb(255 255 255 / .1); border-bottom-left-radius: 4px; color: var(--ink, #F1FAF9); }
.mv-chat .b-out { justify-self: end; background: #1F7479; border-bottom-right-radius: 4px; color: #F1FAF9; }
.mv-chat .b-cat { justify-self: end; width: 72%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 7px; border-radius: 12px; background: rgb(31 116 121 / .55); }
.mv-chat .b-cat i { display: block; aspect-ratio: 1; border-radius: 8px; background: linear-gradient(150deg, rgb(246 210 122 / .55), rgb(95 214 200 / .35)); }
.mv-chat .b-cat span { grid-column: 1 / -1; text-align: center; font-size: .74rem; font-weight: 700; color: #2A1A00; background: #F6D27A; border-radius: 99px; padding: 4px 0; }

/* ================= #aeo: ten links vs one answer ================= */
#aeo .vs .glass { position: relative; }
.mv-links, .mv-ans { position: absolute; bottom: 1.2rem; right: 1.2rem; width: 5.6rem; }
.mv-links { display: grid; gap: 4px; }
.mv-links i { display: block; height: 4px; border-radius: 9px; background: rgb(241 250 249 / .22); }
.mv-links i:nth-child(odd) { width: 100%; background: rgb(95 214 200 / .45); }
.mv-links i:nth-child(even) { width: 78%; }
.mv-ans { display: grid; gap: 6px; padding: 10px 11px 12px; border-radius: 14px 14px 14px 4px; background: rgb(255 255 255 / .08); border: 1px solid rgb(246 210 122 / .35); }
.mv-ans .ic { width: 1.1rem; height: 1.1rem; color: #F6D27A; }
.mv-ans i { display: block; height: 6px; border-radius: 9px; background: rgb(241 250 249 / .26); }
.mv-ans i:nth-of-type(2) { width: 70%; }
.mv-ans i.you { width: 86%; background: #F6D27A; box-shadow: 0 0 12px rgb(246 210 122 / .5); }
#aeo .vs .glass > small, #aeo .vs .glass > span { position: relative; padding-right: 6.6rem; }

/* ================= #try: photos in the search tiles ================= */
#try .stack .lq { position: relative; overflow: hidden; isolation: isolate; }
#try .mv-ph {
  position: absolute; inset: 0 0 0 auto; width: 46%; height: 100%; object-fit: cover; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%);
  opacity: .7; transition: transform .8s var(--spring, ease);
}
#try .lq.gold .mv-ph { opacity: .55; }
#try .stack .lq:not(.gold) { text-shadow: 0 2px 14px rgb(2 18 22 / .85), 0 0 2px rgb(2 18 22 / .6); }
#try .mv-pin { position: absolute; z-index: 1; display: none; }
#try .mv-pin svg { width: 100%; height: 100%; display: block; }
#try .mv-pin path { fill: #F6D27A; }
#try .lq.gold .mv-pin path { fill: #1F7479; }
#try .mv-pin .hole { fill: rgb(4 22 27 / .85); }
#try .lq.gold .mv-pin .hole { fill: #F6D27A; }

/* ================= #check: how others do ================= */
.bench { display: grid; gap: 9px; padding: 16px 18px; border-radius: 18px; margin-bottom: 12px; }
.bench .mb i::after { background: linear-gradient(90deg, #B98A2E, #F6D27A); }
.bench .mb b { color: #F6D27A; }

/* ================= Phone (under 1024px) ================= */
@media (max-width: 1023px) {
  #steps .xpanel { display: flex; flex-direction: column; }
  #steps .xpanel .mv { order: 1; }
  #steps .xpanel .rows { order: 2; }
  .mv-map { max-width: 320px; }
  .mv-links, .mv-ans { right: 1rem; width: 4.4rem; }
  #aeo .vs { grid-template-columns: 1fr; }
  #aeo .vs .glass > small, #aeo .vs .glass > span { padding-right: 5.4rem; }
  #try .mv-ph { width: 42%; }
  #try .stack .lq { min-height: 70px; }
}

/* ================= Projector (1024px and up) ================= */
@media (min-width: 1024px) {
  /* step pictures sit top-right of each panel */
  .talk #steps .mv { position: absolute; top: 2.2rem; right: 2.4rem; width: min(17.5rem, 34%); margin: 0; }
  .talk #steps .xpanel > p, .talk #steps .xpanel h3 { max-width: calc(100% - min(17.5rem, 34%) - 1.6rem); }
  .talk #steps .xpanel > p { min-height: 6.2rem; }
  .talk .mv-chat .b-cat i { aspect-ratio: 1.5; }
  .talk .mv-chat { gap: 7px; }
  .talk .mv-chart, .talk .mv-chat { padding: 1rem 1.1rem; }
  .talk .mv-chart small, .talk .bench small { font-size: .95rem; }
  .talk .mb span { font-size: .92rem; }
  .talk .mb b { font-size: 1.25rem; }
  .talk .mb i { height: 9px; }
  .talk .mv-chat p { font-size: .95rem; }

  /* one width for the picture and the room kept beside the text, so "One answer." never runs into it */
  .talk #aeo .vs { --mvw: clamp(6rem, 7.6vw, 7.4rem); }
  .talk .mv-links, .talk .mv-ans { width: var(--mvw); right: 1.8rem; bottom: 1.6rem; }
  .talk .mv-links { gap: 5px; }
  .talk .mv-links i { height: 5px; }
  .talk .mv-ans { gap: 8px; padding: .8rem .9rem 1rem; }
  .talk .mv-ans i { height: 8px; }
  .talk #aeo .vs .glass > small, .talk #aeo .vs .glass > span { padding-right: calc(var(--mvw) + 2.4rem); }

  .talk #try .mv-ph { width: 62%; opacity: .75; }
  .talk #try .lq.gold .mv-ph { opacity: .5; }
  .talk #try .lq:hover .mv-ph { transform: scale(1.04); }
  .talk #try .mv-pin { display: block; left: 2.2rem; bottom: 2rem; width: 1.9rem; height: 2.8rem; }

  .talk #check .wrap { grid-template-areas: "head toggles" "score toggles" "bench toggles"; row-gap: 2.4vh; }
  .talk #check .score { grid-template-columns: 8.5rem 1fr; padding: 1.2rem 1.5rem; gap: .6rem 1.4rem; }
  .talk #check .score svg { width: 8.5rem; height: 8.5rem; }
  .talk #check .score-msg { font-size: 1.55rem; }
  .talk #check .bench { grid-area: bench; margin: 0; align-self: start; padding: 1rem 1.5rem 1.1rem; border-radius: 1.6rem; gap: .5rem 1.4rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .talk #check .bench small { grid-column: 1 / 4; }
  .talk #check .bench em { grid-column: 4; grid-row: 1; text-align: right; align-self: center; }
  .talk #check .bench .mb { grid-template-columns: 1fr; gap: .3rem; align-content: end; }
  .talk #check .bench .mb b { font-size: 1.7rem; order: -1; }
  .talk #check .bench .mb span { font-size: .85rem; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  /* small projectors: no room beside "One answer." for the picture */
  .talk #aeo .mv-links, .talk #aeo .mv-ans { display: none; }
  .talk #aeo .vs .glass > small, .talk #aeo .vs .glass > span { padding-right: 0; }
}
@media (min-width: 1024px) and (max-height: 780px) {
  .talk #check .score { padding: .9rem 1.3rem; grid-template-columns: 6.5rem 1fr; }
  .talk #check .score svg { width: 6.5rem; height: 6.5rem; }
  .talk #check .score-msg { font-size: 1.3rem; }
  .talk #check .bench .mb b { font-size: 1.4rem; }
  .talk #check .toggles li { padding: .9rem 0; font-size: 1.1rem; }
}

/* ================= Motion: plays once, when seen ================= */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mv-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes mv-drop { 0% { opacity: 0; transform: translateY(-26px); } 60% { opacity: 1; transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
  @keyframes mv-grow { from { transform: scaleX(0); } to { transform: scaleX(var(--v)); } }
  @keyframes mv-pulse { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }
  @keyframes mv-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
  @keyframes mv-left { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

  /* hidden until seen */
  [data-media]:not(.m-in) .mv-map .m-pin, [data-media]:not(.m-in) .mv-map .tag,
  [data-media]:not(.m-in) .mv-chat > *, [data-media]:not(.m-in) .mv-links i, [data-media]:not(.m-in) .mv-ans > * { opacity: 0; }
  [data-media]:not(.m-in) .mb i::after { transform: scaleX(0); }

  /* steps: replay each time a panel opens */
  .m-in .xpanel.on .mv-map .m-pin { animation: mv-drop .6s cubic-bezier(.2,.8,.2,1) both; }
  .m-in .xpanel.on .mv-map .p1 { animation-delay: .25s; }
  .m-in .xpanel.on .mv-map .p2 { animation-delay: .4s; }
  .m-in .xpanel.on .mv-map .p3 { animation-delay: .55s; }
  .mv-map .m-pin { transform-box: fill-box; }
  .m-in .xpanel.on .mv-map .m-you > .m-pin { animation: mv-drop .7s cubic-bezier(.2,.8,.2,1) .9s both; }
  .m-in .xpanel.on .mv-map .m-you .pulse { animation: mv-pulse 1.6s ease-out 1.5s 3; }
  .m-in .xpanel.on .mv-map .tag { transform-box: fill-box; transform-origin: left bottom; animation: mv-pop .5s cubic-bezier(.2,.8,.2,1) 1.45s both; }

  .m-in .xpanel.on .mb i::after { animation: mv-grow 1.1s cubic-bezier(.2,.8,.2,1) both; }
  .m-in .xpanel.on .mb:nth-of-type(1) i::after { animation-delay: .3s; }
  .m-in .xpanel.on .mb:nth-of-type(2) i::after { animation-delay: .5s; }

  .m-in .xpanel.on .mv-chat > * { animation: mv-up .5s cubic-bezier(.2,.8,.2,1) both; }
  .m-in .xpanel.on .mv-chat .b-in { animation-delay: .25s; }
  .m-in .xpanel.on .mv-chat .b-out { animation-delay: .85s; }
  .m-in .xpanel.on .mv-chat .b-cat { animation-delay: 1.25s; }

  /* aeo */
  .m-in .mv-links i { animation: mv-left .4s ease both; animation-delay: calc(.35s + var(--i) * 70ms); }
  .m-in .mv-ans > * { animation: mv-up .5s cubic-bezier(.2,.8,.2,1) both; }
  .m-in .mv-ans > :nth-child(1) { animation-delay: 1.4s; }
  .m-in .mv-ans > :nth-child(2) { animation-delay: 1.55s; }
  .m-in .mv-ans > :nth-child(3) { animation-delay: 1.7s; }
  .m-in .mv-ans > :nth-child(4) { animation: mv-pop .6s cubic-bezier(.2,.8,.2,1) 1.95s both; transform-origin: left; }

  /* try: pins drop onto each tile */
  [data-media]:not(.m-in) .mv-pin { opacity: 0; }
  .m-in .mv-pin { animation: mv-drop .6s cubic-bezier(.2,.8,.2,1) both; }
  .m-in .lq:nth-child(1) .mv-pin { animation-delay: .5s; }
  .m-in .lq:nth-child(2) .mv-pin { animation-delay: .65s; }
  .m-in .lq:nth-child(3) .mv-pin { animation-delay: .8s; }

  /* check */
  .m-in.bench .mb i::after { animation: mv-grow 1.2s cubic-bezier(.2,.8,.2,1) both; }
  .m-in.bench .mb:nth-of-type(1) i::after { animation-delay: .5s; }
  .m-in.bench .mb:nth-of-type(2) i::after { animation-delay: .62s; }
  .m-in.bench .mb:nth-of-type(3) i::after { animation-delay: .74s; }
  .m-in.bench .mb:nth-of-type(4) i::after { animation-delay: .86s; }
}