@font-face {
  font-family: Posterama;
  src: url('/assets/fonts/posterama-2001-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --night: #010718;
  --white: #f8fbff;
  --ice: #d7e4f0;
  font-family: Inter, Arial, sans-serif;
  font-synthesis: none;
  background: var(--night);
  color: var(--white);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
::selection { background: #235bc6; color: white; }
.site-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #092a7054, transparent 55%);
}
.page-frame { position: fixed; z-index: 5; inset: 24px; border: 1px solid #3171c72c; pointer-events: none; }
.page-frame i { position: absolute; width: 32px; height: 32px; border: solid #5a88c0; }
.page-frame i:nth-child(1) { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.page-frame i:nth-child(2) { right: -1px; top: -1px; border-width: 1px 1px 0 0; }
.page-frame i:nth-child(3) { left: -1px; bottom: -1px; border-width: 0 0 1px 1px; }
.page-frame i:nth-child(4) { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.site-header { z-index: 2; padding: 48px 40px 0; text-align: center; }
.site-header p { margin: 0; font-size: 13px; line-height: 1.5; letter-spacing: .08em; font-weight: 500; color: #d2dded; }
.site-header span { margin-left: 5px; color: #9bafc9; letter-spacing: 0; font-weight: 400; }
.hero { position: relative; display: grid; place-items: center; flex: 1; padding: 48px 24px 66px; min-height: 680px; }
.hero-content { position: relative; z-index: 2; width: min(100%, 650px); text-align: center; }
.festival-identity { display: flex; flex-direction: column; align-items: center; }
.butterfly { display: block; width: 195px; height: auto; margin-bottom: 29px; filter: drop-shadow(0 0 20px #3171c71a); }
.wordmark { display: block; width: 310px; height: auto; filter: invert(1); }
.festival-name { margin: 19px 0 0; font-family: Posterama, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); }
h1 { margin: 53px 0 0; font-family: Posterama, Arial, sans-serif; font-size: clamp(38px, 4.5vw, 62px); font-weight: 400; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
.event-date { display: block; margin: 29px 0 24px; font-family: Posterama, Arial, sans-serif; font-size: 18px; line-height: 1.5; letter-spacing: .11em; text-transform: uppercase; color: var(--ice); }
.calendar-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; padding: 0 25px; background: #1a4a9e; border: 1px solid #5587d5; border-radius: 0; color: #f8fbff; text-decoration: none; font-size: 13px; font-weight: 500; line-height: 1.5; transition: background .2s, border-color .2s; }
.calendar-button::before, .calendar-button::after { content: ''; position: absolute; width: 5px; height: 5px; background: #010718; }
.calendar-button::before { top: -1px; left: -1px; border-bottom: 1px solid #5587d5; border-right: 1px solid #5587d5; }
.calendar-button::after { bottom: -1px; right: -1px; border-top: 1px solid #5587d5; border-left: 1px solid #5587d5; }
.calendar-button svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: square; transition: transform .2s; }
.calendar-button:hover { background: #235bb8; border-color: #9ac3ff; }
.calendar-button:hover svg { transform: translateX(3px); }
a:focus-visible { outline: 2px solid #a9cdff; outline-offset: 6px; }
.calendar-status { position: absolute; top: 100%; left: 0; width: 100%; margin: 15px 0 0; color: #b5c9e5; font-size: 12px; line-height: 1.5; }
.atmosphere { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.halo { position: absolute; left: 50%; top: 39%; border: 1px solid #3171c70d; border-radius: 50%; transform: translate(-50%, -50%); }
.halo-outer { width: 580px; height: 580px; }
.halo-inner { width: 445px; height: 445px; }
.card-scene { position: absolute; inset: 0; pointer-events: none; }
.floating-card { position: absolute; width: clamp(135px, 14vw, 205px); border-radius: 11px; overflow: hidden; box-shadow: 0 25px 60px #0009; animation: card-float 12s ease-in-out infinite; }
.floating-card img { display: block; width: 100%; height: auto; }
.card-left-back { left: calc(50% - 655px); top: 22%; --rotation: -23deg; opacity: .3; animation-delay: -5s; }
.card-left-front { left: calc(50% - 560px); top: 34%; --rotation: -12deg; opacity: .7; animation-delay: -2s; }
.card-right-back { right: calc(50% - 655px); top: 22%; --rotation: 23deg; opacity: .3; animation-delay: -7s; }
.card-right-front { right: calc(50% - 560px); top: 34%; --rotation: 12deg; opacity: .7; animation-delay: -3s; }
@keyframes card-float { 0%, 100% { transform: translateY(0) rotate(var(--rotation)); } 50% { transform: translateY(-8px) rotate(calc(var(--rotation) + 1deg)); } }
@media (min-width: 1600px) {
  .card-left-front { left: calc(50% - 630px); }
  .card-right-front { right: calc(50% - 630px); }
  .card-left-back { left: calc(50% - 735px); }
  .card-right-back { right: calc(50% - 735px); }
}
@media (max-width: 1150px) {
  .card-left-front { left: -10px; }
  .card-right-front { right: -10px; }
  .card-left-back { left: -95px; }
  .card-right-back { right: -95px; }
}
@media (max-width: 800px) {
  .page-frame { inset: 16px; }
  .site-header { padding-top: 36px; }
  .hero { padding-top: 42px; min-height: 650px; }
  .card-left-front { left: -80px; top: 26%; width: 165px; opacity: .32; }
  .card-right-front { right: -80px; top: 26%; width: 165px; opacity: .32; }
  .card-left-back, .card-right-back { display: none; }
  .halo-outer { width: 510px; height: 510px; }
  .halo-inner { width: 380px; height: 380px; }
  h1 { font-size: 45px; }
}
@media (max-width: 480px) {
  .page-frame { inset: 12px; }
  .page-frame i { width: 24px; height: 24px; }
  .site-header { padding: 29px 24px 0; }
  .site-header p { font-size: 12px; }
  .hero { padding: 38px 27px 75px; min-height: 600px; }
  .butterfly { width: 175px; margin-bottom: 28px; }
  .wordmark { width: 245px; }
  .festival-name { margin-top: 17px; font-size: 11px; letter-spacing: .13em; }
  h1 { margin-top: 46px; font-size: clamp(29px, 8.4vw, 38px); letter-spacing: .035em; white-space: nowrap; }
  .event-date { margin: 27px 0 23px; font-size: 15px; letter-spacing: .08em; }
  .calendar-button { min-height: 50px; padding: 0 23px; gap: 22px; font-size: 12px; }
  .calendar-status { font-size: 11px; }
  .card-left-front { left: -115px; top: 22%; opacity: .28; }
  .card-right-front { right: -115px; top: 22%; opacity: .28; }
  .halo { top: 33%; }
  .halo-outer { width: 450px; height: 450px; }
  .halo-inner { width: 330px; height: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .floating-card { transform: rotate(var(--rotation)); }
}