/* 메뉴 화면 머리(page-hero) 배경 — 전북특별자치도교육청 본청 파스텔 그림 (assets/js/page-hero.js)
   구도는 앞 오른쪽 낮은 눈높이에서 올려다본 2점 투시. 그림은 오른쪽에 두고 왼쪽 글자 쪽으로 스르르 사라지게 한다. 움직임은 transform·opacity만 쓴다.
   html.mo-loop 일 때만 움직이고(머리말 인라인 스크립트·멈춤 단추), 그렇지 않으면 같은 그림이 멈춘 채로 보인다. */

.page-hero { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #eef4ff 0%, #f6f2ff 55%, #fff5ef 100%); }
.page-hero > .wrap { position: relative; z-index: 1; }

.ph-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ph-scene > * { position: absolute; }

.ph-art { right: 0; bottom: 0; height: 100%; aspect-ratio: 560 / 330; max-width: 76%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.ph-tree, .ph-cloud, .ph-wing, .ph-sunglow { transform-box: fill-box; }
.ph-tree { transform-origin: 50% 100%; }
.ph-cloud, .ph-sunglow { transform-origin: 50% 50%; }
.ph-wing { transform-origin: 50% 100%; }
.ph-birds { transform: translate(300px, 0); }
/* 버스 움직임(가까워질수록 커짐)은 그림 안 style의 @keyframes ph-bus 가 맡는다 */
.ph-bus { transform-box: view-box; transform-origin: 0 0; }
.ph-win { opacity: 0; }

/* 떠다니는 빛망울 */
.ph-dot { bottom: -16px; width: var(--s); height: var(--s); left: var(--x); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 40% 40%, #fff, var(--c) 60%, transparent 74%); }

/* 글자가 잘 읽히도록 왼쪽은 밝게 */
.ph-veil { inset: 0; background: linear-gradient(90deg, rgba(248, 249, 255, .92) 0%, rgba(248, 249, 255, .7) 40%, rgba(248, 249, 255, 0) 62%); }

/* 멈춤 단추 */
.ph-toggle { position: absolute; right: 14px; bottom: 12px; z-index: 2; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(1, 45, 99, .14); background: rgba(255, 255, 255, .8); color: var(--ink-3); display: grid; place-items: center;
  opacity: .75; transition: opacity .2s, color .2s, border-color .2s; }
.ph-toggle:hover, .ph-toggle:focus-visible { opacity: 1; color: var(--navy); border-color: var(--navy); }
.ph-toggle svg { width: 13px; height: 13px; }

/* ---------- 움직임 ---------- */
@keyframes ph-cloud { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
@keyframes ph-breathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes ph-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes ph-twinkle { 0%, 70%, 100% { opacity: 0; } 80% { opacity: .9; } 90% { opacity: .2; } }
/* 세로선이 곧은 투시라 햇빛 띠는 옆으로만 지나간다(거리 --run 은 그림이 정한다) */
@keyframes ph-sheen { 0%, 50% { transform: translateX(0); opacity: 0; } 54% { opacity: 1; } 86% { opacity: 1; } 90%, 100% { transform: translateX(var(--run)); opacity: 0; } }
@keyframes ph-screen { 0%, 40% { transform: translateX(0); } 75%, 100% { transform: translateX(var(--run)); } }
@keyframes ph-fly { 0% { transform: translate(-60px, 10px); } 50% { transform: translate(350px, -8px); } 100% { transform: translate(760px, 4px); } }
@keyframes ph-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.6); } }
@keyframes ph-float {
  0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  15% { opacity: .85; }
  50% { transform: translate3d(var(--dx), -90px, 0) scale(1); }
  85% { opacity: .85; }
  100% { transform: translate3d(calc(var(--dx) * -.6), -180px, 0) scale(.8); opacity: 0; }
}
@keyframes ph-in { from { opacity: 0; transform: translateY(14px); } }

.mo-loop .ph-cloud { animation: ph-cloud 22s ease-in-out infinite alternate; }
.mo-loop .ph-cloud.c2 { animation-duration: 28s; animation-delay: -9s; }
.mo-loop .ph-cloud.c3 { animation-duration: 18s; animation-delay: -4s; }
.mo-loop .ph-sunglow { animation: ph-breathe 8s ease-in-out infinite; }
.mo-loop .ph-tree { animation: ph-sway 6s ease-in-out infinite; }
.mo-loop .ph-tree:nth-of-type(3n) { animation-duration: 7.2s; }
.mo-loop .ph-tree:nth-of-type(3n+1) { animation-duration: 5.4s; }
.mo-loop .ph-win { animation: ph-twinkle 9s ease-in-out infinite; }
.mo-loop .ph-sheen { animation: ph-sheen 12s ease-in-out 2s infinite; }
.mo-loop .ph-screen { animation: ph-screen 5s ease-in-out infinite; }
.mo-loop .ph-birds { animation: ph-fly 34s linear infinite; }
.mo-loop .ph-bus { animation: ph-bus 24s linear infinite; }
.mo-loop .ph-wing { animation: ph-flap .7s ease-in-out infinite; }
.mo-loop .ph-dot { animation: ph-float var(--t) linear var(--d) infinite; }

/* 처음 들어올 때 글자가 살짝 떠오름 */
.mo .page-hero .crumbs, .mo .page-hero .badge, .mo .page-hero h1, .mo .page-hero .lead, .mo .page-hero .btn-row { animation: ph-in .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.mo .page-hero .badge { animation-delay: .08s; }
.mo .page-hero h1 { animation-delay: .16s; }
.mo .page-hero .lead { animation-delay: .26s; }
.mo .page-hero .btn-row { animation-delay: .36s; }
.mo .ph-scene { animation: ph-in 1.2s ease backwards; }

@media (max-width: 960px) {
  .ph-art { max-width: 92%; }
  .ph-veil { background: linear-gradient(90deg, rgba(248, 249, 255, .9) 0%, rgba(248, 249, 255, .62) 50%, rgba(248, 249, 255, .15) 100%); }
}
@media (max-width: 640px) {
  .ph-art { max-width: none; height: 74%; }
  .ph-veil { background: linear-gradient(180deg, rgba(248, 249, 255, .8) 0%, rgba(248, 249, 255, .62) 55%, rgba(248, 249, 255, .3) 100%); }
  .ph-toggle { right: 10px; bottom: 8px; }
}
@media print { .ph-scene, .ph-toggle { display: none; } }