/* AJOY-inspired motion language for the Zhiben clone: atmosphere, not a visual copy. */
:root {
  --zb-ajoy-ink: #0a0909;
  --zb-ajoy-gold: #d1ad87;
  --zb-ajoy-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --zb-ajoy-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

body[data-zb-ajoy-motion='ready'] {
  background: var(--zb-ajoy-ink);
}

#zb-ajoy-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  opacity: 0.56;
  background:
    radial-gradient(62% 46% at 82% 15%, rgba(194, 117, 45, 0.22), transparent 72%),
    radial-gradient(44% 42% at 8% 72%, rgba(200, 152, 100, 0.11), transparent 72%),
    linear-gradient(120deg, rgba(0, 0, 0, 0.13), transparent 40%, rgba(0, 0, 0, 0.18));
  mix-blend-mode: screen;
  will-change: transform, opacity;
  transition: opacity 260ms var(--zb-ajoy-ease-out);
  animation: zb-ajoy-atmosphere-breathe 7s ease-in-out infinite alternate;
}

@keyframes zb-ajoy-atmosphere-breathe {
  from { filter: saturate(0.88) brightness(0.9); }
  to { filter: saturate(1.12) brightness(1.12); }
}

/* A dark, warm entry state is the shared reference point with AJOY; this stays Zhiben's own mark and palette. */
[data-if='introOn'] > div {
  background: #080606 !important;
}

[data-if='introOn'] > div::before {
  content: '';
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background:
    radial-gradient(36% 32% at 50% 54%, rgba(209, 135, 67, 0.34), transparent 70%),
    radial-gradient(45% 58% at 64% 22%, rgba(154, 69, 22, 0.2), transparent 76%);
  filter: blur(16px);
  opacity: 0;
  animation: zb-ajoy-intro-bloom 1.65s var(--zb-ajoy-ease-out) both;
}

[data-if='introOn'] > div::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(238, 194, 140, 0.16) 48%, transparent 61%);
  transform: translateX(-120%) skewX(-17deg);
  animation: zb-ajoy-intro-sweep 1.2s 360ms var(--zb-ajoy-ease-out) both;
}

[data-if='introOn'] > div > div,
[data-if='introOn'] > div > button {
  z-index: 1;
}

[data-if='introOn'] img[src*='zhiben-logo'] {
  filter: drop-shadow(0 0 18px rgba(209, 161, 104, 0.32));
}

@keyframes zb-ajoy-intro-bloom {
  0% { opacity: 0; transform: scale(0.72); }
  55% { opacity: 1; }
  100% { opacity: 0.62; transform: scale(1.04); }
}

@keyframes zb-ajoy-intro-sweep {
  from { transform: translateX(-120%) skewX(-17deg); opacity: 0; }
  16% { opacity: 1; }
  to { transform: translateX(150%) skewX(-17deg); opacity: 0; }
}

[data-navbar], [data-navbar='desk'] {
  transition: background-color 220ms var(--zb-ajoy-ease-out), border-color 220ms var(--zb-ajoy-ease-out), transform 220ms var(--zb-ajoy-ease-out) !important;
}

body[data-zb-ajoy-scrolled='true'] [data-navbar],
body[data-zb-ajoy-scrolled='true'] [data-navbar='desk'] {
  background: rgba(10, 9, 9, 0.88) !important;
  border-color: rgba(209, 173, 135, 0.22) !important;
}

@media (hover: hover) and (pointer: fine) {
  nav a:not([class*='zba']) {
    position: relative;
  }
  nav a:not([class*='zba'])::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: var(--zb-ajoy-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 190ms var(--zb-ajoy-ease-out);
  }
  nav a:not([class*='zba']):hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  [data-zb-ajoy-media]:hover {
    filter: brightness(1.06) saturate(1.04);
  }
}

a, button {
  -webkit-tap-highlight-color: transparent;
}

a:active, button:active {
  transform: scale(0.975);
}

[data-zb-ajoy-media] {
  clip-path: inset(0 0 72% 0);
  opacity: 0.08;
  transform: scale(1.085);
  transition: clip-path 900ms var(--zb-ajoy-ease-out), opacity 500ms var(--zb-ajoy-ease-out), transform 1080ms var(--zb-ajoy-ease-out), filter 220ms ease;
  will-change: clip-path, opacity, transform;
}

[data-zb-ajoy-media].zb-ajoy-visible {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: scale(1);
}

[data-zb-ajoy-title] {
  position: relative;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 520ms var(--zb-ajoy-ease-out), transform 720ms var(--zb-ajoy-ease-out);
}

[data-zb-ajoy-title]::before {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  margin: 0 0 14px;
  background: linear-gradient(90deg, var(--zb-ajoy-gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 640ms var(--zb-ajoy-ease-out);
}

[data-zb-ajoy-title].zb-ajoy-visible::before {
  transform: scaleX(1);
}

[data-zb-ajoy-title].zb-ajoy-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-hero-sec] {
  isolation: isolate;
}

/* The image is deliberately uncovered after the logo state instead of simply appearing beneath it. */
[data-hero-sec]::before {
  content: '';
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #080606 0%, #120d09 48%, rgba(106, 54, 27, 0.92) 72%, #080606 100%),
    linear-gradient(0deg, rgba(209, 135, 67, 0.24), transparent 44%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right;
}

body[data-zb-ajoy-launch='revealed'] [data-hero-sec]::before {
  animation: zb-ajoy-hero-unseal 920ms 70ms var(--zb-ajoy-ease-out) both;
}

@keyframes zb-ajoy-hero-unseal {
  0% { opacity: 1; transform: scaleX(1); transform-origin: right; }
  72% { opacity: 1; transform: scaleX(0); transform-origin: right; }
  100% { opacity: 0; transform: scaleX(0); transform-origin: right; }
}

[data-hero-sec]::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 9, 9, 0.72), transparent);
  opacity: 0.8;
}

[data-hero-copy], [data-hero-sec] > div:not([style*='absolute']) {
  z-index: 2;
}

@media (max-width: 899px) {
  #zb-ajoy-atmosphere {
    opacity: 0.34;
    mix-blend-mode: normal;
  }
  [data-zb-ajoy-media] {
    clip-path: none;
    transform: translateY(28px);
    opacity: 0;
    transition: opacity 420ms var(--zb-ajoy-ease-out), transform 560ms var(--zb-ajoy-ease-out);
  }
  [data-zb-ajoy-media].zb-ajoy-visible {
    opacity: 1;
    transform: translateY(0);
  }
  [data-zb-ajoy-title]::before {
    margin-bottom: 10px;
  }
  [data-zb-ajoy-title] {
    transform: translateY(22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #zb-ajoy-atmosphere { display: none; }
  [data-if='introOn'] > div::before,
  [data-if='introOn'] > div::after,
  body[data-zb-ajoy-launch='revealed'] [data-hero-sec]::before { display: none; }
  [data-zb-ajoy-media], [data-zb-ajoy-media].zb-ajoy-visible {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: opacity 160ms ease;
  }
  [data-zb-ajoy-title], [data-zb-ajoy-title].zb-ajoy-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-zb-ajoy-title]::before, [data-zb-ajoy-title].zb-ajoy-visible::before {
    transform: none;
    transition: none;
  }
}