/* Original portrait, with independent image, orbit and foreground layers. */
.hero-visual { min-width: 0; align-self: center; overflow: clip; overflow-clip-margin: 12px; }
.avatar-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.avatar-heading .photo-index { margin: 0; font-size: 8px; letter-spacing: 1.2px; }
.avatar-coordinate { font-size: 7px; color: #7c856c; white-space: nowrap; }
.avatar-scene {
  position: relative; height: clamp(380px, 40vw, 560px); margin: 25px 15px 24px 9px;
  perspective: 900px; isolation: isolate; touch-action: pan-y pinch-zoom;
  --tilt-x: 0deg; --tilt-y: 0deg; --stage-x: 0px; --stage-y: 0px; --stage-roll: 0deg; --photo-scale: 1;
  --photo-x: 0px; --photo-y: 0px; --back-x: 0px; --back-y: 0px;
  --front-x: 0px; --front-y: 0px; --orbit-angle: -12deg; --seal-angle: 9deg;
  --light-x: 65%; --light-y: 25%;
}
.avatar-stage { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translate3d(var(--stage-x), var(--stage-y), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(var(--stage-roll)); }
.avatar-halo { position: absolute; inset: -10% -8%; pointer-events: none;
  background: radial-gradient(ellipse at 70% 35%, #aed43435, transparent 65%);
  transform: translate3d(var(--back-x), var(--back-y), -100px); }
.avatar-orbit { position: absolute; inset: -1% -4% 1% -4%; border: 1px solid #aed4346b; border-radius: 46% 51% 48% 44%; pointer-events: none;
  transform: translate3d(var(--back-x), var(--back-y), -35px) rotate(var(--orbit-angle)); }
.avatar-orbit::after { content: ''; position: absolute; inset: 9px; border: 1px solid #aed43420; border-radius: inherit; }
.avatar-orbit i { position: absolute; width: 7px; height: 7px; top: 18%; right: 7%; border-radius: 50%; background: var(--lime); box-shadow: 0 0 18px #aed43488; }
.avatar-frame { position: absolute; inset: 0; overflow: hidden; background: #050602;
  border-radius: 4px 86px 4px 4px; border: 1px solid #cedba42e; transform: translateZ(0);
  box-shadow: 0 22px 40px -25px #000b; }
.avatar-image { position: absolute; top: 3%; left: -6%; width: 112%; max-width: none; height: auto;
  transform-origin: 50% 32%; user-select: none; pointer-events: none;
  transform: translate3d(var(--photo-x), var(--photo-y), 0) scale(var(--photo-scale)); }
.avatar-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #050602 0%, #05060280 12%, transparent 38%), linear-gradient(90deg, #05060230, transparent 35%); }
.avatar-shine { position: absolute; inset: 0; pointer-events: none; opacity: .38;
  background: radial-gradient(ellipse at var(--light-x) var(--light-y), #d7f29924, transparent 56%); }
.avatar-edition { position: absolute; top: 24px; left: 21px; font-size: 7px; letter-spacing: 1.4px; line-height: 1.8; color: #d4dbb5; }
.avatar-seal { position: absolute; top: 12%; right: -16px; width: 85px; height: 85px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid #d3e39f80; border-radius: 50%; background: #192010e8; color: #cee891; pointer-events: none;
  transform: translate3d(var(--front-x), var(--front-y), 42px) rotate(var(--seal-angle)); }
.avatar-seal>span { font-size: 28px; line-height: 1.1; }
.avatar-seal small { font-size: 7px; line-height: 1.2; letter-spacing: .9px; text-align: center; margin-top: 4px; }
.avatar-signature { position: absolute; bottom: 7%; left: -9px; display: flex; align-items: center; gap: 16px;
  padding: 17px 23px 17px 19px; background: var(--lime); color: #152006; box-shadow: 8px 12px 0 #0004;
  transform: translate3d(var(--front-x), var(--front-y), 62px) rotate(-5deg); pointer-events: none; }
.avatar-signature>span { font-size: 45px; line-height: 1; }
.avatar-signature>div { font-size: clamp(13px, 1.2vw, 17px); line-height: 1.15; letter-spacing: -.4px; }
.avatar-signature small { display: block; font-size: 6px; letter-spacing: 1.1px; margin-top: 10px; }
.avatar-side-note { position: absolute; right: 13px; bottom: 18px; writing-mode: vertical-rl;
  font-size: 6px; letter-spacing: 1.6px; color: #b8c799; pointer-events: none;
  transform: translate3d(0, var(--front-y), 20px); }
.avatar-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.avatar-hint { display: none; align-items: center; gap: 8px; font-size: 9px; color: #a1ab90; }
.avatar-hint>span:first-child { color: var(--lime); font-size: 20px; line-height: 1; }
.avatar-ready .avatar-hint { display: flex; }
.avatar-hint .hint-mobile { display: none; }
.avatar-motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 8px 10px; margin-right: -10px; border: 0; background: transparent; color: #c2c9b6; font-size: 9px; }
.avatar-motion-toggle:hover { color: var(--lime); }
.motion-icon { display: inline-grid; place-items: center; width: 19px; height: 19px; border: 1px solid #687553; border-radius: 50%; font-size: 10px; }
.hero-visual .photo-caption { margin-top: 7px; padding-top: 12px; border-top: 1px solid var(--line); }
.avatar-active .avatar-stage, .avatar-active .avatar-image, .avatar-active .avatar-orbit, .avatar-active .avatar-halo,
.avatar-active .avatar-signature, .avatar-active .avatar-seal { will-change: transform; }
.avatar-static .avatar-hint { visibility: hidden; }
@media (min-width: 1450px) { .hero { align-items: center; } .hero-visual { width: 100%; } }
@media (max-width: 1100px) { .avatar-coordinate { display: none; } .avatar-signature { gap: 11px; padding: 14px 17px; } .avatar-seal { width: 70px; height: 70px; } }
@media (max-width: 800px) { .avatar-scene { height: 370px; margin-left: 6px; margin-right: 12px; } .avatar-frame { border-top-right-radius: 60px; } .avatar-edition { font-size: 6px; left: 15px; top: 18px; } .avatar-signature { padding: 12px 14px; } .avatar-signature>span { font-size: 32px; } .avatar-signature small { font-size: 5px; letter-spacing: .7px; } .avatar-seal { width: 60px; height: 60px; right: -10px; } .avatar-seal>span { font-size: 23px; } .avatar-seal small { font-size: 5px; } .avatar-hint { font-size: 8px; } .avatar-motion-toggle { font-size: 8px; } }
@media (max-width: 600px) { .avatar-scene { height: auto; aspect-ratio: .8; margin: 24px 14px 23px 9px; } .avatar-heading .photo-index { font-size: 7px; } .avatar-coordinate { display: inline; font-size: 6px; } .avatar-signature { left: 0; bottom: 6%; padding: 15px 19px; gap: 13px; } .avatar-signature>span { font-size: 38px; } .avatar-signature>div { font-size: 14px; } .avatar-signature small { font-size: 6px; } .avatar-seal { width: 67px; height: 67px; top: 14%; right: -8px; } .avatar-seal small { font-size: 6px; } .avatar-edition { font-size: 6px; top: 18px; } .avatar-hint, .avatar-motion-toggle { font-size: 9px; } }
@media (hover: none), (pointer: coarse) { .avatar-hint .hint-desktop { display: none; } .avatar-hint .hint-mobile { display: inline; } }
@media (prefers-reduced-motion: reduce) {
  .avatar-stage { transform: none !important; }
  .avatar-image { transform: none !important; }
  .avatar-orbit { transform: rotate(-12deg) !important; }
  .avatar-signature { transform: rotate(-5deg) !important; }
  .avatar-seal { transform: rotate(9deg) !important; }
  .avatar-halo, .avatar-side-note { transform: none !important; }
  .avatar-controls { display: none; }
  .avatar-stage, .avatar-image, .avatar-orbit, .avatar-signature, .avatar-seal { will-change: auto !important; }
}