:root{--primary-color: #e8c38d;--secondary-color: #b86614;--dark-brown: #3a2e21;--light-brown: #9c8265;--cream: #f9f3e9;--shadow: rgba(0, 0, 0, .6);--gold: #d4af37;--old-paper: #f5e8d0}body{background-image:url(/Main%20BG.webp);background-size:cover;background-attachment:fixed;background-position:center;font-family:Lora,serif;color:var(--cream);min-height:100vh;position:relative;overflow-x:hidden}.Characters{@keyframes spin{to{transform:rotate(360deg)}}@keyframes bookFadeIn{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:translateY(-20px) scale(1)}50%{transform:translateY(-20px) scale(1.05)}}@keyframes bounceIn{0%{transform:translate(-20px) scale(.8);opacity:0}50%{transform:translate(0) scale(1.2);opacity:.7}to{transform:translate(0) scale(1);opacity:1}}}.Characters .overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000a6;z-index:-1}.Characters header{text-align:center;padding:3rem 2rem;position:relative;background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent)}.Characters h1{font-family:Charlotte,serif;font-size:3.8rem;font-weight:200;letter-spacing:1rem;margin-bottom:1rem;color:var(--cream);text-shadow:2px 2px 8px var(--shadow);position:relative;display:inline-block;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}.Characters h1.appear{opacity:1;transform:translateY(0)}.Characters h1:after{content:"";position:absolute;bottom:-10px;left:25%;width:50%;height:3px;background:linear-gradient(to right,transparent,var(--gold),transparent)}.Characters .subtitle{font-size:1.4rem;letter-spacing:.3em;opacity:.8;color:var(--primary-color);margin-bottom:1rem;text-shadow:1px 1px 3px rgba(0,0,0,.8);transform:translateY(20px);transition:opacity .6s ease .2s,transform .6s ease .2s}.Characters .subtitle.appear{opacity:1;transform:translateY(0)}.Characters .hero-content{display:block}.Characters .hero-content.hidden{display:none}.Characters .book-selection{display:flex;justify-content:center;gap:6rem;margin:4rem auto;max-width:1200px;transform:translateY(50px);transition:opacity .8s ease,transform .8s ease}.Characters .book-selection.appear{opacity:1;transform:translateY(0)}.Characters .book{position:relative;width:300px;height:450px;perspective:1500px;cursor:pointer;transition:transform .5s ease}.Characters .book:hover{transform:translateY(-20px);animation:pulse 1.5s infinite}.Characters .book-cover{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.4,0,.2,1);box-shadow:0 15px 35px #000c;border-radius:5px}.Characters .book:hover .book-cover{transform:rotateY(30deg)}.Characters .book-front,.Characters .book-back,.Characters .book-spine{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:5px}.Characters .book-front{background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:center;padding-bottom:30px;border:1px solid rgba(232,195,141,.3)}.Characters .book-title{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-family:Playfair Display,serif;font-size:1.5rem;color:var(--cream);text-shadow:2px 2px 4px rgba(0,0,0,.8);padding:15px 10px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent)}.Characters .book-tagalog-title{font-family:Lora,serif;font-size:1rem;display:block;margin-top:5px;opacity:.9}.Characters .book-spine{width:40px;left:-20px;height:100%;background:linear-gradient(to right,var(--dark-brown),var(--light-brown));transform:rotateY(-90deg) translateZ(20px);display:flex;align-items:center;justify-content:center;border-left:2px solid rgba(232,195,141,.5);border-right:2px solid rgba(232,195,141,.5)}.Characters .spine-text{transform:rotate(-90deg);white-space:nowrap;font-family:Playfair Display,serif;font-size:1.2rem;color:var(--gold);letter-spacing:2px;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.Characters .characters-container{max-width:1400px;margin:0 auto;padding:2rem;transition:opacity 1.2s ease}.Characters .characters-container.active{display:block;opacity:1}.Characters .characters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:2.5rem;margin-top:2.5rem}.Characters .character-card{background:linear-gradient(to bottom,#3c2e21e6,#000000e6);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px #000000b3;transition:all .4s ease;transform:translateY(50px) rotate(5deg);position:relative;height:380px;border:1px solid rgba(232,195,141,.2);display:flex;flex-direction:row}.Characters .character-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(212,175,55,.1) 0%,transparent 70%);z-index:0;pointer-events:none}.Characters .character-card.appear{transform:translateY(0) rotate(0);opacity:1;transition:transform .8s ease,opacity .8s ease,rotate .8s ease}.Characters .character-card:hover{transform:translateY(-10px);box-shadow:0 15px 40px #000000e6;border:1px solid rgba(232,195,141,.5)}.Characters .character-image-container{position:relative;width:40%;height:100%;overflow:hidden;border-right:3px solid var(--primary-color);background:transparent}.Characters .character-image{width:100%;height:100%;object-fit:contain;transition:all .5s ease;background:transparent}.Characters .character-card:hover .character-image{transform:scale(1.05);filter:brightness(1.1)}.Characters .character-info{padding:1.8rem;width:60%;display:flex;flex-direction:column;position:relative;background:linear-gradient(to bottom,#3a2e21cc,#000000e6)}.Characters .character-info:before{content:"";position:absolute;top:0;left:0;width:4px;height:0;background:linear-gradient(to bottom,var(--gold),var(--secondary-color));transition:height .8s ease}.Characters .character-card:hover .character-info:before{height:100%}.Characters .character-name{font-family:Playfair Display,serif;font-size:1.7rem;margin-bottom:.5rem;color:var(--primary-color);text-shadow:1px 1px 3px rgba(0,0,0,.5);position:relative;display:inline-block}.Characters .character-name:after{content:"";position:absolute;bottom:-8px;left:0;width:50px;height:2px;background:var(--gold);transition:width .4s ease}.Characters .character-card:hover .character-name:after{width:100px}.Characters .character-tagalog-name{font-family:Lora,serif;font-size:.95rem;color:var(--cream);margin-bottom:1rem;font-style:italic;opacity:.9}.Characters .character-desc{font-size:.95rem;line-height:1.7;color:#d3d3d3;margin-bottom:1.2rem;flex-grow:1;position:relative;overflow:visible}.Characters .character-desc:before{content:'"';font-family:Playfair Display,serif;font-size:3rem;position:absolute;top:-15px;left:-10px;color:#d4af3733;line-height:1}.Characters .back-button{position:fixed;top:2rem;left:2rem;color:var(--gold);font-family:Playfair Display,serif;font-size:1.3rem;text-decoration:none;transition:all .4s ease;display:flex;align-items:center;transform:translate(-20px) scale(.8);background-color:#00000080;padding:10px 20px;border-radius:30px;border:1px solid rgba(232,195,141,.3);z-index:20}.Characters .back-button.visible{opacity:1;transform:translate(0) scale(1);animation:bounceIn .6s ease}.Characters .back-button:hover{color:var(--cream);background-color:#3a2e21cc;border:1px solid var(--gold);box-shadow:0 0 15px #d4af374d}.Characters .back-button:before{content:"←";margin-right:10px;font-size:1.5rem;transition:transform .3s ease}.Characters .back-button:hover:before{transform:translate(-5px)}.Characters .home-button{position:fixed;top:1rem;left:2rem;color:var(--gold);font-family:Playfair Display,serif;font-size:1.3rem;text-decoration:none;display:flex;align-items:center;transform:translate(-20px);background-color:#00000080;padding:10px 20px;border-radius:30px;border:1px solid rgba(232,195,141,.3);z-index:15;transition:opacity .4s ease,transform .4s ease}.Characters .home-button.visible{opacity:1;transform:translate(0);display:flex}.Characters .home-button:hover{color:var(--cream);background-color:#3a2e21cc;border:1px solid var(--gold);box-shadow:0 0 15px #d4af374d}.Characters .home-button:before{content:"↩";margin-right:10px;font-size:1.5rem;transition:transform .3s ease}.Characters .home-button:hover:before{transform:translate(-5px)}.Characters .book-title-header{font-family:Playfair Display,serif;font-size:2.8rem;text-align:center;margin-bottom:1rem;color:var(--primary-color);text-shadow:2px 2px 8px var(--shadow);transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}.Characters .book-title-header.appear{opacity:1;transform:translateY(0)}.Characters .book-tagalog-header{font-family:Lora,serif;font-size:1.5rem;text-align:center;margin-bottom:2.5rem;color:var(--cream);transform:translateY(20px);transition:opacity .6s ease .2s,transform .6s ease .2s}.Characters .book-tagalog-header.appear{opacity:1;transform:translateY(0)}.Characters .ornament{display:flex;justify-content:center;margin:15px 0}.Characters .ornament span{display:inline-block;width:150px;height:3px;background:linear-gradient(to right,transparent,var(--gold),transparent)}.Characters .loading{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;pointer-events:none;transition:opacity .5s ease}.Characters .loading.active{opacity:1;pointer-events:all}.Characters .loading-spinner{width:70px;height:70px;border:5px solid rgba(232,195,141,.2);border-radius:50%;border-top-color:var(--gold);animation:spin 1.2s ease-in-out infinite}.Characters .loading-text{margin-top:20px;font-family:Playfair Display,serif;font-size:1.2rem;color:var(--gold);letter-spacing:2px}.Characters .quote-footer{text-align:center;padding:2rem 0 3rem;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);font-style:italic;font-family:Playfair Display,serif;line-height:1.6}.Characters .quote-text{font-size:1.3rem;max-width:800px;margin:0 auto;color:var(--primary-color);position:relative;overflow:hidden;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}.Characters .quote-text.reveal{opacity:1;transform:translateY(0)}.Characters .quote-author{display:block;margin-top:.8rem;color:var(--cream);font-size:1rem;transform:translateY(20px);transition:opacity .6s ease .2s,transform .6s ease .2s}.Characters .quote-author.reveal{opacity:1;transform:translateY(0)}@media (max-width: 1200px){.Characters .characters-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}.Characters .character-card{height:360px}}@media (max-width: 900px){.Characters .book-selection{flex-direction:column;align-items:center;gap:5rem}.Characters h1{font-size:2.8rem}.Characters .subtitle{font-size:1.4rem}.Characters .characters-grid{grid-template-columns:1fr}.Characters .character-card{height:340px}.Characters .character-name{font-size:1.5rem}.Characters .character-desc{font-size:.9rem}}@media (max-width: 600px){.Characters h1{font-size:2.3rem}.Characters .subtitle{font-size:1.2rem}.Characters .back-button{top:1.5rem;left:1.5rem;font-size:1.1rem}.Characters .book-title-header{font-size:2.2rem}.Characters .book-tagalog-header{font-size:1.2rem}.Characters .characters-grid{grid-template-columns:1fr;gap:1.5rem}.Characters .character-card{height:auto;flex-direction:column}.Characters .character-image-container{width:100%;height:200px;border-right:none;border-bottom:3px solid var(--primary-color)}.Characters .character-info{width:100%;padding:1.2rem}}