/* Creatives: paginaspecifiek. */
/* ---------- Creatives: paginaspecifiek (voorstel: css/creatives.css) ---------- */

.formats { position: relative; height: 470px; }
.fmt { position: absolute; border-radius: 18px; overflow: hidden; display: grid; align-content: end; gap: 8px; padding: 16px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 60px rgba(0,0,0,0.45); animation: float 6s ease-in-out infinite; }
.fmt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.18) 48%, transparent 60%); transform: translateX(-120%); animation: shine 7s ease-in-out infinite; }
.fmt__tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(11,18,32,0.8); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.fmt strong { font-family: var(--f-display); font-size: 20px; line-height: 1.05; color: #fff; }
.fmt em { justify-self: start; font-style: normal; padding: 6px 12px; border-radius: var(--r-pill); background: var(--signal); font-size: 12px; font-weight: 700; color: var(--ink); }
.fmt--feed { left: 0; top: 70px; width: 190px; aspect-ratio: 4 / 5; background: linear-gradient(160deg, #24324C, #141E30); animation-delay: -2s; }
.fmt--story { left: 130px; top: 0; width: 180px; aspect-ratio: 9 / 16; z-index: 2; background: radial-gradient(90% 70% at 40% 30%, #1D6B50, #0C211D); box-shadow: 0 0 0 2px var(--signal), 0 30px 60px rgba(0,0,0,0.5), 0 0 40px rgba(61,245,161,0.3); }
.fmt--square { right: 0; top: 190px; width: 170px; aspect-ratio: 1; background: linear-gradient(160deg, #2B2340, #151226); animation-delay: -4s; }
.fmt--story::after { animation-delay: -3.5s; }
@media (max-width: 600px) { .formats { height: 360px; } .fmt--feed { width: 140px; top: 60px; } .fmt--story { left: 92px; width: 140px; } .fmt--square { width: 124px; top: 160px; } .fmt strong { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .fmt, .fmt::after { animation: none; } }