/* AquaFit motion graphic v2 — real clips + photos + kinetic type. Palette: sky + cream + white only. */
.af-motion { container-type: inline-size; position: relative; }
.mo-frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border-radius: 32px;
  background: linear-gradient(170deg, #f5fbff 0%, #e0f2fe 55%, #fff8ef 100%);
  font-family: var(--font-display); color: var(--ink);
}
@container (min-width: 640px) { .mo-frame { aspect-ratio: 16 / 9; border-radius: 34px; } }
.mo-stage { position: absolute; inset: 0; }

/* ambient */
.mo-bg { position: absolute; inset: 0; z-index: 0; }
.mo-blob { position: absolute; border-radius: 50%; background: #fff; opacity: 0.7; animation: mo-drift 12s ease-in-out infinite alternate; }
.mo-blob.b1 { width: 70cqi; height: 70cqi; left: -26cqi; top: -24cqi; }
.mo-blob.b2 { width: 50cqi; height: 50cqi; right: -22cqi; top: 34%; background: #bae6fd; opacity: 0.45; animation-delay: -6s; }
@container (min-width: 640px) { .mo-blob.b1 { width: 40cqi; height: 40cqi; left: -12cqi; top: -14cqi; } .mo-blob.b2 { width: 30cqi; height: 30cqi; right: -8cqi; } }
.mo-bubbles i { position: absolute; bottom: -40px; border-radius: 50%; border: 2px solid rgb(56 189 248 / 0.45); background: rgb(255 255 255 / 0.6); animation: mo-rise var(--t, 9s) linear var(--d, 0s) infinite; }
.mo-wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 13%; animation: mo-wave 7s linear infinite; }
.mo-wave.back { height: 17%; opacity: 0.55; animation-duration: 11s; animation-direction: reverse; }

/* scenes */
.mo-scene {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 7cqi 7cqi 17cqi; gap: 4cqi;
  opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.mo-scene.is-active { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
.mo-txt { display: flex; flex-direction: column; align-items: center; gap: 2.4cqi; }
.mo-h { margin: 0; font-weight: 600; font-size: 11.5cqi; line-height: 1; }
.mo-h .sky { color: var(--sky-500); }
.mo-p { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 4.4cqi; color: var(--ink-soft); }
.mo-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqi; }
.mo-chip { font-family: var(--font-body); font-weight: 800; font-size: 3.6cqi; background: #fff; padding: 1.4cqi 3cqi; border-radius: 99px; box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 1.2cqi; }
.mo-chip svg { width: 1.1em; height: 1.1em; color: var(--sky-500); }
@container (min-width: 640px) {
  .mo-scene { flex-direction: row; padding: 4cqi 8cqi 8cqi; gap: 6cqi; text-align: left; }
  .mo-scene.col { flex-direction: column; text-align: center; gap: 2cqi; }
  .mo-scene.rev { flex-direction: row-reverse; }
  .mo-txt { align-items: flex-start; gap: 1.4cqi; max-width: 50cqi; }
  .col .mo-txt { align-items: center; max-width: none; }
  .mo-h { font-size: 6.6cqi; }
  .mo-p { font-size: 2.1cqi; }
  .mo-chips { justify-content: flex-start; gap: 0.9cqi; }
  .mo-chip { font-size: 1.8cqi; padding: 0.7cqi 1.5cqi; gap: 0.6cqi; }
}

/* media cards (video or photo) */
.mo-cards { position: relative; display: flex; justify-content: center; }
.mo-media {
  position: relative; width: 40cqi; aspect-ratio: 3 / 4; overflow: hidden; flex: none;
  border-radius: 6cqi; border: 1.3cqi solid #fff; background: var(--sky-100);
  box-shadow: 0 2cqi 5cqi -2cqi rgb(23 48 90 / 0.35); transform: rotate(var(--r, 0deg));
}
.mo-media.lg { width: 40cqi; }
.mo-media + .mo-media { margin-left: -8cqi; margin-top: 6cqi; }
.mo-media video, .mo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-media .tag { position: absolute; left: 50%; bottom: 3cqi; translate: -50% 0; font-family: var(--font-body); font-weight: 600; font-size: 3.2cqi; background: #fff; padding: 1cqi 2.6cqi; border-radius: 99px; white-space: nowrap; }
@container (min-width: 640px) {
  .mo-media { width: 22cqi; border-radius: 3cqi; border-width: 0.7cqi; }
  .mo-media.lg { width: 26cqi; }
  .mo-media + .mo-media { margin-left: -4cqi; margin-top: 4cqi; }
  .mo-media .tag { font-size: 1.6cqi; bottom: 1.5cqi; padding: 0.5cqi 1.3cqi; }
}

/* S3 trio of round photos */
.mo-trio { display: flex; gap: 3cqi; }
.mo-trio > span { display: flex; flex-direction: column; align-items: center; gap: 2cqi; }
.mo-trio .ph { display: block; width: 25cqi; height: 25cqi; border-radius: 50%; overflow: hidden; border: 1.2cqi solid #fff; box-shadow: var(--shadow-sm); }
.mo-trio .ph img { width: 100%; height: 100%; object-fit: cover; }
.mo-trio em { font-style: normal; font-weight: 800; font-size: 7.4cqi; }
.mo-trio > span:nth-child(2) em { color: var(--sky-500); }
@container (min-width: 640px) { .mo-trio { gap: 5cqi; } .mo-trio .ph { width: 15cqi; height: 15cqi; border-width: 0.7cqi; } .mo-trio em { font-size: 4.6cqi; } }

/* S5 polaroids */
.mo-pols { position: relative; width: 78cqi; height: 42cqi; }
.mo-pol { position: absolute; top: 0; width: 32cqi; background: #fff; padding: 1.5cqi 1.5cqi 5cqi; border-radius: 1.5cqi; box-shadow: var(--shadow); transform: rotate(var(--r)); }
.mo-pol img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 1cqi; }
.mo-pol:nth-child(1) { left: 0; --r: -8deg; } .mo-pol:nth-child(2) { left: 23cqi; top: -3cqi; --r: 3deg; z-index: 2; } .mo-pol:nth-child(3) { left: 46cqi; --r: 9deg; }
/* big sequential stars — svg must stay inline: Tailwind preflight makes svg display:block */
.mo-rating { display: flex; flex-direction: column; align-items: center; gap: 1.6cqi; }
.mo-scene .mo-bigstars { display: flex; gap: 1.2cqi; }
.mo-bigstars > span { display: block; width: 10cqi; height: 10cqi; color: var(--star); filter: drop-shadow(0 0.6cqi 0.8cqi rgb(245 179 1 / 0.35)); }
.mo-bigstars svg { display: block; width: 100%; height: 100%; }
.mo-score { font-family: var(--font-body); font-weight: 800; font-size: 4.2cqi; color: var(--ink-soft); }
.mo-score b { font-family: var(--font-display); color: var(--ink); font-size: 1.5em; margin-right: 0.3em; }
@container (min-width: 640px) {
  .mo-pols { width: 38cqi; height: 21cqi; }
  .mo-pol { width: 13.5cqi; padding: 0.7cqi 0.7cqi 2.4cqi; border-radius: 0.8cqi; }
  .mo-pol:nth-child(2) { left: 12.2cqi; top: -2cqi; } .mo-pol:nth-child(3) { left: 24.4cqi; }
  .mo-rating { gap: 0.8cqi; } .mo-scene .mo-bigstars { gap: 0.6cqi; } .mo-bigstars > span { width: 5cqi; height: 5cqi; } .mo-score { font-size: 2.1cqi; }
}

/* S6 end card */
.mo-logo { width: 60cqi; }
.mo-pill { text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 2cqi; background: var(--line); color: var(--line-ink); font-weight: 600; font-size: 5.6cqi; padding: 3cqi 6cqi; border-radius: 99px; box-shadow: 0 1cqi 0 -0.2cqi var(--line-dark); }
.mo-pill svg { width: 7cqi; height: 7cqi; }
.mo-pill:hover { filter: brightness(1.05); }
.mo-pill:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 4px; }
.is-active .mo-pill { animation: mo-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both, mo-pulse 1.6s ease-in-out 1.8s infinite; }
@container (min-width: 640px) { .mo-logo { width: 30cqi; } .mo-pill { font-size: 2.8cqi; padding: 1.4cqi 3cqi; gap: 1cqi; } .mo-pill svg { width: 3.4cqi; height: 3.4cqi; } }

/* entrance primitives — resting style is the final state */
.mo-scene .pop, .mo-scene .rise, .mo-scene .drop, .mo-scene .slide { display: inline-block; }
.is-active .pop   { animation: mo-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s) both; }
.is-active .rise  { animation: mo-rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both; }
.is-active .drop  { animation: mo-drop 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) var(--d, 0s) both; }
.is-active .slide { animation: mo-slide 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both; }
.is-active .mo-media img { animation: mo-kenburns 5s ease-out both; }

/* controls */
.mo-ui { position: absolute; z-index: 5; left: 4cqi; right: 4cqi; bottom: 4cqi; display: flex; align-items: center; gap: 2.4cqi; }
.mo-progress { flex: 1; display: flex; gap: 1.2cqi; }
.mo-progress span { flex: 1; height: 5px; border-radius: 9px; background: rgb(255 255 255 / 0.6); overflow: hidden; }
.mo-progress b { display: block; height: 100%; width: 0; background: var(--ink); border-radius: inherit; }
.mo-toggle { all: unset; cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); color: var(--ink); }
.mo-toggle:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 2px; }
.mo-toggle svg { width: 18px; height: 18px; }
.mo-toggle .i-play { display: none; }
.is-paused .mo-toggle .i-play { display: block; } .is-paused .mo-toggle .i-pause { display: none; }
@container (min-width: 640px) { .mo-ui { left: 2.4cqi; right: 2.4cqi; bottom: 2.2cqi; gap: 1.2cqi; } .mo-progress { gap: 0.6cqi; } }
.is-paused .mo-frame *, .is-offscreen .mo-frame * { animation-play-state: paused !important; }

@keyframes mo-pop { from { opacity: 0; transform: translateY(30%) scale(0.7) rotate(-6deg); } }
@keyframes mo-rise-in { from { opacity: 0; transform: translateY(40px); filter: blur(6px); } }
@keyframes mo-drop { from { opacity: 0; transform: translateY(-120%) rotate(calc(var(--r, 0deg) * -2.5)); } }
@keyframes mo-slide { from { opacity: 0; transform: translateX(30%) rotate(calc(var(--r, 0deg) + 8deg)) scale(0.9); } }
@keyframes mo-kenburns { from { transform: scale(1.18); } to { transform: scale(1.02); } }
@keyframes mo-pulse { 50% { scale: 1.06; } }
@keyframes mo-drift { to { transform: translate(6cqi, 4cqi) scale(1.08); } }
@keyframes mo-wave { to { transform: translateX(-50%); } }
@keyframes mo-rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-120cqi) translateX(4cqi); opacity: 0; } }

/* Open Sans runs wider than Fredoka — scale kinetic type down a touch */
.mo-h { font-size: 9.6cqi; letter-spacing: -0.03em; }
@container (min-width: 640px) { .mo-h { font-size: 6cqi; } }
html[lang="th"] .mo-h { letter-spacing: 0; line-height: 1.3; }