/* Site footer: an engraved two-ink plate (cream on grainy navy) after
   plancode.net's footer, with an Istanbul scene along the bottom —
   Çamlıca tower, the Bosphorus bridge, the old city across the water.
   Scene: img/footer-camlica.svg, generated by tools/footer-camlica.py (its sky
   is transparent, so --ink must match the generator's INK).
   Clicking the tower turns the radio dial: js/footer-radio.js.
   The same file is copied to justonair.com — change both. */

.jc-footer {
  --ink: #192440;
  --paper: #eef0e2;
  --paper-dim: rgba(238, 240, 226, .7);
  --lime: #afd136;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(110% 70% at 15% 0%, rgba(175, 209, 54, .09), transparent 60%), var(--ink);
  color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Paper grain over everything, illustration included */
.jc-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.jc-footer a { color: var(--paper); text-decoration: none; transition: color .2s; }
.jc-footer a:hover, .jc-footer a:focus { color: var(--lime); text-decoration: none; }

.jc-footer__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 80px 32px 0; }
.jc-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: 44px 40px; }

.jc-footer__logo img { display: block; width: 170px; height: auto; }
.jc-footer__tagline { font-family: "Caveat", cursive; font-size: 27px; font-weight: 600; line-height: 1.15; color: var(--paper); margin: 22px 0 0; max-width: 21ch; }
.jc-footer__social { display: flex; gap: 22px; margin-top: 26px; font-size: 19px; }
.jc-footer__social a { display: inline-block; transition: color .2s, transform .2s; }
.jc-footer__social a:hover { transform: translateY(-2px); }

.jc-footer h4 {
  position: relative;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 6px 0 0;
}
.jc-footer h4::after { content: ""; display: block; width: 36px; height: 1px; margin: 16px 0 20px; background: var(--paper); opacity: .6; }
.jc-footer h4 .fa-gift { font-size: 15px; margin-right: 4px; }
/* "bedava!" sticker over the free tools heading */
.jc-footer__sticker {
  position: absolute; top: -30px; right: 4px;
  padding: 1px 9px 3px; border-radius: 4px;
  background: var(--lime); color: var(--ink);
  font-family: "Caveat", cursive; font-size: 19px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  transform: rotate(-6deg);
}

.jc-footer ul { list-style: none; margin: 0; padding: 0; }
.jc-footer li + li { margin-top: 11px; }
.jc-footer__links a { font-size: 17px; }
.jc-footer__tools a { display: inline-flex; align-items: baseline; gap: 9px; }
.jc-footer__tools .fa { width: 16px; color: var(--lime); text-align: center; }

.jc-footer__lede { font-size: 16px; line-height: 1.55; color: var(--paper-dim); margin: 0; max-width: 32ch; }
.jc-footer__cta { display: flex; margin-top: 22px; border: 1px solid var(--paper); font-size: 16px; }
.jc-footer__cta span:first-child { flex: 1; padding: 13px 18px; }
.jc-footer__cta span:last-child { display: grid; place-items: center; width: 50px; background: var(--paper); color: var(--ink); transition: background .2s; }
.jc-footer__cta:hover { border-color: var(--lime); }
.jc-footer__cta:hover span:last-child { background: var(--lime); }

.jc-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 60px; font-size: 14px; color: var(--paper-dim); }
.jc-footer__legal p { margin: 0; }
.jc-footer__legal a { color: inherit; }
.jc-footer__legal nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.jc-footer .plancode-damga { display: inline-block; width: 15px; height: 16px; margin-right: 6px; vertical-align: -2px; fill: #fff; }

/* The scene: full bleed, pulled up under the legal row. The overlay svg uses the
   same viewBox and the same slice/anchor as the image, so its coordinates
   (tower tip at 1060,43) line up with the drawing. */
.jc-footer__scene { position: relative; z-index: 1; height: clamp(230px, 29vw, 440px); margin-top: clamp(-80px, -4vw, -20px); }
.jc-footer__scene img, .jc-footer__scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.jc-footer__scene img { object-fit: cover; object-position: 50% 100%; pointer-events: none; user-select: none; }
.jc-footer__scene svg { pointer-events: none; overflow: visible; vertical-align: top; }

.jc-footer__tower { pointer-events: all; cursor: pointer; outline: none; }
.jc-footer__tower-focus { opacity: 0; transition: opacity .2s; }
.jc-footer__tower:focus-visible .jc-footer__tower-focus { opacity: 1; }

.jc-footer__ring { fill: none; stroke: var(--lime); stroke-width: 1.4; transform-box: view-box; transform-origin: 1060px 43px; opacity: 0; }
.jc-footer__ring.go { animation: jc-ring 2.6s cubic-bezier(.2, .6, .3, 1) forwards; }
.jc-footer__ring.burst { animation-duration: 1.5s; stroke-width: 2; }
@keyframes jc-ring { 0% { transform: scale(.04); opacity: .95; } 100% { transform: scale(1); opacity: 0; } }

/* The tapping hand that points at the tower until it has been clicked once */
.jc-footer__hint { opacity: 0; transition: opacity .5s; }
.jc-footer__hint.on { opacity: 1; }
.jc-footer__hint text { font-family: FontAwesome; font-size: 44px; fill: var(--lime); }
.jc-footer__hand { transform-box: view-box; transform-origin: 1010px 152px; }
.jc-footer__hint.on .jc-footer__hand { animation: jc-tap 2.4s .4s ease-in-out infinite; }
.jc-footer__tap { fill: none; stroke: var(--lime); stroke-width: 2; opacity: 0; transform-box: view-box; transform-origin: 1046px 152px; }
.jc-footer__hint.on .jc-footer__tap { animation: jc-tap-ring 2.4s .4s ease-out infinite; }
@keyframes jc-tap { 0%, 55%, 100% { transform: translateX(0); } 65% { transform: translateX(14px); } 75% { transform: translateX(10px); } 85% { transform: translateX(0); } }
@keyframes jc-tap-ring { 0%, 62% { opacity: 0; transform: scale(.3); } 66% { opacity: .9; transform: scale(.4); } 90%, 100% { opacity: 0; transform: scale(1.4); } }

.jc-footer__bubble { opacity: 0; transform-box: view-box; transform-origin: 1055px 96px; transform: scale(.6); transition: opacity .18s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.jc-footer__bubble.on { opacity: 1; transform: scale(1); }
.jc-footer__bubble rect, .jc-footer__bubble path { fill: var(--paper); }
.jc-footer__bubble text { font-family: "Caveat", cursive; font-weight: 700; font-size: 34px; fill: var(--ink); }
.jc-footer__bubble.on tspan { animation: jc-jitter .14s steps(2) infinite; }
.jc-footer__bubble tspan:nth-child(odd) { animation-delay: -.07s; }
@keyframes jc-jitter { 50% { dy: -2px; } }

@media (max-width: 1023px) {
  .jc-footer__grid { grid-template-columns: 1fr 1fr; }
  .jc-footer__brand, .jc-footer__start { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .jc-footer__inner { padding: 56px 16px 0; }
  .jc-footer__grid { gap: 36px 20px; }
  .jc-footer__legal { flex-direction: column; margin-top: 44px; }
  .jc-footer__scene { height: 250px; margin-top: 0; }
  .jc-footer__sticker { top: -38px; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jc-footer__ring { display: none; }
  .jc-footer__hint, .jc-footer__hint.on .jc-footer__hand, .jc-footer__hint.on .jc-footer__tap,
  .jc-footer__bubble, .jc-footer__bubble.on tspan { animation: none !important; transition: none; }
  .jc-footer__bubble { transform: none; }
}