/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 * app/src/wp-content/themes/ystandard-child/pages/section_parts/top/concept.php 
 –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Gentle Animations */
@keyframes gentleRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes gentlePulse {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.6; 
    transform: scale(1.2);
  }
}

@keyframes floatStar {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg); 
    opacity: 0.6;
  }
  50% { 
    transform: translateY(-10px) rotate(180deg); 
    opacity: 0.8;
  }
}

@keyframes floatMoon {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg); 
    opacity: 0.5;
  }
  50% { 
    transform: translateY(8px) rotate(-10deg); 
    opacity: 0.7;
  }
}

@keyframes twinkle {
  0%, 100% { 
    opacity: 0.6; 
    transform: translateY(-50%) scale(1);
  }
  50% { 
    opacity: 1; 
    transform: translateY(-50%) scale(1.1);
  }
}

/* Animations */
@keyframes sparkle {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
  50% { transform: translateY(-50%) scale(1.2); opacity: 0.8; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(2px); }
}

.concept {
  margin: 80px auto;
  padding: 0 20px;
  max-width: 950px;
  position: relative;
}

.concept::before {
  content: '✨';
  position: absolute;
  top: -20px;
  left: 10%;
  font-size: 2rem;
  opacity: 0.6;
  animation: floatStar 4s ease-in-out infinite;
  z-index: 1;
}

.concept::after {
  content: '🌙';
  position: absolute;
  bottom: -20px;
  right: 15%;
  font-size: 1.8rem;
  opacity: 0.5;
  animation: floatMoon 5s ease-in-out infinite reverse;
  z-index: 1;
}

.concept > h2 {
  text-align: center;
  font-size: 2.0rem;
  color: #333;
  margin-bottom: 50px;
  position: relative;
}

.concept > h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(135deg, #8B5CF6, #3B82F6);
  margin: 15px auto 0;
  border-radius: 2px;
}

.concept-section {
  background: linear-gradient(145deg, 
    rgba(255, 248, 250, 0.95) 0%, 
    rgba(252, 245, 255, 0.9) 30%,
    rgba(255, 252, 245, 0.95) 70%,
    rgba(248, 250, 255, 0.9) 100%);
  border-radius: 30px;
  padding: 50px 40px;
  box-shadow: 
    0 20px 60px rgba(139, 92, 246, 0.08),
    0 8px 25px rgba(255, 182, 193, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.6);
  text-align: center;
  position: relative;
  overflow: hidden;
  transform: none;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.concept-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 182, 193, 0.03) 0deg,
    rgba(139, 92, 246, 0.05) 60deg,
    rgba(255, 192, 203, 0.04) 120deg,
    rgba(147, 51, 234, 0.03) 180deg,
    rgba(255, 182, 193, 0.03) 240deg,
    rgba(139, 92, 246, 0.05) 300deg,
    rgba(255, 182, 193, 0.03) 360deg
  );
  /* animation: gentleRotate 20s linear infinite; */
  opacity: 0.6;
}

.concept-section::after {
  content: '';
  position: absolute;
  top: 15px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(255, 182, 193, 0.3), transparent 70%);
  border-radius: 50%;
  animation: gentlePulse 3s ease-in-out infinite;
}

.concept-section p {
  line-height: 2;
  color: #5a4a6b;
  margin: 0 0 28px 0;
  font-weight: 400;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 2;
  transform: none;
  transition: all 0.4s ease;
  font-family: "Zen Maru Gothic", "Klee One", "Zen Kurenaido", "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.concept-section p:last-child {
  margin-bottom: 0;
  transform: none;
  position: relative;
}

.concept-section p:last-child::before {
  content: '💫';
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  animation: twinkle 2s ease-in-out infinite;
}

.concept-section p:last-child::after {
  content: '💫';
  position: absolute;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
  animation: twinkle 2s ease-in-out infinite 1s;
}

.concept-section p br {
  display: block;
  margin-bottom: 0.6em;
}

/* Responsive Design for Concept Section */
@media (max-width: 768px) {
  .concept {
    margin: 60px auto;
    padding: 0 15px;
  }

  .concept::before,
  .concept::after {
    display: none;
  }

  .concept > h2 {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  .concept-section {
    padding: 35px 30px;
    border-radius: 25px;
    transform: none;
  }

  .concept-section p {
    line-height: 1.9;
    margin-bottom: 24px;
  }

  .concept-section p:last-child::before,
  .concept-section p:last-child::after {
    left: -25px;
    right: -25px;
  }
}

@media (max-width: 480px) {
  .concept {
    margin: 40px auto;
  }

  .concept > h2 {
    font-size: 1.8rem;
  }

  .concept-section {
    padding: 30px 25px;
    border-radius: 20px;
    transform: rotate(0deg);
  }

  .concept-section p {
    line-height: 1.8;
    margin-bottom: 20px;
    letter-spacing: 0.03em;
  }

  .concept-section p:last-child::before,
  .concept-section p:last-child::after {
    display: none;
  }

  .concept-section p br {
    display: none;
  }
}