/* market.com.sg — shared header chrome (animated logo + navbar safety).
   Loaded by front-page.php, page-terms.php, page-privacy.php.
   Single source of truth: edit here, not per-template. */

/* ─── ANIMATED HEADER LOGO (Ember) ─── */
/* =========================================================================
   market.com.sg — animated header logo ("Ember", 1.8s entry + endless sway)
   Drop this into the theme stylesheet as-is. All selectors are prefixed
   .msg- so nothing can collide with theme or plugin CSS.
   ========================================================================= */

.msg-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
  line-height: 1;
  /* --msg-h drives the whole lockup: change this one value to resize. */
  --msg-h: 46px;
  font-family: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.msg-logo:hover,
.msg-logo:focus { text-decoration: none; }

/* Logo lockup. Compound selector (.nav-logo.msg-logo = specificity 0,2,0) so this
   file wins over any per-template .nav-logo rule regardless of <link> position.
   chrome.css is self-contained: it does not rely on template CSS to lay the logo out. */
.nav-logo.msg-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
  cursor: pointer;
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
}
.nav-logo.msg-logo:focus-visible { outline: 2px solid #f5811f; outline-offset: 3px; border-radius: 4px; }

/* ---- lanterns ---- */
.msg-logo__mark {
  height: var(--msg-h);
  width: auto;
  overflow: visible;
  flex: 0 0 auto;
}

/* ---- wordmark ---- */
.msg-logo__word {
  display: flex;
  font-size: calc(var(--msg-h) * 0.62);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.msg-logo__word span { display: inline-block; }
.msg-logo__word .msg-a { color: #ffffff; }              /* "market"  */
.msg-logo__word .msg-b { color: #9aa3c0; font-weight: 400; } /* ".com" */
.msg-logo__word .msg-c { color: #f5811f; }              /* ".sg"    */

/* On a light background add class .msg-logo--light to the <a> */
.msg-logo--light .msg-logo__word .msg-a { color: #1b2447; }
.msg-logo--light .msg-logo__word .msg-b { color: #98a0bb; }
.msg-logo--light .msg-logo__mark .msg-wire { stroke: #1b2447; }

/* =========================== entry: 1.8s total ========================== */
@keyframes msg-wire  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes msg-ignite{ 0% { opacity: 0; transform: scale(.82); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes msg-glow  { 0% { opacity: 0; } 30% { opacity: .95; } 60% { opacity: .45; } 100% { opacity: .62; } }
@keyframes msg-letter{ from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== idle: runs forever after entry ==================== */
@keyframes msg-breathe { 0%, 100% { opacity: .40; } 50% { opacity: .78; } }
@keyframes msg-sway-1  { 0%, 100% { transform: rotate(-3.4deg); } 50% { transform: rotate(2.6deg); } }
@keyframes msg-sway-2  { 0%, 100% { transform: rotate(2.9deg); }  50% { transform: rotate(-3.1deg); } }
@keyframes msg-sway-3  { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(3.6deg); } }
@keyframes msg-tassel  { 0%, 100% { transform: rotate(-5deg); }   50% { transform: rotate(5deg); } }

/* wire + hooks */
.msg-logo__mark .msg-wire  { animation: msg-wire .52s cubic-bezier(.22,.9,.24,1) both; }
.msg-logo__mark .msg-hooks { animation: msg-wire .52s cubic-bezier(.22,.9,.24,1) .07s both; }

/* Each lantern = static .msg-pos (position) > .msg-swing (sway) > .msg-body (ignite).
   Keeping translate and rotate on separate groups is required: a CSS transform
   on the same element would override the SVG transform attribute. */
.msg-swing, .msg-body, .msg-tassel { transform-box: fill-box; transform-origin: 50% 0%; }

.msg-l1 .msg-swing  { animation: msg-sway-1 5.4s cubic-bezier(.44,0,.56,1) .56s infinite; }
.msg-l2 .msg-swing  { animation: msg-sway-2 6.1s cubic-bezier(.44,0,.56,1) .71s infinite; }
.msg-l3 .msg-swing  { animation: msg-sway-3 5.7s cubic-bezier(.44,0,.56,1) .86s infinite; }

.msg-l1 .msg-tassel { animation: msg-tassel 5.4s cubic-bezier(.44,0,.56,1) .71s infinite; }
.msg-l2 .msg-tassel { animation: msg-tassel 6.1s cubic-bezier(.44,0,.56,1) .86s infinite; }
.msg-l3 .msg-tassel { animation: msg-tassel 5.7s cubic-bezier(.44,0,.56,1) 1.01s infinite; }

.msg-l1 .msg-body   { animation: msg-ignite .79s cubic-bezier(.2,.85,.25,1) .26s both; }
.msg-l2 .msg-body   { animation: msg-ignite .79s cubic-bezier(.2,.85,.25,1) .41s both; }
.msg-l3 .msg-body   { animation: msg-ignite .79s cubic-bezier(.2,.85,.25,1) .56s both; }

.msg-l1 .msg-halo   { animation: msg-glow 1.05s ease-out .37s both, msg-breathe 4.6s ease-in-out 1.5s infinite; }
.msg-l2 .msg-halo   { animation: msg-glow 1.05s ease-out .52s both, msg-breathe 5.2s ease-in-out 1.72s infinite; }
.msg-l3 .msg-halo   { animation: msg-glow 1.05s ease-out .67s both, msg-breathe 4.9s ease-in-out 1.95s infinite; }

/* wordmark: letters rise left-to-right, 45ms apart */
.msg-logo__word span { animation: msg-letter .47s cubic-bezier(.2,.85,.25,1) both; }
.msg-logo__word span:nth-child(1)  { animation-delay: .79s; }
.msg-logo__word span:nth-child(2)  { animation-delay: .83s; }
.msg-logo__word span:nth-child(3)  { animation-delay: .88s; }
.msg-logo__word span:nth-child(4)  { animation-delay: .92s; }
.msg-logo__word span:nth-child(5)  { animation-delay: .97s; }
.msg-logo__word span:nth-child(6)  { animation-delay: 1.01s; }
.msg-logo__word span:nth-child(7)  { animation-delay: 1.07s; }
.msg-logo__word span:nth-child(8)  { animation-delay: 1.12s; }
.msg-logo__word span:nth-child(9)  { animation-delay: 1.16s; }
.msg-logo__word span:nth-child(10) { animation-delay: 1.21s; }
.msg-logo__word span:nth-child(11) { animation-delay: 1.27s; }
.msg-logo__word span:nth-child(12) { animation-delay: 1.31s; }
.msg-logo__word span:nth-child(13) { animation-delay: 1.36s; }

/* -------- smaller lockup on phones -------- */
@media (max-width: 782px) {
  /* compound selector to match the base .nav-logo.msg-logo rule's specificity,
     otherwise the base gap would win here and break the responsive step-down */
  .msg-logo { --msg-h: 34px; }
  .nav-logo.msg-logo { gap: 0.45em; }
}

/* -------- accessibility: no motion, static logo -------- */
@media (prefers-reduced-motion: reduce) {
  .msg-logo *,
  .msg-logo *::before,
  .msg-logo *::after { animation: none !important; }
  .msg-logo .msg-halo { opacity: .55; }
}

/* ─── ANIMATED LOGO — layout safety + responsive overrides ─── */
.navbar { min-width: 0; overflow: visible; }
.msg-logo__mark { overflow: visible; }

.nav-search-wrap { min-width: 0; }
.msg-logo__word { min-width: 0; }
@media (max-width: 768px) {
  body.results-mode .msg-logo__word { display: none; }
  body.results-mode .nav-logo.msg-logo { --msg-h: 30px; gap: 0; }
}
@media (max-width: 480px) {
  .nav-logo.msg-logo { --msg-h: 28px; gap: 0.3em; }
  .msg-logo .msg-logo__word { font-size: calc(var(--msg-h) * 0.56); }
}
@media (max-width: 380px) {
  .nav-logo.msg-logo { --msg-h: 26px; }
}
/* ─── SPA re-entry: .msg-replay restarts the entry animation ─── */
.msg-logo.msg-replay .msg-wire,
.msg-logo.msg-replay .msg-hooks,
.msg-logo.msg-replay .msg-body,
.msg-logo.msg-replay .msg-halo,
.msg-logo.msg-replay .msg-logo__word span { animation: none !important; }