/* =====================================================================
   MWI — "Coming soon" announcement panel
   Slides in from off-screen and lands top-left, on the empty part of the
   header. Built 2026-08-29.

   Undo: novamira/disable-file wp-content/novamira-sandbox/mwi-comingsoon.php

   DESIGN CONTRACT (from the site's saved direction, slug
   modern-wedding-istanbul):
     ground   cloud   #FBF8F3   (the card surface, as the client asked)
     ink      espresso #2B2118
     accent   antique gold #B9924E / soft gold #DCC48F  — the ONE accent
     shadow   espresso-tinted, never pure black
     corners  the hard-edge cut, so it speaks the same language as the
              buttons and cards it sits above
     type     Frank Ruhl Libre, the one site face

   NO text-transform ANYWHERE in this component. On the Turkish tree the
   document is lang="tr", where CSS uppercasing maps i -> dotted İ — the
   trap that already bit the footer eyebrow and the TR page titles. Storing
   the copy in its final casing is the only reliable fix.
   ===================================================================== */

.mwi-cs{
  /* --cs-top / --cs-left are re-measured from the live header by
     mwi-comingsoon.js; these are only the pre-JS fallbacks.
     MOVE THE PANEL BY EDITING THESE TWO. */
  --cs-top: 118px;
  --cs-left: 24px;
  --cs-w: 320px;
  --cs-c: 14px;                       /* chamfer, matches .mwi-tc__panel */
  --cs-cw: 2.6px;
  --cs-gold: #B9924E;
  --cs-gold-soft: #DCC48F;
  --cs-line: rgba(185,146,78,.55);
  --cs-ink: #2B2118;
  --cs-surface: #FBF8F3;

  position: fixed;
  top: var(--cs-top);
  left: var(--cs-left);
  width: var(--cs-w);
  max-width: calc(100vw - 32px);
  z-index: 9350;                      /* under the Xpro drawer (999 is its
                                         own stacking context) and clear of
                                         the tradition card's gem at 9402 */
  box-sizing: border-box;
  padding: 18px 44px 18px 20px;

  background-color: var(--cs-surface);
  border: 1px solid var(--cs-line);
  box-shadow: 0 18px 44px -22px rgba(36,26,18,.45);
  color: var(--cs-ink);
  font-family: "Frank Ruhl Libre", Georgia, serif;

  /* the cut: top-left + bottom-right, same two corners as everything else */
  clip-path: polygon(
    var(--cs-c) 0,
    100% 0,
    100% calc(100% - var(--cs-c)),
    calc(100% - var(--cs-c)) 100%,
    0 100%,
    0 var(--cs-c)
  );
  /* the gold hairline that closes each cut, drawn as two corner-sized
     background layers (the clip eats the outer half, so ~1.3px survives) */
  background-image:
    linear-gradient(135deg,
      transparent calc(50% - var(--cs-cw)/2),
      var(--cs-line) calc(50% - var(--cs-cw)/2),
      var(--cs-line) calc(50% + var(--cs-cw)/2),
      transparent calc(50% + var(--cs-cw)/2)),
    linear-gradient(135deg,
      transparent calc(50% - var(--cs-cw)/2),
      var(--cs-line) calc(50% - var(--cs-cw)/2),
      var(--cs-line) calc(50% + var(--cs-cw)/2),
      transparent calc(50% + var(--cs-cw)/2));
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right;
  background-size: var(--cs-c) var(--cs-c), var(--cs-c) var(--cs-c);
  background-origin: border-box;
  background-clip: border-box;

  overflow: hidden;
  isolation: isolate;                 /* stacking context only — NOT a
                                         containing block, so it can never
                                         trap a fixed descendant */

  /* resting state: parked off the left edge of the screen */
  opacity: 0;
  transform: translate3d(-115%, 0, 0);
  transition:
    transform 820ms cubic-bezier(.22, 1, .32, 1),
    opacity   420ms linear;
  will-change: transform, opacity;
}

.mwi-cs[hidden]{ display: none; }

.mwi-cs.is-in{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* leaving: back out the way it came, a little quicker than it arrived */
.mwi-cs.is-out{
  opacity: 0;
  transform: translate3d(-115%, 0, 0);
  transition:
    transform 520ms cubic-bezier(.55, 0, .68, .30),
    opacity   300ms linear;
}

/* ---- the signature gold rule, drawn rather than just placed ---------- */
.mwi-cs__rule{
  display: block;
  height: 1px;
  width: 46px;
  margin: 0 0 12px;
  background: linear-gradient(90deg, var(--cs-gold), var(--cs-gold-soft));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 700ms cubic-bezier(.22, 1, .32, 1) 260ms;
}
.mwi-cs.is-in .mwi-cs__rule{ transform: scaleX(1); }

/* ---- the message ---------------------------------------------------- */
.mwi-cs__title{
  margin: 0;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .002em;
  color: var(--cs-ink);
  /* deliberately NO text-transform — see the header note */
}

/* ---- close ---------------------------------------------------------- */
.mwi-cs__x{
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;                        /* full tap target, no visible box */
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(43,33,24,.55);
  cursor: pointer;
  line-height: 1;
  font-size: 17px;
  font-family: inherit;
  transition: color 260ms ease;
}
.mwi-cs__x:hover,
.mwi-cs__x:focus-visible{ color: var(--cs-gold); }
.mwi-cs__x:focus-visible{ outline: 2px solid #4A6FA5; outline-offset: -4px; }

/* ---- one slow specular pass, 1.5s after it lands -------------------- */
.mwi-cs__sheen{
  position: absolute;
  top: -40%;
  left: -60%;
  width: 34%;
  height: 180%;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent,
    rgba(255,255,255,.62) 48%,
    rgba(220,196,143,.34) 62%,
    transparent);
  transform: rotate(12deg) translateX(0);
  opacity: 0;
}
.mwi-cs.is-in .mwi-cs__sheen{
  animation: mwiCsSheen 1900ms cubic-bezier(.35,.1,.25,1) 1500ms 1 both;
}
@keyframes mwiCsSheen{
  0%   { opacity: 0;   transform: rotate(12deg) translateX(0); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0;   transform: rotate(12deg) translateX(520px); }
}

/* ---- mobile: a slim bar under the header, never over the reading
        column and never over the burger. Elementor's real breakpoint
        here is 690, not 767. ------------------------------------------ */
/* ---- mobile: moved to the BOTTOM, 2026-08-29 (client) ----------------
   It used to land under the header at the top. On a phone that is where
   the eye starts reading and where the burger lives, so it now sits at the
   foot of the screen instead.

   `bottom: 92px` is measured, not chosen: the floating WhatsApp button is
   53x53 sitting 26px off the bottom (its top edge is at y 733 of an 812
   viewport), so the panel clears it with room to spare and never covers
   that channel. `top: auto` unsets the base rule's var(--cs-top); the JS
   still writes that variable, and it is simply not read down here.
   ------------------------------------------------------------------- */
@media (max-width: 689px){
  .mwi-cs{
    --cs-left: 14px;
    --cs-w: calc(100vw - 28px);
    --cs-c: 12px;
    top: auto;
    bottom: 92px;
    padding: 14px 42px 14px 16px;
  }
  .mwi-cs__title{ font-size: 1rem; }
  .mwi-cs__rule{ width: 38px; margin-bottom: 9px; }
}

/* while the Xpro off-canvas menu is open, get out of its way entirely */
html.mwi-cs-menu-open .mwi-cs{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(-115%, 0, 0) !important;
}

/* ---- reduced motion: it still arrives, it just does not travel ------- */
@media (prefers-reduced-motion: reduce){
  .mwi-cs{
    transform: none;
    transition: opacity 300ms linear;
  }
  .mwi-cs.is-in{ transform: none; }
  .mwi-cs.is-out{ transform: none; transition: opacity 200ms linear; }
  .mwi-cs__rule{ transform: scaleX(1); transition: none; }
  .mwi-cs.is-in .mwi-cs__sheen{ animation: none; }
}

/* never in the Elementor editor */
body.elementor-editor-active .mwi-cs{ display: none !important; }