/* ============================================================
   COMING SOON overlay
   Turn it on/off in  js/config.js - no CSS edits needed.

   Markup shape:
     <div class="soon-zone">
       <div class="soon-zone__content"> ...real content... </div>
       <div class="soon" hidden> ...banner... </div>
     </div>

   JS adds .is-soon to .soon-zone and unhides .soon.
   ============================================================ */

.soon-zone{ position:relative; }

.soon-zone__content{
  transition:filter .45s ease, opacity .45s ease;
}
.soon-zone.is-soon .soon-zone__content{
  filter:blur(5px) saturate(.45);
  opacity:.4;
  pointer-events:none;
  user-select:none;
  max-height:clamp(360px,46vh,520px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
}

.soon[hidden]{ display:none; }
.soon{
  position:absolute; inset:0; z-index:20;
  display:grid; place-items:center;
  padding:clamp(16px,4vw,40px);
  pointer-events:none;
}

/* banner */
.soon__banner{
  position:relative;
  pointer-events:auto;
  max-width:min(600px,100%);
  rotate:-2.5deg;
  background:
    linear-gradient(102deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 28%, rgba(0,0,0,.06) 64%, rgba(255,255,255,.22) 100%),
    linear-gradient(178deg, #F2EC6E, var(--vinyl) 60%, #CFC943 100%);
  border:4px solid var(--ink);
  box-shadow:10px 10px 0 var(--red), 0 26px 60px -22px rgba(0,0,0,.75);
  overflow:hidden;
  text-align:center;
}

.soon__banner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(178deg,
    rgba(255,255,255,.09) 0 2px, rgba(0,0,0,.035) 2px 5px, transparent 5px 40px);
}

.soon__banner::before{
  content:""; position:absolute; top:0; bottom:0; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation:soonShine 4.5s ease-in-out infinite;
  pointer-events:none; z-index:3;
}
@keyframes soonShine{
  0%   { left:-50%; }
  60%,100%{ left:115%; }
}

.soon__bar{
  height:15px;
  background:repeating-linear-gradient(45deg,
    var(--red) 0 15px, var(--yellow-lit) 15px 30px);
  border-bottom:3px solid var(--ink);
}
.soon__bar--btm{ border-bottom:0; border-top:3px solid var(--ink); }

.soon__body{ position:relative; z-index:2; padding:clamp(22px,4.5vw,38px) clamp(20px,4vw,40px); }

.soon__kicker{
  font-family:var(--f-cond); font-weight:700;
  font-size:clamp(.78rem,2vw,.95rem);
  text-transform:uppercase; letter-spacing:.24em;
  color:var(--ink-soft); margin:0 0 .5em;
}
.soon__title{
  font-family:var(--f-display);
  font-size:clamp(2.1rem,7.5vw,3.6rem);
  line-height:.88; text-transform:uppercase;
  color:var(--red); text-shadow:0 3px 0 rgba(0,0,0,.14);
  margin:0;
}
.soon__sub{
  display:inline-block; margin:.7em 0 0;
  font-family:var(--f-heavy); font-size:clamp(.82rem,2.2vw,1.02rem);
  text-transform:uppercase; letter-spacing:.14em;
  background:var(--ink); color:var(--yellow-lit);
  padding:.32em .9em;
}
.soon__note{
  margin:1.1em 0 0;
  font-family:var(--f-cond); font-weight:600;
  font-size:clamp(.92rem,2.2vw,1.06rem);
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft);
}

.soon__banner .grommet{ z-index:4; }

.soon-pill{
  display:inline-block; margin-left:.45em; vertical-align:.12em;
  font-family:var(--f-cond); font-weight:700; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.12em;
  background:var(--yellow-lit); color:var(--ink);
  padding:.12em .45em; border:2px solid var(--ink);
}

@media (prefers-reduced-motion:reduce){
  .soon__banner::before{ animation:none; opacity:0; }
}