/* 30 dni dla Siebie - R7328
   Żart "Zobacz platformę" tylko na O mnie i O projekcie. */

.platform-joke-overlay{
  position:fixed;
  z-index:2147482500;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:24px;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,90,0,.14),transparent 40%),
    #0b1016;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
}

.platform-joke-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.platform-joke-overlay__stage{
  position:relative;
  width:min(92vw,920px);
  height:min(86vh,900px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.platform-joke-overlay__image{
  display:block;
  width:auto;
  height:auto;
  max-width:min(88vw,800px);
  max-height:min(78vh,820px);
  object-fit:contain;
  filter:drop-shadow(0 28px 55px rgba(0,0,0,.32));
  user-select:none;
  -webkit-user-drag:none;
}

.platform-joke-overlay__message{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:8px;
  width:min(680px,calc(100vw - 34px));
  min-height:58px;
  transform:translate(-50%,22px);
  opacity:0;
  visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border:0;
  border-radius:18px;
  background:#ff5a00;
  color:#fff;
  box-shadow:0 18px 42px rgba(0,0,0,.34);
  font:900 18px/1.25 Manrope,system-ui,sans-serif;
  text-align:center;
  cursor:pointer;
  transition:opacity .24s ease,transform .24s ease,visibility .24s ease;
}

.platform-joke-overlay.is-ready .platform-joke-overlay__message{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

.platform-joke-overlay.is-ready{
  cursor:pointer;
}

.platform-joke-overlay__message:focus-visible{
  outline:3px solid #fff;
  outline-offset:4px;
}

.platform-joke-overlay__hint{
  display:none;
}

body.platform-joke-open{
  overflow:hidden!important;
}

@media (max-width:760px){
  .platform-joke-overlay{
    padding:12px 12px 18px;
  }

  .platform-joke-overlay__stage{
    width:100%;
    height:100%;
  }

  .platform-joke-overlay__image{
    max-width:96vw;
    max-height:72vh;
  }

  .platform-joke-overlay__message{
    bottom:10px;
    width:calc(100vw - 24px);
    min-height:58px;
    padding:13px 14px;
    border-radius:16px;
    font-size:16px;
  }
}

@media (max-width:420px){
  .platform-joke-overlay__image{
    max-width:100vw;
    max-height:70vh;
  }

  .platform-joke-overlay__message{
    font-size:15px;
  }
}

@media (prefers-reduced-motion:reduce){
  .platform-joke-overlay,
  .platform-joke-overlay__message{
    transition:none!important;
  }
}