.image-frame{position:relative;display:block;overflow:hidden}
.image-frame>img{transition:opacity .4s ease}
.image-frame[data-image-state="pending"]>img,.image-frame[data-image-state="error"]>img{opacity:0}
.image-placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;background:transparent;pointer-events:none;z-index:1;opacity:1;visibility:visible;transition:opacity .35s ease,visibility .35s ease}
.image-frame[data-image-state="ready"]>.image-placeholder{opacity:0;visibility:hidden}
.image-placeholder-mark{position:relative;display:block;width:76px;height:79px;opacity:.3;background:url('./assets/xiangfeng-mark-transparent.png') center/contain no-repeat;animation:image-logo-float 3s ease-in-out infinite}
.image-placeholder-mark::after{content:"";position:absolute;inset:0;mask:url('./assets/xiangfeng-mark-transparent.png') center/contain no-repeat;-webkit-mask:url('./assets/xiangfeng-mark-transparent.png') center/contain no-repeat;background:linear-gradient(110deg,transparent 30%,#c2f2de99 42%,#ffffff 50%,#70d4dc99 58%,transparent 70%);background-size:300% 100%;animation:image-logo-flow 2.4s ease-in-out infinite}
.image-placeholder-note{display:none;font-size:12px;color:#71847f;margin-top:14px}
.image-frame[data-image-state="error"] .image-placeholder-note{display:block}
.image-frame[data-image-state="ready"] .image-placeholder-mark,.image-frame[data-image-state="error"] .image-placeholder-mark,.image-frame[data-image-state="ready"] .image-placeholder-mark::after,.image-frame[data-image-state="error"] .image-placeholder-mark::after{animation:none}
.business-grid article>.image-frame{padding:0;height:240px}
.business-grid article>.image-frame>img{width:100%;height:100%;object-fit:cover}
.certificate-preview .image-frame{padding:0;aspect-ratio:210/297}
.certificate-preview .image-frame>img{width:100%;height:100%;object-fit:contain}
.certificate-preview .image-placeholder{padding:0;display:grid}
.certificate-preview .image-placeholder-mark{padding:0;display:block}
.certificate-preview .image-placeholder-note{padding:0;display:none}
.certificate-preview [data-image-state="error"] .image-placeholder-note{display:block}
#certificate-dialog>.image-frame{margin:18px auto;width:calc(100% - 36px);aspect-ratio:210/297}
#certificate-dialog>.image-frame>img{width:100%;height:100%;object-fit:contain}
#tour-reference.image-frame{display:flex}
#tour-reference.image-frame[hidden]{display:none}
#tour-reference .image-placeholder{bottom:42px}
.hero-image>.image-placeholder{z-index:1}
.hero-image .image-placeholder-mark{width:104px;height:108px}
.campus-cover>.image-placeholder{inset:0;left:62%;top:0;padding:0}
@keyframes image-logo-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
@keyframes image-logo-flow{0%{background-position:150% 0}100%{background-position:-50% 0}}
@media(prefers-reduced-motion:reduce){.image-frame>img,.image-placeholder{transition:none}.image-placeholder-mark,.image-placeholder-mark::after{animation:none}}