/* The approved poster supplies the red field and white diagonal. */
:root { --poster-red: #a53332; --poster-paper: #fafafa; --poster-ink: #291b1d; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-header { border-bottom: 1px solid rgba(41, 27, 29, 0.1); background: var(--poster-paper); backdrop-filter: none; view-transition-name: event-header; }
.brand img { filter: brightness(0); }
.brand span, .desktop-nav a { color: var(--poster-ink); }
.desktop-nav a:hover { color: var(--poster-red); }
.language-switcher { border-color: rgba(41, 27, 29, 0.16); }
.language-switcher a { color: #665153; }
.language-switcher a[aria-current="page"] { background: var(--poster-red); color: #fff; }
.header-ticket, .header-ticket:hover { background: var(--poster-red); color: #fff; }
.menu-toggle { border-color: rgba(41, 27, 29, 0.22); color: var(--poster-ink); }
.mobile-menu { background: var(--poster-paper); color: var(--poster-ink); }
.mobile-menu nav a { border-color: rgba(41, 27, 29, 0.16); }
.mobile-menu .mobile-ticket { background: var(--poster-red); color: #fff; }
.site-header :focus-visible, .mobile-menu :focus-visible { outline-color: var(--poster-red); }

.poster-hero { position: relative; padding-top: 76px; background: var(--poster-red); isolation: isolate; }
.poster-stage { position: relative; max-width: 1840px; margin-inline: auto; overflow: hidden; isolation: isolate; background: var(--poster-red); view-transition-name: event-poster; }
.poster-art { display: block; }
.poster-art img { width: 100%; height: auto; object-fit: contain; }
.poster-effects { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.poster-rays { position: absolute; top: -35%; left: 38%; width: 40%; height: 170%; transform-origin: 50% 0; clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, transparent 8%, rgba(255, 233, 210, 0.28) 48%, rgba(255, 250, 245, 0.38) 52%, transparent 94%); mix-blend-mode: soft-light; opacity: 0; }
.poster-rays--second { left: 8%; width: 50%; }
.poster-glare { position: absolute; inset: 0; background: radial-gradient(ellipse 36% 55% at var(--light-x, 52%) var(--light-y, 28%), rgba(255, 245, 226, 0.17), transparent 72%); mix-blend-mode: soft-light; opacity: 0; transition: opacity 400ms ease; }
.poster-stage[data-pointer="true"] .poster-glare { opacity: 1; }
.poster-curtain { position: absolute; inset: -2px; background: var(--poster-paper); clip-path: polygon(110% 0, 130% 0, 130% 100%, 110% 100%); }

.poster-booking { position: relative; z-index: 2; max-width: 1840px; margin-inline: auto; background: var(--poster-red); color: var(--poster-paper); }
.poster-booking::before { position: absolute; inset: -1px 0 0; background: var(--poster-paper); clip-path: polygon(77.7% 0, 100% 0, 100% 100%, 80% 100%); content: ""; }
.poster-booking-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 22%); width: 100%; max-width: none; min-height: 174px; align-items: center; }
.poster-event { padding: 24px clamp(24px, 5.4vw, 100px) 28px; }
.poster-sales { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; color: #f8e8e4; font-size: 14px; line-height: 1.3; }
.poster-sales::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.poster-date { margin: 0; font-size: clamp(26px, 3.2vw, 44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.poster-date span { white-space: nowrap; }
.poster-venue { margin: 6px 0 0; color: #f8e8e4; font-size: 16px; }
.poster-action { position: relative; padding: 24px clamp(14px, 1.8vw, 32px) 24px 44px; }
.poster-buy { position: relative; display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 12px; overflow: hidden; padding: 17px 20px; border-radius: 4px; background: var(--poster-red); color: #fff; font-size: 20px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background 180ms ease; }
.poster-buy::before { position: absolute; inset: 0; background: #702426; clip-path: polygon(0 0, 0 0, -20% 100%, 0 100%); transition: clip-path 400ms cubic-bezier(0.16, 1, 0.3, 1); content: ""; }
.poster-buy span, .poster-buy svg { position: relative; }
.poster-buy svg { flex: 0 0 24px; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.poster-buy:hover::before { clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%); }
.poster-buy:hover svg { transform: translate(3px, -3px); }
.poster-buy:focus-visible { outline-color: var(--poster-ink); }
.poster-vendor { margin: 10px 0 0; color: #665153; font-size: 12px; line-height: 1.4; text-align: center; }

/* The final diagonal carries the poster into the page background. */
.poster-exit { position: relative; z-index: 2; height: clamp(28px, 3.3vw, 60px); background: var(--poster-red); overflow: hidden; }
.poster-exit::before { position: absolute; inset: -1px 0 0; background: var(--poster-paper); clip-path: polygon(80% 0, 100% 0, 100% 100%, 81% 100%); content: ""; }
.poster-exit::after { position: absolute; inset: -1px; background: var(--surface); clip-path: polygon(0 100%, 100% 0, 100% 100%); content: ""; }

@keyframes poster-open { from { clip-path: polygon(-20% 0, 100% 0, 120% 100%, 0 100%); } to { clip-path: polygon(110% 0, 130% 0, 130% 100%, 110% 100%); } }
@keyframes poster-raking-light { 0%, 100% { transform: rotate(-18deg); opacity: 0.12; } 50% { transform: rotate(14deg); opacity: 0.55; } }
@keyframes poster-raking-light-back { 0%, 100% { transform: rotate(18deg); opacity: 0.08; } 50% { transform: rotate(-12deg); opacity: 0.38; } }
@keyframes poster-ticket-reveal { from { clip-path: polygon(0 0, 0 0, -20% 100%, 0 100%); } to { clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%); } }

@media (prefers-reduced-motion: no-preference) {
  .poster-stage[data-motion="true"] .poster-curtain { animation: poster-open 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .poster-stage[data-motion="true"] .poster-rays { animation: poster-raking-light 11s ease-in-out infinite; }
  .poster-stage[data-motion="true"] .poster-rays--second { animation: poster-raking-light-back 14s ease-in-out infinite; }
  .poster-stage[data-visible="false"] .poster-rays { animation-play-state: paused; }
  .poster-hero[data-motion="true"] .poster-buy { animation: poster-ticket-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
  ::view-transition-group(event-poster), ::view-transition-group(event-header) { animation-duration: 320ms; }
}
@media (max-width: 1080px) and (min-width: 721px) {
  .poster-booking-inner { grid-template-columns: minmax(0, 1fr) 30%; }
  .poster-booking::before { clip-path: polygon(77.7% 0, 100% 0, 100% 100%, 69% 100%); }
  .poster-action { padding-left: 38px; }
  .poster-buy { font-size: 18px; padding-inline: 14px; }
}
@media (max-width: 720px) {
  .poster-hero { padding-top: 68px; }
  .poster-booking::before { content: none; }
  .poster-booking-inner { grid-template-columns: 1fr; }
  .poster-event { padding: 20px 20px 34px; }
  .poster-date { font-size: clamp(23px, 5.9vw, 34px); }
  .poster-action { padding: 10px 20px 22px; background: var(--poster-paper); }
  .poster-action::before { position: absolute; inset: -24px 0 auto; height: 25px; background: var(--poster-paper); clip-path: polygon(0 100%, 100% 0, 100% 100%); content: ""; }
  .poster-buy { min-height: 56px; padding: 16px 20px; font-size: 19px; }
  .poster-rays { width: 70%; left: 5%; }
  .poster-rays--second { left: 0; }
  .poster-exit, .poster-exit::before { background: var(--poster-paper); }
  .poster-exit { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .poster-effects { display: none; }
  .poster-buy, .poster-buy::before, .poster-buy svg { transition: none; }
}