/* HanAnHua v104 — crisp profile emblem hero.
   The supplied PNG is rendered directly, without scaling/rotation animation,
   so the artwork stays sharp. Motion is limited to independent halo/spark layers. */

.profile-page .profile-hero{
  grid-template-columns:minmax(360px,.88fr) minmax(500px,1.12fr);
  align-items:center;
  gap:clamp(30px,4.5vw,76px);
  min-height:min(820px,calc(100svh - var(--header-h,88px)));
  overflow:visible;
}

.profile-page .profile-hero-copy{
  align-self:center;
  max-width:620px;
}

.profile-page .profile-display{
  max-width:11.5ch;
  margin-bottom:clamp(22px,2.4vw,34px);
  font-size:clamp(3rem,5.15vw,6rem);
  line-height:.94;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.profile-page .profile-lead{
  max-width:40rem;
  font-size:clamp(1rem,1.16vw,1.2rem);
  line-height:1.55;
}

.profile-emblem-visual{
  position:relative;
  width:100%;
  min-width:0;
  z-index:2;
  isolation:isolate;
}

.profile-emblem-stage{
  position:relative;
  width:min(100%,650px);
  aspect-ratio:1295/1215;
  margin-inline:auto;
}

.profile-emblem-image{
  position:relative;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  image-rendering:auto;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  transform:none;
  filter:drop-shadow(0 20px 22px rgba(112,28,17,.11));
}

/* Animated ambience lives behind the PNG, so the artwork itself is never transformed. */
.profile-emblem-halo{
  position:absolute;
  z-index:1;
  inset:14%;
  border-radius:50%;
  pointer-events:none;
}

.profile-emblem-halo-one{
  background:radial-gradient(circle,rgba(255,201,56,.24) 0%,rgba(243,98,45,.12) 42%,transparent 72%);
  filter:blur(26px);
  animation:profileEmblemHaloOne 5.8s ease-in-out infinite;
}

.profile-emblem-halo-two{
  inset:22% 18%;
  border:1px solid rgba(240,102,48,.18);
  box-shadow:0 0 34px rgba(255,192,61,.14);
  animation:profileEmblemHaloTwo 8s ease-in-out infinite;
}

.profile-emblem-spark{
  position:absolute;
  z-index:4;
  width:8px;
  aspect-ratio:1;
  border-radius:50%;
  background:#ffc928;
  box-shadow:0 0 0 4px rgba(255,201,40,.13),0 0 18px rgba(239,93,45,.4);
  pointer-events:none;
  opacity:.65;
}
.profile-emblem-spark-one{left:9%;top:26%;animation:profileEmblemSparkA 5.2s ease-in-out infinite}
.profile-emblem-spark-two{right:10%;top:20%;width:6px;background:#ef6c2f;animation:profileEmblemSparkB 6.1s ease-in-out infinite .4s}
.profile-emblem-spark-three{right:14%;bottom:18%;width:7px;animation:profileEmblemSparkA 6.7s ease-in-out infinite .8s}
.profile-emblem-spark-four{left:14%;bottom:16%;width:5px;background:#ef6c2f;animation:profileEmblemSparkB 7s ease-in-out infinite 1.2s}

@keyframes profileEmblemHaloOne{
  0%,100%{opacity:.62}
  50%{opacity:1}
}
@keyframes profileEmblemHaloTwo{
  0%,100%{opacity:.25}
  50%{opacity:.7}
}
@keyframes profileEmblemSparkA{
  0%,100%{translate:0 0;opacity:.28}
  50%{translate:8px -14px;opacity:.95}
}
@keyframes profileEmblemSparkB{
  0%,100%{translate:0 0;opacity:.2}
  50%{translate:-10px 12px;opacity:.85}
}

@media(max-width:1200px){
  .profile-page .profile-hero{
    grid-template-columns:minmax(330px,.86fr) minmax(470px,1.14fr);
    gap:clamp(24px,3vw,44px);
  }
  .profile-emblem-stage{width:min(100%,610px)}
  .profile-page .profile-display{font-size:clamp(2.8rem,5vw,5.3rem)}
}

@media(max-width:900px){
  .profile-page .profile-hero{
    grid-template-columns:1fr;
    gap:clamp(20px,4vw,36px);
    padding-top:clamp(42px,6vw,66px)!important;
  }
  .profile-page .profile-hero-copy{max-width:800px}
  .profile-page .profile-display{max-width:13ch;font-size:clamp(3rem,8vw,5.2rem)}
  .profile-page .profile-lead{max-width:46rem}
  .profile-emblem-stage{width:min(92vw,630px)}
}

@media(max-width:640px){
  .profile-page .profile-hero{gap:18px}
  .profile-page .profile-display{max-width:12ch;font-size:clamp(2.7rem,13vw,4.4rem)}
  .profile-emblem-stage{width:min(96vw,560px)}
  .profile-emblem-image{filter:drop-shadow(0 12px 16px rgba(112,28,17,.1))}
}

@media(prefers-reduced-motion:reduce){
  .profile-emblem-halo,
  .profile-emblem-spark{animation:none!important}
}