/* The existing footer content sits over the footer clip. Since 18.09.2026 the
   clip is a Blender render of the site's own mark (the hero's glass build in
   the crystal footer's dark studio, lime disc behind the coin), 3840x1080, and
   the banner is 540 CSS px tall so it plays 1:1 on a 2x display: for any page
   up to 1920 CSS px wide the frame is cropped at the sides by object-fit and
   never upscaled (Josef: "placed to the website at 100% in full 1:1 quality
   and size to the render"). The copy and links are anchored to the bottom
   edge rather than pushed down by a 300-640px top padding (Josef, 18.09.:
   "move the whole text + links in the footer closer to the bottom edge"). */
.footer.footer--crystal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  height: 540px;
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 0 22px;
  background: #30362c;
  color: white;
}
.footer--crystal .crystal-banner { position: absolute; inset: 0; z-index: -2; }
.crystal-banner-poster, .crystal-banner-poster img, .crystal-banner-video {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.crystal-banner-video { opacity: 0; }
.footer--crystal.is-ready .crystal-banner-video { opacity: 1; }
.footer--crystal::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* 18.09.2026: the copy hangs from the bottom edge now, so the darkening
     starts under the coin instead of halfway up the mark — but it must be
     solid by the first row of links (the review measured white on the mark's
     lime body at 2.9:1 with a lazier ramp): 0.86 from 62 % down. */
  background: linear-gradient(to bottom, transparent 40%, rgba(10,16,12,.40) 52%, rgba(10,16,12,.86) 62%, rgba(10,16,12,.94));
}
.footer--crystal .brand-text, .footer--crystal .accent,
.footer--crystal .fineprint, .footer--crystal .footer-links a { color: #fff; }
.footer--crystal .footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer--crystal a:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.footer--crystal .section-inner { position: relative; }
/* A small, flat icon button in the banner's corner — not the "Pause
   animation" pill it was (Josef, 15.09.2026: "just a small pause icon"). It
   mirrors the .sc-arrow carousel buttons on the homepage: a 30px circle, a
   hairline border, one glyph, no label. The wordmark sits far below in
   .footer-inner, so the top-right corner covers nothing.
   The visible disc is 30px but the ::after ring pushes the pointer/touch
   target back out to 44px, so "small" costs nothing in reachability. */
.crystal-banner-toggle {
  position: absolute; top: 20px; right: 24px;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
  background: rgba(10,16,12,.55); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .15s, border-color .15s;
}
.crystal-banner-toggle::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.crystal-banner-toggle:hover { background: rgba(10,16,12,.8); border-color: rgba(255,255,255,.85); }
.crystal-banner-toggle svg { display: block; width: 14px; height: 14px; fill: currentColor; }
/* Playing → the pause bars; paused → the play triangle. */
.crystal-banner-toggle .ic-play { display: none; }
.crystal-banner-toggle[data-paused="true"] .ic-pause { display: none; }
.crystal-banner-toggle[data-paused="true"] .ic-play { display: block; }
.crystal-banner-toggle[hidden] { display: none; }
.crystal-banner-toggle:focus-visible { outline: 2px solid white; outline-offset: 3px; }
@media(max-width: 640px) {
  .footer.footer--crystal { height: auto; padding-top: 320px; }
  .footer--crystal::before { background: linear-gradient(transparent, rgba(10,16,12,.2) 22%, rgba(10,16,12,.86) 40%, rgba(10,16,12,.94)); }
  .crystal-banner-poster img, .crystal-banner-video { height: 420px; mask-image: linear-gradient(#000 65%, transparent); }
}

.footer--crystal .footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.footer--crystal .footer-inner .fineprint { max-width: none; }
.footer--crystal .footer-links { max-width: none; width: 100%; margin-top: 28px; }
@media (max-width: 640px) {
  .footer--crystal .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer--crystal .footer-links { margin-top: 0; }
}