/* Thank ATC: fun sky for the big "what's flying over me" pages (planes, military). Scene is drawn by /sky-fx.js. */
html,body{overflow-x:clip}
html body{background-color:#c0dbf1 !important;background-image:linear-gradient(to right,rgba(72,98,120,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(72,98,120,.06) 1px,transparent 1px),radial-gradient(ellipse 80% 55% at 80% 0%,rgba(255,214,186,.5),transparent 55%),linear-gradient(180deg,#a9cfeb 0%,#c0dbf1 35%,#d3e6f4 100%) !important;background-size:80px 80px,80px 80px,auto,auto !important;background-repeat:repeat,repeat,no-repeat,no-repeat !important;background-attachment:fixed !important}
html body::before{display:none !important}

/* radio ticker at the very top */
.sfx-tick{background:#1c1233;color:rgba(255,255,255,.92);overflow:hidden;padding:9px 0;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.08em;white-space:nowrap}
.sfx-tt{display:inline-flex;animation:sfxTick 90s linear infinite}
.sfx-ti{display:inline-flex;align-items:center;gap:8px;padding-right:56px}
.sfx-ti::before{content:'◆';font-size:9px}
.sfx-ti::after{content:attr(data-t)}
.sfx-ti:nth-child(5n+1)::before{color:#2ee6a0}.sfx-ti:nth-child(5n+2)::before{color:#36b6ff}.sfx-ti:nth-child(5n+3)::before{color:#ffb838}.sfx-ti:nth-child(5n+4)::before{color:#ff6a3d}.sfx-ti:nth-child(5n+5)::before{color:#f5333f}
@keyframes sfxTick{to{transform:translateX(-50%)}}

/* the hero keeps room for the scene so nothing jumps when it appears */
.hero[data-fx]{position:relative;padding-bottom:250px !important}
.hero[data-fx]>*{position:relative;z-index:2}
.hero[data-fx]+article{position:relative;z-index:3;margin-top:-34px}
.sfx{position:absolute !important;z-index:1 !important;left:50%;bottom:0;width:100vw;height:300px;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.sfx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:#1c1233}
.sfx-glow{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,190,150,0) 0%,rgba(255,180,140,.45) 55%,rgba(123,79,240,.55) 100%)}
.sfx-sky{position:absolute;left:0;right:0;bottom:0;height:150px;background:center bottom/cover no-repeat}
.sfx svg{display:block;width:100%;height:100%;overflow:visible}
.sfx-bcn{animation:sfxBlink 1.2s steps(1) infinite}
.sfx-str{animation:sfxBlink 1s steps(1) infinite;animation-delay:.5s}
@keyframes sfxBlink{0%{opacity:1}14%{opacity:.1}}

/* banner tow */
.sfx-tow{position:absolute !important;top:18px;left:0;z-index:4 !important;display:flex;align-items:center;text-decoration:none;animation:sfxTow 26s linear infinite;will-change:transform}
.sfx-ban{background:#fff;color:#2b1a66;font:800 16px/1 'Inter Tight',sans-serif;white-space:nowrap;padding:11px 18px;border-radius:3px;border-top:3px solid var(--bc,#c8102e);border-bottom:3px solid var(--bc,#c8102e);box-shadow:0 6px 14px rgba(28,18,51,.18);animation:sfxWave 1.6s ease-in-out infinite}
.sfx-bs{display:none}
.sfx-rope{width:44px;height:20px;flex-shrink:0}
.sfx-prop-pl{width:92px;height:43px;filter:drop-shadow(0 6px 8px rgba(28,18,51,.22));animation:sfxBob 2.4s ease-in-out infinite}
.sfx-prop{transform-origin:114px 33px;animation:sfxProp .12s linear infinite}
.sfx-tow:hover .sfx-ban{background:#fff8e1}
@keyframes sfxTow{0%{transform:translateX(-560px)}62%{transform:translateX(105vw)}100%{transform:translateX(105vw)}}
@keyframes sfxWave{50%{transform:skewY(-1.4deg) scaleY(.96)}}
@keyframes sfxBob{50%{transform:translateY(-4px) rotate(1.5deg)}}
@keyframes sfxProp{50%{transform:scaleY(.35)}}

/* ---- airliners theme ---- */
.sfx-arr{position:absolute;left:0;top:0;width:150px;height:47px;animation:sfxArr 15s linear infinite}
.sfx-arr .sfx-in{width:100%;height:100%;transform:rotate(7deg)}
@keyframes sfxArr{0%{transform:translate(-18vw,26px);opacity:0}6%{opacity:1}78%{opacity:1}86%{transform:translate(78vw,190px);opacity:0}100%{transform:translate(78vw,190px);opacity:0}}
.sfx-ll{position:absolute;left:96%;top:58%;width:230px;height:120px;margin-top:-60px;transform-origin:0 50%;transform:rotate(9deg);background:linear-gradient(90deg,rgba(255,250,215,.9),rgba(255,244,190,.15) 80%,rgba(255,244,190,0));clip-path:polygon(0 46%,0 54%,100% 100%,100% 0);mix-blend-mode:screen;filter:blur(1px)}
.sfx-hi{position:absolute;right:0;top:22px;width:56px;height:18px;animation:sfxHi 40s linear infinite}
.sfx-hi i{position:absolute;left:100%;top:46%;width:46vw;height:3px;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,0))}
@keyframes sfxHi{from{transform:translateX(20vw)}to{transform:translateX(-110vw)}}
.sfx-als{position:absolute;bottom:9px;left:52%;width:26%;display:flex;justify-content:space-between}
.sfx-als b{width:6px;height:6px;border-radius:50%;background:#fff6c8;opacity:.25;box-shadow:0 0 6px #fff6c8;animation:sfxRabbit 1.1s linear infinite}
@keyframes sfxRabbit{0%,12%{opacity:1;transform:scale(1.5)}24%,100%{opacity:.25;transform:scale(1)}}

/* ---- jets theme ---- */
.sfx-form{position:absolute;left:0;top:36px;width:240px;height:110px;animation:sfxForm 13s linear infinite}
@keyframes sfxForm{0%{transform:translateX(-30vw)}55%{transform:translateX(112vw)}100%{transform:translateX(112vw)}}
.sfx-j{position:absolute;width:74px;height:22px}
.sfx-j i{position:absolute;right:92%;top:52%;height:7px;width:46vw;margin-top:-3.5px;border-radius:4px;background:linear-gradient(270deg,var(--sm),rgba(255,255,255,0))}
.sfx-j svg{position:relative}
.sfx-ab{animation:sfxAb .09s linear infinite alternate;transform-origin:4px 15px}
@keyframes sfxAb{to{transform:scaleX(.6)}}
.sfx-big{position:absolute;right:0;top:20px;width:140px;height:46px;opacity:.75;animation:sfxBig 46s linear infinite}
@keyframes sfxBig{from{transform:translateX(18vw)}to{transform:translateX(-110vw)}}
.sfx-big svg{transform:scaleX(-1)}

@media (max-width:700px){
  .hero[data-fx]{padding-bottom:190px !important}
  .sfx{height:230px}.sfx-sky{height:110px}
  .sfx-bl{display:none}.sfx-bs{display:inline}.sfx-ban{font-size:14px;padding:9px 14px}.sfx-prop-pl{width:74px;height:35px}
  .sfx-tick{font-size:11px;padding:7px 0}
  .sfx-arr{width:110px;height:34px}
  @keyframes sfxArr{0%{transform:translate(-30vw,20px);opacity:0}6%{opacity:1}78%{opacity:1}86%{transform:translate(70vw,140px);opacity:0}100%{transform:translate(70vw,140px);opacity:0}}
  .sfx-ll{width:150px;height:80px;margin-top:-40px}
  .sfx-form{transform-origin:0 0;top:26px}
  .sfx-form>div{zoom:.72}
  .sfx-big{width:100px;height:33px}
}
@media (prefers-reduced-motion:reduce){
  .sfx *,.sfx-tt,.sfx-tow,.sfx-tow *{animation:none !important}
  .sfx-tow{transform:translateX(16px)}.sfx-arr{transform:translate(40vw,70px)}.sfx-form{transform:translateX(30vw)}.sfx-big,.sfx-hi{display:none}
}
/* town pages: the faint airport map behind the page gives way to the sky (the map still shows in the page) */
.cy-map{display:none !important}