/* Live makeover: a fictional coffee house site that redesigns itself.
   Every selector is scoped to .mk. The only exceptions are the view
   transition pseudo-elements at the end, which target mk- names only. */

.mk {
  --mk-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --mk-paper: #ECE9E3;
  --mk-paper-dim: rgba(236, 233, 227, 0.6);
  --mk-line: rgba(236, 233, 227, 0.14);
  --mk-red: #E10600;

  /* BEFORE: what a tired template ships */
  --mk-b-sans: Arial, Helvetica, "Liberation Sans", sans-serif;
  --mk-b-serif: "Times New Roman", Times, "Liberation Serif", serif;
  --mk-b-script: "Lobster", "Brush Script MT", cursive;

  /* AFTER: Mirwa's own identity */
  --mk-sand: #EDE5D6;
  --mk-cream: #F6F1E7;
  --mk-date: #2A1C15;
  --mk-date-2: rgba(42, 28, 21, 0.72);
  --mk-date-3: rgba(42, 28, 21, 0.56);
  --mk-rule: rgba(42, 28, 21, 0.2);
  --mk-palm: #2F4B36;
  --mk-a-display: "Gloock", Georgia, serif;
  --mk-a-text: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mk-a-arabic: "Reem Kufi", "Geeza Pro", sans-serif;

  position: relative;
  width: 100%;
  color: var(--mk-paper);
}

.mk *,
.mk *::before,
.mk *::after { box-sizing: border-box; }

.mk p { margin: 0; }

/* ---------- Frames ---------- */

.mk .mk-browser {
  border-radius: 12px;
  background: #18181A;
  border: 1px solid var(--mk-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.mk .mk-browser__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(236, 233, 227, 0.07);
}

.mk .mk-dots {
  position: absolute;
  left: 16px;
  top: 50%;
  display: flex;
  gap: 7px;
  transform: translateY(-50%);
}

.mk .mk-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(236, 233, 227, 0.16);
}

.mk .mk-url {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(52%, 420px);
  max-width: calc(100% - 110px);
  height: 26px;
  padding: 0 14px;
  border-radius: 7px;
  background: #0F0F10;
  font: 500 12px/1 var(--mk-a-text);
  letter-spacing: 0.01em;
  color: var(--mk-paper-dim);
  white-space: nowrap;
  overflow: hidden;
}

.mk .mk-url > span { overflow: hidden; text-overflow: ellipsis; }

.mk .mk-url__warn {
  margin-right: 8px;
  padding-right: 8px;
  border-right: 1px solid rgba(236, 233, 227, 0.16);
  color: rgba(236, 233, 227, 0.42);
}

.mk .mk-url__lock {
  width: 10px;
  height: 12px;
  margin-right: 7px;
  vertical-align: -1px;
  color: rgba(236, 233, 227, 0.5);
}

.mk .mk-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1280 / 800;
  border-radius: 0 0 11px 11px;
  background: #fff;
}

.mk .mk-vp {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  transform-origin: 0 0;
}

.mk .mk-phone {
  display: none;
  width: min(100%, 300px);
  margin: 0 auto;
  padding: 8px;
  border-radius: 42px;
  background: #161617;
  border: 1px solid var(--mk-line);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.9);
}

.mk .mk-phone__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 4px 18px 0;
}

.mk .mk-phone .mk-url {
  min-width: 0;
  max-width: 100%;
  height: 24px;
  font-size: 11px;
  border-radius: 12px;
}

.mk .mk-phone .mk-url__warn { display: none; }

.mk .mk-phone .mk-screen {
  aspect-ratio: 390 / 760;
  border-radius: 6px 6px 34px 34px;
}

.mk .mk-phone .mk-vp { width: 390px; height: 760px; }

@media (max-width: 699px) {
  .mk .mk-browser { display: none; }
  .mk .mk-phone { display: block; }
}

/* Hold the mock back until the script has scaled it, so it never
   flashes at full size. Without scripting it simply stays on AFTER. */
@media (scripting: enabled) {
  .mk:not(.mk--js) .mk-vp { visibility: hidden; }
}

/* ---------- The studio's eye: red scan line ---------- */

.mk .mk-scan {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-100%);
}

.mk .mk-scan::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(120px, 16%);
  background: radial-gradient(circle, #FF2A1A 1.6px, transparent 2.1px) 0 0 / 7px 7px;
  -webkit-mask: linear-gradient(90deg, transparent, #000);
  mask: linear-gradient(90deg, transparent, #000);
}

.mk .mk-scan::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: var(--mk-red);
  box-shadow: none;
}

/* ---------- The mock site: shared ---------- */

.mk .mk-site {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: var(--mk-b-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mk .mk-site [data-mk-vt],
.mk .mk-promo,
.mk .mk-sect,
.mk .mk-cap { position: absolute; }

.mk .mk-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk .mk-photo__shade { position: absolute; inset: 0; }

/* ===== BEFORE (default) ===== */

.mk .mk-site::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #ddd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.mk .mk-promo {
  left: 0;
  top: 0;
  width: 100%;
  background: #F39200;
  color: #fff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk .mk-sep { color: rgba(0, 0, 0, 0.25); margin: 0 0.5em; }
.mk .mk-promo .mk-sep { color: rgba(255, 255, 255, 0.6); }

.mk .mk-logo { display: flex; align-items: center; white-space: nowrap; }
.mk .mk-logo__cup { flex: none; }
.mk .mk-logo__script { font-family: var(--mk-b-script); color: #7A3E12; text-shadow: 1px 1px 0 #e9c9a4; }
.mk .mk-logo__tag { font-family: var(--mk-b-serif); font-style: italic; color: #999; }

.mk .mk-nav { display: flex; align-items: center; white-space: nowrap; }
.mk .mk-nav__links { display: flex; align-items: center; }
.mk .mk-nav__l { color: #1A5FB4; }
.mk .mk-nav__l.is-on { background: #F39200; color: #fff; border-radius: 3px; }

.mk .mk-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: #1A5FB4;
  border-radius: 4px;
}

.mk .mk-nav__burger i { display: block; height: 3px; background: #fff; border-radius: 2px; }

.mk .mk-photo__b { object-position: 50% 50%; }
.mk .mk-photo__a { visibility: hidden; }
.mk .mk-photo__shade { background: rgba(0, 0, 0, 0.42); }

.mk .mk-title { font-weight: 700; text-align: center; color: #fff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); z-index: 2; }
.mk .mk-sub { text-align: center; z-index: 2; }

.mk .mk-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: 2px solid #fff;
  border-radius: 30px;
  background: linear-gradient(180deg, #38B8FF, #0062E6);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.mk .mk-sect { left: 0; width: 100%; text-align: center; font-family: var(--mk-b-serif); font-style: italic; color: #7A3E12; }

.mk .mk-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  text-align: center;
  overflow: hidden;
}

.mk .mk-item__icon { display: block; margin: 0 auto; }
.mk .mk-item__name { display: block; font-family: var(--mk-b-serif); font-weight: 700; color: #333; }
.mk .mk-item__desc { display: block; color: #999; }

.mk .mk-hours { background: #F2F2F2; border: 1px solid #ddd; font-family: var(--mk-b-serif); color: #666; text-align: center; }

/* BEFORE, desktop 1280 x 800 */

.mk .mk-d::before { top: 110px; }
.mk .mk-d .mk-promo { height: 30px; font-size: 12px; line-height: 30px; letter-spacing: 0.02em; }
.mk .mk-d .mk-logo { left: 40px; top: 44px; height: 52px; gap: 10px; }
.mk .mk-d .mk-logo__cup { width: 44px; height: 44px; }
.mk .mk-d .mk-logo__script { font-size: 36px; }
.mk .mk-d .mk-logo__tag { font-size: 14px; margin-top: 14px; }
.mk .mk-d .mk-nav { left: 486px; top: 58px; height: 24px; font-size: 14px; }
.mk .mk-d .mk-nav__l.is-on { padding: 4px 8px; }
.mk .mk-d .mk-photo { left: 0; top: 111px; width: 1280px; height: 360px; }
.mk .mk-d .mk-title { left: 90px; top: 172px; width: 1100px; font-size: 44px; line-height: 1.15; letter-spacing: 0.01em; }
.mk .mk-d .mk-sub { left: 210px; top: 246px; width: 860px; font-size: 17px; line-height: 1.5; color: #eee; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); }
.mk .mk-d .mk-cta { left: 530px; top: 372px; width: 220px; height: 54px; font-size: 17px; }
.mk .mk-d .mk-sect { top: 496px; font-size: 30px; }
.mk .mk-d .mk-item { top: 550px; width: 300px; height: 162px; padding: 14px 16px; }
.mk .mk-d [data-mk-vt="m1"] { left: 150px; }
.mk .mk-d [data-mk-vt="m2"] { left: 490px; }
.mk .mk-d [data-mk-vt="m3"] { left: 830px; }
.mk .mk-d .mk-item__icon { width: 46px; height: 46px; }
.mk .mk-d .mk-item__name { margin-top: 6px; font-size: 21px; }
.mk .mk-d .mk-item__desc { margin-top: 6px; font-size: 13px; line-height: 1.4; }
.mk .mk-d .mk-hours { left: 0; top: 736px; width: 1280px; height: 42px; font-size: 15px; line-height: 40px; border-width: 1px 0; }

/* BEFORE, phone 390 x 760 */

.mk .mk-m::before { top: 84px; }
.mk .mk-m .mk-promo { height: 24px; padding: 0 8px; font-size: 9.5px; line-height: 24px; }
.mk .mk-m .mk-logo { left: 12px; top: 34px; height: 40px; gap: 6px; }
.mk .mk-m .mk-logo__cup { width: 32px; height: 32px; }
.mk .mk-m .mk-logo__script { font-size: 25px; }
.mk .mk-m .mk-logo__tag { font-size: 10px; margin-top: 10px; }
.mk .mk-m .mk-nav { left: 330px; top: 36px; width: 46px; height: 36px; }
.mk .mk-m .mk-nav__links { display: none; }
.mk .mk-m .mk-nav__burger { display: flex; width: 46px; height: 36px; padding: 0 11px; }
.mk .mk-m .mk-photo { left: 0; top: 85px; width: 390px; height: 226px; }
.mk .mk-m .mk-title { left: 16px; top: 132px; width: 358px; font-size: 25px; line-height: 1.2; }
.mk .mk-m .mk-sub { left: 18px; top: 326px; width: 354px; font-size: 14px; line-height: 1.45; color: #888; }
.mk .mk-m .mk-cta { left: 20px; top: 444px; width: 350px; height: 48px; font-size: 16px; }
.mk .mk-m .mk-sect { top: 512px; font-size: 22px; }
.mk .mk-m .mk-item { top: 552px; width: 114px; height: 146px; padding: 8px 6px; }
.mk .mk-m [data-mk-vt="m1"] { left: 9px; }
.mk .mk-m [data-mk-vt="m2"] { left: 138px; }
.mk .mk-m [data-mk-vt="m3"] { left: 267px; }
.mk .mk-m .mk-item__icon { width: 34px; height: 34px; }
.mk .mk-m .mk-item__name { margin-top: 4px; font-size: 15px; }
.mk .mk-m .mk-item__desc { margin-top: 4px; font-size: 10px; line-height: 1.3; }
.mk .mk-m .mk-hours { left: 12px; top: 712px; width: 366px; height: 38px; padding: 4px 10px; font-size: 11px; line-height: 1.3; border-radius: 4px; }

/* ===== AFTER: shared identity ===== */

.mk .mk-site.is-a { background: var(--mk-sand); color: var(--mk-date); font-family: var(--mk-a-text); }
.mk .mk-site.is-a::before { display: none; }

.mk .is-a .mk-logo__word { font-family: var(--mk-a-display); color: var(--mk-date); letter-spacing: -0.01em; line-height: 1; }
.mk .is-a .mk-logo__ar { font-family: var(--mk-a-arabic); font-weight: 500; color: var(--mk-date-3); border-left: 1px solid var(--mk-rule); line-height: 1; }

.mk .is-a .mk-nav__l { color: var(--mk-date); font-weight: 500; letter-spacing: 0.005em; }

.mk .is-a .mk-photo { overflow: hidden; background: #d9cdb8; }
.mk .is-a .mk-photo__b { visibility: hidden; }
.mk .is-a .mk-photo__a { visibility: visible; object-position: 62% 40%; }
.mk .is-a .mk-photo__shade { display: none; }

.mk .is-a .mk-cap { font-size: 12px; letter-spacing: 0.02em; color: var(--mk-date-3); }

.mk .is-a .mk-title { font-family: var(--mk-a-display); font-weight: 400; text-align: left; color: var(--mk-date); text-shadow: none; letter-spacing: -0.022em; }
.mk .is-a .mk-sub { text-align: left; color: var(--mk-date-2); text-shadow: none; }

.mk .is-a .mk-cta {
  justify-content: space-between;
  border: 0;
  border-radius: 999px;
  background: var(--mk-palm);
  color: var(--mk-cream);
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: none;
}

.mk .is-a .mk-cta__arrow { width: 18px; height: 18px; }

.mk .is-a .mk-item {
  background: none;
  border: 0;
  border-top: 1px solid var(--mk-rule);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  overflow: visible;
}

.mk .is-a .mk-item__num { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--mk-date-3); }
.mk .is-a .mk-item__num i { font-style: normal; margin-left: 10px; }
.mk .is-a .mk-item__name { font-family: var(--mk-a-display); font-weight: 400; color: var(--mk-date); line-height: 1.1; }
.mk .is-a .mk-item__desc { color: var(--mk-date-2); }

.mk .is-a .mk-hours { display: flex; align-items: center; background: none; border: 0; font-family: var(--mk-a-text); font-weight: 500; color: var(--mk-date-2); }
.mk .is-a .mk-hours > .mk-a { display: inline-flex; align-items: center; }
.mk .is-a .mk-dot { display: block; flex: none; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--mk-palm); box-shadow: 0 0 0 3px rgba(47, 75, 54, 0.16); }

/* AFTER, desktop */

.mk .mk-d.is-a .mk-logo { left: 64px; top: 36px; height: 44px; gap: 14px; }
.mk .mk-d.is-a .mk-logo__word { font-size: 34px; }
.mk .mk-d.is-a .mk-logo__ar { font-size: 14px; padding-left: 14px; }
.mk .mk-d.is-a .mk-nav { left: 680px; top: 46px; height: 24px; font-size: 14px; }
.mk .mk-d.is-a .mk-nav__links { gap: 34px; }
.mk .mk-d.is-a .mk-hours { left: 1000px; top: 46px; width: 216px; height: 24px; justify-content: flex-end; font-size: 13px; line-height: 24px; }
.mk .mk-d.is-a .mk-photo { left: 680px; top: 104px; width: 536px; height: 500px; border-radius: 268px 268px 6px 6px; }
.mk .mk-d.is-a .mk-cap { left: 680px; top: 616px; }
.mk .mk-d.is-a .mk-title { left: 64px; top: 136px; width: 580px; font-size: 82px; line-height: 0.98; }
.mk .mk-d.is-a .mk-sub { left: 64px; top: 414px; width: 420px; font-size: 17px; line-height: 1.55; }
.mk .mk-d.is-a .mk-cta { left: 64px; top: 532px; width: 214px; height: 54px; padding: 0 22px 0 26px; font-size: 15px; }
.mk .mk-d.is-a .mk-item { top: 664px; width: 368px; height: 104px; padding: 16px 0 0; }
.mk .mk-d.is-a [data-mk-vt="m1"] { left: 64px; }
.mk .mk-d.is-a [data-mk-vt="m2"] { left: 456px; }
.mk .mk-d.is-a [data-mk-vt="m3"] { left: 848px; }
.mk .mk-d.is-a .mk-item__name { margin-top: 10px; font-size: 25px; }
.mk .mk-d.is-a .mk-item__desc { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }

/* AFTER, phone */

.mk .mk-m.is-a .mk-logo { left: 22px; top: 20px; height: 36px; gap: 10px; }
.mk .mk-m.is-a .mk-logo__word { font-size: 27px; }
.mk .mk-m.is-a .mk-logo__ar { font-size: 11px; padding-left: 10px; }
.mk .mk-m.is-a .mk-nav { left: 290px; top: 26px; width: 78px; height: 24px; justify-content: flex-end; font-size: 13px; }
.mk .mk-m.is-a .mk-nav__links.mk-a { display: flex; }
.mk .mk-m.is-a .mk-nav__l:not(:first-child) { display: none; }
.mk .mk-m.is-a .mk-nav::after { content: ""; width: 16px; height: 7px; margin-left: 10px; border-top: 1.5px solid var(--mk-date); border-bottom: 1.5px solid var(--mk-date); }
.mk .mk-m.is-a .mk-photo { left: 16px; top: 70px; width: 358px; height: 272px; border-radius: 179px 179px 6px 6px; }
.mk .mk-m.is-a .mk-hours { left: 28px; top: 302px; width: 184px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--mk-cream); font-size: 11.5px; line-height: 28px; z-index: 3; }
.mk .mk-m.is-a .mk-cap { display: none; }
.mk .mk-m.is-a .mk-title { left: 22px; top: 364px; width: 346px; font-size: 46px; line-height: 1; }
.mk .mk-m.is-a .mk-sub { left: 22px; top: 474px; width: 336px; font-size: 14.5px; line-height: 1.5; }
.mk .mk-m.is-a .mk-cta { left: 22px; top: 558px; width: 186px; height: 46px; padding: 0 18px 0 22px; font-size: 14px; }
.mk .mk-m.is-a .mk-item { left: 22px; width: 346px; height: 40px; padding: 0; display: flex; align-items: center; gap: 14px; }
.mk .mk-m.is-a [data-mk-vt="m1"] { top: 632px; }
.mk .mk-m.is-a [data-mk-vt="m2"] { top: 672px; }
.mk .mk-m.is-a [data-mk-vt="m3"] { top: 712px; }
.mk .mk-m.is-a .mk-item__num { width: 22px; font-size: 10px; }
.mk .mk-m.is-a .mk-item__num i { display: none; }
.mk .mk-m.is-a .mk-item__name { font-size: 18px; }
.mk .mk-m.is-a .mk-item__desc { display: none; }

/* State toggles: last, so they win over the layout rules above */
.mk .is-a .mk-b,
.mk .is-b .mk-a { display: none; }

/* ---------- Fallback crossfade layer (no View Transitions) ---------- */

.mk .mk-ghost { pointer-events: none; z-index: 4; }

/* ---------- Controls ---------- */

.mk .mk-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 18px;
  font-size: 14px;
  line-height: 1;
}

.mk .mk-seg {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 2px;
  background: rgba(236, 233, 227, 0.05);
  border: 1px solid var(--mk-line);
}

.mk .mk-seg__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 2px;
  background: var(--mk-paper);
  transition: transform 240ms var(--mk-ease);
}

.mk[data-mk-state="a"] .mk-seg__thumb { transform: translateX(100%); }

.mk .mk-seg__btn,
.mk .mk-replay {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.mk .mk-seg__btn {
  position: relative;
  z-index: 1;
  min-width: 86px;
  height: 34px;
  padding: 0 18px;
  border-radius: 2px;
  color: var(--mk-paper-dim);
  transition: color 200ms ease, transform 160ms ease-out;
}

.mk .mk-seg__btn[aria-pressed="true"] { color: #0B0B0C; }

.mk .mk-replay {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 4px;
  border-radius: 4px;
  color: var(--mk-paper);
  text-decoration: underline;
  text-decoration-color: rgba(236, 233, 227, 0.32);
  text-underline-offset: 5px;
  transition: text-decoration-color 200ms ease, transform 160ms ease-out;
}

.mk .mk-seg__btn:active,
.mk .mk-replay:active { transform: scale(0.97); }

.mk .mk-seg__btn:focus-visible,
.mk .mk-replay:focus-visible {
  outline: 2px solid var(--mk-paper);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .mk .mk-seg__btn[aria-pressed="false"]:hover { color: var(--mk-paper); }
  .mk .mk-replay:hover { text-decoration-color: var(--mk-paper); }
}

.mk .mk-note {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(236, 233, 227, 0.5);
}

.mk .mk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 699px) {
  .mk .mk-controls { justify-content: center; }
  .mk .mk-note { flex-basis: 100%; margin-left: 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mk .mk-seg__thumb,
  .mk .mk-seg__btn,
  .mk .mk-replay { transition: none; }
  .mk .mk-scan { display: none; }
}

/* ---------- View Transitions (names are all mk-, set by the script) ---------- */

html[data-mk-vt] { view-transition-name: none; }
html[data-mk-vt] .header { view-transition-name: site-header; }
::view-transition-group(site-header) { z-index: 100; animation: none; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
html[data-mk-vt]::view-transition { pointer-events: none; }

::view-transition-group(mk-site),
::view-transition-group(mk-url),
::view-transition-group(mk-logo),
::view-transition-group(mk-nav),
::view-transition-group(mk-hours),
::view-transition-group(mk-photo),
::view-transition-group(mk-title),
::view-transition-group(mk-sub),
::view-transition-group(mk-cta),
::view-transition-group(mk-m1),
::view-transition-group(mk-m2),
::view-transition-group(mk-m3) {
  animation-duration: 840ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-fill-mode: both;
}

::view-transition-old(mk-site),
::view-transition-new(mk-site),
::view-transition-old(mk-url),
::view-transition-new(mk-url) {
  animation-duration: 640ms;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

::view-transition-old(mk-logo),
::view-transition-old(mk-nav),
::view-transition-old(mk-hours),
::view-transition-old(mk-title),
::view-transition-old(mk-sub),
::view-transition-old(mk-cta),
::view-transition-old(mk-m1),
::view-transition-old(mk-m2),
::view-transition-old(mk-m3) {
  animation: mk-vt-out 840ms linear both;
}

::view-transition-new(mk-logo),
::view-transition-new(mk-nav),
::view-transition-new(mk-hours),
::view-transition-new(mk-title),
::view-transition-new(mk-sub),
::view-transition-new(mk-cta),
::view-transition-new(mk-m1),
::view-transition-new(mk-m2),
::view-transition-new(mk-m3) {
  animation: mk-vt-in 840ms linear both;
}

/* Keep every snapshot inside its own morphing box, so nothing spills
   outside the frame while the box changes shape */
::view-transition-old(mk-logo), ::view-transition-new(mk-logo),
::view-transition-old(mk-nav), ::view-transition-new(mk-nav),
::view-transition-old(mk-hours), ::view-transition-new(mk-hours),
::view-transition-old(mk-title), ::view-transition-new(mk-title),
::view-transition-old(mk-sub), ::view-transition-new(mk-sub),
::view-transition-old(mk-cta), ::view-transition-new(mk-cta),
::view-transition-old(mk-m1), ::view-transition-new(mk-m1),
::view-transition-old(mk-m2), ::view-transition-new(mk-m2),
::view-transition-old(mk-m3), ::view-transition-new(mk-m3) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 0;
}

/* Photo: the new frame wipes in behind the scan line, the old holds still */
::view-transition-image-pair(mk-photo),
::view-transition-old(mk-photo),
::view-transition-new(mk-photo) { overflow: clip; }

::view-transition-old(mk-photo),
::view-transition-new(mk-photo) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}

::view-transition-old(mk-photo) { animation: mk-vt-hold 900ms linear both; }
::view-transition-new(mk-photo) { animation: mk-vt-wipe 900ms cubic-bezier(0.23, 1, 0.32, 1) both; }
::view-transition-group(mk-photo) { animation-duration: 900ms; }

/* Stagger: 40ms between groups */
::view-transition-group(mk-nav), ::view-transition-old(mk-nav), ::view-transition-new(mk-nav) { animation-delay: 40ms; }
::view-transition-group(mk-hours), ::view-transition-old(mk-hours), ::view-transition-new(mk-hours),
::view-transition-group(mk-photo), ::view-transition-old(mk-photo), ::view-transition-new(mk-photo) { animation-delay: 80ms; }
::view-transition-group(mk-title), ::view-transition-old(mk-title), ::view-transition-new(mk-title) { animation-delay: 120ms; }
::view-transition-group(mk-sub), ::view-transition-old(mk-sub), ::view-transition-new(mk-sub) { animation-delay: 160ms; }
::view-transition-group(mk-cta), ::view-transition-old(mk-cta), ::view-transition-new(mk-cta) { animation-delay: 200ms; }
::view-transition-group(mk-m1), ::view-transition-old(mk-m1), ::view-transition-new(mk-m1) { animation-delay: 240ms; }
::view-transition-group(mk-m2), ::view-transition-old(mk-m2), ::view-transition-new(mk-m2) { animation-delay: 280ms; }
::view-transition-group(mk-m3), ::view-transition-old(mk-m3), ::view-transition-new(mk-m3) { animation-delay: 320ms; }

@keyframes mk-vt-out { 0% { opacity: 1; } 48% { opacity: 0; } 100% { opacity: 0; } }
@keyframes mk-vt-in { 0% { opacity: 0; } 32% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mk-vt-hold { from, to { opacity: 1; } }
@keyframes mk-vt-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }