:root {
  --hk-navy: #091129;
  --hk-gold: #a57e45;
  --hk-champagne: #f2e8c9;
}

.hk-preloader {
  --hk-progress: 0%;
  --hk-progress-scale: 0.04;
  --hk-progress-glow: 0%;
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--hk-navy);
  color: var(--hk-champagne);
  pointer-events: auto;
}

.hk-preloader__base,
.hk-preloader__vignette,
.hk-preloader__noise,
.hk-preloader__top-fade,
.hk-preloader__bottom-fade,
.hk-preloader__blueprint,
.hk-preloader__frame,
.hk-preloader__void,
.hk-preloader__content-wrap {
  position: absolute;
  inset: 0;
}

.hk-preloader__base {
  background: #091129;
}

.hk-preloader__vignette {
  background:
    linear-gradient(90deg, rgba(9, 17, 41, 0.78), rgba(9, 17, 41, 0) 22%, rgba(9, 17, 41, 0) 78%, rgba(9, 17, 41, 0.76)),
    linear-gradient(180deg, rgba(242, 232, 201, 0.035), rgba(9, 17, 41, 0) 32%, rgba(9, 17, 41, 0.36));
}

.hk-preloader__noise {
  pointer-events: none;
  opacity: 0.042;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hk-preloader__top-fade {
  inset: 0 0 auto 0;
  height: 9rem;
  background: linear-gradient(180deg, rgba(9, 17, 41, 0.82), rgba(9, 17, 41, 0));
}

.hk-preloader__bottom-fade {
  inset: auto 0 0 0;
  height: 10rem;
  background: linear-gradient(0deg, rgba(9, 17, 41, 0.9), rgba(9, 17, 41, 0));
}

.hk-preloader__blueprint {
  overflow: hidden;
  pointer-events: none;
}

.hk-preloader__blueprint-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hk-preloader.is-revealed .hk-preloader__blueprint-svg {
  opacity: 1;
}

.hk-preloader__contour {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.hk-preloader.is-revealed .hk-preloader__contour {
  animation: hk-preloader-draw var(--dur) var(--delay) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#hk-preloader-progress-path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--hk-progress-scale));
  transition: stroke-dashoffset 0.28s ease-out;
}

.hk-preloader__frame {
  pointer-events: none;
}

.hk-preloader__corner {
  position: absolute;
  width: 2rem;
  height: 2rem;
  opacity: 0;
  transform: scale(1.1);
  transition:
    opacity 1.1s 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.hk-preloader.is-revealed .hk-preloader__corner {
  opacity: 0.56;
  transform: scale(1);
}

.hk-preloader__corner svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hk-preloader__corner--tl {
  left: 1.25rem;
  top: 1.25rem;
}

.hk-preloader__corner--tr {
  right: 1.25rem;
  top: 1.25rem;
  transform: rotate(90deg) scale(1.1);
}

.hk-preloader.is-revealed .hk-preloader__corner--tr {
  transform: rotate(90deg) scale(1);
}

.hk-preloader__corner--bl {
  left: 1.25rem;
  bottom: 1.25rem;
  transform: rotate(-90deg) scale(1.1);
}

.hk-preloader.is-revealed .hk-preloader__corner--bl {
  transform: rotate(-90deg) scale(1);
}

.hk-preloader__corner--br {
  right: 1.25rem;
  bottom: 1.25rem;
  transform: rotate(180deg) scale(1.1);
}

.hk-preloader.is-revealed .hk-preloader__corner--br {
  transform: rotate(180deg) scale(1);
}

.hk-preloader__content-wrap {
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 0 1.5rem;
}

.hk-preloader__content {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 680px;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.55s cubic-bezier(0.76, 0, 0.24, 1), transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

.hk-preloader.is-dismissing .hk-preloader__content {
  opacity: 0;
  transform: scale(0.985);
}

.hk-preloader__logo-wrap {
  margin-bottom: 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1.1s 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.hk-preloader.is-revealed .hk-preloader__logo-wrap {
  opacity: 1;
  transform: translateY(0);
}

.hk-preloader__logo {
  width: min(180px, 62vw);
  max-width: 62vw;
  height: auto;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 18px 32px rgba(5, 9, 20, 0.34));
  user-select: none;
  -webkit-user-drag: none;
}

.hk-preloader__progress-wrap {
  width: 100%;
  padding: 1.5rem 0;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1s 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hk-preloader.is-revealed .hk-preloader__progress-wrap {
  opacity: 1;
  transform: translateY(0);
}

.hk-preloader__progress {
  margin: 1.75rem auto 0;
  display: flex;
  width: 100%;
  max-width: 500px;
  align-items: flex-end;
  gap: 1.25rem;
  text-align: center;
}

.hk-preloader__count,
.hk-preloader__max {
  font-family: var(--font-mono, 'Roboto Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace);
  font-size: 10px;
  color: rgba(165, 126, 69, 0.55);
  line-height: 1;
}

.hk-preloader__line {
  position: relative;
  margin-bottom: 0.25rem;
  height: 1px;
  flex: 1;
  overflow: hidden;
  background: rgba(242, 232, 201, 0.12);
}

.hk-preloader__line-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--hk-progress);
  background: #a57e45;
  transition: width 0.24s ease-out;
}

.hk-preloader__line-glow {
  position: absolute;
  inset: -6px auto -6px 0;
  width: 2rem;
  left: var(--hk-progress-glow);
  background: rgba(242, 232, 201, 0.28);
  filter: blur(8px);
  transition: left 0.24s ease-out;
}

.hk-preloader__progress-spacer {
  margin-top: 1.75rem;
  min-height: 1rem;
}

.hk-preloader__enter {
  position: relative;
  margin-top: 2rem;
  min-height: 3rem;
  min-width: 180px;
  border: 0;
  background: transparent;
  padding: 1rem 2rem;
  outline: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.hk-preloader.is-ready .hk-preloader__enter {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hk-preloader.is-dismissing .hk-preloader__enter {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.hk-preloader__enter-border {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(165, 126, 69, 0.3);
  transition: border-color 0.5s;
}

.hk-preloader__enter-top {
  position: absolute;
  inset: 0.01rem 0.75rem auto;
  height: 1px;
  transform-origin: left;
  transform: scaleX(0);
  background: rgba(242, 232, 201, 0.55);
  transition: transform 0.7s;
}

.hk-preloader__enter-label {
  position: relative;
  font-family: var(--font-mono, 'Roboto Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace);
  font-size: 10px;
  color: #a57e45;
  line-height: 1;
  transition: color 0.5s;
}

.hk-preloader--en .hk-preloader__enter-label {
  letter-spacing: 0.34em;
}

.hk-preloader--fa .hk-preloader__enter-label {
  letter-spacing: normal;
}

.hk-preloader__enter:hover .hk-preloader__enter-border,
.hk-preloader__enter:focus-visible .hk-preloader__enter-border {
  border-color: rgba(165, 126, 69, 0.75);
}

.hk-preloader__enter:hover .hk-preloader__enter-top,
.hk-preloader__enter:focus-visible .hk-preloader__enter-top {
  transform: scaleX(1);
}

.hk-preloader__enter:hover .hk-preloader__enter-label,
.hk-preloader__enter:focus-visible .hk-preloader__enter-label {
  color: #f2e8c9;
}

.hk-preloader__coords {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  z-index: 20;
  display: none;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 1s 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

.hk-preloader.is-revealed .hk-preloader__coords {
  opacity: 1;
  transform: translateY(0);
}

.hk-preloader__coords {
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono, 'Roboto Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace);
  font-size: 8px;
  letter-spacing: 0.24em;
  color: rgba(165, 126, 69, 0.3);
}

.hk-preloader__diamond {
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: rgba(165, 126, 69, 0.35);
}

.hk-preloader__void {
  z-index: 70;
  opacity: 0;
  background: #091129;
  pointer-events: none;
  transition: opacity 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}

.hk-preloader.is-dismissing .hk-preloader__void {
  opacity: 1;
}

.hk-preloader.is-dismissing {
  pointer-events: none;
}

.hk-preloader.is-hidden {
  display: none;
}

html.hk-preloader-done .hk-preloader {
  display: none !important;
}

body.hk-preloader-active {
  overflow: hidden;
}

html.hk-preloader-transitioning #page,
html.hk-preloader-transitioning .site,
html.hk-preloader-transitioning main {
  animation: hk-page-enter-zoom 2.5s ease-out both;
}

/* Homepage parity lock: prevent transition zoom from creating temporary scroll */
html.hk-preloader-transitioning body.home #page,
html.hk-preloader-transitioning body.home .site,
html.hk-preloader-transitioning body.home main,
html.hk-preloader-transitioning body.home #primary,
html.hk-preloader-transitioning body.home .hk-home-main,
html.hk-preloader-transitioning body.front-page #page,
html.hk-preloader-transitioning body.front-page .site,
html.hk-preloader-transitioning body.front-page main,
html.hk-preloader-transitioning body.front-page #primary,
html.hk-preloader-transitioning body.front-page .hk-home-main {
  animation: none !important;
  transform: none !important;
}

/* Keep homepage non-scrollable throughout preloader + transition states */
html.hk-preloader-transitioning,
html.hk-preloader-transitioning body.home,
html.hk-preloader-transitioning body.front-page,
body.home.hk-preloader-active,
body.front-page.hk-preloader-active {
  overflow: hidden !important;
}

html.hk-preloader-transitioning body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999990;
  pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% 62%, rgba(20, 36, 86, 0.34), rgba(9, 17, 41, 0) 72%),
    linear-gradient(180deg, rgba(4, 8, 19, 0.62), rgba(9, 17, 41, 0.18) 38%, rgba(9, 17, 41, 0.72)),
    #091129;
  opacity: 1;
  animation: hk-page-transition-overlay 2.5s ease-out both;
}

.hk-geo-ticker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  z-index: 45;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(8px);
}

.hk-geo-ticker.is-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.hk-preloader-active .hk-geo-ticker,
body.home .hk-geo-ticker,
body.front-page .hk-geo-ticker,
body:has(.hk-home-main) .hk-geo-ticker {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
}

.hk-geo-ticker__viewport {
  overflow: hidden;
  border-top: 1px solid rgba(165, 126, 69, 0.16);
  border-bottom: 1px solid rgba(165, 126, 69, 0.16);
  background: rgba(255, 255, 255, 0.035);
  padding: 0.5rem 0;
  backdrop-filter: blur(2px);
}

.hk-geo-ticker__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: hk-coordinate-ticker 42s linear infinite;
}

.hk-geo-ticker__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2rem;
  padding: 0 1rem;
}

.hk-geo-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono, 'Roboto Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace);
  font-size: 9px;
  line-height: 1;
  color: rgba(242, 232, 201, 0.46);
}

.hk-geo-ticker__item.is-en {
  letter-spacing: 0.22em;
}

.hk-geo-ticker__item.is-fa {
  letter-spacing: normal;
}

.hk-geo-ticker__dot {
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: rgba(165, 126, 69, 0.45);
}

@keyframes hk-preloader-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hk-coordinate-ticker {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes hk-page-enter-zoom {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes hk-page-transition-overlay {
  0% {
    opacity: 1;
  }
  62% {
    opacity: 0.98;
  }
  100% {
    opacity: 0;
  }
}

@media (min-width: 768px) {
  .hk-preloader__corner {
    width: 2.75rem;
    height: 2.75rem;
  }

  .hk-preloader__corner--tl {
    left: 2.5rem;
    top: 2.5rem;
  }

  .hk-preloader__corner--tr {
    right: 2.5rem;
    top: 2.5rem;
  }

  .hk-preloader__corner--bl {
    left: 2.5rem;
    bottom: 2.5rem;
  }

  .hk-preloader__corner--br {
    right: 2.5rem;
    bottom: 2.5rem;
  }

  .hk-preloader__logo {
    width: min(240px, 260px);
    max-width: 260px;
  }

  .hk-preloader__coords {
    display: flex;
    bottom: 1.5rem;
  }

  .hk-geo-ticker {
    bottom: 1.75rem;
  }

  .hk-geo-ticker__group {
    gap: 3rem;
    padding: 0 1.25rem;
  }

  .hk-geo-ticker__item {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hk-preloader,
  .hk-preloader *,
  .hk-geo-ticker,
  .hk-geo-ticker * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hk-geo-ticker__track {
    animation: none !important;
  }
}
