:root {
            --imperial-red: #9c0a0a;
            --temple-gold: #c9a467;
            --aged-paper: #e8dfca;
            --dark-wood: #3a2618;
            --incense-smoke: #4a4a4a;
            --sacred-black: #1a0f0a;
                  --chi-energy: #ff6b35;
        }

#about {
    min-height: 100vh;
    background:
        /* molten core light */
        radial-gradient(circle at 50% 60%, rgba(255, 150, 50, 0.1) 0%, transparent 60%),
        /* sacred ember top aura */
        radial-gradient(ellipse at 50% -10%, rgba(255, 80, 60, 0.2) 0%, transparent 60%),
        /* golden energy veins */
        radial-gradient(ellipse at 20% 80%, rgba(255, 210, 120, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(255, 200, 80, 0.1) 0%, transparent 60%),
        /* divine glow ring */
        radial-gradient(circle at center, rgba(255, 230, 160, 0.08) 0%, transparent 75%),
        /* deep obsidian backdrop */
        linear-gradient(to bottom, #080404 0%, #0b0604 50%, #040201 100%);
    background-blend-mode: screen, overlay, color-dodge, overlay, normal;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 3em;
    color: #fdf6e3;
    text-shadow: 0 0 25px rgba(255, 190, 100, 0.25);
}


               #footer {
            background:
                radial-gradient(ellipse at 20% 10%, rgba(156, 10, 10, 0.15) 0%, transparent 40%),
                radial-gradient(ellipse at 80% 90%, rgba(201, 164, 103, 0.1) 0%, transparent 40%),
                linear-gradient(to bottom, #0f0805 0%, var(--sacred-black) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 2em;
                border-top: 3px solid var(--temple-gold);
        }


        /* Temple architecture elements */
        .temple-frame {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

.temple-pillar {
  position: absolute;
  width: 55px;
  height: 100%;
  background:
    /* 45° gold diagonals */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(212, 175, 55, 0.7) 10px,
      rgba(212, 175, 55, 0.7) 12px
    ),
    /* -45° gold diagonals */
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(212, 175, 55, 0.7) 10px,
      rgba(212, 175, 55, 0.7) 12px
    ),
    /* Base wood tone */
    linear-gradient(to right, #3b220f, #2c1a0f, #3b220f);
  border-left: 2px solid var(--temple-gold);
  border-right: 2px solid var(--temple-gold);
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(201, 164, 103, 0.3);
  background-blend-mode: overlay, overlay, normal;
}
/* Top ornament (capital) */
.temple-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%; /* slightly wider than pillar */
  height: 100px;
  background: linear-gradient(to bottom, var(--temple-gold), #d4af37);
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Bottom ornament (base) slightly above bottom */
.temple-pillar::after {
  content: '';
  position: absolute;
  bottom: 0; /* 15px above the very bottom */
  left: -10%;
  width: 120%;
  height: 25px;
  background: linear-gradient(to top, var(--temple-gold), #d4af37);
  border-radius: 5px 5px 0px 0px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
}
        .pillar-left {
            left: 10%;
        }

        .pillar-right {
            right: 10%;
        }

/* Existing styles */
.temple-beam {
    position: absolute;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, #2c1a0f, var(--dark-wood), #2c1a0f);
    border-top: 3px solid var(--temple-gold);
    border-bottom: 3px solid var(--temple-gold);
}

.temple-beam.beam-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    text-align: center;
}
.temple-beam-footer {
    position: absolute;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, #2c1a0f, var(--dark-wood), #2c1a0f);
    border-top: 3px solid var(--temple-gold);
    border-bottom: 3px solid var(--temple-gold);
}
.temple-beam-footer.beam-bottom-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    text-align: center;
}
.beam-top {
    top: 0;
}

.beam-bottom {
    bottom: 0;
}
.beam-bottom-footer {
    bottom: 0;
}

/* Hide beams on mobile screens */
@media (max-width: 768px) {
    .temple-beam {
display:none;
    }
    .temple-beam.beam-bottom{
    display:none;

    }
          .ornamental-border {
        position: absolute;
        width: 92%;
        height: 97%;
        top: 1%;
        left: 4%;
        border: 1px solid #c8a951;
        box-shadow: 0 0 20px rgba(200, 169, 81, 0.3);
        pointer-events: none;
        z-index: 0;
      }

      .ornamental-border::before, .ornamental-border::after {
        content: "";
        position: absolute;
        width: 40px;
        height: 40px;
        border: 2px solid #c8a951;
      }

      .ornamental-border::before {
        top: -5px;
        left: -5px;
        border-right: none;
        border-bottom: none;
      }

      .ornamental-border::after {
        bottom: -5px;
        right: -5px;
        border-left: none;
        border-top: none;
      }
}



        .about-content {
            max-width: 1100px;
            width: 100%;
            text-align: center;
            z-index: 10;
            position: relative;
            padding: 4em 0.5em;
        }

        .title-container {
            margin-bottom: 4em;
            position: relative;
        }

        .sacred-seal {
            width: 180px;
            height: 180px;
            margin: 0 auto 2em;
            border: 2px solid var(--temple-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 0 30px rgba(201, 164, 103, 0.4);
            animation: sealGlow 8s ease-in-out infinite;
            margin-top:4em;
        }

        @keyframes sealGlow {
            0%, 100% { box-shadow: 0 0 30px rgba(201, 164, 103, 0.4); }
            50% { box-shadow: 0 0 50px rgba(201, 164, 103, 0.7); }
        }

        .seal-character {
            font-family: "Yuji Boku", serif;
            font-size: 5rem;
            color: var(--temple-gold);
            text-shadow: 0 0 20px rgba(201, 164, 103, 0.7);
        }

        .chinese-title {
            font-family: "Yuji Boku", serif;
            font-size: 4rem;
            font-weight: 400;
            color: var(--temple-gold);
            margin-bottom: 0.2em;
            letter-spacing: 8px;
            text-align:center;
            text-shadow: 0 0 15px rgba(201, 164, 103, 0.5);
            position: relative;
        }



        .english-title {
            font-size: 2.2rem;
            color: var(--aged-paper);
            position: relative;
            display: inline-block;
            padding-bottom: 1rem;
        }

                .english-title-middle {
            font-size: 2.2rem;
            color: var(--aged-paper);
            position: relative;
text-align:center;
            padding-bottom: 1rem;
        }

        .english-title::before,
        .english-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--temple-gold), transparent);
        }

        .english-title::before {
            left: 0;
        }

        .english-title::after {
            right: 0;
        }


        .sacred-text {
            font-size: 1.3rem;
            line-height: 1.7;
            max-width: 800px;
            margin: 0 auto 3em;
            color: var(--aged-paper);
            text-justify: inter-ideograph;
            position: relative;
            padding: 0 2em;
            background: rgba(26, 15, 10, 0.5);
            backdrop-filter: blur(5px);
            border-radius: 10px;
            padding: 2em;
            border-left: 3px solid var(--temple-gold);
            border-right: 3px solid var(--temple-gold);
        }


        .pillars-of-wisdom {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2em;
        }

        .wisdom-pillar {
            padding: 2.5em 1.5em;

            position: relative;
            transition: all 0.5s ease;
        }

        .wisdom-pillar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, transparent, var(--temple-gold), transparent);
        }


        .pillar-symbol {
            font-family: "Yuji Boku", serif;
            font-size: 4rem;
            color: var(--temple-gold);
            margin-bottom: 0.5em;
            display: block;
            text-shadow: 0 0 15px rgba(201, 164, 103, 0.5);
        }

        .pillar-term {
            font-size: 1.4rem;
            color: var(--aged-paper);
            margin-bottom: 1em;
            letter-spacing: 2px;
            position: relative;
            padding-bottom: 10px;
        }

        .pillar-term::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--temple-gold), transparent);
        }

        .pillar-description {
            font-size: 1rem;
            line-height: 1.8;
            color: #c9b8a0;
        }

        .ancient-quote {
            margin: 4em auto;
            max-width: 700px;
            padding: 2em;
            border-top: 1px solid rgba(201, 164, 103, 0.3);
            border-bottom: 1px solid rgba(201, 164, 103, 0.3);
            position: relative;
        }

       /* .ancient-quote::before,
        .ancient-quote::after {
            content: '"';
            font-family: "Yuji Boku", serif;
            font-size: 4rem;
            color: var(--temple-gold);
            position: absolute;
            opacity: 0.5;
        }*/

        .ancient-quote::before {
            top: 0;
            left: 0;
        }

        .ancient-quote::after {
            bottom: -30px;
            right: 0;
        }

        .quote-text {
            font-size: 1.4rem;
            font-style: italic;
            line-height: 1.6;
            color: var(--aged-paper);
            margin-bottom: 1em;
        }

        .quote-source {
            font-size: 1rem;
            color: var(--temple-gold);
            text-align: right;
            font-style: normal;
        }

/* Responsive adjustments */
@media (max-width: 768px) {
    .sacred-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    .ancient-quote {
        padding: 1.5em;
        margin: 3em auto;
    }

    .quote-text {
        font-size: 1.2rem;
        line-height: 1.5;
    }

    .ancient-quote::before,
    .ancient-quote::after {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .sacred-text {
        font-size: 1rem;
        line-height: 1.4;
        padding: 0 0.8em;
    }

    .quote-text {
        font-size: 1rem;
        line-height: 1.4;
    }

    .ancient-quote {
        padding: 1em;
        margin: 2em auto;
    }

    .ancient-quote::before,
    .ancient-quote::after {
        font-size: 2.5rem;
    }
}
        .entrance-call {
            margin-top: 1.2em;
            margin-bottom: 1.2em;
            font-size: 1.2rem;
            letter-spacing: 3px;
            color: var(--temple-gold);
            position: relative;
            display: inline-block;
            padding: 1em 2em;
            border: 1px solid rgba(201, 164, 103, 0.5);
            transition: all 0.4s ease;
            cursor: pointer;
        }

        .entrance-call:hover {
            background: rgba(201, 164, 103, 0.1);
            box-shadow: 0 0 20px rgba(201, 164, 103, 0.3);
        }

        .entrance-call::before,
        .entrance-call::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border: 1px solid var(--temple-gold);
            transition: all 0.4s ease;
        }

        .entrance-call::before {
            top: -1px;
            left: -1px;
            border-right: none;
            border-bottom: none;
        }

        .entrance-call::after {
            bottom: -1px;
            right: -1px;
            border-left: none;
            border-top: none;
        }

        .entrance-call:hover::before,
        .entrance-call:hover::after {
            width: 100%;
            height: 100%;
        }

        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1.5s ease, transform 1.5s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        @media (max-width: 1024px) {
            .pillars-of-wisdom {
                grid-template-columns: repeat(2, 1fr);
            }

            .pillar-left {
                left: 5%;
            }

            .pillar-right {
                right: 5%;
            }
        }

        @media (max-width: 768px) {
            #about {
                padding: 1em;
            }

            .chinese-title {
                font-size: 2.5rem;
                letter-spacing: 4px;
            }

            .english-title {
                font-size: 1.8rem;
            }

                    .english-title-middle {
                font-size: 1.8rem;
            }

            .sacred-seal {
                width: 120px;
                height: 120px;
            }

            .seal-character {
                font-size: 3rem;
            }

            .pillars-of-wisdom {
                grid-template-columns: 1fr;
            }

            .temple-pillar {
                display: none;
            }
                 .temple-pillar-footer {
                display: none;
            }

            .sacred-text {
                font-size: 1.1rem;
                padding: 0;
            }
        }
.seal-logo {
    width: 70%;
    height: 70%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(201, 164, 103, 0.6))
            brightness(1.1)
            saturate(1.2);
    animation: logoGlow 8s ease-in-out infinite;
}

@keyframes logoGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(201, 164, 103, 0.5)) brightness(1.1); }
    50% { filter: drop-shadow(0 0 25px rgba(201, 164, 103, 0.9)) brightness(1.3); }
}
@media (max-width: 768px) {
  .pillars-of-wisdom {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2em;
    padding: 1em 1em;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .wisdom-pillar {
    flex: 0 0 100%; /* Keep full width, just side-by-side */
    scroll-snap-align: center;
    min-width: 100%;
    box-sizing: border-box;
  }

  /* Optional: Hide scrollbar for a clean look */
  .pillars-of-wisdom::-webkit-scrollbar {
    display: none;
  }

  /* Slight padding adjustments for mobile text balance */
  .pillar-description {
    font-size: 1rem;
    line-height: 1.6;
  }

.wisdom-indicators {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  margin-top: 1em;
}

.wisdom-indicators span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(201, 164, 103, 0.35);
  box-shadow: 0 0 8px rgba(201, 164, 103, 0.3);
  transition: all 0.3s ease;
}

.wisdom-indicators span.active {
  background: var(--temple-gold);
  transform: scale(1.3);
  box-shadow: 0 0 15px rgba(201, 164, 103, 0.6);
}
.wisdom-guidance {
  text-align: center;
  margin-top: 1em;
}

}

.swipe-hint {
  font-size: 0.95rem;
  color: rgba(201, 164, 103, 0.8);
  letter-spacing: 2px;
  margin-bottom: 0.4em;
  text-shadow: 0 0 8px rgba(201, 164, 103, 0.3);
  animation: gentlePulse 4s ease-in-out infinite;
}

/* 🔥 Animation stays here */
@keyframes gentlePulse {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* 👇 Hide on desktop, show only on mobile */
@media (min-width: 769px) {
  .swipe-hint {
    display: none;
  }
}@media (max-width: 768px) {
  .pillars-of-wisdom {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .wisdom-pillar {
    scroll-snap-align: center;
  }
}
/* Subtle floating animation for the pillars */
@keyframes floatPillar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); } /* subtle lift */
}

.wisdom-pillar {
    /* existing styles... */
    animation: floatPillar 6s ease-in-out infinite;
}

/* Optional: stagger animation delays for each pillar to feel organic */
.pillars-of-wisdom .wisdom-pillar:nth-child(1) {
    animation-delay: 0s;
}
.pillars-of-wisdom .wisdom-pillar:nth-child(2) {
    animation-delay: 1s;
}
.pillars-of-wisdom .wisdom-pillar:nth-child(3) {
    animation-delay: 2s;
}.pillars-of-wisdom .wisdom-pillar:nth-child(4) {
    animation-delay: 3s;
}.pillars-of-wisdom .wisdom-pillar:nth-child(5) {
    animation-delay:4s;
}.pillars-of-wisdom .wisdom-pillar:nth-child(6) {
    animation-delay: 5s;
}
 .silk-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -3;
            background:
                radial-gradient(ellipse at 20% 30%, rgba(201, 164, 103, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 70%, rgba(255, 107, 53, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 40% 80%, rgba(0, 168, 107, 0.05) 0%, transparent 50%),
                linear-gradient(135deg, var(--sacred-black) 0%, #1a1520 100%);
        }

        /* Animated Silk Fabric */
        .silk-fabric {
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background:
                repeating-linear-gradient(45deg,
                    transparent,
                    transparent 20px,
                    rgba(201, 164, 103, 0.03) 20px,
                    rgba(201, 164, 103, 0.03) 40px),
                repeating-linear-gradient(-45deg,
                    transparent,
                    transparent 20px,
                    rgba(255, 107, 53, 0.02) 20px,
                    rgba(255, 107, 53, 0.02) 40px);
            opacity: 0.5;
        }


        /* Ink Brush Strokes */
        .ink-strokes {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.1;
        }

        .ink-stroke {
            position: absolute;
            background: linear-gradient(to right, transparent, var(--temple-gold), transparent);
            border-radius: 50%;
            filter: blur(10px);
            opacity: 0;
            animation: inkAppear 8s ease-in-out infinite;
        }

        @keyframes inkAppear {
            0%, 100% { opacity: 0; transform: scale(0.8); }
            50% { opacity: 0.3; transform: scale(1.2); }
        }

        /* Chi Energy Orbs */
        .chi-orbs {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .chi-orb {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, var(--chi-energy) 0%, transparent 70%);
            filter: blur(20px);
            opacity: 0;
            animation: orbFloat 15s ease-in-out infinite;
        }

        @keyframes orbFloat {
            0% {
                transform: translateY(100vh) translateX(0) scale(0.5);
                opacity: 0;
            }
            20% {
                opacity: 0.4;
            }
            80% {
                opacity: 0.2;
            }
            100% {
                transform: translateY(-100px) translateX(100px) scale(1.2);
                opacity: 0;
            }
        }