/* Hazal Jewels — Intro V5.1 (CSS 3D disco balls, performance) */

.hj-intro {
  --hj-intro-z: 12000;
  position: fixed;
  inset: 0;
  z-index: var(--hj-intro-z);
  display: grid;
  place-items: center;
  padding:
    max(0.5rem, env(safe-area-inset-top))
    max(0.85rem, env(safe-area-inset-right))
    max(0.85rem, env(safe-area-inset-bottom))
    max(0.85rem, env(safe-area-inset-left));
  color: #fff8fb;
  isolation: isolate;
  contain: layout style;
  overscroll-behavior: contain;
  perspective: 700px;
}

.hj-intro[hidden] { display: none !important; }

html.hj-intro-seen .hj-intro,
html.hj-intro-boot .hj-intro {
  display: none !important;
}

.hj-intro__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(255, 220, 235, 0.28), transparent 55%),
    linear-gradient(180deg, rgba(229, 122, 166, 0.34) 0%, rgba(237, 144, 180, 0.28) 48%, rgba(184, 81, 127, 0.32) 100%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  opacity: 0;
}

.hj-intro.is-open .hj-intro__veil { animation: hjIntroVeilIn 0.5s ease both; }
.hj-intro.is-closing .hj-intro__veil { animation: hjIntroVeilOut 0.65s ease both; }

.hj-intro__flecks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 18%, rgba(255, 230, 240, 0.16) 0 1.5px, transparent 3px),
    radial-gradient(circle at 70% 72%, rgba(255, 255, 255, 0.12) 0 2px, transparent 3px);
}
.hj-intro.is-open .hj-intro__flecks { animation: hjIntroVeilIn 0.7s ease 0.15s both; }
.hj-intro.is-closing .hj-intro__flecks { animation: hjIntroVeilOut 0.4s ease both; }

.hj-intro__close {
  position: absolute;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(0.85rem, env(safe-area-inset-right));
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 248, 251, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff8fb;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.hj-intro__close:hover { background: rgba(255, 255, 255, 0.32); transform: scale(1.04); }
.hj-intro__close:focus-visible { outline: 2px solid #fff8fb; outline-offset: 3px; }

.hj-intro__frame {
  position: relative;
  z-index: 1;
  width: min(100%, 960px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
}

.hj-intro__balls {
  position: relative;
  width: min(100%, 920px);
  height: clamp(280px, 42vh, 420px);
  margin: 0 auto 0.15rem;
  pointer-events: none;
}

.hj-intro__hang {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translate3d(0, -100vh, 0);
  transform-origin: 50% 0;
}

.hj-intro__hang--l {
  left: 4%;
  top: 0;
  z-index: 2;
}

.hj-intro__hang--c {
  left: 50%;
  top: 4%;
  z-index: 3;
  transform: translate3d(-50%, -100vh, 0);
}

.hj-intro__hang--r {
  right: 4%;
  left: auto;
  top: 2%;
  z-index: 2;
}

/* Static chain (no continuous animation) */
.hj-intro__chain {
  width: 8px;
  height: clamp(36px, 6vh, 56px);
  margin-bottom: -2px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      180deg,
      #6a4030 0 3px,
      #f0d2b8 3px 6px,
      #c9a07e 6px 9px,
      #4a3028 9px 11px
    );
  transform-origin: 50% 0;
}

.hj-intro__sphere {
  position: relative;
  display: grid;
  place-items: center;
}

.hj-intro__hang--l .hj-intro__sphere,
.hj-intro__hang--r .hj-intro__sphere {
  width: clamp(180px, 17vw, 210px);
  height: clamp(180px, 17vw, 210px);
}

.hj-intro__hang--c .hj-intro__sphere {
  width: clamp(260px, 28vw, 320px);
  height: clamp(260px, 28vw, 320px);
}

/* Single glow layer per ball (not per-tile) */
.hj-intro__glow {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 235, 0.4) 0%, rgba(237, 144, 180, 0.16) 40%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hj-intro__hang--c .hj-intro__glow {
  background: radial-gradient(circle, rgba(255, 230, 200, 0.38) 0%, rgba(237, 144, 180, 0.14) 42%, transparent 70%);
}

/* Only this parent spins — tiles are static */
.hj-intro__ball {
  --hj-spin: 18s;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  z-index: 1;
}

.hj-intro.is-open .hj-intro__ball--ready {
  will-change: transform;
  animation: hjIntroSpin var(--hj-spin) linear 1.05s infinite;
}

.hj-intro__core {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff5f8 0%, #ed90b4 35%, #5a3048 78%, #1a0c14 100%);
  transform: translateZ(0);
  opacity: 0.92;
  pointer-events: none;
  box-shadow: 0 14px 28px rgba(50, 10, 30, 0.28);
}

.hj-intro__hang--c .hj-intro__core {
  background:
    radial-gradient(circle at 32% 28%, #fff8f0 0%, #e8b888 38%, #6a4038 78%, #1a0c10 100%);
}

.hj-intro__hang--r .hj-intro__core {
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0%, #d8d0d8 40%, #5a4850 78%, #140c12 100%);
}

/* Static mirror tile — no per-tile animation / filter / will-change */
.hj-intro__tile {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  border-radius: 0.5px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: 0 0 0;
}

/* Drop-in once (forwards) — no infinite swing */
.hj-intro.is-open .hj-intro__hang--l {
  animation: hjIntroDropL 1s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
}
.hj-intro.is-open .hj-intro__hang--r {
  animation: hjIntroDropR 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.hj-intro.is-open .hj-intro__hang--c {
  animation: hjIntroDropC 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.hj-intro.is-closing .hj-intro__hang--l,
.hj-intro.is-closing .hj-intro__hang--r {
  animation: hjIntroRise 0.7s cubic-bezier(0.4, 0, 0.7, 0.2) both;
}
.hj-intro.is-closing .hj-intro__hang--l { animation-delay: 0.02s; }
.hj-intro.is-closing .hj-intro__hang--r { animation-delay: 0.08s; }
.hj-intro.is-closing .hj-intro__hang--c {
  animation: hjIntroRiseC 0.75s cubic-bezier(0.4, 0, 0.7, 0.2) 0.12s both;
}
.hj-intro.is-closing .hj-intro__copy { animation: hjIntroCopyOut 0.4s ease both; }
.hj-intro.is-closing .hj-intro__ball--ready {
  animation: none;
  will-change: auto;
}

.hj-intro__copy {
  position: relative;
  z-index: 5;
  width: min(100%, 480px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.25rem;
  padding-top: 0.2rem;
}

.hj-intro.is-open .hj-intro__brand { animation: hjIntroFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both; }
.hj-intro.is-open .hj-intro__title { animation: hjIntroFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; }
.hj-intro.is-open .hj-intro__sub { animation: hjIntroFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.02s both; }
.hj-intro.is-open .hj-intro__cta { animation: hjIntroFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.12s both; }

.hj-intro__brand {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: rgba(255, 248, 251, 0.94);
  text-shadow: 0 2px 14px rgba(90, 20, 50, 0.28);
}

.hj-intro__title {
  margin: 0;
  font-size: clamp(2.15rem, 8vw, 3.4rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.08;
  color: #fff8fb;
  text-wrap: balance;
  text-shadow: 0 4px 22px rgba(90, 20, 50, 0.3), 0 0 36px rgba(237, 144, 180, 0.4);
}
.hj-intro__title span { color: #ffe0ec; font-weight: 500; }

.hj-intro__sub {
  margin: 0.05rem 0 0.5rem;
  font-size: clamp(0.68rem, 2.5vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(255, 242, 248, 0.9);
  text-shadow: 0 2px 12px rgba(90, 20, 50, 0.25);
}

.hj-intro__cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 50px;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #fff8fb;
  background: linear-gradient(135deg, #f5c0d4 0%, #ed90b4 42%, #e57aa6 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 14px 36px rgba(184, 81, 127, 0.42),
    0 0 24px rgba(237, 144, 180, 0.35);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), filter 0.28s ease;
}
.hj-intro__cta:hover { transform: scale(1.05); filter: brightness(1.05); }
.hj-intro__cta:active { transform: scale(0.97); }
.hj-intro__cta:focus-visible { outline: 2px solid #fff8fb; outline-offset: 4px; }
.hj-intro__cta-arrow { display: inline-block; transition: transform 0.28s ease; }
.hj-intro__cta:hover .hj-intro__cta-arrow { transform: translateX(3px); }

body.hj-intro-lock { overflow: hidden; }

@keyframes hjIntroSpin {
  0% { transform: rotateX(90deg) rotateZ(0deg); }
  100% { transform: rotateX(90deg) rotateZ(360deg); }
}

@keyframes hjIntroVeilIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hjIntroVeilOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes hjIntroDropL {
  0% { opacity: 0; transform: translate3d(-8px, -100vh, 0) rotate(-3deg); }
  72% { opacity: 1; transform: translate3d(0, 10px, 0) rotate(2deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes hjIntroDropR {
  0% { opacity: 0; transform: translate3d(8px, -100vh, 0) rotate(3deg); }
  72% { opacity: 1; transform: translate3d(0, 8px, 0) rotate(-2deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes hjIntroDropC {
  0% { opacity: 0; transform: translate3d(-50%, -100vh, 0) scale(0.96); }
  74% { opacity: 1; transform: translate3d(-50%, 12px, 0) scale(1.02); }
  100% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
}

@keyframes hjIntroRise {
  to { opacity: 0; transform: translate3d(0, -110vh, 0) scale(0.96); }
}
@keyframes hjIntroRiseC {
  to { opacity: 0; transform: translate3d(-50%, -110vh, 0) scale(0.96); }
}
@keyframes hjIntroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hjIntroCopyOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(0.97); }
}

@media (max-width: 700px) {
  .hj-intro__balls {
    height: clamp(220px, 36vh, 300px);
  }
  .hj-intro__hang--l { left: 0; top: 0; }
  .hj-intro__hang--r { right: 0; top: 2%; }
  .hj-intro__hang--c { top: 6%; }
  .hj-intro__hang--l .hj-intro__sphere,
  .hj-intro__hang--r .hj-intro__sphere {
    width: clamp(110px, 28vw, 140px);
    height: clamp(110px, 28vw, 140px);
  }
  .hj-intro__hang--c .hj-intro__sphere {
    width: clamp(190px, 48vw, 230px);
    height: clamp(190px, 48vw, 230px);
  }
  .hj-intro__chain {
    height: clamp(28px, 5vh, 40px);
    width: 6px;
  }
  .hj-intro__glow { opacity: 0.75; }
  .hj-intro__core { box-shadow: 0 8px 18px rgba(50, 10, 30, 0.22); }
  .hj-intro__title { font-size: clamp(1.9rem, 9vw, 2.45rem); }
  .hj-intro__sub { letter-spacing: 0.14em; padding-inline: 0.35rem; }
  .hj-intro__cta { width: min(100%, 280px); }
}

@media (max-width: 380px) {
  .hj-intro__balls { height: 200px; }
  .hj-intro__hang--l .hj-intro__sphere,
  .hj-intro__hang--r .hj-intro__sphere {
    width: 112px;
    height: 112px;
  }
  .hj-intro__hang--c .hj-intro__sphere {
    width: 196px;
    height: 196px;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  .hj-intro__frame {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 1rem;
    width: min(100%, 900px);
  }
  .hj-intro__balls {
    width: min(44%, 380px);
    height: min(70vh, 200px);
    margin: 0;
  }
  .hj-intro__hang--l .hj-intro__sphere,
  .hj-intro__hang--r .hj-intro__sphere {
    width: clamp(90px, 18vw, 120px);
    height: clamp(90px, 18vw, 120px);
  }
  .hj-intro__hang--c .hj-intro__sphere {
    width: clamp(130px, 26vw, 170px);
    height: clamp(130px, 26vw, 170px);
  }
  .hj-intro__copy {
    width: min(52%, 400px);
    margin: 0;
    align-items: flex-start;
    text-align: left;
  }
  .hj-intro__title { font-size: 1.55rem; }
}

@media (min-width: 1200px) {
  .hj-intro__balls { height: 400px; }
  .hj-intro__hang--l .hj-intro__sphere,
  .hj-intro__hang--r .hj-intro__sphere {
    width: 210px;
    height: 210px;
  }
  .hj-intro__hang--c .hj-intro__sphere {
    width: 320px;
    height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hj-intro.is-open .hj-intro__veil,
  .hj-intro.is-closing .hj-intro__veil,
  .hj-intro.is-open .hj-intro__flecks,
  .hj-intro.is-closing .hj-intro__flecks,
  .hj-intro.is-open .hj-intro__hang--l,
  .hj-intro.is-open .hj-intro__hang--c,
  .hj-intro.is-open .hj-intro__hang--r,
  .hj-intro.is-closing .hj-intro__hang--l,
  .hj-intro.is-closing .hj-intro__hang--c,
  .hj-intro.is-closing .hj-intro__hang--r,
  .hj-intro.is-open .hj-intro__brand,
  .hj-intro.is-open .hj-intro__title,
  .hj-intro.is-open .hj-intro__sub,
  .hj-intro.is-open .hj-intro__cta,
  .hj-intro.is-closing .hj-intro__copy,
  .hj-intro.is-open .hj-intro__ball--ready {
    animation: none !important;
  }
  .hj-intro.is-open .hj-intro__veil,
  .hj-intro.is-open .hj-intro__flecks { opacity: 1; }
  .hj-intro.is-open .hj-intro__hang--l,
  .hj-intro.is-open .hj-intro__hang--r { opacity: 1; transform: none; }
  .hj-intro.is-open .hj-intro__hang--c { opacity: 1; transform: translate3d(-50%, 0, 0); }
  .hj-intro.is-open .hj-intro__brand,
  .hj-intro.is-open .hj-intro__title,
  .hj-intro.is-open .hj-intro__sub,
  .hj-intro.is-open .hj-intro__cta { opacity: 1; transform: none; }
  .hj-intro.is-open .hj-intro__ball--ready {
    transform: rotateX(90deg) rotateZ(25deg);
    will-change: auto;
  }
  .hj-intro__cta:hover { transform: none; }
}