/* ==========================================================================
   Four Elements Page Styles - Premium Manuscript Mode
   Contents:
   1. Design Tokens (Variables & Typefaces)
   2. Global Base & Layout
   3. Ethereal Backgrounds (Peaceful BG, Stardust)
   4. Hero Section (Auras, Soft Typography)
   5. Content Cards (Reveal System, Intro Card)
   6. Definition Section (Element Items 01-04)
   7. 3D Carousel Component
   8. Comparison Visual (Happiness Cycle Map)
   9. Final CTA & Happiness Button
   10. Meditative Overlay
   11. Sidebar & Utility
   12. Animations (@keyframes)
   13. Responsive Queries
   ========================================================================== */

/* --- 1. Design Tokens --- */
:root {
  --clr-bg: #fdfdfd;
  --clr-text-title: #1e293b;
  --clr-text-body: #334155;
  --clr-text-muted: #64748b;

  /* Soul Mode Colors */
  --clr-love: #ff7ebb;
  --clr-love-soft: rgba(255, 126, 187, 0.1);
  --clr-praise: #f6d365;
  --clr-praise-soft: rgba(246, 211, 101, 0.1);
  --clr-useful: #4facfe;
  --clr-useful-soft: rgba(79, 172, 254, 0.1);
  --clr-needed: #a18cd1;
  --clr-needed-soft: rgba(161, 140, 209, 0.1);

  --font-main: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
  --font-heading: "Zen Maru Gothic", "Outfit", sans-serif;
  
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.4);
  --nav-height: 80px;
}

/* --- 2. Global Base & Layout --- */
body.four-elements-page {
  background-color: var(--clr-bg);
  color: var(--clr-text-body);
  line-height: 2;
  font-family: var(--font-main);
}

/* Global Layout handled by layout.css */

/* --- 3. Ethereal Backgrounds --- */
.bg-peaceful {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background:
    radial-gradient(circle at 0% 0%, var(--clr-love-soft) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, var(--clr-praise-soft) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, var(--clr-useful-soft) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, var(--clr-needed-soft) 0%, transparent 50%);
  z-index: -2;
  filter: blur(60px);
  animation: bgAuraMove 30s ease-in-out infinite alternate;
}

.bg-peaceful::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: overlay;
}

.stardust-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0.3;
  animation: stardustFloat 20s infinite linear;
}

/* --- 4. Hero Section --- */
.article-header {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
  padding: 4rem 0;
}

.hero-auras {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}

.aura-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.15;
  mix-blend-mode: multiply;
  animation: heroAuraFloat 15s infinite ease-in-out;
}

.aura-1 { width: 300px; height: 300px; background: var(--clr-love); top: -20%; left: 10%; }
.aura-2 { width: 250px; height: 250px; background: #27ae60; bottom: -10%; right: 15%; animation-delay: -3s; }
.aura-3 { width: 350px; height: 350px; background: var(--clr-praise); top: 10%; right: 5%; animation-delay: -7s; }
.aura-4 { width: 280px; height: 280px; background: var(--clr-needed); bottom: 10%; left: 5%; animation-delay: -11s; }

.article-header h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 8vw, 3.8rem);
  font-weight: 800;
  color: var(--clr-text-title);
  margin-bottom: 1.2rem;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.lead-subtitle {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--clr-text-muted);
  font-weight: 500;
  letter-spacing: 0.15em;
}

.category-badge {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  color: var(--clr-love);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px rgba(255, 107, 156, 0.1);
}

/* --- 5. Content Cards & Reveals --- */
.content-body h2 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--clr-text-title);
  margin: 6rem 0 2.5rem;
  position: relative;
  display: inline-block;
}

.content-body h2::after {
  content: "";
  position: absolute;
  bottom: 0.2rem; left: 0; width: 100%; height: 12px;
  background: var(--clr-useful-soft);
  z-index: -1;
  border-radius: 4px;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.main-answer-card {
  background: var(--glass-bg);
  backdrop-filter: blur(15px);
  padding: 3.5rem;
  border-radius: 40px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.04);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 5rem;
}

.main-answer-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 6px;
  background: linear-gradient(90deg, var(--clr-love), var(--clr-praise), var(--clr-useful), var(--clr-needed));
}

.answer-list {
  list-style: none;
  padding: 0; margin: 2rem 0;
  display: flex; flex-direction: column; gap: 1rem;
}

.answer-list li {
  font-size: 1.5rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  letter-spacing: 0.1em;
}

.answer-list li:nth-child(1) { color: var(--clr-love); }
.answer-list li:nth-child(2) { color: var(--clr-praise); }
.answer-list li:nth-child(3) { color: var(--clr-useful); }
.answer-list li:nth-child(4) { color: var(--clr-needed); }

/* --- 6. Definition Section --- */
.elements-list-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin: 4rem auto;
}

.element-item {
  display: flex; gap: 1.5rem; padding: 3rem;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 32px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--glass-border);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative; overflow: hidden;
}

.element-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 6px;
  background: var(--accent-clr, var(--clr-useful));
}

.element-item:nth-child(1) { --accent-clr: var(--clr-love); }
.element-item:nth-child(2) { --accent-clr: var(--clr-praise); }
.element-item:nth-child(3) { --accent-clr: var(--clr-useful); }
.element-item:nth-child(4) { --accent-clr: var(--clr-needed); }

.element-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  border-color: var(--accent-clr);
}

.element-tag {
  font-family: var(--font-heading);
  font-weight: 800; font-size: 3.5rem;
  color: var(--accent-clr);
  opacity: 0.15;
  position: absolute; top: 1rem; right: 1.5rem;
}

/* --- 7. 3D Carousel Component --- */
.carousel-container {
  display: flex; flex-direction: column; align-items: center;
  gap: 2.5rem; margin: 6rem auto;
  position: relative;
}

.carousel-status {
  position: absolute; top: -45px; right: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  display: flex; align-items: center; gap: 0.5rem;
  transition: all 0.3s ease;
  pointer-events: none;
}

.carousel-status.paused {
  color: var(--clr-love);
  border-color: var(--clr-love-soft);
  transform: scale(1.05);
}

.action-tiles-scene {
  width: 500px; height: 340px;
  perspective: 1500px;
}

.action-tiles-carousel {
  width: 100%; height: 100%;
  position: absolute; transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.wisdom-tile {
  position: absolute; width: 500px; height: 340px;
  cursor: pointer; backface-visibility: hidden;
}

.wisdom-tile:nth-child(1) { transform: rotateX(0deg) translateZ(380px); }
.wisdom-tile:nth-child(2) { transform: rotateX(-90deg) translateZ(380px); }
.wisdom-tile:nth-child(3) { transform: rotateX(-180deg) translateZ(380px); }
.wisdom-tile:nth-child(4) { transform: rotateX(-270deg) translateZ(380px); }

.tile-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  transform-style: preserve-3d;
}

.wisdom-tile.active .tile-inner {
  transform: rotateY(180deg) translateZ(80px);
}

.tile-front, .tile-back {
  position: absolute; inset: 0; padding: 2rem;
  border-radius: 30px; border: 1px solid var(--glass-border);
  backface-visibility: hidden;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.tile-front {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--glass-bg); backdrop-filter: blur(10px);
}

.theme-love .tile-front { background: var(--clr-love-soft); }
.theme-praise .tile-front { background: var(--clr-praise-soft); }
.theme-useful .tile-front { background: var(--clr-useful-soft); }
.theme-needed .tile-front { background: var(--clr-needed-soft); }

.tile-front i { font-size: 4rem; margin-bottom: 2rem; filter: drop-shadow(0 0 15px currentColor); }
.theme-love i { color: var(--clr-love); }
.theme-praise i { color: var(--clr-praise); }
.theme-useful i { color: var(--clr-useful); }
.theme-needed i { color: var(--clr-needed); }

.tile-back {
  transform: rotateY(180deg); background: white; text-align: left;
}

.tile-back h4 {
  font-size: 1.1rem; font-weight: 800; color: var(--clr-text-title);
  border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 0.5rem; margin-bottom: 1rem;
}

.tile-back ul { list-style: none; padding: 0; margin: 0; }
.tile-back li { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--clr-text-muted); display: flex; gap: 0.5rem; }
.tile-back li::before { content: "✦"; color: var(--clr-love); }

.partner-note {
  margin-top: 1rem; padding: 0.8rem 1rem; background: rgba(0,0,0,0.02);
  border-left: 3px solid var(--clr-love); border-radius: 12px;
  font-size: 0.8rem; line-height: 1.6; color: var(--clr-text-muted);
}

.partner-note::before {
  content: "\f0eb  ポイント！"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  display: block; font-size: 0.75rem; margin-bottom: 0.4rem; color: var(--clr-text-title);
}

.carousel-nav {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  width: 50px; height: 50px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.3s; z-index: 10;
}

.carousel-nav:hover { background: var(--clr-love); color: white; transform: scale(1.1); }

/* --- 8. Comparison Visual --- */
.happiness-cycle-map { margin: 8rem auto; max-width: 900px; }
.comparison-header { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 1rem; margin-bottom: 2rem; }

.comparison-title-box {
  color: white; padding: 1.2rem; border-radius: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.comparison-title-box.source { background: #27ae60; box-shadow: 0 4px 15px rgba(39, 174, 96, 0.2); }
.comparison-title-box.target { background: var(--clr-love); }

.cycle-container {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--glass-bg); padding: 2.5rem; border-radius: 40px;
  border: 1px solid var(--glass-border);
}

.cycle-row { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; gap: 1rem; }
.cycle-row:nth-child(2) { transition-delay: 3s; }
.cycle-row:nth-child(3) { transition-delay: 6s; }
.cycle-row:nth-child(4) { transition-delay: 9s; }

.cycle-node {
  padding: 1.2rem; border-radius: 20px; font-weight: 700; text-align: center;
}

.cycle-node.source { background: white; border: 1px solid rgba(0,0,0,0.05); color: var(--clr-text-title); }
.cycle-node.target { background: linear-gradient(135deg, var(--clr-love) 0%, #ff85ae 100%); color: white; }

.cycle-arrow { color: var(--clr-text-muted); opacity: 0.3; text-align: center; }

/* --- 9. Final CTA & Happiness Button --- */
.conclusion-section { display: flex; flex-direction: column; gap: 5rem; margin-top: 8rem; }

.conclusion-card {
  background: var(--glass-bg); padding: 3rem; border-radius: 40px;
  border: 1px solid var(--glass-border); box-shadow: 0 20px 50px rgba(0,0,0,0.03);
}

.message-card {
  background: #fff5f8; padding: 3.5rem 2rem; border-radius: 32px;
  border-left: 6px solid var(--clr-love); text-align: center;
}

.happiness-button {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  width: auto; min-width: 220px; max-width: 300px;
  margin: 2rem auto 0; padding: 0.8rem 2.5rem;
  background: linear-gradient(135deg, var(--clr-love) 0%, #ff85ae 100%);
  border: none; border-radius: 50px;
  color: white; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800;
  cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 15px 35px var(--clr-love-soft);
  overflow: hidden; letter-spacing: 0.1em;
}

.happiness-button i { font-size: 1.5rem; animation: heartBeat 2s infinite ease-in-out; }

.happiness-button:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(255, 107, 156, 0.4);
}

/* --- 10. Meditative Overlay --- */
.word-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 2rem;
}

.word-overlay.active { opacity: 1; pointer-events: auto; }

.overlay-content {
  background: transparent; max-width: 1000px; width: 90%; text-align: center;
  position: relative; transform: translateY(40px) scale(0.9);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.word-overlay.active .overlay-content { transform: translateY(0) scale(1); }

.overlay-text {
  font-family: var(--font-heading); font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--clr-text-title); line-height: 1.8; font-weight: 800;
  letter-spacing: 0.1em; animation: textFloat 3s infinite ease-in-out;
}

.overlay-quote-icon { position: absolute; font-size: 4rem; color: var(--clr-love-soft); opacity: 0.2; }
.overlay-quote-icon.top { top: -3rem; left: 0; }
.overlay-quote-icon.bottom { bottom: -3rem; right: 0; }

.close-hint {
  color: var(--clr-text-muted); margin-top: 4rem; font-size: 1rem;
  opacity: 0.5; animation: pulse 2s infinite;
}

/* --- 11. Sidebar & Utility --- */
.sidebar-wisdom {
  background: var(--glass-bg); padding: 2.5rem; border-radius: 24px;
  border: 1px solid var(--clr-praise);
  margin-bottom: 2.5rem;
}

.sidebar-wisdom .header { font-weight: 800; color: var(--clr-praise); margin-bottom: 1rem; display: flex; gap: 0.5rem; align-items: center; }

.sidebar-links { list-style: none; padding: 0; }
.sidebar-links a { display: block; padding: 1rem; color: var(--clr-text-muted); text-decoration: none; border-radius: 12px; transition: 0.3s; }
.sidebar-links a:hover { background: var(--clr-love-soft); color: var(--clr-love); }

.back-link { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 5rem; text-decoration: none; font-weight: 800; color: var(--clr-text-muted); transition: 0.3s; }
.back-link:hover { color: var(--clr-love); transform: translateX(-5px); }

/* --- 12. Animations --- */
@keyframes bgAuraMove {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(-2%, 2%); }
}

@keyframes heroAuraFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-15px, 15px) scale(0.9); }
}

@keyframes stardustFloat {
  0% { transform: translateY(105vh) scale(1); opacity: 0; }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-10vh) scale(0.5); opacity: 0; }
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.2); }
  30% { transform: scale(1); }
}

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

@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }

/* --- 13. Responsive Queries --- */
@media (max-width: 768px) {
  .article-header h1 { font-size: 2.5rem; }
  .layout-container { padding: 0 1rem; }
  .cycle-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .comparison-header { display: none; }
  .action-tiles-scene, .wisdom-tile { width: 90vw; height: auto; min-height: 400px; aspect-ratio: 4/3; }
  .main-answer-card { padding: 2rem; }
  .element-item { padding: 2rem; }
}

/* --- 14. Page Navigation Fix --- */
.page-nav-group {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 4rem 0 2rem;
  gap: 1rem;
}

.page-nav-group .nav-item {
  flex: 1;
  display: flex;
}

.page-nav-group .nav-item.is-left { justify-content: flex-start; }
.page-nav-group .nav-item.is-center { justify-content: center; }
.page-nav-group .nav-item.is-right { justify-content: flex-end; }

@media (max-width: 768px) {
  .page-nav-group {
    flex-direction: column !important;
    gap: 1.5rem;
  }
}