/*
  coming-soon.css
  Styles the full-viewport overlay injected by coming-soon.js, and
  hides everything else on the page underneath it, so whatever
  exists in the builder's page area (default placeholder content,
  header, footer) never shows through. This makes install-and-done
  work: nothing in the builder needs to be touched.

  Both logos are the exact approved assets, unmodified. The
  Digital Expand mark and the Moukangwe & Co lockup occupy the
  same centered position in .mc-cs-swap; two curtain panels sweep
  in to fully cover that spot, the visible logo is swapped while
  hidden (a hard cut, not a crossfade, since the curtain is the
  transition), then the panels sweep back out.
*/

html, body {
    height: 100%;
    overflow: hidden;
    background: #0F1520;
}

body > *:not(#mc-coming-soon) {
    display: none !important;
}

#mc-coming-soon {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #0F1520;
    color: #FAF6EF;
    font-family: 'Jost', 'Segoe UI', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

#mc-coming-soon::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(198, 170, 124, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(198, 170, 124, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

.mc-cs-stage {
    position: relative;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* The swap zone: both logos are centered inside it via flex, one
   on top of the other, and the curtain panels cover exactly this
   area, sized to comfortably contain the larger Moukangwe & Co
   lockup at its responsive display size. */
.mc-cs-swap {
    position: relative;
    width: 100%;
    height: clamp(210px, 34vw, 340px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mc-cs-de-mark,
.mc-cs-mc-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mc-cs-de-mark {
    width: 72px;
    height: 72px;
    opacity: 0;
    animation: mc-cs-de-in 700ms ease-out 200ms forwards,
               mc-cs-de-hide 1ms linear 1850ms forwards;
}

@keyframes mc-cs-de-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes mc-cs-de-hide {
    to { opacity: 0; }
}

.mc-cs-mc-mark {
    width: 88vw;
    max-width: 900px;
    opacity: 0;
    animation: mc-cs-mc-reveal 1ms linear 1850ms forwards;
}

@keyframes mc-cs-mc-reveal {
    to { opacity: 1; }
}

/* Curtain panels: fixed to the full viewport, not confined to the
   logo area, so the sweep genuinely fills the whole page as
   instructed. Same navy as the page with a subtle gradient and
   drop shadow for real depth, gold seam where they meet. Timing:
   close 1200-1850ms (matches the logo swap, which happens the
   instant coverage completes), hold covered until 2250ms, open
   2250-2900ms. Weighted cubic-bezier easing throughout rather than
   plain ease-in-out, for a heavier, more deliberate feel. */
.mc-cs-curtain {
    position: fixed;
    inset: 0;
    width: 50%;
    background: linear-gradient(90deg, #0B0F17 0%, #131A28 85%, #0F1520 100%);
    z-index: 1000000;
}

.mc-cs-curtain-left {
    left: 0;
    right: auto;
    border-right: 1px solid rgba(198, 170, 124, 0.7);
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.35);
    transform: translateX(-100%);
    animation: mc-cs-curtain-close-left 650ms cubic-bezier(0.76, 0, 0.24, 1) 1200ms forwards,
               mc-cs-curtain-open-left 650ms cubic-bezier(0.76, 0, 0.24, 1) 2250ms forwards;
}

.mc-cs-curtain-right {
    right: 0;
    left: auto;
    background: linear-gradient(270deg, #0B0F17 0%, #131A28 85%, #0F1520 100%);
    border-left: 1px solid rgba(198, 170, 124, 0.7);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    animation: mc-cs-curtain-close-right 650ms cubic-bezier(0.76, 0, 0.24, 1) 1200ms forwards,
               mc-cs-curtain-open-right 650ms cubic-bezier(0.76, 0, 0.24, 1) 2250ms forwards;
}

@keyframes mc-cs-curtain-close-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes mc-cs-curtain-open-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
@keyframes mc-cs-curtain-close-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes mc-cs-curtain-open-right {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

.mc-cs-statement {
    margin-top: 44px;
    max-width: 38ch;
    font-size: 1.15rem;
    line-height: 1.75;
    letter-spacing: 0.006em;
    color: #FAF6EF;
    opacity: 0;
    animation: mc-cs-statement-in 1000ms ease-out 3200ms forwards;
}

.mc-cs-statement strong {
    color: #FAF6EF;
    font-weight: 500;
}

@keyframes mc-cs-statement-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .mc-cs-de-mark, .mc-cs-mc-mark, .mc-cs-curtain, .mc-cs-statement {
        animation: none !important;
    }
    .mc-cs-de-mark, .mc-cs-curtain { display: none; }
    .mc-cs-mc-mark { opacity: 1 !important; }
    .mc-cs-statement { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 480px) {
    .mc-cs-statement { font-size: 1.02rem; max-width: 30ch; margin-top: 32px; }
}