/* Poster-specific styles only
   Brand tokens + fonts live in header.css
*/

.poster{
  padding: clamp(18px, 3vw, 32px);
}

.poster__frame{
  position: relative;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  width: min(92vw, calc(92vh * (16 / 9)));
  max-width: 1400px;

  overflow: hidden;
  border-radius: 24px;

  /* canvas base */
  background: rgba(10,10,10,0.35);
  backdrop-filter: blur(0px); /* bevidst 0 – kan skrues op senere */
}

/* overlay for læsbarhed (nu er det body der har texture) */
.poster__frame::after{
  content:"";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 700px at 20% 20%, rgba(0,0,0,0.25), rgba(0,0,0,0.60));
  z-index: 2;
  pointer-events: none;
}

.poster__header{
  position: relative;
  z-index: 5;
  padding: clamp(18px, 2.6vw, 36px);
}

.poster__headline{
  margin: 0;
  font-family: var(--font-raleway);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--as-red);
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
  font-size: clamp(26px, 2.6vw, 40px);
}

.poster__subheadline{
  margin: 10px 0 0 0;
  font-family: var(--font-raleway);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.72);
  font-size: clamp(12px, 1.1vw, 14px);
}

.poster__stage{
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 18% 6% 8% 6%;
}

.poster__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.poster__slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

.collage__item{
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: var(--z);

  width: clamp(260px, 38vw, 720px);
  transform: translate(-50%, -50%) rotate(var(--r)) scale(var(--s));
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.45));
}

.collage__item img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.poster__controls{
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 6;
  display: flex;
  gap: 10px;
}

.poster__btn{
  border: 0;
  border-radius: 999px;
  padding: 12px 14px;
  cursor: pointer;
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.poster__btn:hover{ background: rgba(255,255,255,0.22); }
.poster__btn:disabled{ opacity: 0.4; cursor: default; }