/* Entrance (motion OK일 때만) */
@media (prefers-reduced-motion: no-preference) {
    @keyframes fadeIn {
        from {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    @keyframes up {
        from {
            transform: translateY(8px);
            opacity: .01
        }

        to {
            transform: none;
            opacity: 1
        }
    }

    /* 단일 프리셋 */
    .ani-fade {
        animation: fadeIn .45s ease both
    }

    .ani-up {
        animation: up .45s ease both
    }

    /* 합성 프리셋: 위로+페이드 (예전 .ani-fade-in-up 대체) */
    .ani-fade-up {
        animation: fadeIn .45s ease both, up .45s ease both
    }
}

/***** ANIMATION UTILITIES – CLEAN *****/

/* === Opacity / Color Blink === */
.ani-bg-red {
    animation: bg_red 1s infinite
}

.ani-txt-yellow {
    animation: txt_yellow 1s infinite
}

.ani-txt-orange {
    animation: txt_orange 1s infinite
}

.ani-opacity {
    animation: opacity-gif .8s infinite
}

.ani-opacity--normal {
    animation: opacity-gif 1s infinite
}

.ani-opacity--slow {
    animation: opacity-gif 1.2s infinite
}

.ani-opacity--60 {
    opacity: .6;
    animation: op60_gif .8s infinite
}

/* === Glow / Shine === */
.ani-shine {
    animation: shine 2s infinite;
    text-shadow: 1px 1px 15px #f46722
}

.ani-shine-y {
    animation: shine_y 2s infinite;
    text-shadow: 1px 1px 30px #ffcc00
}

.ani-shine-box {
    animation: shine_box 2s infinite;
    box-shadow: 1px 1px 30px #fff600
}

.ani-glow-img {
    animation: softGlow 3s ease-in-out infinite
}

/* === Scale / Pulse === */
.ani-scale-blink {
    animation: scale-blink 1s infinite
}

.ani-scale-blink--slow {
    animation: scale-blink_slow 2s infinite
}

.ani-scale-blink--slow2 {
    animation: scale-blink_slow 4s infinite
}

.ani-scale-blink2 {
    animation: scale-blink2 1s infinite
}

.ani-scale-font {
    animation: scale-blink_ftsize 2s infinite
}

.ani-scale-blink--slow-big {
    animation: scale-blink_slow_big 2s infinite
}

.ani-pulse-5s {
    animation: pulse 5s linear infinite
}

.ani-pulse-1s {
    animation: pulse 1s linear infinite
}

.ani-pulse-grow {
    animation: pulseGrow 1.5s ease-in-out infinite
}

.ani-shrink-away {
    animation: shrinkAway 1.5s forwards
}

.ani-pulse-ring {
    position: relative
}

.ani-pulse-ring::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: .5;
    animation: pulseAnim 1.5s ease-out infinite;
    z-index: -1;
    background: var(--primary-color-pink)
}

/* === Fire / Arrow / Long Light === */
.ani-fire-center {
    animation: fire_ani 5s infinite;
    left: 50.5%;
    top: -10px;
    transform: scale(1) rotate(.5deg) translateX(-50%)
}

.ani-fire-right {
    animation: fire_ani_right 2s infinite;
    right: 20px;
    top: -10px;
    transform: scale(1) rotate(1deg)
}

.ani-fire-left {
    animation: fire_ani_left 2s infinite;
    left: 20px;
    top: -10px;
    transform: scale(1) rotate(1deg)
}

.ani-arrow-move {
    animation: arrowMove 2s linear infinite
}

.ani-long-light {
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .8;
    filter: blur(20px);
    animation: longLightPulse 4s infinite alternate
}

.ani-long-light-2 {
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .8;
    filter: blur(8px);
    animation: longLightPulse2 4s infinite alternate
}

/* === Rotate / Spin === */
.ani-spin {
    animation: spin 10s ease infinite
}

.ani-rotate-infinite {
    animation: rotateInfinite 5s linear infinite
}

.ani-rotate-osc-30 {
    animation: rotateInfinite30Deg 5s linear infinite
}

.ani-rotate-center {
    animation: rotate-center 3s ease-in-out infinite
}

/* === Text / Neon === */
.ani-neon--y {
    animation: neon_effect_y 1.5s ease infinite
}

.ani-neon--r {
    animation: neon_effect_r 1.5s ease infinite
}

.ani-typing-caret::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    background: #fff;
    animation: blink 1.2s steps(1, end) infinite;
    vertical-align: -2px;
}

/* === Entrance / Attention === */
.ani-vibrate-1 {
    animation: vibrate-1 .3s linear infinite both
}

.ani-roll-in-left {
    animation: roll-in-left .6s ease-out both
}

.ani-graph-change {
    animation: graph_change .8s linear infinite
}

.ani-heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite both
}

.ani-text-pop-up-top {
    animation: text-pop-up-top .5s linear 2s infinite both
}

.ani-text-focus-in {
    animation: text-focus-in 3s cubic-bezier(.55, .085, .68, .53) 2s infinite both
}

.ani-swing-in-top-fwd {
    animation: swing-in-top-fwd .7s cubic-bezier(.175, .885, .32, 1.275) 1.8s both
}

.ani-text-shadow-pop-br {
    animation: text-shadow-pop-br .6s both
}

.ani-text-shadow-pop-br--infinite {
    animation: text-shadow-pop-br 1.2s infinite
}

.ani-text-shadow-pop-br--move {
    animation: text-shadow-pop-move-br 2s linear infinite alternate
}

.ani-jello-vertical {
    animation: jello-vertical .9s infinite both
}

.ani-text-pop-up-tl {
    animation: text-pop-up-tl 3s cubic-bezier(.25, .46, .45, .94) 2s infinite both
}

.ani-stamp {
    animation: stamp .6s .5s forwards;
    opacity: 0
}

.ani-stamp-2 {
    animation: stamp2 .8s 1.5s forwards;
    opacity: 0
}

.ani-fade-in-up {
    animation: fadeInUp 1s forwards ease-in-out
}

.ani-fade-in-up-deg {
    animation: fadeInUpDeg 1s forwards ease-in-out
}

/* === Progress / Reveal === */
.ani-progress {
    animation: progress 2s linear forwards
}

.ani-reveal {
    animation: reveal .8s ease-out forwards
}

/* Rolling */
.line-wrap {
    flex-wrap: nowrap;
    flex: 0 0 auto;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    transition: 0.3s;
    z-index: 0;
}
.line {
    gap: 40px;
    flex-wrap: nowrap;
    width: auto;
    animation: textLoop 20s linear infinite;
}
.line-wrap:hover .line {
    animation-play-state: paused;
}

/* -------------------- KEYFRAMES -------------------- */

/* color/opacity */
@keyframes bg_red {

    0%,
    49.5% {
        background: #b11515
    }

    50%,
    100% {
        background: #000
    }
}

@keyframes txt_orange {

    0%,
    49.5% {
        color: #ffaa00
    }

    50%,
    100% {
        color: #ffe200
    }
}

@keyframes txt_yellow {

    0%,
    49.5% {
        color: #ffaa00
    }

    50%,
    100% {
        color: #fff
    }
}

@keyframes opacity-gif {

    0%,
    49.5% {
        opacity: 0
    }

    50%,
    100% {
        opacity: 1
    }
}

@keyframes op60_gif {

    0%,
    49.5% {
        opacity: 0
    }

    50%,
    100% {
        opacity: .6
    }
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

/* shine / glow */
@keyframes shine {
    50% {
        text-shadow: none
    }

    100% {
        text-shadow: 1px 1px 15px #f46722
    }
}

@keyframes shine_y {
    50% {
        text-shadow: 1px 1px 15px #e3d366
    }

    100% {
        text-shadow: 1px 1px 30px #ffcc00
    }
}

@keyframes shine_box {
    50% {
        box-shadow: none
    }

    100% {
        box-shadow: 1px 1px 30px #fff600
    }
}

@keyframes softGlow {
    0% {
        opacity: .6;
        transform: scale(1)
    }

    50% {
        opacity: .9;
        transform: scale(1.2)
    }

    100% {
        opacity: .6;
        transform: scale(1)
    }
}

/* scale / pulse */
@keyframes scale-blink {
    50% {
        transform: scale(1.25)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes scale-blink_slow {
    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes scale-blink_slow_big {
    50% {
        transform: scale(2)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes scale-blink2 {
    50% {
        font-size: 1.2em
    }

    100% {
        font-size: 1em
    }
}

@keyframes scale-blink_ftsize {
    50% {
        font-size: 1.1em
    }

    100% {
        font-size: 1em
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.1)
    }
}

@keyframes pulseGrow {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes shrinkAway {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(.5)
    }
}

@keyframes pulseAnim {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1
    }

    70% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: .3
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0
    }
}

/* fire / arrow / long-light */
@keyframes fire_ani {
    50% {
        transform: scale(1.05) rotate(-.5deg) translateX(-50%);
        left: 49.5%;
        top: 10px
    }

    100% {
        transform: scale(1) rotate(.5deg) translateX(-50%);
        left: 50.5%;
        top: -10px
    }
}

@keyframes fire_ani_right {
    50% {
        transform: scale(1.05) rotate(-1deg);
        right: -20px;
        top: 10px
    }

    100% {
        transform: scale(1) rotate(1deg);
        right: 20px;
        top: -10px
    }
}

@keyframes fire_ani_left {
    50% {
        transform: scale(1.05) rotate(-1deg);
        left: -20px;
        top: 10px
    }

    100% {
        transform: scale(1) rotate(1deg);
        left: 20px;
        top: -10px
    }
}

@keyframes arrowMove {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 1
    }

    100% {
        transform: translateX(-50%) translateY(30px);
        opacity: .3
    }
}

@keyframes longLightPulse {
    0% {
        opacity: .3;
        transform: translate(-40%, -40%) rotate(140deg) scale(1)
    }

    50% {
        opacity: .6;
        transform: translate(-40%, -40%) rotate(140deg) scale(1.1)
    }

    100% {
        opacity: .3;
        transform: translate(-40%, -40%) rotate(140deg) scale(1)
    }
}

@keyframes longLightPulse2 {
    0% {
        opacity: .4;
        transform: translate(-40%, -40%) rotate(150deg) scale(1)
    }

    50% {
        opacity: .8;
        transform: translate(-40%, -40%) rotate(150deg) scale(1.1)
    }

    100% {
        opacity: .4;
        transform: translate(-40%, -40%) rotate(150deg) scale(1)
    }
}

/* rotate */
@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes rotateInfinite {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes rotateInfinite30Deg {
    0% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(30deg)
    }

    100% {
        transform: rotate(0)
    }
}

@keyframes rotate-center {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

/* neon / text effects */
@keyframes neon_effect_y {

    0%,
    100% {
        text-shadow: 0 0 2px rgba(188, 149, 29, .4), 0 0 4px rgba(188, 149, 29, .4), 0 0 8px rgba(188, 149, 29, .4), 0 0 16px rgba(188, 149, 29, .4), 0 0 32px rgba(188, 149, 29, .4), 0 0 40px rgba(188, 149, 29, .4), 0 0 60px rgba(188, 149, 29, .4), 0 0 80px rgba(188, 149, 29, .4)
    }

    50% {
        text-shadow: 0 0 1px rgba(188, 149, 29, .4), 0 0 2px rgba(188, 149, 29, .4), 0 0 3px rgba(188, 149, 29, .4), 0 0 4px rgba(188, 149, 29, .4), 0 0 5px rgba(188, 149, 29, .4), 0 0 6px rgba(188, 149, 29, .4), 0 0 8px rgba(188, 149, 29, .4), 0 0 10px rgba(188, 149, 29, .4)
    }
}

@keyframes neon_effect_r {

    0%,
    100% {
        text-shadow: 0 0 1px rgba(176, 22, 19, .2), 0 0 2px rgba(176, 22, 19, .2), 0 0 4px rgba(176, 22, 19, .2), 0 0 8px rgba(176, 22, 19, .2), 0 0 16px rgba(176, 22, 19, .2), 0 0 25px rgba(176, 22, 19, .2), 0 0 40px rgba(176, 22, 19, .2), 0 0 50px rgba(176, 22, 19, .2)
    }

    50% {
        text-shadow: 0 0 1px rgba(176, 22, 19, .2), 0 0 2px rgba(176, 22, 19, .2), 0 0 3px rgba(176, 22, 19, .2), 0 0 4px rgba(176, 22, 19, .2), 0 0 5px rgba(176, 22, 19, .2), 0 0 6px rgba(176, 22, 19, .2), 0 0 8px rgba(176, 22, 19, .2), 0 0 10px rgba(176, 22, 19, .2)
    }
}

@keyframes vibrate-1 {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-2px, 2px)
    }

    40% {
        transform: translate(-2px, -2px)
    }

    60% {
        transform: translate(2px, 2px)
    }

    80% {
        transform: translate(2px, -2px)
    }

    100% {
        transform: translate(0)
    }
}

@keyframes roll-in-left {
    0% {
        transform: translateX(-800px) rotate(-540deg);
        opacity: 0
    }

    100% {
        transform: translateX(0) rotate(0);
        opacity: 1
    }
}

@keyframes graph_change {
    0% {
        background-blend-mode: unset;
        background: conic-gradient(#737373 18deg, #919191 18deg, #919191 66deg, #737373 66deg, #737373 188deg, #919191 188deg, #919191 209deg, #737373 209deg, #737373 219deg, #d5363c 219deg)
    }

    100% {
        background-blend-mode: multiply;
        background: conic-gradient(#737373 18deg, #919191 18deg, #919191 66deg, #737373 66deg, #737373 188deg, #919191 188deg, #919191 209deg, #737373 209deg, #737373 219deg, #bd232a 219deg)
    }
}

@keyframes heartbeat {
    from {
        transform: scale(1);
        transform-origin: center;
        animation-timing-function: ease-out
    }

    10% {
        transform: scale(.91);
        animation-timing-function: ease-in
    }

    17% {
        transform: scale(.98);
        animation-timing-function: ease-out
    }

    33% {
        transform: scale(.87);
        animation-timing-function: ease-in
    }

    45% {
        transform: scale(1);
        animation-timing-function: ease-out
    }
}

@keyframes text-pop-up-top {
    0% {
        transform: translateY(0);
        text-shadow: none
    }

    100% {
        transform: translateY(-50px);
        text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc, 0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc, 0 50px 30px rgba(0, 0, 0, .3)
    }
}

@keyframes text-focus-in {
    0% {
        filter: blur(12px);
        opacity: .2
    }

    10% {
        filter: blur(4px);
        opacity: .8
    }

    30%,
    70% {
        filter: blur(0);
        opacity: 1
    }

    90% {
        filter: blur(4px);
        opacity: .8
    }

    100% {
        filter: blur(12px);
        opacity: .2
    }
}

@keyframes swing-in-top-fwd {
    0% {
        transform: rotateX(-100deg);
        transform-origin: top;
        opacity: 0
    }

    100% {
        transform: rotateX(0);
        transform-origin: top;
        opacity: 1
    }
}

@keyframes text-shadow-pop-br {
    0% {
        text-shadow: 0 0 #4e2928;
        transform: translate(0, 0)
    }

    100% {
        text-shadow: 1px 1px #4e2928, 2px 2px #4e2928, 3px 3px #4e2928, 4px 4px #4e2928, 5px 5px #4e2928, 6px 6px #4e2928, 7px 7px #4e2928, 8px 8px #4e2928;
        transform: translate(-8px, -8px)
    }
}

@keyframes text-shadow-pop-move-br {
    0% {
        text-shadow: 0 0 #4e2928;
        transform: translate(0, 0)
    }

    40% {
        text-shadow: 1px 1px #4e2928, 2px 2px #4e2928, 3px 3px #4e2928, 4px 4px #4e2928, 5px 5px #4e2928, 6px 6px #4e2928, 7px 7px #4e2928, 8px 8px #4e2928;
        transform: translate(-12px, -12px)
    }

    100% {
        text-shadow: 0 0 #4e2928;
        transform: translate(0, 0)
    }
}

@keyframes jello-vertical {
    0% {
        transform: scale3d(1, 1, 1)
    }

    30% {
        transform: scale3d(.75, 1.25, 1)
    }

    40% {
        transform: scale3d(1.25, .75, 1)
    }

    50% {
        transform: scale3d(.85, 1.15, 1)
    }

    65% {
        transform: scale3d(1.05, .95, 1)
    }

    75% {
        transform: scale3d(.95, 1.05, 1)
    }

    100% {
        transform: scale3d(1, 1, 1)
    }
}

@keyframes text-pop-up-tl {
    0% {
        transform: translate(0, 0);
        text-shadow: none
    }

    100% {
        transform: translate(-50px, -50px);
        text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc, 0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc, 0 50px 30px rgba(0, 0, 0, .3)
    }
}

/* progress / reveal */
@keyframes progress {
    from {
        width: 0%
    }

    to {
        width: 100%
    }
}

@keyframes reveal {
    from {
        clip-path: inset(0 100% 0 0)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

/* rolling */
@keyframes textLoop {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}