/* Footer lens. Proportions, edge lighting and silk follow the owner's reference.
   The clear core, bevel and reflected light are independent optical layers. */
.footer.container {
  position: relative; isolation: isolate; z-index: 2;
  width: min(1792px, calc(100% - 96px));
  padding: 112px 0 110px;
}
.footer-stage { position: relative; isolation: isolate; }
.footer-ribbons {
  position: absolute; z-index: -2; pointer-events: none;
  /* Overscan is measured from the viewport, independently of the content width.
     The animated paths enter from offscreen; their cut planes stay offscreen. */
  left: calc(50% - 50vw - 96px); top: -140px;
  width: calc(100vw + 192px); max-width: none; height: calc(100% + 140px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18% 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18% 86%, transparent);
}
.scene-layer { transition: opacity 1.1s; }
body[data-scene=footer] .scene-layer { opacity: .16; }
.footer-silk { transform-origin: 50% 50%; animation: footer-silk-drift 30s ease-in-out infinite alternate; animation-play-state: paused; }
.footer-silk--lower { animation-duration: 37s; animation-delay: -13s; }
body[data-scene=footer] .footer-silk { animation-play-state: running; }
@keyframes footer-silk-drift { from { transform: translate3d(-6px, -6px, 0) rotate(-.45deg); } to { transform: translate3d(7px, 6px, 0) rotate(.45deg); } }
.footer-halo {
  position: absolute; z-index: -1; pointer-events: none; inset: -80px;
  background:
    radial-gradient(155px 24px at 24% 80px, #7eb4ff70, transparent 76%),
    radial-gradient(145px 23px at 69% 80px, #b6a4ff80, transparent 76%),
    radial-gradient(95px 60px at calc(100% - 105px) 92px, #ffc4b64a, transparent 75%),
    radial-gradient(110px 34px at 12% calc(100% - 80px), #ffb8a34d, transparent 76%),
    radial-gradient(180px 26px at 72% calc(100% - 80px), #7fa7ff8c, transparent 76%);
}
.footer-panel.glass {
  --glass-core: #080f1994;
  border-radius: 68px; border-color: #b8d5ff52;
  padding: clamp(52px, 4.4vw, 82px) clamp(40px, 4.9vw, 94px) 30px;
  background:
    radial-gradient(ellipse at 1% 0%, #b5d9ff0e, transparent 42%),
    radial-gradient(ellipse at 100% 100%, #7979d92a, transparent 48%),
    linear-gradient(115deg, #101c2a5e, #080e16b3 42%, #1016268f);
  backdrop-filter: blur(10px) saturate(1.5) brightness(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.5) brightness(1.08);
  box-shadow: inset 0 1px 1px #e0eeffa3, inset 0 -1px 1px #bdc9ff8a, inset 1px 0 1px #b6d7ff38, inset -1px 0 1px #c5b8ff40, 0 24px 80px -24px #000a;
}
.footer-panel::before {
  width: 520px; height: 520px;
  background: radial-gradient(ellipse, #f2faff3b 0%, #b4d4ff1c 18%, #ae9fff08 42%, transparent 67%);
  transform: translate3d(calc(var(--mx) - 260px), calc(var(--my) - 260px), 0);
  opacity: calc(var(--spec-opacity) * .85);
}
.footer-panel::after {
  z-index: -1; opacity: .5;
  background: linear-gradient(117deg, transparent 36%, #c3e3ff03 43%, #e0efff0c 48%, transparent 56%);
}
.footer-panel > .glass-optics { inset: 0; padding: 3px; opacity: .5; }
.footer-panel > .glass-depth {
  inset: 2px; border: 0; z-index: -1;
  background: linear-gradient(180deg, #b3d4ff05, transparent 15% 78%, #9d8bff05);
  box-shadow: inset 0 6px 16px -13px #d4e9ffcc, inset 0 -6px 18px -14px #c0c9ffb3;
}
.footer-panel > .glass-edge {
  padding: 1.1px; opacity: 1;
  background:
    radial-gradient(155px 12px at 21% 0%, #fff 2%, #e6f6ff 12%, #8cb9ff9c 38%, transparent 94%),
    radial-gradient(140px 11px at 71% 0%, #fff 1%, #e6dcff 15%, #a898ff80 44%, transparent 93%),
    radial-gradient(90px 65px at 98% 1%, #ffebe0, #ffc0ae96 30%, transparent 93%),
    radial-gradient(120px 18px at 8% 100%, #fff 2%, #ffe1d7 12%, #ffb2a187 44%, transparent 94%),
    radial-gradient(170px 13px at 75% 100%, #fff 2%, #e1f4ff 14%, #85b3ffc9 40%, transparent 94%),
    linear-gradient(130deg, #cfe8ffb8, #8cadff35 31%, #a99bff59 70%, #c7d5ffca);
}
.footer-panel > .glass-shimmer { padding: 1px; opacity: .8; }
.footer-panel > .glass-shimmer::before { animation-duration: 38s; }
.footer-glints { position: absolute; z-index: 5; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.rim-light { --rim-color: #99c8ff; position: absolute; top: 0; width: clamp(80px, 8vw, 150px); height: 2px; transform: translateX(-50%); }
.rim-light::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--rim-color) 23%, #fff 47% 53%, var(--rim-color) 77%, transparent); filter: drop-shadow(0 0 4px var(--rim-color)); }
.rim-light::after { content: ''; position: absolute; inset: -11px -8px; background: radial-gradient(ellipse, #ffffff80, transparent 16%), radial-gradient(ellipse, var(--rim-color), transparent 67%); opacity: .55; }
.rim-light--ice { left: 21%; }.rim-light--violet { left: 71%; --rim-color: #c2adff; width: 110px; }
.rim-light--peach { left: 93%; --rim-color: #ffbcab; width: 90px; }
.rim-light--warm { left: 8%; top: auto; bottom: 0; --rim-color: #ffc4b4; width: 110px; }
.rim-light--blue { left: 75%; top: auto; bottom: 0; }
.footer-caustics {
  position: absolute; pointer-events: none; z-index: -1; inset: 0; border-radius: inherit;
  background:
    radial-gradient(200px 33px at 21% 0, #92c1ff3d, transparent 77%),
    radial-gradient(180px 29px at 71% 0, #b5a3ff40, transparent 76%),
    radial-gradient(130px 110px at 100% 0, #ffc2af27, transparent 75%),
    radial-gradient(170px 48px at 8% 100%, #ffc6b534, transparent 80%),
    radial-gradient(260px 65px at 75% 100%, #92b8ff55, transparent 78%);
}
.footer-top {
  grid-template-columns: minmax(0, 1.75fr) minmax(0, .82fr) minmax(0, 1.26fr) minmax(0, .83fr);
  gap: clamp(24px, 2.5vw, 48px); padding-bottom: clamp(44px, 4vw, 76px);
}
.footer-brand-block { padding-right: 18px; position: relative; }
.footer-brand-block::after { content: ''; position: absolute; top: 5px; right: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, #bdcfff13 20% 75%, transparent); }
.footer .brand--footer { gap: 16px; height: 94px; }
.footer .brand--footer .brand-mark { width: 94px; height: 94px;   }
.footer .brand--footer .brand-wordmark { font-size: clamp(40px, 3.3vw, 62px); letter-spacing: -.06em; }
.footer-brand-block > p { margin-top: 19px; font-size: clamp(27px, 2.22vw, 42px); line-height: 1.28; font-weight: 600; letter-spacing: -.04em; }
.footer-column { padding-top: 9px; gap: 21px; }
.footer-column > span { margin-bottom: 12px; color: #b5c2e2; font-size: clamp(18px, 1.5vw, 28px); font-weight: 600; letter-spacing: -.025em; }
.footer-column > a,.footer-column > button { font-size: clamp(15px, 1.26vw, 24px); line-height: 1.45; min-height: 30px; color: #edf1fa; letter-spacing: -.025em; transition: color .25s, transform .3s var(--ease); }
.footer-column > a:hover,.footer-column > button:hover { color: #d9ceff; transform: translate3d(3px, 0, 0); }
.footer-column > a:active,.footer-column > button:active { transform: translate3d(1px, 0, 0); }
.footer-column .footer-github {
  width: calc(100% + 16px); margin: -5px 0 -1px -16px; padding: 10px 13px 11px 16px; min-height: 65px;
  display: flex; align-items: center; gap: 12px; position: relative; isolation: isolate; border-radius: 29px;
  border: 1px solid #b5c6ff73; background: radial-gradient(ellipse at 95% 0, #a8b1ff40, transparent 70%), linear-gradient(135deg, #e1f2ff0c, #070d1b8c 55%, #8b92ec16);
  box-shadow: inset 0 1px 1px #eaf4ff5c, inset 0 -1px 1px #b6c5ff90, 0 7px 16px #0002;
  transition: background .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.footer-github > .icon:first-child { width: 31px; height: 31px; color: #fff; }
.footer-github > span { display: block; font-size: clamp(16px, 1.17vw, 22px); line-height: 1.22; }
.footer-github small { display: block; margin-top: 2px; font-size: clamp(11px, .88vw, 17px); white-space: nowrap; }
.footer-github > .footer-external { width: 17px; height: 17px; margin-left: auto; }
.footer-column .footer-github:hover { border-color: #d8e5ffc2; box-shadow: inset 0 1px 1px #fff9, inset 0 -1px 1px #c2ceff, 0 0 24px -8px #a4b7ff50; transform: translate3d(0, -2px, 0); }
.footer-bottom { padding-top: 26px; min-height: 74px; font-size: clamp(12px, 1.04vw, 20px); color: #dce3f1; letter-spacing: -.025em; border-top-color: #b7ccff38; }
.footer-bottom .footer-to-top { display: grid; width: 45px; height: 45px; border-color: #b5c6ff7a; box-shadow: inset 0 1px 1px #d3e4ff1a; transition: background .25s, transform .3s var(--ease); }
.footer-to-top .icon { width: 22px; height: 22px; transform: rotate(-90deg); color: #e3ecff; }
.footer-bottom .footer-to-top:hover { transform: translate3d(0, -3px, 0); background: #a9c8ff15; }
@media (min-width: 1700px) { .footer.container { padding-top: 145px; padding-bottom: 145px; }.footer-panel.glass { padding-bottom: 36px; }.footer .brand--footer { height: 116px; }.footer .brand--footer .brand-mark { width: 116px; height: 116px;   }.footer-top { padding-bottom: 65px; }.footer-column { gap: 24px; }.footer-column .footer-github { min-height: 80px; padding-block: 14px; }.footer-bottom { padding-top: 30px; }.footer-bottom .footer-to-top { width: 55px; height: 55px; } }
@media (max-width: 1150px) {
  .footer.container { width: calc(100% - 64px); padding-block: 90px; }
  .footer-panel.glass { border-radius: 48px; padding: 43px 36px 24px; }
  .footer-top { grid-template-columns: 1.15fr .85fr 1.15fr; gap: 32px; padding-bottom: 38px; }
  .footer-brand-block { grid-row: span 2; }
  .footer-column:last-child { grid-column: 2 / -1; padding-top: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 25px; }
  .footer-column:last-child > span { flex-basis: 100%; margin-bottom: 0; }
  .footer .brand--footer { height: 76px; gap: 8px; }
  .footer .brand--footer .brand-mark { width: 65px; height: 65px;   }
  .footer .brand--footer .brand-wordmark { font-size: 35px; }
  .footer-brand-block > p { font-size: 27px; margin-top: 16px; }
  .footer-column > span { font-size: 19px; }.footer-column > a,.footer-column > button { font-size: 16px; }
  .footer-github small { font-size: 11px; }.footer-github > span { font-size: 16px; }.footer-github > .icon:first-child { width: 26px; height: 26px; }
}
@media (max-width: 760px) {
  .footer.container { width: calc(100% - 40px); padding-block: 72px; }
  .footer-panel.glass { border-radius: 38px; padding: 32px 27px 23px; }
  .footer-top { grid-template-columns: 1fr 1.38fr; gap: 32px 26px; padding-bottom: 30px; }
  .footer-brand-block { grid-column: 1 / -1; grid-row: auto; padding-right: 0; padding-bottom: 28px; border-bottom: 1px solid #b6ceff25; }
  .footer-brand-block::after { display: none; }
  .footer .brand--footer { height: 78px; gap: 13px; }
  .footer .brand--footer .brand-wordmark { font-size: 39px; }
  .footer-brand-block > p { margin-top: 12px; font-size: 29px; }
  .footer-column { padding-top: 0; gap: 16px; }
  .footer-column > span { font-size: 18px; margin-bottom: 3px; }
  .footer-column > a,.footer-column > button { font-size: 15px; min-height: 32px; }
  .footer-column:last-child { grid-column: 1 / -1; }
  .footer-column .footer-github { width: 100%; margin: 0; padding: 11px; min-height: 66px; border-radius: 22px; gap: 8px; }
  .footer-github > span { font-size: 14px; }.footer-github small { font-size: 10px; white-space: normal; line-height: 1.4; }
  .footer-github > .icon:first-child { width: 24px; height: 24px; }.footer-github > .footer-external { width: 14px; height: 14px; }
  .footer-bottom { align-items: center; flex-wrap: nowrap; gap: 15px; padding-top: 22px; font-size: 11px; line-height: 1.8; }
  .footer-bottom > span { max-width: 245px; }.footer-bottom .footer-to-top { flex: none; width: 42px; height: 42px; }
}
@media (max-width: 380px) {
  .footer.container { width: calc(100% - 28px); }.footer-panel.glass { padding-inline: 21px; border-radius: 32px; }
  .footer-top { gap: 30px 19px; }.footer .brand--footer { gap: 7px; }.footer .brand--footer .brand-wordmark { font-size: 35px; }
  .footer-brand-block > p { font-size: 26px; }.footer-column > a,.footer-column > button { font-size: 13px; }.footer-column > span { font-size: 16px; }
  .footer-github > .icon:first-child { width: 21px; height: 21px; }.footer-github > .footer-external { display: none; }
}
@supports not (backdrop-filter: blur(1px)) { .footer-panel.glass { background-color: #09101def; } }
@media (prefers-reduced-motion: reduce) {
  .footer-silk,.footer-panel > .glass-shimmer::before { animation: none; }
  .footer-panel::before { opacity: 0; }
  .footer-column > a:hover,.footer-column > button:hover,.footer-bottom .footer-to-top:hover { transform: none; }
}