/* ================================================
  메인 페이지 두번째 section
  프로그램 살펴보기 내 이미지 hover 애니메이션 전용
  stylesheet

  tool : claude.ai
  author : yang
================================================ */

@media (hover: hover) and (min-width: 1080px) {
  /* ================== RESET ================== */
  #curtain {
    transform-box: fill-box;
    transform-origin: center top;
  }

  #camera,
  #red-star,
  #blue-star,
  #cloud,
  #magnifying-glass,
  #gear,
  #star-5hand,
  #star-4hand,
  .svg_major #book,
  #smile-mask,
  #sad-mask,
  #light,
  #light-2 {
    transform-box: fill-box;
    transform-origin: center center;
  }

  #dog-paw,
  #tube,
  #brush,
  #face,
  #mortarboard,
  #laptop-body,
  .svg_study #book,
  #map-pin,
  #building,
  #sha-sculpture,
  #briefcase,
  .svg_startup #bulb {
    transform-box: fill-box;
    transform-origin: center bottom;
  }

  #low-bar,
  #mid-bar,
  #high-bar {
    transform-box: fill-box;
    transform-origin: bottom center;
  }

  #brain {
    transform-box: fill-box;
    transform-origin: center center;
    filter: drop-shadow(rgba(178, 223, 199, 0) 0px 0px 8px);
    transition: filter 0.4s ease;
  }

  #ai-chip {
    transform-box: fill-box;
    transform-origin: center center;
    filter: drop-shadow(rgba(255, 221, 121, 0) 0px 0px 10px);
    transition: filter 0.3s ease;
  }

  .svg_study #bulb-body,
  .svg_study #light1,
  .svg_study #light2,
  .svg_study #light3 {
    filter: drop-shadow(rgba(255, 207, 95, 0) 0px 0px 16px);
    transition: filter 0.3s ease-in-out;
  }

  .svg_startup #bulb-body,
  .svg_startup #light1,
  .svg_startup #light2,
  .svg_startup #light3 {
    filter: drop-shadow(rgba(255, 217, 123, 0) 0px 0px 12px);
    transition: filter 0.3s ease-in-out;
  }

  #minute-hand {
    transform-box: fill-box;
    transform-origin: 3px center;
  }

  #line1,
  #line2,
  #line3,
  #line4,
  #line5 {
    transition: opacity 0.3s ease;
  }

  #road-line {
    opacity: 1;
  }

  #smile-shadow,
  #sad-shadow {
    transition: opacity 0.4s ease;
  }

  .img_marble:hover .marble-container .card1 {
    transform: translateX(-5px) rotate(-12deg);
    opacity: 1;
    transition: transform 0.45s ease 0.1s, opacity 0.3s ease 0.1s;
  }

  .img_marble:hover .marble-container .card2 {
    transform: translateX(-10px) rotate(-22deg);
    opacity: 1;
    transition: transform 0.45s ease 0.35s, opacity 0.3s ease 0.35s;
  }

  .img_marble:hover .board-container {
    left: 24px;
  }

  .img_marble:hover .mn_prog_card__icon .board-container img.marble-part__player {
    width: 20px;
    transition: width 0.3s ease, left 0.5s ease, bottom 0.5s ease;
  }
  
  .img_marble:hover .marble-part__player.player1 { left: 80px;}
  .img_marble:hover .marble-part__player.player2 { left: 90px;}
  .img_marble:hover .marble-part__player.player3 { left: 100px;}
  .img_marble:hover .marble-part__player.player4 { left: 110px;}

  /* ================== HOVER ACTION ================== */
  /* career-experience 직업체험 */
  .svg_career:hover #camera {
    animation: cameraTilt 1.5s ease-in-out infinite;
  }

  .svg_career:hover #red-star {
    animation: starPulse 1.2s ease-in-out infinite;
  }

  .svg_career:hover #blue-star {
    animation: starPulseReverse 1.2s ease-in-out 0.3s infinite;
  }

  .svg_career:hover #dog-paw {
    animation: pawBounce 1s ease-in-out infinite;
  }

  .svg_career:hover #tube {
    animation: tubeWiggle 1.4s ease-in-out infinite;
  }

  .svg_career:hover #face {
    animation: faceNod 2s ease-in-out infinite;
  }

  .svg_career:hover #brush {
    animation: brushSwipe 1.2s ease-in-out infinite;
  }


  /* 커리어마블 */
  .img_marble:hover .player1 {
    animation: playerMove 4s ease-in-out 0.5s infinite;
  }
  .img_marble:hover .player2 {
    animation: playerMove 4s ease-in-out 1.3s infinite;
  }
  .img_marble:hover .player3 {
    animation: playerMove 4s ease-in-out 2.1s infinite;
  }
  .img_marble:hover .player4 {
    animation: playerMove 4s ease-in-out 2.9s infinite;
  }

  /* ai-experience ai체험 */
  .svg_aiex:hover #brain {
    filter: drop-shadow(rgba(178, 223, 199, 0.9) 0px 0px 10px);
    animation: brainPulse 2s ease-in-out infinite;
  }

  .svg_aiex:hover #cloud {
    animation: cloudFloat 3s ease-in-out infinite;
  }

  .svg_aiex:hover #mortarboard {
    animation: capBounce 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  }

  .svg_aiex:hover #ai-chip {
    filter: drop-shadow(rgba(255, 221, 121, 0.9) 0px 0px 12px);
    animation: chipGlow 1.5s ease-in-out infinite;
  }

  .svg_aiex:hover #laptop-body {
    animation: laptopPulse 2s ease-in-out infinite;
  }


  /* study-method 학습실무법 */
  .svg_study:hover #bulb-body,
  .svg_study:hover #light1,
  .svg_study:hover #light2,
  .svg_study:hover #light3 {
    filter: drop-shadow(rgba(255, 207, 95, 1) 0px 0px 16px);
  }

  .svg_study:hover #bulb-body,
  .svg_study:hover #light1,
  .svg_study:hover #light2,
  .svg_study:hover #light3,
  .svg_study:hover #filament {
    animation: bulbGlow 2s ease-in-out both;
  }

  .svg_study:hover #minute-hand {
    animation: minuteSpin 2s linear infinite;
  }

  .svg_study:hover #line1 {
    animation: lineFade 0.4s ease 0s both;
  }

  .svg_study:hover #line2 {
    animation: lineFade 0.4s ease 0.1s both;
  }

  .svg_study:hover #line3 {
    animation: lineFade 0.4s ease 0.2s both;
  }

  .svg_study:hover #line4 {
    animation: lineFade 0.4s ease 0.3s both;
  }

  .svg_study:hover #line5 {
    animation: lineFade 0.4s ease 0.4s both;
  }

  .svg_study:hover #book {
    animation: bookWobble 1.2s ease-in-out infinite;
  }


  /* major-search 학과탐색 */
  .svg_major:hover #magnifying-glass {
    animation: glassSearch 2s ease-in-out infinite;
  }

  .svg_major:hover #gear {
    animation: gearSpin 3s linear infinite;
  }

  .svg_major:hover #mortarboard {
    animation: capBounce 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  }

  .svg_major:hover #star-5hand {
    animation: starTwinkle 1s ease-in-out infinite;
  }

  .svg_major:hover #star-4hand {
    animation: starTwinkle 1s ease-in-out 0.2s infinite;
  }

  .svg_major:hover #book {
    animation: bookShake 1.8s ease-in-out infinite;
  }


  /* campus-tour 캠퍼스투어 */
  .svg_campus:hover #map-pin {
    animation: pinBounce 1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  }

  .svg_campus:hover #building {
    animation: buildingPulse 2s ease-in-out infinite;
  }

  .svg_campus:hover #road-line {
    animation: roadFade 0.8s ease both;
  }

  .svg_campus:hover #sha-sculpture {
    animation: sculptureSway 2.5s ease-in-out infinite;
  }


  /* theater-experience 공연체험 */
  .svg_theater:hover #curtain {
    animation: curtainOpen 1.5s ease-in-out both;
  }

  .svg_theater:hover #smile-mask {
    animation: maskPulseSmile 2s ease-in-out infinite;
  }

  .svg_theater:hover #sad-mask {
    animation: maskPulseSad 2s ease-in-out infinite;
  }

  .svg_theater:hover #light {
    animation: spotlightBlink 2s ease-in-out infinite;
  }

  .svg_theater:hover #light-2 {
    animation: spotlightBlink 2s ease-in-out 1s infinite;
  }

  .svg_theater:hover #star-4hand {
    animation: starSpin 2s linear infinite;
  }

  .svg_startup:hover #bulb-body,
  .svg_startup:hover #light1,
  .svg_startup:hover #light2,
  .svg_startup:hover #light3 {
    filter: drop-shadow(rgba(255, 217, 123, 0.9) 0px 0px 12px);
  }

  .svg_startup:hover #bulb-body,
  .svg_startup:hover #light1,
  .svg_startup:hover #light2,
  .svg_startup:hover #light3,
  .svg_startup:hover #filament {
    animation: bulbGlow 2s ease-in-out both;
  }

  .svg_startup:hover #low-bar {
    animation: barGrow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0s both;
  }
  .svg_startup:hover #mid-bar {
    animation: barGrow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
  }
  .svg_startup:hover #high-bar {
    animation: barGrow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
  }

  .svg_startup:hover #briefcase {
    animation: briefcaseBounce 1.2s ease-in-out infinite;
  }

  /* ================== KEYFRAME SET ================== */

  /* 공통 */
  @keyframes bulbGlow {
    0%       { opacity: 1; }
    41.99%   { opacity: 1; }
    42%      { opacity: 0; }
    43%      { opacity: 0; }
    43.01%   { opacity: 1; }
    47.99%   { opacity: 1; }
    48%      { opacity: 0; }
    49%      { opacity: 0; }
    49.01%   { opacity: 1; }
    100%     { opacity: 1; }
  }

  @keyframes capBounce {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-8px); }
    60%      { transform: translateY(-4px); }
  }

  /* career-experience 직업체험 전용 */
  @keyframes cameraTilt {
    0%, 100% { transform: rotate(0deg); }
    30%      { transform: rotate(-6deg); }
    60%      { transform: rotate(4deg); }
  }

  @keyframes starPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.2) rotate(20deg); }
  }

  @keyframes starPulseReverse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.2) rotate(-20deg); }
  }

  @keyframes pawBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    40%      { transform: translateY(-8px) scale(1.05); }
    70%      { transform: translateY(-4px) scale(1.02); }
  }

  @keyframes tubeWiggle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-5deg); }
    75%      { transform: rotate(5deg); }
  }

  @keyframes faceNod {
    0%, 100% { transform: rotate(0deg); }
    40%      { transform: rotate(2deg); }
    70%      { transform: rotate(-1deg); }
  }

  @keyframes brushSwipe {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    40%      { transform: translateY(-6px) rotate(-8deg); }
    70%      { transform: translateY(3px) rotate(4deg); }
  }


  /* 커리어마블 */
  @keyframes playerMove {
    /* 시작칸 (우하단) */
    0%  { left: 105px; bottom: 5px;   transform: translateY(0)    scaleY(1);   }
  
    /* 우측 → 위로 */
    4%  {                              transform: translateY(-12px) scaleY(0.9); }
    8%  { left: 105px; bottom: 55px;  transform: translateY(0)    scaleY(1.1); }
    10% {                              transform: scaleY(1); }
  
    14% {                              transform: translateY(-12px) scaleY(0.9); }
    18% { left: 105px; bottom: 105px; transform: translateY(0)    scaleY(1.1); }
    20% {                              transform: scaleY(1); }
  
    /* 상단 → 왼쪽으로 */
    24% {                              transform: translateY(-12px) scaleY(0.9); }
    28% { left: 55px;  bottom: 105px; transform: translateY(0)    scaleY(1.1); }
    30% {                              transform: scaleY(1); }
  
    34% {                              transform: translateY(-12px) scaleY(0.9); }
    38% { left: 5px;   bottom: 105px; transform: translateY(0)    scaleY(1.1); }
    40% {                              transform: scaleY(1); }
  
    /* 좌측 → 아래로 */
    44% {                              transform: translateY(-12px) scaleY(0.9); }
    48% { left: 5px;   bottom: 55px;  transform: translateY(0)    scaleY(1.1); }
    50% {                              transform: scaleY(1); }
  
    54% {                              transform: translateY(-12px) scaleY(0.9); }
    58% { left: 5px;   bottom: 5px;   transform: translateY(0)    scaleY(1.1); }
    60% {                              transform: scaleY(1); }
  
    /* 하단 → 오른쪽으로 */
    64% {                              transform: translateY(-12px) scaleY(0.9); }
    68% { left: 55px;  bottom: 5px;   transform: translateY(0)    scaleY(1.1); }
    70% {                              transform: scaleY(1); }
  
    /* 시작칸 복귀 (우하단) */
    74% {                              transform: translateY(-12px) scaleY(0.9); }
    78% { left: 105px; bottom: 5px;   transform: translateY(0)    scaleY(1.1); }
    80% {                              transform: scaleY(1); }
  
    /* 80~100%: 시작칸에서 대기 (다음 루프 준비) */
    100% { left: 105px; bottom: 5px;  transform: translateY(0)    scaleY(1);   }
  }
  

  /* ai-experience ai체험 전용 */
  @keyframes brainPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
  }

  @keyframes cloudFloat {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-8px); }
  }

  @keyframes chipGlow {
    0%, 100% { filter: drop-shadow(rgba(255, 221, 121, 0.9) 0px 0px 12px); }
    50%      { filter: drop-shadow(rgba(255, 221, 121, 0.3) 0px 0px 4px); }
  }

  @keyframes laptopPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.015); }
  }


  /* study-method 학습실무법 전용 */
  @keyframes minuteSpin {
    0%     { transform: rotate(0deg); }
    100%   { transform: rotate(360deg); }
  }

  @keyframes lineFade {
    0%   { opacity: 0; transform: translateX(-6px); }
    100% { opacity: 1; transform: translateX(0); }
  }

  @keyframes bookWobble {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-2deg); }
  }


  /* major-search 학과탐색 전용 */
  @keyframes glassSearch {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25%      { transform: translateX(-8px) rotate(-5deg); }
    75%      { transform: translateX(8px) rotate(5deg); }
  }

  @keyframes gearSpin {
    0%     { transform: rotate(0deg); }
    100%   { transform: rotate(360deg); }
  }

  @keyframes starTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50%      { transform: scale(1.3) rotate(30deg); opacity: 0.7; }
  }

  @keyframes bookShake {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-2deg); }
    75%      { transform: rotate(2deg); }
  }


  /* campus-tour 캠퍼스투어 전용 */
  @keyframes pinBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30%      { transform: translateY(-10px) scale(1.05); }
    50%      { transform: translateY(-6px) scale(1.02); }
    70%      { transform: translateY(-9px) scale(1.04); }
  }

  @keyframes buildingPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
  }

  @keyframes roadFade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes sculptureSway {
    0%, 100% { transform: rotate(0deg); }
    30%      { transform: rotate(1deg); }
    70%      { transform: rotate(-1deg); }
  }


  /* theater-experience 공연체험 전용 */
  @keyframes curtainOpen {
    0%   { transform: scaleX(1); }
    40%  { transform: scaleX(1.06); }
    100% { transform: scaleX(1); }
  }

  @keyframes maskPulseSmile {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
  }

  @keyframes maskPulseSad {
    0%, 100% { transform: scale(1.08); }
    50%      { transform: scale(1); }
  }

  @keyframes spotlightBlink {
    0%, 100% { opacity: 1; }
    45%      { opacity: 1; }
    50%      { opacity: 0.4; }
    55%      { opacity: 1; }
  }

  @keyframes starSpin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
  }


  /* startup-camp 창업캠프 전용 */
  @keyframes barGrow {
    0%   { transform: scaleY(0); }
    100% { transform: scaleY(1); }
  }

  @keyframes briefcaseBounce {
    0%, 100% { transform: translateY(0px); }
    40%      { transform: translateY(-6px); }
    60%      { transform: translateY(-3px); }
    80%      { transform: translateY(-5px); }
  }
}