/* =====================================================================
   KY Landmark Realty — animated 3D logo
   The logo is built from five stacked SVG layers (monogram, swoosh, skyline, wordmark, tagline).
   Each layer sits at a different depth, so the whole mark gently turns in 3D.
   1) one-time build-up when the page loads   2) smooth looping motion afterwards
   ===================================================================== */
.klogo { --d: 3px; --lg-navy: #0B2447; position: relative; display: inline-block; line-height: 0; vertical-align: middle; perspective: 800px; }
.klogo--mark { aspect-ratio: 540 / 470; }
.klogo--lockup { aspect-ratio: 1580 / 470; }
.klogo--full { aspect-ratio: 1672 / 700; }
.klogo__stage { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; animation: klogo-sway 14s ease-in-out 2.8s infinite; will-change: transform; }
.klogo__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.klogo__layer--swoosh { transform: translateZ(calc(var(--d) * 1.6)); filter: drop-shadow(0 calc(var(--d) * .5) calc(var(--d) * .7) rgba(120, 80, 10, .3)); }
.klogo__layer--city   { transform: translateZ(calc(var(--d) * 3)); filter: drop-shadow(0 calc(var(--d) * .7) calc(var(--d) * .9) rgba(11, 36, 71, .28)); }
.klogo__layer--word   { transform: translateZ(calc(var(--d) * .6)); }
.klogo__layer--tail   { transform: translateZ(calc(var(--d) * .3)); }

/* ---- loop: smooth 3D turn (starts after the build-up finishes) ---- */
@keyframes klogo-sway {
  0%, 100% { transform: rotateY(0) rotateX(0); }
  25% { transform: rotateY(13deg) rotateX(3deg); }
  75% { transform: rotateY(-13deg) rotateX(-2deg); }
}
/* ---- loop: light sweeping across the gold swoosh ---- */
.klogo .lg-sheen { animation: lg-sheen 5.2s cubic-bezier(.45, 0, .2, 1) 2.4s infinite; }
@keyframes lg-sheen { 0% { translate: -320px 0; } 48%, 100% { translate: 980px 0; } }
/* ---- loop: the roof window glows ---- */
.klogo .lg-pane { transform-box: fill-box; transform-origin: center; animation: lg-pop .6s var(--ease-out-expo) calc(.9s + var(--p) * .09s) backwards, lg-glow 4s ease-in-out calc(2.2s + var(--p) * .45s) infinite; }
@keyframes lg-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45) saturate(1.1); } }
.klogo .lg-tri { animation: lg-glow 4s ease-in-out 3s infinite; }
.klogo .lg-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: lg-bob 3s ease-in-out 2.6s infinite; }
@keyframes lg-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* ---- build-up (runs once) ---- */
.klogo .lg-k, .klogo .lg-y { animation: lg-rise .95s var(--ease-out-expo) backwards; }
.klogo .lg-y { animation-delay: .12s; }
@keyframes lg-rise { from { opacity: 0; translate: 0 26px; } }
@keyframes lg-pop { from { opacity: 0; scale: 0; } }
.klogo .lg-swoosh { animation: lg-draw 1.2s cubic-bezier(.65, 0, .35, 1) .35s backwards; }
@keyframes lg-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.klogo .lg-b { transform-box: fill-box; transform-origin: 50% 100%; animation: lg-grow 1.05s var(--ease-out-expo) backwards; }
.klogo .lg-b1 { animation-delay: .55s; } .klogo .lg-b2 { animation-delay: .68s; } .klogo .lg-b3 { animation-delay: .81s; }
@keyframes lg-grow { from { scale: 1 0; opacity: 0; } }
.klogo .lg-div { transform-box: fill-box; transform-origin: 50% 0; animation: lg-line-y .8s var(--ease-out-expo) .95s backwards; }
@keyframes lg-line-y { from { scale: 1 0; } }
.klogo .lg-rl { transform-box: fill-box; transform-origin: 50% 50%; animation: lg-line-x .9s var(--ease-out-expo) 1.5s backwards; }
@keyframes lg-line-x { from { scale: 0 1; } }
.klogo .lg-ltr { animation: lg-letter .85s var(--ease-out-expo) calc(.9s + var(--i) * .035s) backwards; }
@keyframes lg-letter { from { opacity: 0; translate: 0 20px; } }

/* ---- sizes & placements ---- */
.brand--logo { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
.klogo--header { height: 47px; width: auto; --d: 2.6px; }
.klogo--footer { height: 54px; width: auto; --d: 3px; margin-bottom: 14px; }
.klogo--footer { --lg-navy: #F5EFE6; --lg-stripe: #0E0B08; }
.klogo--panel { width: min(80%, 420px); height: auto; --d: 14px; perspective: 1000px; margin-top: -8%; }
.logo-panel { display: grid; place-items: center; aspect-ratio: 4 / 4.4; border-radius: 200px 200px 26px 26px; background: radial-gradient(420px 260px at 50% 30%, rgba(199, 154, 46, .2), transparent 70%), var(--forest); position: relative; overflow: hidden; }
.logo-panel .klogo { --lg-navy: #F5EFE6; --lg-stripe: #1F3A2E; }
.logo-panel p { position: absolute; left: 0; right: 0; bottom: 11%; margin: 0; padding: 0 30px; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: rgba(245, 239, 230, .9); }
.logo-panel::before { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(245, 239, 230, .22); border-radius: 180px 180px 14px 14px; pointer-events: none; }
@media (max-width: 560px) { .klogo--header { height: 38px; } }
@media (max-width: 340px) { .klogo--header { height: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .klogo__stage, .klogo *, .klogo *::before { animation: none !important; }
}

.footer-logo { height: 54px; width: auto; display: block; margin-bottom: 14px; }