/* Performance-first route choreography. */

:root {
  --hk-route-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --hk-route-exit: cubic-bezier(0.7, 0, 0.84, 0);
}

/* Cross-page motion: keep navigation anchored and animate only the main surface. */
html.hk-site-entering body > main,
html.hk-site-leaving body > main {
  transform-origin: 50% 12%;
  will-change: transform, opacity;
}

html.hk-site-entering.hk-site-forward body > main {
  animation: hk-site-enter-forward 420ms var(--hk-route-enter) both;
}

html.hk-site-entering.hk-site-backward body > main {
  animation: hk-site-enter-backward 420ms var(--hk-route-enter) both;
}

html.hk-site-leaving.hk-site-forward body > main {
  animation: hk-site-leave-forward 200ms var(--hk-route-exit) both;
  pointer-events: none;
}

html.hk-site-leaving.hk-site-backward body > main {
  animation: hk-site-leave-backward 200ms var(--hk-route-exit) both;
  pointer-events: none;
}

html.hk-site-entering::after,
html.hk-site-leaving::after {
  content: "";
  position: fixed;
  z-index: 19;
  inset: 0;
  pointer-events: none;
  background: oklch(0.25 0.055 246 / 0.11);
}

html.hk-site-entering::after {
  animation: hk-site-veil-out 420ms var(--hk-route-enter) both;
}

html.hk-site-leaving::after {
  animation: hk-site-veil-in 200ms linear both;
}

html.hk-site-entering .blur-enter {
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.atelier-index nav .glass-panel,
.atelier-about nav .glass-panel {
  view-transition-name: hk-site-navigation;
  max-width: 80rem !important;
  border: 1px solid oklch(0.88 0.016 226 / 0.9) !important;
  border-radius: 12px !important;
  background: oklch(0.985 0.008 218 / 0.84) !important;
  box-shadow: 0 8px 8px oklch(0.2 0.05 251 / 0.07) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.atelier-about nav a,
.atelier-about #nav-network-wrap button,
.atelier-about #lang-toggle,
.atelier-about #mobile-menu-btn {
  color: oklch(0.2 0.052 251) !important;
  font-family: "Chakra Petch", "Aptos", sans-serif;
  font-weight: 700 !important;
  letter-spacing: 0.025em;
}

.atelier-about nav a:hover,
.atelier-about #nav-network-wrap button:hover,
.atelier-about #lang-toggle:hover {
  color: oklch(0.47 0.13 250) !important;
}

.atelier-about nav a.nav-inquiry-cta {
  color: oklch(0.2 0.052 251) !important;
  background: oklch(0.995 0.004 218) !important;
  border: 1px solid oklch(0.72 0.095 225 / 0.72) !important;
  box-shadow: none !important;
}

.atelier-about nav a.nav-inquiry-cta:hover {
  color: oklch(0.975 0.012 218) !important;
  background: oklch(0.47 0.13 250) !important;
  border-color: oklch(0.47 0.13 250) !important;
  transform: translateY(-1px);
}

.atelier-about .nav-dropdown > div,
.atelier-about #lang-menu,
.atelier-about #mobile-menu-panel {
  border-color: oklch(0.75 0.03 226 / 0.8) !important;
  border-radius: 12px !important;
  background: oklch(0.99 0.006 218 / 0.98) !important;
  box-shadow: 0 8px 8px oklch(0.2 0.05 251 / 0.08) !important;
}

/* Keep the two brand heroes on one responsive display scale. */
.atelier-index .at-hero h1,
.atelier-about .about-display {
  font-size: clamp(3rem, 5.7vw, 6rem);
}

::view-transition-group(hk-site-navigation) {
  z-index: 100;
  animation: none;
}

::view-transition-old(hk-site-navigation) {
  animation: none;
  opacity: 0;
}

::view-transition-new(hk-site-navigation) {
  animation: none;
  opacity: 1;
}

::view-transition-old(root) {
  animation: hk-route-root-out 160ms linear both;
}

::view-transition-new(root) {
  animation: hk-route-root-in 360ms var(--hk-route-enter) both;
}

html.hk-to-about body.atelier-index::after {
  content: "";
  position: fixed;
  z-index: 45;
  inset: 0;
  pointer-events: none;
  background: oklch(0.94 0.035 218 / 0.58);
  animation: hk-home-exit-wash 240ms linear both;
  will-change: opacity;
}

html.hk-to-about body.atelier-index .at-hero-copy {
  opacity: 0;
  transform: translate3d(-1rem, 0, 0);
  transition: opacity 180ms linear, transform 240ms var(--hk-route-exit);
}

html.hk-to-about body.atelier-index .at-hero-art {
  opacity: 0.88;
  transform: translate3d(1rem, 0, 0) scale(1.012);
  transition: opacity 200ms linear, transform 240ms var(--hk-route-exit);
}

html.hk-to-about body.atelier-index .at-hero-footer {
  opacity: 0;
  transform: translate3d(0, 0.45rem, 0);
  transition: opacity 160ms linear, transform 220ms var(--hk-route-exit);
}

html.hk-to-home body.atelier-about .about-hero-copy {
  opacity: 0;
  transform: translate3d(-0.75rem, 0, 0);
  transition: opacity 160ms linear, transform 220ms var(--hk-route-exit);
}

html.hk-to-home body.atelier-about .about-hero-media {
  opacity: 0.88;
  transform: translate3d(0.75rem, 0, 0) scale(1.008);
  transition: opacity 180ms linear, transform 220ms var(--hk-route-exit);
}

html.hk-to-home body.atelier-about .about-hero-proof {
  opacity: 0;
  transform: translate3d(0, 0.4rem, 0);
  transition: opacity 150ms linear, transform 200ms var(--hk-route-exit);
}

html.hk-from-about body.atelier-index .at-hero h1 > span {
  animation: none;
  opacity: 0;
}

html.hk-from-about body.atelier-index .at-hero h1 > span.hk-type-line {
  opacity: 1;
  min-height: 1em;
}

html.hk-from-about body.atelier-index .at-hero h1 > span.hk-type-line.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.045em;
  height: 0.72em;
  margin-left: 0.08em;
  background: currentColor;
  vertical-align: -0.04em;
  animation: hk-home-caret 520ms steps(1, end) infinite;
}

html.hk-from-home body.atelier-about::before {
  content: "";
  position: fixed;
  z-index: 40;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 15%, oklch(0.82 0.08 214 / 0.58), transparent 28rem),
    linear-gradient(135deg, oklch(0.98 0.008 218), oklch(0.92 0.04 219));
  animation: hk-home-surface-slide 520ms var(--hk-route-enter) both;
  will-change: transform;
}

html.hk-from-home body.atelier-about.about-ready .about-hero.about-reveal,
html.hk-from-home body.atelier-about.about-ready .about-hero.about-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

html.hk-from-home body.atelier-about .about-kicker {
  animation: hk-about-soft-in 360ms 70ms var(--hk-route-enter) both;
}

html.hk-from-home body.atelier-about .about-title-line {
  animation: hk-about-title-line-in 460ms 60ms var(--hk-route-enter) both;
  will-change: transform, opacity;
}

html.hk-from-home body.atelier-about .about-title-line:nth-child(2) {
  animation-delay: 105ms;
}

html.hk-from-home body.atelier-about .about-lede {
  animation: hk-about-soft-in 420ms 135ms var(--hk-route-enter) both;
}

html.hk-from-home body.atelier-about .about-hero-actions {
  animation: hk-about-soft-in 400ms 180ms var(--hk-route-enter) both;
}

html.hk-from-home body.atelier-about .about-hero-media {
  animation: hk-about-media-in 520ms 40ms var(--hk-route-enter) both;
  will-change: transform, opacity;
}

html.hk-from-home body.atelier-about .about-hero-proof {
  animation: hk-about-proof-in 380ms 220ms var(--hk-route-enter) both;
}

@keyframes hk-route-root-out {
  to { opacity: 0.86; }
}

@keyframes hk-route-root-in {
  from { opacity: 0.86; }
  to { opacity: 1; }
}

@keyframes hk-site-enter-forward {
  from { opacity: 0; transform: translate3d(1.25rem, 0, 0) scale(0.995); }
  to { opacity: 1; transform: none; }
}

@keyframes hk-site-enter-backward {
  from { opacity: 0; transform: translate3d(-1.25rem, 0, 0) scale(0.995); }
  to { opacity: 1; transform: none; }
}

@keyframes hk-site-leave-forward {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(-0.8rem, 0, 0) scale(0.997); }
}

@keyframes hk-site-leave-backward {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(0.8rem, 0, 0) scale(0.997); }
}

@keyframes hk-site-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hk-site-veil-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes hk-home-exit-wash {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hk-home-surface-slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100%, 0, 0); }
}

@keyframes hk-about-soft-in {
  from { opacity: 0; transform: translate3d(0, 0.65rem, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes hk-about-title-line-in {
  from { opacity: 0; transform: translate3d(0, 0.34em, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes hk-about-media-in {
  from { opacity: 0; transform: translate3d(1.5rem, 0, 0) scale(1.012); }
  to { opacity: 1; transform: none; }
}

@keyframes hk-about-proof-in {
  from { opacity: 0; transform: translate3d(0, 0.45rem, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes hk-home-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@media (max-width: 767px) {
  .atelier-index .at-hero h1,
  .atelier-about .about-display {
    font-size: clamp(2.55rem, 12vw, 4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(hk-site-navigation) {
    animation-duration: 0.01ms !important;
  }

  html.hk-to-about *,
  html.hk-from-home *,
  html.hk-to-home *,
  html.hk-from-about *,
  html.hk-site-entering *,
  html.hk-site-leaving * {
    animation: none !important;
    transition: none !important;
  }

  html.hk-to-about body::after,
  html.hk-from-home body::before,
  html.hk-site-entering::after,
  html.hk-site-leaving::after {
    display: none !important;
  }
}