/* ==========================================================================
   ANNOUNCEMENT POPUP
   Poster on the left, story on the right. Stacks on small screens.
   ========================================================================== */

.announce{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:clamp(1rem, 4vw, 2.5rem);
  overflow-y:auto;
}
.announce[hidden]{ display:none; }

/* stop the page scrolling behind the dialog */
body.has-announce{ overflow:hidden; }

.announce__backdrop{
  position:fixed;
  inset:0;
  background:rgba(4,2,9,.82);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.announce.is-open .announce__backdrop{ opacity:1; }

/* ── the dialog ─────────────────────────────────────────────────────────── */
.announce__box{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  width:min(100%, 940px);
  margin:auto;
  border-radius:20px;
  border:1px solid rgba(200,125,255,.45);
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(120,60,200,.35), transparent 60%),
    linear-gradient(160deg, var(--plum) 0%, var(--midnight) 55%, var(--void) 100%);
  box-shadow:
    0 40px 120px rgba(0,0,0,.8),
    0 0 60px rgba(168,85,247,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;

  opacity:0;
  transform:translateY(26px) scale(.97);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.announce.is-open .announce__box{
  opacity:1;
  transform:none;
}

/* a thin gold rule along the top, echoing the poster */
.announce__box::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  z-index:4;
  background:linear-gradient(90deg, transparent, var(--gold), var(--violet-hot), transparent);
}

/* ── poster side ────────────────────────────────────────────────────────── */
.announce__poster{
  position:relative;
  margin:0;
  min-height:100%;
  background:var(--void);
  overflow:hidden;
}
.announce__poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* soften the seam where the poster meets the text panel */
.announce__poster::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 60%, rgba(10,4,18,.55));
  pointer-events:none;
}

/* ── text side ──────────────────────────────────────────────────────────── */
.announce__panel{
  padding:clamp(1.6rem, 3.2vw, 2.6rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.announce__title{
  font-size:clamp(1.9rem, 4.2vw, 2.9rem);
  line-height:.95;
  margin-bottom:1.1rem;
  color:var(--ink);
  text-shadow:0 0 34px rgba(168,85,247,.45);
}

.announce__facts{
  list-style:none;
  margin:0 0 1.3rem;
  padding:0 0 1.2rem;
  border-bottom:1px solid var(--line-soft);
  display:grid;
  gap:.5rem;
}
.announce__facts li{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-family:var(--ui);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--gold);
  line-height:1.45;
}
.announce__facts-icon{ font-size:.9rem; line-height:1.4; }

.announce__body p{
  margin:0 0 .9rem;
  color:var(--ink-soft);
  font-size:.95rem;
  line-height:1.7;
}
.announce__body p:last-child{ margin-bottom:0; }

.announce__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.6rem;
}
.announce__actions .btn{ padding:.78rem 1.5rem; font-size:.78rem; }

.announce__dismiss{
  align-self:flex-start;
  margin-top:1.1rem;
  padding:.3rem 0;
  font-family:var(--ui);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.announce__dismiss:hover{
  color:var(--ink);
  border-bottom-color:var(--violet);
}

/* ── close X ────────────────────────────────────────────────────────────── */
.announce__x{
  position:absolute;
  top:.85rem; right:.85rem;
  z-index:5;
  width:38px; height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(6,3,13,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .25s var(--ease-out), background .25s var(--ease), border-color .25s var(--ease);
}
.announce__x span{
  position:absolute;
  width:15px; height:2px;
  border-radius:2px;
  background:var(--ink);
}
.announce__x span:first-child{ transform:rotate(45deg); }
.announce__x span:last-child{ transform:rotate(-45deg); }
.announce__x:hover{
  transform:rotate(90deg);
  background:linear-gradient(135deg,var(--violet-hot),var(--magenta));
  border-color:transparent;
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:780px){
  .announce{ place-items:start center; }
  .announce__box{
    grid-template-columns:1fr;
    width:min(100%, 460px);
  }
  /* show the poster whole rather than cropping it on a narrow screen */
  .announce__poster{
    max-height:46vh;
  }
  .announce__poster img{ object-fit:contain; }
  .announce__poster::after{
    background:linear-gradient(180deg, transparent 65%, rgba(10,4,18,.7));
  }
}

@media (max-width:420px){
  .announce__actions{ flex-direction:column; align-items:stretch; }
  .announce__actions .btn{ width:100%; }
}

/* ── lite mode / reduced motion ─────────────────────────────────────────── */
body.lite .announce__backdrop,
body.no-blur .announce__backdrop{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:rgba(4,2,9,.94);
}

@media (prefers-reduced-motion:reduce){
  .announce__box{ transition:none; opacity:1; transform:none; }
  .announce__backdrop{ transition:none; }
  .announce__x:hover{ transform:none; }
}