/* Only the permitted palette and central identity differ from Variation 1. */
@property --entry-progress { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
:root {
  --color-bg: #f4e8cf;
  --color-bg-alt: #2f5b67;
  --color-title: #17384a;
}
body.demo-1 {
  background:
    url("../img/noise.png"),
    radial-gradient(circle at center,
      #f4e8cf 0%,
      #e8d8bc 32%,
      #6f8f95 62%,
      #2f5b67 82%,
      #17384a 100%);
  background-size: 150px, 100% 100%;
}
.headings { width: max-content; }
.identity-link {
  display: flex;
  width: max-content;
  align-items: center;
  flex-direction: column;
  transform: scale(var(--identity-scale, 1));
  transform-origin: center;
  color: #17384a;
  text-decoration: none;
}
.identity-link:hover { color: #17384a; text-decoration: none; }
.identity-link:focus-visible { outline: 2px solid #17384a; outline-offset: 12px; }
.headings__main {
  white-space: nowrap;
  font-size: clamp(2.3rem, 4.4vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-transform: none;
  margin: 0;
  font-weight: 400;
}
.headings__main em { font-style: normal; color: #ad854e; }
.identity-descriptor {
  margin: .25rem 0 0;
  font-size: clamp(.64rem, .8vw, .78rem);
  line-height: 1.45;
  letter-spacing: .04em;
  font-family: Arial, sans-serif;
  font-weight: 500;
  white-space: nowrap;
}
.identity-descriptor b { color: #ad854e; font-weight: 400; padding: 0 .18em; }
.identity-logo { width: clamp(42px, 4.8vw, 62px); height: auto; margin-top: .6rem; }
.identity-logo-frame { position: relative; display: block; width: clamp(42px, 4.8vw, 62px); aspect-ratio: 1; margin-top: .1rem; border-radius: 50%; transform-origin: center; }
.identity-logo-frame .identity-logo { position: relative; z-index: 1; display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }
.identity-link.is-entering .identity-logo-frame { --entry-progress: 0%; background: conic-gradient(#b3473f var(--entry-progress), #152c33 var(--entry-progress)); box-shadow: 0 0 0 0 rgba(232, 216, 188, .42); animation: identity-waiting-pulse 1.35s ease-in-out infinite; transition: --entry-progress .22s linear; }
.identity-link.is-entering .identity-logo-frame::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: #f4e8cf; }
.group-waiting { position: relative; width: 0; height: 0; will-change: transform; }
body.entry-waiting .group-waiting { animation: entry-images-continue 20s linear infinite; }
@keyframes entry-images-continue { to { transform: rotate(360deg); } }
@keyframes identity-waiting-pulse { 0%, 100% { transform: scale(.96); box-shadow: 0 0 0 0 rgba(232, 216, 188, .42); } 50% { transform: scale(1.09); box-shadow: 0 0 0 10px rgba(232, 216, 188, 0); } }
@media (prefers-reduced-motion: reduce) { .identity-link.is-entering .identity-logo-frame, body.entry-waiting .group-waiting { animation: none; } }
@media (max-width: 53em) {
  .headings__main { font-size: clamp(1.75rem, 4.1vw, 2.4rem); }
  .identity-descriptor { font-size: .55rem; letter-spacing: -.015em; }
  .identity-descriptor b { padding: 0 .06em; }
}