/* ottogi-tuna-style.css */
.banner-container {
  width: 100%;
  height: 280px;
  position: relative;
  overflow: hidden;
  font-family: 'Noto Sans KR', sans-serif;
}

.tuna-event-banner {
  width: 100%;
  height: 280px;
  display: none;
  position: absolute;
  overflow: hidden;
  color: white;
  justify-content: center;
}

/* 오뚜기 참치 특가 배너 - 골드 그라데이션 */
.banner-1 {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
  background-size: 200% 200%;
  animation: goldShimmer 5s ease-in-out infinite;
}

/* 여름 요리 배너 - 요리 불꽃 그라데이션 */
.banner-2 {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FFD23F 100%);
  background-size: 200% 200%;
  animation: cookingFlame 4s ease-in-out infinite;
}

/* 가성비 배너 - 돈다발 그린 그라데이션 */
.banner-3 {
  background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 50%, #CDDC39 100%);
  background-size: 200% 200%;
  animation: moneyWave 4.5s ease-in-out infinite;
}

/* 무료배송 배너 - 빠른 배송 블루 그라데이션 */
.banner-4 {
  background: linear-gradient(135deg, #2196F3 0%, #03A9F4 50%, #00BCD4 100%);
  background-size: 200% 200%;
  animation: speedDelivery 3.5s ease-in-out infinite;
}

@keyframes goldShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes cookingFlame {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes moneyWave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes speedDelivery {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.banner-content {
  width: 85%;
  max-width: 1200px;
  display: flex;
  margin: 0 auto;
  align-items: center;
  padding-top: 20px;
}

.banner-left, .banner-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 28%;
  font-weight: bold;
}

.banner-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44%;
  position: relative;
  margin-bottom: 70px;
  padding-top: 10px;
}

.big-text {
  font-size: 2.8rem;
  font-weight: 900;
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
  animation: textPop 3s ease-in-out infinite alternate;
}

@keyframes textPop {
  0% { 
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); 
    transform: scale(1);
  }
  100% { 
    text-shadow: 3px 3px 8px rgba(255, 255, 255, 0.3), 0 0 25px rgba(255, 255, 255, 0.2); 
    transform: scale(1.02);
  }
}

.coupon-amount {
  font-size: 2.6rem;
  font-weight: 900;
  background: linear-gradient(45deg, #FFFFFF, #F8F8FF);
  padding: 15px 30px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  margin: 8px 0 5px 0;
  position: relative;
  border: 3px solid #FFD700;
  color: #FF4500;
}

.discount-badge {
  font-size: 1.1rem;
  font-weight: bold;
  background: linear-gradient(45deg, #FF1744, #FF5722);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  margin: 5px 0 10px 0;
  box-shadow: 0 3px 10px rgba(255, 23, 68, 0.5);
  animation: badgeBlink 2s ease-in-out infinite;
}

@keyframes badgeBlink {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

.coupon-button {
  color: white;
  border: 3px solid rgba(255, 255, 255, 0.4);
  padding: 14px 35px;
  border-radius: 35px;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.coupon-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s;
}

.coupon-button:hover::before {
  left: 100%;
}

.banner-1 .coupon-button {
  background: linear-gradient(45deg, #FF8C00, #FFD700);
}

.banner-2 .coupon-button {
  background: linear-gradient(45deg, #FF6B35, #F7931E);
}

.banner-3 .coupon-button {
  background: linear-gradient(45deg, #4CAF50, #8BC34A);
}

.banner-4 .coupon-button {
  background: linear-gradient(45deg, #2196F3, #03A9F4);
}

.coupon-button:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.banner-1 .coupon-button:hover {
  background: linear-gradient(45deg, #FFA500, #FFFF00);
}

.banner-2 .coupon-button:hover {
  background: linear-gradient(45deg, #FF7043, #FFD54F);
}

.banner-3 .coupon-button:hover {
  background: linear-gradient(45deg, #66BB6A, #CDDC39);
}

.banner-4 .coupon-button:hover {
  background: linear-gradient(45deg, #42A5F5, #26C6DA);
}

.banner-note {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  opacity: 0.95;
  margin-top: 15px;
  padding-top: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  font-weight: 600;
}

.emoji {
  font-size: 1.8rem;
  margin: 0 8px;
  animation: emojiWiggle 2.5s ease-in-out infinite;
}

@keyframes emojiWiggle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(-8deg); }
  75% { transform: translateY(-2px) rotate(8deg); }
}

/* Animation for attention */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 3s infinite;
}

/* 다채로운 배너 전환 애니메이션 */

/* 첫 번째 배너 - 황금 참치 등장 */
@keyframes goldenTunaEntry {
  0% { 
    opacity: 0; 
    transform: rotateY(180deg) scale(0.5) translateX(-200px);
    filter: hue-rotate(180deg) blur(8px);
  }
  30% { 
    opacity: 0.6; 
    transform: rotateY(90deg) scale(0.8) translateX(-50px);
    filter: hue-rotate(90deg) blur(4px);
  }
  60% { 
    opacity: 0.8; 
    transform: rotateY(45deg) scale(1.1) translateX(20px);
    filter: hue-rotate(30deg) blur(2px);
  }
  100% { 
    opacity: 1; 
    transform: rotateY(0deg) scale(1) translateX(0px);
    filter: hue-rotate(0deg) blur(0px);
  }
}

@keyframes goldenTunaExit {
  0% { 
    opacity: 1; 
    transform: rotateY(0deg) scale(1) translateX(0px);
    filter: hue-rotate(0deg) blur(0px);
  }
  100% { 
    opacity: 0; 
    transform: rotateY(-180deg) scale(0.3) translateX(300px);
    filter: hue-rotate(-180deg) blur(10px);
  }
}

/* 두 번째 배너 - 요리 플레임 */
@keyframes cookingFlameEntry {
  0% { 
    opacity: 0; 
    transform: scale(0.3) translateY(200px) rotateZ(-90deg);
    filter: brightness(3) saturate(0);
  }
  25% { 
    opacity: 0.4; 
    transform: scale(0.7) translateY(50px) rotateZ(-45deg);
    filter: brightness(2) saturate(0.5);
  }
  75% { 
    opacity: 0.9; 
    transform: scale(1.1) translateY(-10px) rotateZ(10deg);
    filter: brightness(1.2) saturate(1.2);
  }
  100% { 
    opacity: 1; 
    transform: scale(1) translateY(0px) rotateZ(0deg);
    filter: brightness(1) saturate(1);
  }
}

@keyframes cookingFlameExit {
  0% { 
    opacity: 1; 
    transform: scale(1) translateY(0px) rotateZ(0deg);
    filter: brightness(1) saturate(1);
  }
  100% { 
    opacity: 0; 
    transform: scale(0.2) translateY(-250px) rotateZ(180deg);
    filter: brightness(5) saturate(0);
  }
}

/* 세 번째 배너 - 돈다발 효과 */
@keyframes moneyStackEntry {
  0% { 
    opacity: 0; 
    transform: perspective(800px) rotateX(90deg) translateZ(-200px) scale(0.4);
    filter: contrast(2) brightness(0.5);
  }
  40% { 
    opacity: 0.7; 
    transform: perspective(800px) rotateX(30deg) translateZ(-50px) scale(0.9);
    filter: contrast(1.5) brightness(0.8);
  }
  100% { 
    opacity: 1; 
    transform: perspective(800px) rotateX(0deg) translateZ(0px) scale(1);
    filter: contrast(1) brightness(1);
  }
}

@keyframes moneyStackExit {
  0% { 
    opacity: 1; 
    transform: perspective(800px) rotateX(0deg) translateZ(0px) scale(1);
    filter: contrast(1) brightness(1);
  }
  100% { 
    opacity: 0; 
    transform: perspective(800px) rotateX(-90deg) translateZ(-300px) scale(0.3);
    filter: contrast(3) brightness(2);
  }
}

/* 네 번째 배너 - 배송 스피드 */
@keyframes speedDeliveryEntry {
  0% { 
    opacity: 0; 
    transform: translateX(-100%) skewX(-30deg) scale(0.6);
    filter: blur(15px) contrast(2);
  }
  30% { 
    opacity: 0.5; 
    transform: translateX(-30%) skewX(-15deg) scale(0.8);
    filter: blur(8px) contrast(1.5);
  }
  70% { 
    opacity: 0.8; 
    transform: translateX(10%) skewX(5deg) scale(1.05);
    filter: blur(3px) contrast(1.2);
  }
  100% { 
    opacity: 1; 
    transform: translateX(0%) skewX(0deg) scale(1);
    filter: blur(0px) contrast(1);
  }
}

@keyframes speedDeliveryExit {
  0% { 
    opacity: 1; 
    transform: translateX(0%) skewX(0deg) scale(1);
    filter: blur(0px) contrast(1);
  }
  100% { 
    opacity: 0; 
    transform: translateX(120%) skewX(30deg) scale(0.4);
    filter: blur(20px) contrast(3);
  }
}

/* 배너별 애니메이션 클래스 */
.banner-1.fade-in {
  animation: goldenTunaEntry 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  display: flex !important;
}

.banner-1.fade-out {
  animation: goldenTunaExit 0.9s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.banner-2.fade-in {
  animation: cookingFlameEntry 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  display: flex !important;
}

.banner-2.fade-out {
  animation: cookingFlameExit 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.banner-3.fade-in {
  animation: moneyStackEntry 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  display: flex !important;
}

.banner-3.fade-out {
  animation: moneyStackExit 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

.banner-4.fade-in {
  animation: speedDeliveryEntry 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  display: flex !important;
}

.banner-4.fade-out {
  animation: speedDeliveryExit 1.0s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
/* 참치 햇살 효과 - 황금빛 */
.banner-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 215, 0, 0.15) 30deg,
    rgba(255, 165, 0, 0.25) 60deg,
    transparent 90deg,
    rgba(255, 215, 0, 0.2) 120deg,
    rgba(255, 140, 0, 0.15) 150deg,
    transparent 180deg,
    rgba(255, 215, 0, 0.1) 210deg,
    rgba(255, 165, 0, 0.2) 240deg,
    transparent 270deg,
    rgba(255, 215, 0, 0.18) 300deg,
    rgba(255, 140, 0, 0.12) 330deg,
    transparent 360deg
  );
  animation: tunaSunRays 10s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes tunaSunRays {
  0% { transform: rotate(0deg) scale(1); }
  33% { transform: rotate(120deg) scale(1.1); }
  66% { transform: rotate(240deg) scale(0.9); }
  100% { transform: rotate(360deg) scale(1); }
}

/* 배너별 특별 장식 효과 */
.banner-1::after {
  content: '🐟💰🎯💰🐟';
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3rem;
  opacity: 0.85;
  animation: floatingDecor 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.banner-2::after {
  content: '👨‍🍳🔥🍽️🔥👨‍🍳';
  position: absolute;
  bottom: 80px;
  right: 8%;
  font-size: 1.2rem;
  opacity: 0.8;
  animation: cookingDecor 3.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.banner-3::after {
  content: '💰💎🪙💎💰';
  position: absolute;
  top: 35px;
  right: 12%;
  font-size: 1.1rem;
  opacity: 0.75;
  animation: moneyDecor 4.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.banner-4::after {
  content: '🚚⚡📦⚡🚚';
  position: absolute;
  bottom: 80px;
  left: 8%;
  font-size: 1.2rem;
  opacity: 0.8;
  animation: deliveryDecor 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes floatingDecor {
  0%, 100% { transform: translateX(-50%) translateY(0px) rotate(0deg); }
  25% { transform: translateX(-45%) translateY(-10px) rotate(5deg); }
  50% { transform: translateX(-55%) translateY(-6px) rotate(-3deg); }
  75% { transform: translateX(-48%) translateY(-12px) rotate(2deg); }
}

@keyframes cookingDecor {
  0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); }
  30% { transform: translateY(-15px) scale(1.15) rotate(-8deg); }
  60% { transform: translateY(-8px) scale(0.9) rotate(5deg); }
}

@keyframes moneyDecor {
  0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
  25% { transform: translateY(-8px) translateX(12px) rotate(15deg) scale(1.1); }
  50% { transform: translateY(-4px) translateX(-8px) rotate(-12deg) scale(0.95); }
  75% { transform: translateY(-12px) translateX(5px) rotate(8deg) scale(1.05); }
}

@keyframes deliveryDecor {
  0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
  25% { transform: translateX(15px) translateY(-5px) rotate(10deg); }
  50% { transform: translateX(-10px) translateY(-8px) rotate(-8deg); }
  75% { transform: translateX(8px) translateY(-3px) rotate(5deg); }
}

/* 특수 효과 애니메이션들 */
@keyframes starTwinkle {
  0%, 100% { 
    transform: scale(0.5) rotate(0deg);
    opacity: 0.5;
  }
  25% { 
    transform: scale(1.2) rotate(90deg);
    opacity: 1;
  }
  50% { 
    transform: scale(0.8) rotate(180deg);
    opacity: 0.8;
  }
  75% { 
    transform: scale(1.1) rotate(270deg);
    opacity: 0.9;
  }
}

@keyframes cookingDance {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
    opacity: 0.8;
  }
  25% { 
    transform: translateY(-15px) translateX(10px) rotate(15deg) scale(1.1);
    opacity: 1;
  }
  50% { 
    transform: translateY(-8px) translateX(-8px) rotate(-10deg) scale(0.9);
    opacity: 0.9;
  }
  75% { 
    transform: translateY(-20px) translateX(5px) rotate(8deg) scale(1.05);
    opacity: 0.95;
  }
}

@keyframes moneyFall {
  0% { 
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
    opacity: 1;
  }
  20% { 
    transform: translateY(60px) translateX(20px) rotate(90deg) scale(1.1);
    opacity: 0.9;
  }
  40% { 
    transform: translateY(140px) translateX(-15px) rotate(180deg) scale(0.9);
    opacity: 0.8;
  }
  60% { 
    transform: translateY(200px) translateX(30px) rotate(270deg) scale(1.05);
    opacity: 0.6;
  }
  80% { 
    transform: translateY(260px) translateX(-8px) rotate(350deg) scale(0.8);
    opacity: 0.4;
  }
  100% { 
    transform: translateY(320px) translateX(15px) rotate(420deg) scale(0.6);
    opacity: 0;
  }
}

@keyframes truckDriveRight {
  0% { 
    transform: translateX(0px) translateY(0px) scale(0.8) rotateY(0deg);
    opacity: 0;
  }
  20% { 
    opacity: 0.8;
    transform: translateX(250px) translateY(-8px) scale(1) rotateY(180deg);
  }
  50% { 
    opacity: 1;
    transform: translateX(500px) translateY(12px) scale(1.1) rotateY(360deg);
  }
  80% { 
    opacity: 0.7;
    transform: translateX(750px) translateY(-5px) scale(0.9) rotateY(540deg);
  }
  100% { 
    opacity: 0;
    transform: translateX(1000px) translateY(0px) scale(0.6) rotateY(720deg);
  }
}

@keyframes truckDriveLeft {
  0% { 
    transform: translateX(0px) translateY(0px) scale(0.8) rotateY(0deg);
    opacity: 0;
  }
  20% { 
    opacity: 0.8;
    transform: translateX(-250px) translateY(8px) scale(1) rotateY(-180deg);
  }
  50% { 
    opacity: 1;
    transform: translateX(-500px) translateY(-12px) scale(1.1) rotateY(-360deg);
  }
  80% { 
    opacity: 0.7;
    transform: translateX(-750px) translateY(5px) scale(0.9) rotateY(-540deg);
  }
  100% { 
    opacity: 0;
    transform: translateX(-1000px) translateY(0px) scale(0.6) rotateY(-720deg);
  }
}

/* 참치 특별 효과 */
@keyframes tunaSparkle {
  0%, 100% { 
    opacity: 0; 
    transform: scale(0) rotate(0deg); 
  }
  25% { 
    opacity: 0.7; 
    transform: scale(0.8) rotate(90deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2) rotate(180deg); 
  }
  75% { 
    opacity: 0.8; 
    transform: scale(0.9) rotate(270deg); 
  }
}

.coupon-amount::after {
  content: '🐟';
  position: absolute;
  top: -12px;
  right: -12px;
  font-size: 1.4rem;
  animation: tunaSparkle 3.5s infinite;
}

/* 할인 뱃지 특별 효과 */
.discount-badge::before {
  content: '⚡';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  animation: lightningFlash 1.5s infinite;
}

@keyframes lightningFlash {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(0.8); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.2); }
}

/* Responsive design */
@media (max-width: 768px) {
  .banner-container, .tuna-event-banner {
    height: 250px;
  }
  
  .banner-content {
    width: 95%;
    padding-top: 15px;
  }
  
  .big-text {
    font-size: 2.2rem;
  }
  
  .coupon-amount {
    font-size: 2.2rem;
    padding: 10px 20px;
  }
  
  .coupon-button {
    font-size: 1.2rem;
    padding: 12px 25px;
  }
  
  .emoji {
    font-size: 1.5rem;
  }
  
  .discount-badge {
    font-size: 1rem;
    padding: 4px 12px;
  }
  
  .banner-center {
    margin-bottom: 55px;
    padding-top: 8px;
  }
}

@media (max-width: 480px) {
  .banner-container, .tuna-event-banner {
    height: 220px;
  }
  
  .banner-content {
    width: 95%;
    padding-top: 12px;
  }
  
  .big-text {
    font-size: 1.6rem;
  }
  
  .coupon-amount {
    font-size: 1.8rem;
    padding: 8px 15px;
    margin: 5px 0;
  }
  
  .coupon-button {
    font-size: 1rem;
    padding: 10px 20px;
  }
  
  .emoji {
    font-size: 1.2rem;
    margin: 0 4px;
  }
  
  .banner-note {
    font-size: 0.85rem;
    bottom: 10px;
  }
  
  .discount-badge {
    font-size: 0.9rem;
    padding: 3px 10px;
  }
  
  .banner-center {
    margin-bottom: 50px;
    padding-top: 6px;
  }
}