@font-face { font-family: Barlow; font-weight: 500; src: url('/clau-city/fonts/Barlow-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Barlow; font-weight: 700 900; src: url('/clau-city/fonts/Barlow-Bold.ttf') format('truetype'); font-display: swap; }
/* Match the native photographic field guide during the initial WASM download. */
#cc-loading { --ccl-margin: clamp(24px, 4.5vw, 64px); align-items: flex-start; background: #071221; }
#cc-loading .ccl-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity .6s ease; }
#cc-loading .ccl-photo.is-ready { opacity: 1; }
#cc-loading .ccl-photo-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,5,14,.97), transparent 73%), linear-gradient(90deg, rgba(2,8,22,.35), transparent 78%); }
#cc-loading .ccl-glow, #cc-loading .ccl-planet { display: none; }
#cc-loading .ccl-logo { margin: var(--ccl-margin) 0 0 var(--ccl-margin); font-size: clamp(26px, 3.3vw, 48px); padding: 0; }
#cc-loading .ccl-line { margin: 10px 0 0 var(--ccl-margin); width: clamp(180px, 23vw, 330px); }
#cc-loading .ccl-sub { margin: 12px 0 0 var(--ccl-margin); font-size: 10px; letter-spacing: 2.5px; }
#cc-loading .ccl-guide { position: absolute; left: var(--ccl-margin); right: var(--ccl-margin); bottom: calc(var(--ccl-margin) + 110px); max-width: 660px; }
#cc-loading .ccl-guide-number { color: #8cdaff; font-size: 11px; letter-spacing: 2.4px; font-weight: 700; margin-bottom: 24px; }
#cc-loading .ccl-guide h2 { font-size: clamp(27px, 4vw, 60px); font-weight: 800; line-height: 1.1; margin: 0 0 22px; letter-spacing: -.02em; text-wrap: balance; }
#cc-loading .ccl-guide p { color: #d9e5f2; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; margin: 0; max-width: 630px; }
#cc-loading .ccl-bar-wrap { left: var(--ccl-margin); right: var(--ccl-margin); top: auto; bottom: var(--ccl-margin); width: auto; transform: none; }
#cc-loading .ccl-label { font-size: 11px; letter-spacing: 1.2px; }
#cc-loading .ccl-bar { height: 4px; margin-top: 14px; }
@media (max-height: 500px) { #cc-loading .ccl-guide { bottom: 95px; } #cc-loading .ccl-guide-number { margin-bottom: 10px; } #cc-loading .ccl-guide h2 { font-size: 27px; margin-bottom: 10px; } #cc-loading .ccl-sub, #cc-loading .ccl-line { display: none; } }
@media (prefers-reduced-motion: reduce) { #cc-loading, #cc-loading .ccl-photo, #cc-loading .ccl-bar i { transition: none; } #cc-loading .ccl-dot, #cc-loading .ccl-bar i { animation: none; } }