/* 애니메이션 전용 스타일시트 */

/* 기본 애니메이션 키프레임 */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes floatTool {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-25px) rotate(8deg);
        opacity: 0.6;
    }
}

/* SVG 스케치 애니메이션 */
.draw-stroke {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

/* 패널 프레임 애니메이션 */
.panel-frame {
    stroke: var(--primary-black);
    stroke-width: 2;
    animation: drawPanel1 2s ease-in-out 0.5s forwards;
}

.panel-frame-2 {
    stroke: var(--primary-black);
    stroke-width: 2;
    animation: drawPanel2 2s ease-in-out 2s forwards;
}

.panel-frame-3 {
    stroke: var(--primary-black);
    stroke-width: 2;
    animation: drawPanel3 2s ease-in-out 3.5s forwards;
}

/* 패널 내용 애니메이션 */
.panel-content {
    stroke: var(--charcoal);
    stroke-width: 1.5;
    animation: drawContent1 2s ease-in-out 1.5s forwards;
}

.panel-content-2 {
    stroke: var(--charcoal);
    stroke-width: 1.5;
    animation: drawContent2 2s ease-in-out 3s forwards;
}

.panel-content-3 {
    stroke: var(--charcoal);
    stroke-width: 1.5;
    animation: drawContent3 2s ease-in-out 4.5s forwards;
}

/* 화살표와 노트 애니메이션 */
.arrow-stroke {
    stroke: var(--accent-blue);
    stroke-width: 2;
    animation: drawArrows 2s ease-in-out 5.5s forwards;
}

.note-stroke {
    stroke: var(--accent-green);
    stroke-width: 1.5;
    animation: drawNotes 2s ease-in-out 6.5s forwards;
}

.title-stroke {
    stroke: var(--accent-red);
    stroke-width: 2.5;
    animation: drawTitle 2s ease-in-out 7.5s forwards;
}

/* 애니메이션 키프레임 정의 */
@keyframes drawPanel1 {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

@keyframes drawPanel2 {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

@keyframes drawPanel3 {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

@keyframes drawContent1 {
    0% { stroke-dashoffset: 800; }
    100% { stroke-dashoffset: 0; }
}

@keyframes drawContent2 {
    0% { stroke-dashoffset: 800; }
    100% { stroke-dashoffset: 0; }
}

@keyframes drawContent3 {
    0% { stroke-dashoffset: 800; }
    100% { stroke-dashoffset: 0; }
}

@keyframes drawArrows {
    0% { stroke-dashoffset: 600; }
    100% { stroke-dashoffset: 0; }
}

@keyframes drawNotes {
    0% { stroke-dashoffset: 700; }
    100% { stroke-dashoffset: 0; }
}

@keyframes drawTitle {
    0% { stroke-dashoffset: 500; }
    100% { stroke-dashoffset: 0; }
}

/* 성능 최적화를 위한 will-change 속성 */
.storyboard-drawing,
.floating-tool,
.platform-btn,
.feature-item,
.platform-card {
    will-change: transform;
}

/* 애니메이션 재시작 지원 */
.animation-restart {
    animation: none;
}

.animation-restart.restart {
    animation: inherit;
}