@charset "UTF-8";

:root {
  --paper: #070709;
  --ink: #f4f4f0;
  --red: #ff6075;
  --line: #ffffff30;
  --mono: "Courier New", Courier, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
.smoke-stage { position: fixed; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.smoke-layer { position: absolute; width: 130%; height: 140%; left: -15%; top: -20%; object-fit: cover; opacity: .72; will-change: transform; animation: smoke-rise 30s ease-in-out infinite alternate; }
.smoke-layer:nth-child(2) { opacity: .4; animation: smoke-cross 43s ease-in-out infinite alternate; }
.smoke-layer:nth-child(3) { opacity: .3; animation: smoke-roll 37s ease-in-out infinite alternate; }
.smoke-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,#07070988 0%,#07070930 30%,#07070918 55%,#07070966 100%); }
.is-away .smoke-layer { animation-play-state: paused; }
@keyframes smoke-rise { from { transform: translate3d(-4%,7%,0) rotate(-5deg) scale(1); } to { transform: translate3d(5%,-8%,0) rotate(5deg) scale(1.13); } }
@keyframes smoke-cross { from { transform: translate3d(7%,5%,0) rotate(175deg) scale(1.08); } to { transform: translate3d(-8%,-6%,0) rotate(188deg) scale(1.23); } }
@keyframes smoke-roll { from { transform: translate3d(-7%,-5%,0) rotate(5deg) scaleX(-1); } to { transform: translate3d(7%,8%,0) rotate(-8deg) scaleX(-1); } }
::selection { background: var(--red); color: var(--paper); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
svg { display: block; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.poster {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  padding: clamp(20px,3.2vw,48px) clamp(20px,5vw,80px) 20px;
}
.topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #0707098f; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font: .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.on-air { display: flex; align-items: center; gap: 10px; }
.on-air svg { width: 20px; height: 20px; color: var(--red); }
.domain { color: #ededed; white-space: nowrap; }
.topline { text-shadow: 0 1px 6px #000; }
.identity { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 24px 0; gap: 20px; }
.poster-content { display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 0; }
.site-footer { display: flex; justify-content: center; padding-top: 8px; }
.footer-description { max-width: 430px; margin: 0; padding: 0 8px; border-radius: 6px; background: #070709b3; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--ink); font-size: .8125rem; line-height: 1.45; text-align: center; text-shadow: 0 1px 8px #000; }
.logo-wrap { position: relative; width: min(68vw,600px); max-width: 100%; margin: 0; transform: rotate(-3deg); filter: drop-shadow(0 4px 14px #000000aa); animation: arrive .8s cubic-bezier(.22,1,.36,1) both; }
.logo { display: block; width: 100%; height: auto; max-height: 38svh; object-fit: contain; }
.logo-wrap::before,.logo-wrap::after { content: ""; position: absolute; inset: 0; background: url("assets/sgovor-logo-light.svg") center / contain no-repeat; opacity: 0; pointer-events: none; }
.logo-wrap::before { clip-path: inset(23% 0 65%); }
.logo-wrap::after { clip-path: inset(62% 0 29%); }
.logo-wrap.is-glitching::before { animation: glitch-top 380ms steps(1,end); filter: drop-shadow(4px 0 0 #ff3854); }
.logo-wrap.is-glitching::after { animation: glitch-bottom 380ms steps(1,end); }
@keyframes arrive { from { opacity: 0; transform: translateY(12px) rotate(-3deg); } to { opacity: 1; transform: translateY(0) rotate(-3deg); } }
@keyframes glitch-top {
  0%,100% { opacity: 0; transform: translateX(0); }
  12%,52% { opacity: .9; transform: translateX(9px); clip-path: inset(21% 0 64%); }
  30%,72% { opacity: .75; transform: translateX(-6px); clip-path: inset(38% 0 53%); }
  86% { opacity: .85; transform: translateX(5px); clip-path: inset(12% 0 79%); }
}
@keyframes glitch-bottom {
  0%,100% { opacity: 0; transform: translateX(0); }
  18%,58% { opacity: .85; transform: translateX(-8px); clip-path: inset(62% 0 23%); }
  38%,78% { opacity: .7; transform: translateX(6px); clip-path: inset(75% 0 16%); }
  90% { opacity: .8; transform: translateX(-4px); clip-path: inset(53% 0 35%); }
}
.socials { width: min(430px,100%); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.social { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; min-height: 72px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg,#ffffff12,#ffffff05),#08080b73; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 #ffffff12,0 5px 24px #0000001a; font-size: 1.125rem; line-height: 1.2; transition: color .2s,border-color .2s,background .2s; }
.social svg { width: 36px; height: 36px; }
.social span { min-width: 0; overflow-wrap: anywhere; }
.social[href]:hover { color: var(--red); border-color: #ff607580; background: #171017a8; }
.social[aria-disabled="true"] { cursor: default; }
.event { border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg,#ffffff0b,#ffffff02),#08080ba8; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: inset 0 1px 0 #ffffff10; text-align: center; padding: 16px 12px; }
.event-label { display: block; color: var(--red); font: .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.event h2 { font-size: clamp(1.5rem,2.6vw,2.75rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.04; margin: 0; }
.period { color: var(--red); }
@media (max-width: 650px) {
  .poster { padding: 22px 22px 16px; }
  .topline { font-size: .75rem; letter-spacing: 0; gap: 10px; }
  .on-air { gap: 7px; }
  .identity { padding: 14px 0; gap: 18px; }
  .logo-wrap { width: min(85vw,460px); }
  .logo { max-height: calc(36svh - 48px); }
  .socials { width: min(360px,100%); gap: 8px; }
  .social { flex-direction: column; gap: 8px; min-height: 86px; padding: 10px 8px; font-size: 1rem; }
  .social svg { width: 34px; height: 34px; }
  .event { padding-top: 14px; }
  .event h2 { font-size: clamp(1.5rem,6.5vw,2rem); }
}
@media (max-width: 350px) {
  .poster { padding-right: 16px; padding-left: 16px; }
  .on-air svg { display: none; }
}
@media (max-height: 600px) and (orientation: portrait) {
  .identity { padding: 6px 0; gap: 10px; }
  .footer-description { font-size: .75rem; line-height: 1.35; }
  .logo { max-height: 18svh; }
  .social { min-height: 72px; padding: 7px 8px; gap: 6px; }
  .social svg { width: 30px; height: 30px; }
  .event h2 { font-size: 1.5rem; }
}
@media (max-height: 800px) and (orientation: landscape) {
  .poster { padding-top: 20px; padding-bottom: 16px; }
  .identity { padding: 12px 0; gap: 20px; }
  .logo { max-height: min(38svh,calc(100svh - 440px)); }
  .social { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .event h2 { font-size: clamp(1.5rem,2.6vw,1.875rem); }
}
@media (max-height: 550px) and (orientation: landscape) {
  .poster { padding-top: 16px; padding-bottom: 12px; }
  .identity { padding: 8px 0; gap: 16px; }
  .logo { max-height: 23svh; }
  .socials { width: min(430px,100%); gap: 8px; }
  .social { min-height: 52px; padding: 6px 10px; flex-direction: row; font-size: 1rem; }
  .social svg { width: 30px; height: 30px; }
  .event { padding-top: 10px; }
  .event-label { display: none; }
  .event h2 { font-size: 1.375rem; }
  .event h2 br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .logo-wrap::before,.logo-wrap::after { display: none; }
  .smoke-layer { will-change: auto; }
}