/*
Theme Name: Sonata
Theme URI: https://sonata.local
Author: Sonata Engine
Description: A highly optimized, secure, fluid theme with a dedicated SPA-style curriculum template.
Version: 1.4.4
Text Domain: sonata
*/

:root {
  --space-xs: 0.5rem; --space-sm: 0.85rem; --space-md: 1.5rem;   
  --space-lg: 2.5rem; --space-xl: 3.5rem;     
  --radius-md: 8px; --radius-lg: 16px; --radius-pill: 99px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --motion-fluid: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --motion-theme: 0.3s ease;
}

:root[data-theme="dark"] {
  --bg-base: #14120F; --bg-surface: #211D18; --bg-surface-hover: #2E2922;
  --text-primary: #F1EAD9; --text-secondary: rgba(241, 234, 217, 0.65); 
  --accent-primary: #E8A33D; --accent-primary-hover: #f5b75b;
  --accent-transparent: rgba(232, 163, 61, 0.15); --border: rgba(241, 234, 217, 0.08);
  --header-bg: rgba(20, 18, 15, 0.85); --shadow-hover: rgba(0, 0, 0, 0.5); --deck-shadow: rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] {
  --bg-base: #F1EAD9; --bg-surface: #FCFAF5; --bg-surface-hover: #EBE0CA;
  --text-primary: #14120F; --text-secondary: rgba(20, 18, 15, 0.65);
  --accent-primary: #8C4A2F; --accent-primary-hover: #6e3923;
  --accent-transparent: rgba(140, 74, 47, 0.1); --border: rgba(20, 18, 15, 0.1);
  --header-bg: rgba(241, 234, 217, 0.9); --shadow-hover: rgba(20, 18, 15, 0.08); --deck-shadow: rgba(140, 74, 47, 0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background-color: var(--bg-base); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color var(--motion-theme), color var(--motion-theme); }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* SHARED HEADER */
.site-header { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 1rem 5%; height: 70px; z-index: 100; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; }
.site-header::before { content: ''; position: absolute; inset: 0; background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: -1; transition: background-color var(--motion-theme); }
.site-header.scrolled { border-bottom: 1px solid var(--border); }
.site-header.mobile-menu-active::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-surface); transition: none; }

.logo { position: relative; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; color: var(--text-primary); transition: color var(--motion-theme); z-index: 202; }
.nav-group { display: flex; align-items: center; gap: var(--space-md); }

/* NAVIGATION MENUS */
.primary-menu { display: flex; list-style: none; gap: var(--space-sm); align-items: center; margin: 0; padding: 0; }
.primary-menu li { margin: 0; }
.primary-menu a { font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); transition: color 0.2s ease; padding: 0.25rem; display: block; }
.primary-menu a:hover, .primary-menu a:focus { color: var(--text-primary); }
.current-menu-item > a { color: var(--accent-primary); }

.theme-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); font-size: 1rem; transition: transform var(--motion-fluid), background-color var(--motion-theme), border-color var(--motion-theme); z-index: 202; }
.theme-toggle:hover { transform: scale(1.1); color: var(--accent-primary); border-color: var(--accent-primary); }

/* HAMBURGER & MOBILE MENU */
.hamburger-btn { position: relative; display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 18px; background: none; border: none; cursor: pointer; z-index: 202; }
.hamburger-btn .bar { height: 2px; width: 100%; background-color: var(--text-primary); border-radius: 2px; transition: all 0.3s ease; transform-origin: left center; }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 199; }
.mobile-menu-overlay.active { opacity: 1; pointer-events: auto; }

@media (max-width: 768px) {
  .hamburger-btn { display: flex; }
  .nav-links { position: fixed; top: 0; right: 0; transform: translateX(100%); width: 280px; max-width: 80vw; height: 100vh; background: var(--bg-surface); border-left: 1px solid var(--border); box-shadow: -10px 0 30px rgba(0,0,0,0.2); padding: 90px 2rem 2rem; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 200; overflow-y: auto; display: block !important; }
  .nav-links.menu-open { transform: translateX(0); }
  .primary-menu { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .primary-menu a { font-size: 1.25rem; }
  .hamburger-btn.active .bar:nth-child(1) { transform: rotate(45deg); width: 24px; }
  .hamburger-btn.active .bar:nth-child(2) { opacity: 0; width: 0; }
  .hamburger-btn.active .bar:nth-child(3) { transform: rotate(-45deg); width: 24px; }
}

/* SCROLL TO TOP */
#scrollToTopBtn { position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px; border-radius: 50%; background: var(--bg-surface-hover); color: var(--text-primary); border: 1px solid var(--border); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(20px); transition: all var(--motion-theme); pointer-events: none; z-index: 90; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
#scrollToTopBtn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#scrollToTopBtn:hover { background: var(--accent-primary); color: var(--bg-base); border-color: var(--accent-primary); transform: translateY(-3px); }

/* --- STANDARD WP VIEWS --- */
.standard-layout { padding-top: 100px; min-height: 100vh; display: flex; flex-direction: column; }
.standard-container { max-width: 900px; margin: 0 auto; padding: 2rem 5%; flex-grow: 1; width: 100%; }
.standard-header { margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
.standard-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.standard-meta { font-size: 0.85rem; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 0.1em; }
.standard-content { font-size: 1.1rem; line-height: 1.8; color: var(--text-secondary); }
.standard-content p { margin-bottom: 1.5rem; }
.standard-content h2, .standard-content h3 { color: var(--text-primary); margin: 2rem 0 1rem; }
.standard-footer { border-top: 1px solid var(--border); padding: 2rem 5%; text-align: center; font-size: 0.85rem; color: var(--text-secondary); margin-top: auto; }

/* GLOBALLY FIX IMAGES & MEDIA */
.standard-content img, .reader-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border); display: block; margin: 2rem auto; }
.standard-content iframe, .reader-body iframe, .standard-content video, .reader-body video { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); border: none; margin: 2rem auto; display: block; }

/* BUTTONS */
.btn-primary { background: var(--accent-primary); color: var(--bg-base); padding: 0.85rem 2rem; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.95rem; display: inline-block; transition: transform var(--motion-fluid), background-color var(--motion-theme); border: none; cursor: pointer;}
.btn-primary:hover { transform: translateY(-2px); background: var(--accent-primary-hover); }
.btn-secondary { background: transparent; color: var(--text-primary); padding: 0.65rem 1.5rem; border-radius: var(--radius-pill); font-weight: 500; font-size: 0.9rem; display: inline-block; transition: all 0.2s ease; border: 1px solid var(--border); cursor: pointer;}
.btn-secondary:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* CUSTOMIZER ANIMATIONS */
.reveal { opacity: 0; will-change: opacity, transform; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.anim-slide-up { transform: translateY(30px); }
.reveal.anim-slide-left { transform: translateX(40px); }
.reveal.anim-slide-right { transform: translateX(-40px); }
.reveal.anim-zoom-in { transform: scale(0.9); }
.reveal.anim-flip-up { transform: perspective(600px) rotateX(20deg); }
.reveal.anim-fade { transform: none; }
.reveal.active { opacity: 1; transform: translate(0, 0) scale(1) rotateX(0); }
.delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; }

/* HOMEPAGE SECTIONS */
.front-page-main { display: flex; flex-direction: column; width: 100%; overflow-x: hidden; }
.hero { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 110px 5% var(--space-lg); }
.hero-badge { padding: 0.25rem 0.75rem; background: var(--bg-surface); border: 1px solid var(--accent-primary); border-radius: var(--radius-pill); font-size: 0.75rem; color: var(--accent-primary); margin-bottom: var(--space-sm); letter-spacing: 0.05em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: var(--space-sm); font-weight: 500; }
.hero p { font-size: clamp(1rem, 2vw, 1.1rem); color: var(--text-secondary); max-width: 600px; margin-bottom: var(--space-md); font-weight: 300; }

.section-container { padding: var(--space-md) 5%; max-width: 1400px; margin: 0 auto; width: 100%; }
.section-header { text-align: center; margin-bottom: var(--space-md); }
.features-intro { font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 400; color: var(--text-primary); letter-spacing: -0.01em; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }
.feature-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); transition: transform var(--motion-fluid), box-shadow var(--motion-fluid), background-color var(--motion-theme), border-color var(--motion-theme); }
.feature-card:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 24px var(--shadow-hover); border-color: var(--accent-primary); }
.feature-icon { width: 44px; height: 44px; background: var(--bg-surface-hover); border-radius: 8px; margin-bottom: var(--space-sm); display: flex; align-items: center; justify-content: center; color: var(--accent-primary); font-size: 1.25rem; transition: background-color var(--motion-theme); }
.feature-card h3 { font-size: 1.15rem; font-weight: 500; margin-bottom: var(--space-xs); }
.feature-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; }

/* REUSABLE SLIDER SYSTEM */
.slider-viewport { overflow: hidden; width: 100%; position: relative; padding: var(--space-md) 0; }
.slider-track { display: flex; width: 100%; transition: transform var(--motion-fluid); will-change: transform; }
.slider-controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.slider-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--motion-theme); }
.slider-btn:hover { background: var(--accent-primary); color: var(--bg-base); border-color: var(--accent-primary); transform: scale(1.05); }
.slider-btn svg { width: 20px; height: 20px; }
.slider-dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all 0.3s ease; }
.dot.active { background: var(--accent-primary); transform: scale(1.3); }

/* TESTIMONIAL SLIDER (Single Item View) */
.testimonial-section { padding: var(--space-md) 5%; max-width: 900px; margin: var(--space-lg) auto; text-align: center; }
.testimonial-viewport { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.testimonial-card { flex: 0 0 100%; min-width: 100%; padding: 0 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.4; transition: opacity var(--motion-fluid), transform var(--motion-fluid); transform: scale(0.95); }
.testimonial-card.active { opacity: 1; transform: scale(1); }
.testimonial-stars { color: var(--accent-primary); font-size: 1.1rem; margin-bottom: 1rem; display: flex; gap: 6px; justify-content: center; }
.testimonial-quote { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 300; font-style: italic; line-height: 1.4; margin-bottom: 1.25rem; color: var(--text-primary); }
.testimonial-author { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.05em; text-transform: uppercase; }

/* PORTFOLIO SLIDER (4 Items Per View) */
.portfolio-section { background: var(--bg-surface); padding: var(--space-lg) 5%; margin: var(--space-lg) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; transition: background-color var(--motion-theme), border-color var(--motion-theme); }
.portfolio-section h2 { font-size: 2rem; margin-bottom: var(--space-sm); }
.portfolio-section p { color: var(--text-secondary); max-width: 600px; margin: 0 auto var(--space-md); }

.portfolio-card-wrapper { flex: 0 0 100%; padding: 0 0.75rem; box-sizing: border-box; }
@media (min-width: 600px) { .portfolio-card-wrapper { flex: 0 0 50%; } }
@media (min-width: 900px) { .portfolio-card-wrapper { flex: 0 0 33.333%; } }
@media (min-width: 1200px) { .portfolio-card-wrapper { flex: 0 0 25%; } } /* 4 boxes */

.portfolio-card-inner { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; text-align: left; transition: transform var(--motion-fluid), border-color var(--motion-theme), box-shadow var(--motion-theme); }
.portfolio-card-inner:hover { border-color: var(--accent-primary); transform: translateY(-3px); box-shadow: 0 12px 24px var(--shadow-hover); }
.portfolio-thumb { width: 100%; height: 180px; background: var(--bg-surface-hover); overflow: hidden; border-bottom: 1px solid var(--border); }
.portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-fluid); }
.portfolio-card-inner:hover .portfolio-thumb img { transform: scale(1.05); }
.portfolio-info { padding: 1.25rem; flex-grow: 1; display: flex; flex-direction: column; }
.portfolio-info h3 { font-size: 1.1rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-primary); }
.portfolio-info p { font-size: 0.85rem; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }

/* CTA SECTION */
.cta-section { margin: var(--space-lg) auto 6rem; padding: var(--space-lg) 5%; width: 90%; max-width: 1400px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-align: center; transition: background-color var(--motion-theme), border-color var(--motion-theme); }
.cta-section h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 500; margin-bottom: var(--space-xs); }
.cta-section p { color: var(--text-secondary); max-width: 600px; margin: 0 auto 2.5rem; }

.site-footer { border-top: 1px solid var(--border); padding: 2rem 5%; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-secondary); margin-top: 4rem; width: 100%; }

/* POST FOOTER (Stats, Share) */
.sonata-post-footer { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.sonata-post-footer .post-stats { font-size: 0.9rem; color: var(--accent-primary); margin-bottom: 1.5rem; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.sonata-post-footer .post-share h4 { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 1rem; font-weight: 500; }
.sonata-post-footer .share-links { display: flex; gap: 10px; margin-bottom: 2.5rem; }
.sonata-post-footer .share-links a, .sonata-post-footer .share-links button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-surface-hover); border: 1px solid var(--border); color: var(--text-primary); cursor: pointer; transition: all 0.2s; font-size: 1.1rem; }
.sonata-post-footer .share-links a:hover, .sonata-post-footer .share-links button:hover { background: var(--accent-primary); color: var(--bg-base); border-color: var(--accent-primary); transform: translateY(-3px); }

/* ASTRA-STYLE COMMENTS SECTION */
.post-comments { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 2rem; }
.comments-title { font-size: 1.5rem; font-weight: 500; margin-bottom: 2rem; color: var(--text-primary); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list > li { margin-bottom: 2.5rem; }
.comment-list .children { list-style: none; margin-left: 70px; margin-top: 2rem; padding-left: 0; }

/* Proper Alignment for WordPress HTML5 Comment Markup */
.comment-body { position: relative; padding-left: 70px; }
.comment-author .avatar { position: absolute; left: 0; top: 0; border-radius: 50%; width: 50px; height: 50px; border: 1px solid var(--border); background: var(--bg-surface-hover); }

.comment-meta { margin-bottom: 8px; }
.comment-author { margin-bottom: 2px; display: flex; align-items: center; }
.comment-author .fn { font-style: normal; font-weight: 600; color: var(--text-primary); font-size: 1.05rem; }
.comment-author .fn a { color: inherit; text-decoration: none; }
.comment-author .fn a:hover { color: var(--accent-primary); }
.comment-author .says { display: none; }

.comment-metadata { font-size: 0.85rem; color: var(--text-secondary); }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-metadata a:hover { color: var(--accent-primary); text-decoration: underline; }

.comment-content { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 10px; }
.comment-content p { margin-bottom: 1rem; }
.comment-content p:last-child { margin-bottom: 0; }

.reply { margin-top: 10px; }
.reply a { font-size: 0.85rem; font-weight: 600; color: var(--accent-primary); transition: color 0.2s; text-transform: uppercase; letter-spacing: 0.05em; }
.reply a:hover { color: var(--text-primary); }

/* ASTRA-STYLE COMMENT FORM */
.comment-respond { margin-top: 3rem; }
.comment-reply-title { font-size: 1.25rem; font-weight: 500; margin-bottom: 1.5rem; color: var(--text-primary); }
.comment-form { display: flex; flex-direction: column; gap: 1.25rem; }
.comment-form p { margin: 0; display: flex; flex-direction: column; width: 100%; }
.comment-form label { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); font-family: inherit; font-size: 1rem; transition: border-color 0.2s; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--accent-primary); }
.comment-form .comment-notes, .comment-form .logged-in-as { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.comment-form .form-submit { margin-top: 0.5rem; }
.comment-form .submit { display: inline-block; background: var(--accent-primary); color: var(--bg-base); padding: 0.85rem 2rem; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; transition: background 0.2s; }
.comment-form .submit:hover { background: var(--accent-primary-hover); }

/* CHECKBOX FIX */
.comment-form .comment-form-cookies-consent { flex-direction: row; align-items: flex-start; gap: 10px; }
.comment-form .comment-form-cookies-consent input[type="checkbox"] { width: auto; margin-top: 4px; }
.comment-form .comment-form-cookies-consent label { margin-bottom: 0; font-size: 0.85rem; line-height: 1.4; display: inline-block; }

@media (max-width: 600px) { 
    .comment-list .children { margin-left: 15px; } 
    .comment-body { padding-left: 50px; }
    .comment-author .avatar { width: 38px; height: 38px; }
    .comment-author .fn { font-size: 0.95rem; }
    .comment-content { font-size: 0.95rem; }
    .comment-reply-title { font-size: 1.15rem; }
}

/* TUTORIAL DECK (Dedicated Page View) */
.deck-layout { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding-top: 70px; }

/* CATEGORY FILTERS */
.category-filters { display: flex; gap: 10px; padding: 1rem 5%; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; z-index: 50; flex-shrink: 0; align-items: center; scrollbar-width: none; }
.category-filters::-webkit-scrollbar { height: 4px; display: none; }
.category-filters:hover, .category-filters:active, .category-filters:focus-within { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.category-filters:hover::-webkit-scrollbar, .category-filters:active::-webkit-scrollbar, .category-filters:focus-within::-webkit-scrollbar { display: block; }
.category-filters::-webkit-scrollbar-track { background: transparent; }
.category-filters::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.category-filters::before, .category-filters::after { content: ''; margin: auto; }

.pill-btn { padding: 0.5rem 1.25rem; border-radius: 99px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all var(--motion-theme); }
.pill-btn:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.pill-btn.active { background: var(--accent-primary); color: var(--bg-base); border-color: var(--accent-primary); }

.deck-area { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; padding: 0 1rem; touch-action: none; }

/* ENHANCED FLUID PRELOADER: Transparent blur to prevent "blank page" effect */
.deck-preloader { position: absolute; inset: 0; background: rgba(20, 18, 15, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100; display: flex; justify-content: center; align-items: center; transition: opacity 0.3s ease, visibility 0.3s; }
:root[data-theme="light"] .deck-preloader { background: rgba(252, 250, 245, 0.6); }
.deck-preloader.hidden { opacity: 0; visibility: hidden; }

.loader-spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-pulse { width: 45px; height: 45px; background-color: var(--accent-primary); border-radius: 50%; animation: pulse 1.2s infinite ease-in-out; }
@keyframes pulse { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

.deck-container { position: relative; width: 100%; max-width: 450px; height: 100%; max-height: 75vh; perspective: 1000px; }
.deck-card { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-surface); border-radius: 24px; padding: clamp(1.25rem, 5vw, 2rem) clamp(1.25rem, 5vw, 2rem) clamp(1.5rem, 5vw, 2.25rem); display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--border); box-shadow: 0 20px 50px var(--deck-shadow); user-select: none; overflow: hidden; will-change: transform, opacity; transition: background-color var(--motion-theme), border-color var(--motion-theme); }
.card-thumb { width: 100%; height: clamp(90px, 16vh, 150px); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 0.85rem; border: 1px solid var(--border); flex-shrink: 0; background: var(--bg-surface-hover); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-fluid); pointer-events: none; }
.deck-card:hover .card-thumb img { transform: scale(1.03); }
.card-meta { flex-shrink: 0; display: inline-block; padding: 0.25rem 0.75rem; background: var(--accent-transparent); color: var(--accent-primary); border-radius: 4px; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem; pointer-events: none; }
.card-title { flex-shrink: 0; font-size: clamp(1.15rem, 3vh, 1.6rem); font-weight: 500; line-height: 1.15; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; pointer-events: none; }
.card-desc { color: var(--text-secondary); font-size: clamp(0.85rem, 2vh, 0.95rem); margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; pointer-events: none; line-height: 1.5; }

button.card-action { flex-shrink: 0; margin-top: auto; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-primary); font-weight: 500; font-size: 0.95rem; cursor: pointer; transition: color 0.2s ease; padding: 0.5rem 0; width: 100%; font-family: inherit; background: none; border: none; pointer-events: none; }
.state-active button.card-action { pointer-events: auto; }
button.card-action:hover { color: var(--accent-primary); }
button.card-action:hover .play-icon { transform: scale(1.1); background: var(--text-primary); }
.play-icon { width: 32px; height: 32px; background: var(--accent-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, background 0.2s ease; }
.play-icon::after { content: ''; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--bg-base); margin-left: 3px; }

.state-past { transform: translateX(-150vw) rotate(-15deg); opacity: 0; z-index: 20; pointer-events: none; }
.state-active { transform: translateX(0) scale(1) rotate(0); opacity: 1; z-index: 10; cursor: pointer; } 
.state-next-1 { transform: translateY(20px) scale(0.95); opacity: 0.7; z-index: 9; pointer-events: none; }
.state-next-2 { transform: translateY(40px) scale(0.90); opacity: 0.3; z-index: 8; pointer-events: none; }
.state-next-hidden { transform: translateY(60px) scale(0.85); opacity: 0; z-index: 7; pointer-events: none; }

.deck-controls { padding: 1rem 5% 1.5rem; display: flex; justify-content: space-between; align-items: center; max-width: 600px; margin: 0 auto; width: 100%; flex-shrink: 0; position: relative; z-index: 50; }
.progress-text { position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: var(--radius-pill); font-size: 1rem; color: var(--text-secondary); font-weight: 500; transition: all 0.2s; user-select: none; border: 1px solid transparent; }
.progress-text i { transition: transform 0.3s ease; }
.progress-text.menu-open i { transform: rotate(180deg); }
.progress-text:hover { color: var(--text-primary); background: var(--bg-surface); border-color: var(--border); }

.jump-dropdown { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-10px); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem; display: flex; flex-direction: column; gap: 4px; max-height: 50vh; width: 85vw; max-width: 320px; overflow-y: auto; opacity: 0; pointer-events: none; transition: all 0.2s; box-shadow: 0 -10px 30px rgba(0,0,0,0.5); z-index: 100; }
.jump-dropdown.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(-5px); }
.jump-item { padding: 0.6rem 1rem; font-size: 0.9rem; color: var(--text-secondary); cursor: pointer; border-radius: 4px; text-align: left; white-space: normal; line-height: 1.4; transition: all 0.2s; }
.jump-item:hover, .jump-item.active { background: var(--accent-primary); color: var(--bg-base); }
.jump-dropdown::-webkit-scrollbar { width: 6px; }
.jump-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.nav-btn { display: flex; align-items: center; gap: 10px; color: var(--text-primary); font-weight: 500; padding: 0.75rem 1.25rem; border-radius: 99px; background: var(--bg-surface-hover); border: 1px solid var(--border); cursor: pointer; transition: all 0.2s; }
.nav-btn:hover:not(:disabled) { background: var(--bg-surface); border-color: var(--accent-primary); color: var(--accent-primary); }
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.gesture-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(20, 18, 15, 0); opacity: 0; transition: all 0.6s ease; }
.gesture-overlay.active { opacity: 1; pointer-events: auto; background: rgba(20, 18, 15, 0.75); backdrop-filter: blur(4px); }
.ghost-container { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
.ghost-orb { width: 48px; height: 48px; background: rgba(232, 163, 61, 0.8); border-radius: 50%; box-shadow: 0 0 20px var(--accent-primary); position: absolute; z-index: 2; }
.ghost-text { position: absolute; top: 75%; width: 100%; text-align: center; color: var(--accent-primary); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; opacity: 0; }
.gesture-overlay.active .ghost-orb { animation: ghost-swipe 4s infinite cubic-bezier(0.16, 1, 0.3, 1); }
.gesture-overlay.active .text-left { animation: ghost-text-left 4s infinite cubic-bezier(0.16, 1, 0.3, 1); }
.gesture-overlay.active .text-up { animation: ghost-text-up 4s infinite cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes ghost-swipe { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { transform: translate(0, 0) scale(0.7); opacity: 1; } 30% { transform: translate(-120px, 0) scale(0.7); opacity: 1; } 40% { transform: translate(-120px, 0) scale(1); opacity: 0; } 50% { transform: translate(0, 0) scale(1); opacity: 1; } 60% { transform: translate(0, 0) scale(0.7); opacity: 1; } 80% { transform: translate(0, -120px) scale(0.7); opacity: 1; } 90% { transform: translate(0, -120px) scale(1); opacity: 0; } 100% { transform: translate(0, 0) scale(1); opacity: 0; } }
@keyframes ghost-text-left { 0%, 5%, 35%, 100% { opacity: 0; transform: translateY(5px); } 10%, 30% { opacity: 1; transform: translateY(0); } }
@keyframes ghost-text-up { 0%, 55%, 85%, 100% { opacity: 0; transform: translateY(5px); } 60%, 80% { opacity: 1; transform: translateY(0); } }
.skip-tutorial-btn { margin-top: 2rem; padding: 0.6rem 1.5rem; border: 1px solid var(--text-secondary); border-radius: 99px; color: var(--text-primary); font-size: 0.85rem; cursor: pointer; pointer-events: auto; }
.skip-tutorial-btn:hover { background: var(--bg-surface); border-color: var(--text-primary); }

/* READER */
.view-reader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-surface); z-index: 200; transform: translateY(100%); opacity: 0; pointer-events: none; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; display: flex; flex-direction: column; }
.view-reader.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
.reader-header { padding: 1.25rem 5%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); background: var(--header-bg); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; }
.close-btn { color: var(--text-secondary); display: flex; align-items: center; gap: 5px; font-size: 0.95rem; cursor: pointer; border: none; background: none; }
.close-btn:hover { color: var(--accent-primary); }
.reader-top-nav { display: flex; gap: 10px; align-items: center;}
.mini-nav-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-surface-hover); border: 1px solid var(--border); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mini-nav-btn:hover:not(:disabled) { background: var(--bg-surface); border-color: var(--accent-primary); color: var(--accent-primary); }
.mini-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.reader-scroll-area { flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 5vh; scroll-behavior: smooth; }
.reader-content-wrapper { max-width: 700px; margin: 0 auto; padding: 3rem 5%; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; }
.reader-content-wrapper.slide-left { transform: translateX(-50px); opacity: 0; }
.reader-content-wrapper.slide-right { transform: translateX(50px); opacity: 0; }
.reader-body { font-size: 1.1rem; line-height: 1.7; color: var(--text-secondary); }
.reader-body p { margin-bottom: 1.5rem; }
.reader-body strong { color: var(--text-primary); font-weight: 600; }
.reader-bottom-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 2rem; margin-top: 2rem; gap: 15px; }

@media (max-width: 600px) { .site-header { padding: 1rem 5%; } .btn-primary { width: 100%; text-align: center; } }