/* ===================================================================
   🐢 TRTL SLOT — EXECUTIVE PRESENCE LAYER (EPL)
   ROOT: .epl
   =================================================================== */

.epl{
  position:fixed;
  inset:0;
  z-index:9000;

  /* fully inert when closed */
  opacity:0;
  visibility:hidden;
  pointer-events:none;

  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);
  transition:opacity .25s ease, visibility .25s ease;
}

.epl.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Shell (the “room”) */
.epl-shell{
  position:absolute;
  inset:4vh 4vw;
  border-radius:28px;
  overflow:hidden;
  background:#000;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
}

/* Close affordance (single definition, gated) */
.epl-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:5;

  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;

  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, background .18s ease, transform .18s ease;
}

.epl.is-open .epl-close{
  opacity:1;
  pointer-events:auto;
}

.epl-close:hover{
  background:rgba(0,0,0,.75);
  transform:translateY(-1px);
}

.epl-close:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(26,143,61,.45);
}

/* Scene containers */
.epl-scene{
  position:absolute;
  inset:0;

  /* keep hidden scenes truly non-interactive */
  opacity:0;
  visibility:hidden;
  pointer-events:none;

  color:#fff;
  transform:scale(1.02);
  transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
}

.epl-scene.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}

/* Narrative body */
.epl-body{
  position:absolute;
  left:5%;
  bottom:6%;
  max-width:42ch;

  background:rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  padding:20px 22px;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
}

.epl-body h2{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.2;
}

.epl-body p{
  margin:0;
  line-height:1.55;
}

/* Cameo stage (future 60s video slot) */
.epl-cameo{
  position:absolute;
  right:4%;
  bottom:6%;
  width:280px;
  height:160px;
  border-radius:16px;
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}

/* Responsive: tighten shell on small screens */
@media (max-width:800px){
  .epl-shell{ inset:16px; border-radius:22px; }
  .epl-body{ left:14px; right:14px; max-width:none; }
  .epl-cameo{ right:14px; width:240px; height:140px; }
}

@media (max-width:520px){
  .epl-cameo{ display:none; } /* cameo hides until you want a mobile pattern */
}