/* Jiryongja game-optimization banner - motion + text design + font (preview-matched) */
/* =====================================================================
   [A] 움직임: 아래 .hero-wave-inner 의 animation 이름만 바꾸면 됩니다.
       heroWaveLoop(물결) heroWipeLoop(직선) heroZoomLoop(줌팝)
       heroNeonLoop(네온점멸) heroGlitchLoop(글리치) heroRiseLoop(떠오르기)
       heroFlipLoop(플립) heroBlurLoop(블러인)   * 숫자(2s)=속도, 클수록 느림
   [B] 글자 디자인: 현재 "네온펄스"가 제목(h2)에 기본 적용됨 (main.php 수정 불필요).
       다른 디자인으로 바꾸려면 맨 아래 ACTIVE 블록의 내용을 교체.
   [C] 글씨체: 미리보기와 동일한 폰트 스택을 배너 전체에 적용.
   ===================================================================== */
#hero-wave-section .hero-wave-inner{
    display: block;
    animation: heroNeonLoop 5s ease-in-out infinite;
    -webkit-animation: heroNeonLoop 5s ease-in-out infinite;
    will-change: clip-path, opacity, transform, filter;
}

/* ---------- [C] 글씨체 (미리보기와 동일) ---------- */
#hero-wave-section .hero-wave-inner,
#hero-wave-section .hero-wave-inner h2,
#hero-wave-section .hero-wave-inner p,
#hero-wave-section .hero-wave-inner span{
    font-family: 'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif !important;
}

/* ---------- [A] 움직임 ---------- */
@keyframes heroWaveLoop{
    0%{clip-path:polygon(-10% 0%, -10.00% 0%, -6.01% 10%, -9.50% 20%, -13.93% 30%, -10.99% 40%, -6.20% 50%, -8.53% 60%, -13.62% 70%, -11.93% 80%, -6.62% 90%, -7.65% 100%, -10% 100%); opacity:1;}
    4%{clip-path:polygon(-10% 0%, 15.49% 0%, 14.06% 10%, 8.70% 20%, 9.45% 30%, 14.91% 40%, 14.84% 50%, 9.37% 60%, 8.75% 70%, 14.14% 80%, 15.44% 90%, 10.21% 100%, -10% 100%); opacity:1;}
    8%{clip-path:polygon(-10% 0%, 37.25% 0%, 31.91% 10%, 30.34% 20%, 35.48% 30%, 37.69% 40%, 32.83% 50%, 30.01% 60%, 34.52% 70%, 37.91% 80%, 33.83% 90%, 29.92% 100%, -10% 100%); opacity:1;}
    12%{clip-path:polygon(-10% 0%, 55.49% 0%, 51.88% 10%, 55.77% 20%, 59.86% 30%, 56.49% 40%, 51.97% 50%, 54.78% 60%, 59.65% 70%, 57.45% 80%, 52.31% 90%, 53.86% 100%, -10% 100%); opacity:1;}
    16%{clip-path:polygon(-10% 0%, 74.14% 0%, 76.08% 10%, 81.32% 20%, 80.04% 30%, 74.64% 40%, 75.24% 50%, 80.71% 60%, 80.80% 70%, 75.34% 80%, 74.57% 90%, 79.93% 100%, -10% 100%); opacity:1;}
    20%{clip-path:polygon(-10% 0%, 93.99% 0%, 99.29% 10%, 100.98% 20%, 95.88% 30%, 93.56% 40%, 98.36% 50%, 101.29% 60%, 96.85% 70%, 93.37% 80%, 97.37% 90%, 101.35% 100%, -10% 100%); opacity:1;}
    26%{clip-path:polygon(-10% 0%, 110.88% 0%, 115.76% 10%, 113.59% 20%, 108.44% 30%, 109.96% 40%, 115.31% 50%, 114.45% 60%, 109.00% 70%, 109.17% 80%, 114.64% 90%, 115.16% 100%, -10% 100%); opacity:1;}
    78%{clip-path:polygon(-10% 0%, 110.88% 0%, 115.76% 10%, 113.59% 20%, 108.44% 30%, 109.96% 40%, 115.31% 50%, 114.45% 60%, 109.00% 70%, 109.17% 80%, 114.64% 90%, 115.16% 100%, -10% 100%); opacity:1;}
    100%{clip-path:polygon(-10% 0%, 110.88% 0%, 115.76% 10%, 113.59% 20%, 108.44% 30%, 109.96% 40%, 115.31% 50%, 114.45% 60%, 109.00% 70%, 109.17% 80%, 114.64% 90%, 115.16% 100%, -10% 100%); opacity:0;}
}
@keyframes heroWipeLoop{0%{clip-path:inset(0 100% 0 0);opacity:1;}26%{clip-path:inset(0 0 0 0);opacity:1;}80%{clip-path:inset(0 0 0 0);opacity:1;}100%{clip-path:inset(0 0 0 0);opacity:0;}}
@keyframes heroZoomLoop{0%{transform:scale(.8);opacity:0;}20%{transform:scale(1.03);opacity:1;}30%{transform:scale(1);}80%{transform:scale(1);opacity:1;}100%{transform:scale(1);opacity:0;}}
@keyframes heroNeonLoop{0%{opacity:0;}5%{opacity:1;}8%{opacity:.2;}11%{opacity:1;}15%{opacity:.45;}18%{opacity:1;}80%{opacity:1;}86%{opacity:.3;}90%{opacity:1;}100%{opacity:0;}}
@keyframes heroGlitchLoop{0%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0);}5%{opacity:1;transform:translate(-7px,0);clip-path:inset(0 0 62% 0);}10%{transform:translate(7px,0);clip-path:inset(55% 0 0 0);}15%{transform:translate(-4px,0);clip-path:inset(0 0 28% 0);}20%{transform:translate(0,0);clip-path:inset(0 0 0 0);opacity:1;}80%{opacity:1;}100%{opacity:0;}}
@keyframes heroRiseLoop{0%{transform:translateY(26px);opacity:0;}24%{transform:translateY(0);opacity:1;}80%{transform:translateY(0);opacity:1;}100%{transform:translateY(0);opacity:0;}}
@keyframes heroFlipLoop{0%{transform:perspective(800px) rotateX(90deg);opacity:0;}25%{transform:perspective(800px) rotateX(-8deg);opacity:1;}33%{transform:perspective(800px) rotateX(0);}80%{transform:perspective(800px) rotateX(0);opacity:1;}100%{transform:perspective(800px) rotateX(0);opacity:0;}}
@keyframes heroBlurLoop{0%{filter:blur(14px);opacity:0;}28%{filter:blur(0);opacity:1;}80%{filter:blur(0);opacity:1;}100%{filter:blur(0);opacity:0;}}

/* ---------- 글자 디자인용 keyframes ---------- */
@keyframes heroTextNeon{0%,100%{text-shadow:0 0 6px #44ffd0,0 0 14px #16c79a,0 0 26px #16c79a;}50%{text-shadow:0 0 10px #7dffe6,0 0 22px #44ffd0,0 0 44px #16c79a,0 0 70px #16c79a;}}
@keyframes heroTextShine{0%{background-position:0 0;}100%{background-position:0 -200%;}}
@keyframes heroTextFlow{0%{background-position:0 0;}100%{background-position:300% 0;}}

/* ======================= [B] ACTIVE 글자 디자인 = 네온펄스 =======================
   다른 디자인으로 바꾸려면 아래 블록 내용만 교체:
   · 골드:   color:transparent!important; -webkit-background-clip:text; background-clip:text;
             background-image:linear-gradient(180deg,#fff7d6,#ffd700 45%,#b8860b 70%,#fff3b0);
             background-size:100% 200%; animation:heroTextShine 3s linear infinite;
   · 무지개: background-image:linear-gradient(90deg,#ff2d55,#ff9500,#ffec00,#34c759,#00c7ff,#af52de,#ff2d55);
             background-size:300% 100%; animation:heroTextFlow 4s linear infinite; (+ clip-text)
   · 사이버: background-image:linear-gradient(90deg,#00f0ff,#a000ff,#00f0ff);
             background-size:200% 100%; animation:heroTextFlow 3s linear infinite; (+ clip-text)
   · 크롬:   background-image:linear-gradient(180deg,#fff,#cfd6e6 40%,#8a93a8 55%,#eef2ff 75%,#aeb6c7); (+ clip-text)
   (clip-text 디자인은 span 도 color:transparent 필요)
   ============================================================================== */
#hero-wave-section .hero-wave-inner h2,
#hero-wave-section .hero-wave-inner h2 span{
    color:#ffffff !important;
    animation: heroTextNeon 2.0s ease-in-out infinite;
}

/* ======================= [모바일] PC 배너(이미지+문구) 공용 =======================
   모바일에서도 PC와 같은 어두운 배경 이미지 + 같은 흰 네온 문구를 사용.
   좁은 화면에 맞게 배너 높이를 키우고(이미지 cover), 글자 크기를 축소. */
@media (max-width:1150px){
    /* 배너 컨테이너를 세로로 키우고 이미지를 꽉 채움 */
    #hero-wave-section > .position1{ position:relative; min-height:440px; overflow:hidden; }
    #hero-wave-section > .position1 > img{
        position:absolute; top:0; left:0;
        width:100% !important; height:100% !important;
        max-width:none !important; max-height:none !important;
        object-fit:cover;
    }
    #hero-wave-section .position2{ display:block !important; }
    /* 글자 축소 (태블릿) */
    #hero-wave-section .hero-wave-inner h2{ font-size:34px !important; margin-bottom:10px !important; }
    #hero-wave-section .hero-wave-inner p{ font-size:17px !important; margin-bottom:16px !important; }
    #hero-wave-section .hero-wave-inner .flex_xc.flv7{ padding:16px 18px !important; width:92% !important; }
    #hero-wave-section .hero-wave-inner .flex_xc.flv7 .font_fe_035{ font-size:18px !important; }
    #hero-wave-section .hero-wave-inner .flex_xc.flv7 .font_fe_022{ font-size:13px !important; }
}
@media (max-width:600px){
    /* 폰 */
    #hero-wave-section > .position1{ min-height:380px; }
    #hero-wave-section .hero-wave-inner h2{ font-size:26px !important; margin-bottom:7px !important; }
    #hero-wave-section .hero-wave-inner p{ font-size:13px !important; margin-bottom:12px !important; }
    #hero-wave-section .hero-wave-inner .flex_xc.flv7{ padding:10px 10px !important; width:94% !important; }
    #hero-wave-section .hero-wave-inner .flex_xc.flv7 .font_fe_035{ font-size:14px !important; }
    #hero-wave-section .hero-wave-inner .flex_xc.flv7 .font_fe_022{ font-size:10px !important; }
}