/* Faith Basics Enhanced - Animations, cards, hero, level bar */
:root {
  --coral:#FF6B5B; --coral-light:#FFA598; --coral-dark:#E85A4A;
  --coral-glow:rgba(255,107,91,0.30); --coral-glow2:rgba(255,107,91,0.11);
  --f-display:'Fraunces',Georgia,serif; --f-body:'DM Sans',system-ui,sans-serif;
  --r-card:18px; --r-pill:999px;
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1); --ease-out:cubic-bezier(0.22,1,0.36,1);
}
[data-theme="dark"]{
  --fb-bg:#0B0A12; --fb-bg2:#111019; --fb-bg-card:#161424; --fb-bg-card2:#1C1A2A;
  --fb-border:rgba(255,255,255,0.07); --fb-border2:rgba(255,107,91,0.22);
  --fb-text:#F0ECE6; --fb-text-m:rgba(240,236,230,0.60); --fb-text-d:rgba(240,236,230,0.30);
  --fb-badge-bg:rgba(255,107,91,0.14); --fb-badge-text:#FF9B8F;
  --fb-sidebar-bg:rgba(16,14,25,0.92); --fb-sidebar-border:rgba(255,107,91,0.13);
  --fb-level-bg:rgba(255,255,255,0.04); --fb-prog-track:rgba(255,255,255,0.07);
}
[data-theme="light"]{
  --fb-bg:#FEF5F3; --fb-bg2:#FFFFFF; --fb-bg-card:#FFFFFF; --fb-bg-card2:#FFF0EE;
  --fb-border:rgba(232,90,74,0.10); --fb-border2:rgba(232,90,74,0.26);
  --fb-text:#1A1726; --fb-text-m:rgba(26,23,38,0.58); --fb-text-d:rgba(26,23,38,0.30);
  --fb-badge-bg:rgba(255,107,91,0.10); --fb-badge-text:#C13A2E;
  --fb-sidebar-bg:rgba(255,248,246,0.96); --fb-sidebar-border:rgba(232,90,74,0.15);
  --fb-level-bg:rgba(26,23,38,0.04); --fb-prog-track:rgba(26,23,38,0.09);
}
body.faith-basics-page{margin:0;padding:0;overscroll-behavior-y:none;}
.faith-basics-page .main-content{margin:0!important;padding:0!important;max-width:100%!important;overflow-x:clip;}
.faith-basics-page .fb-wrap{font-family:var(--f-body);background:var(--fb-bg);color:var(--fb-text);overflow-x:clip;transition:background .4s,color .4s;margin:0;padding:0;}
.faith-basics-page #mainArea,.faith-basics-page .res-panel{padding:0!important;margin:0!important;max-width:100%;}
.faith-basics-page .resources-youth-header{margin:0!important;}
.faith-basics-page .hero{margin-top:0!important;}
.faith-basics-page .theme-btn{
  position:fixed;top:80px;right:18px;z-index:200;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--fb-border);background:var(--fb-bg-card);color:var(--fb-text);
  font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease-out);backdrop-filter:blur(12px);
  box-shadow:0 2px 16px rgba(0,0,0,.2);
}
.faith-basics-page .theme-btn:hover{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-glow);transform:rotate(18deg);}
.faith-basics-page .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:clip;}
.faith-basics-page #hero-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.faith-basics-page .hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");}
.faith-basics-page .hero-content{position:relative;z-index:3;width:100%;max-width:800px;padding:100px 32px 44px;text-align:center;}
.faith-basics-page .hero-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);background:var(--fb-badge-bg);border:1px solid var(--fb-border2);border-radius:var(--r-pill);padding:6px 16px;margin-bottom:26px;opacity:0;animation:fbFadeUp .7s .2s var(--ease-out) forwards;}
.faith-basics-page .hero-h1{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:clamp(52px,10.5vw,108px);line-height:.92;letter-spacing:-.02em;color:var(--fb-text);margin-bottom:26px;opacity:0;animation:fbFadeUp .85s .38s var(--ease-out) forwards;}
.faith-basics-page .hero-h1 .accent{color:var(--coral);}
.faith-basics-page .hero-desc{font-size:clamp(15px,2.2vw,18px);line-height:1.75;color:var(--fb-text-m);max-width:540px;margin:0 auto 42px;opacity:0;animation:fbFadeUp .85s .54s var(--ease-out) forwards;}
.faith-basics-page .hero-verse{display:inline-block;background:var(--fb-badge-bg);border:1px solid var(--fb-border2);border-left:3px solid var(--coral);border-radius:12px;padding:16px 24px;max-width:480px;text-align:left;margin-bottom:0;opacity:0;animation:fbFadeUp .85s .68s var(--ease-out) forwards;}
.faith-basics-page .hero-verse .ref{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:7px;}
.faith-basics-page .hero-verse blockquote{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:clamp(13px,1.6vw,15px);line-height:1.55;color:var(--fb-text);}
.faith-basics-page .scroll-nudge{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fbFadeUp 1s 1.3s ease forwards;}
.faith-basics-page .scroll-nudge p{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--fb-text-d);}
.faith-basics-page .scroll-track{width:1px;height:36px;background:var(--fb-border);position:relative;overflow:clip;}
.faith-basics-page .scroll-track::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--coral);animation:fbScrollLine 2s 1.5s ease-in-out infinite;}
@keyframes fbScrollLine{0%{top:-100%;}60%{top:0%;}100%{top:100%;}}
.faith-basics-page .level-bar{position:sticky;top:0;z-index:100;background:var(--fb-bg);border-bottom:1px solid var(--fb-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.faith-basics-page .level-bar-inner{max-width:1340px;margin:0 auto;padding:18px 28px;display:flex;flex-direction:column;gap:14px;align-items:center;}
.faith-basics-page .level-q{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:clamp(16px,2.5vw,22px);color:var(--fb-text);text-align:center;}
.faith-basics-page .level-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.faith-basics-page .level-btn{font-family:var(--f-body);font-size:13px;font-weight:600;padding:10px 22px;border-radius:var(--r-pill);border:1.5px solid var(--fb-border);background:var(--fb-level-bg);color:var(--fb-text-m);cursor:pointer;transition:all .32s var(--ease-spring);white-space:nowrap;}
.faith-basics-page .level-btn:hover{border-color:var(--coral);color:var(--fb-text);background:var(--coral-glow2);transform:translateY(-2px);box-shadow:0 6px 20px var(--coral-glow);}
.faith-basics-page .level-btn.active{background:var(--coral);border-color:var(--coral);color:#fff;box-shadow:0 6px 24px var(--coral-glow);transform:translateY(-2px);}
.faith-basics-page .content-wrap{max-width:1340px;margin:0 auto;padding:20px 20px 48px;display:grid;grid-template-columns:1fr;gap:40px;align-items:start;}
@media(min-width:560px){.faith-basics-page .content-wrap{padding:24px 24px 56px;}}
@media(min-width:1120px){.faith-basics-page .content-wrap{grid-template-columns:1fr 248px;padding:28px 32px 64px;gap:48px;}}
.faith-basics-page .res-header{display:flex;align-items:baseline;gap:14px;margin-bottom:24px;flex-wrap:wrap;padding:0;}
.faith-basics-page .res-title{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:clamp(30px,5vw,46px);line-height:1;color:var(--fb-text);}
.faith-basics-page .res-badge{font-size:12px;font-weight:600;color:var(--coral);background:var(--fb-badge-bg);border:1px solid var(--fb-border2);padding:4px 12px;border-radius:var(--r-pill);}
.faith-basics-page .cards-grid{display:grid;gap:12px;grid-template-columns:1fr;padding:0;margin:0;}
.faith-basics-page .cards-grid>*{min-width:0;width:100%;}
@media(min-width:560px){.faith-basics-page .cards-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){.faith-basics-page .cards-grid{grid-template-columns:repeat(3,1fr);}}
.faith-basics-page .card{background:var(--fb-bg-card);border:none;border-radius:12px;overflow:clip;display:flex;flex-direction:column;cursor:pointer;opacity:0;transform:translateY(24px);transition:transform .38s var(--ease-spring),box-shadow .38s ease;box-shadow:none;padding:0;margin:0;width:100%;min-width:0;box-sizing:border-box;}
.faith-basics-page .card.visible{animation:fbCardIn .65s var(--ease-out) forwards;}
@keyframes fbCardIn{to{opacity:1;transform:translateY(0);}}
.faith-basics-page .card:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px var(--coral);}
.faith-basics-page .card-vis{position:relative;width:100%;height:180px;overflow:clip;flex-shrink:0;padding:0;margin:0;min-width:0;}
@media(min-width:1024px){.faith-basics-page .card-vis{height:200px;}}
.faith-basics-page .card-vis canvas{display:block;width:100%!important;height:100%!important;min-width:0;}
.faith-basics-page .card-vis-overlay{position:absolute;bottom:0;left:0;right:0;padding:12px 8px 6px;}
[data-theme="dark"] .faith-basics-page .card-vis-overlay{background:linear-gradient(to top,rgba(12,10,20,.9) 0%,transparent 100%);}
[data-theme="light"] .faith-basics-page .card-vis-overlay{background:linear-gradient(to top,rgba(255,248,246,.92) 0%,transparent 100%);}
.faith-basics-page .card-vis-overlay h3{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:clamp(15px,2.2vw,17px);line-height:1.2;color:#fff;}
[data-theme="light"] .faith-basics-page .card-vis-overlay h3{color:var(--fb-text);}
.faith-basics-page .card.done .card-vis::before{content:'✓';position:absolute;top:12px;right:12px;z-index:5;width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.faith-basics-page .card-body{padding:8px 10px 10px;flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;}
.faith-basics-page .card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.faith-basics-page .badge-type{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);background:var(--fb-badge-bg);color:var(--fb-badge-text);border:1px solid var(--fb-border2);}
.faith-basics-page .badge-time{font-size:11px;font-weight:500;color:var(--fb-text-d);display:flex;align-items:center;gap:4px;}
.faith-basics-page .badge-time::before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--fb-text-d);}
.faith-basics-page .card-desc{font-size:13.5px;line-height:1.65;color:var(--fb-text-m);flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:clip;}
.faith-basics-page .card-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:2px;}
.faith-basics-page .card-cta{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--coral);letter-spacing:.02em;transition:gap .2s;}
.faith-basics-page .card:hover .card-cta{gap:10px;}
.faith-basics-page .card-cta::after{content:'→';}
.faith-basics-page .done-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--fb-text-d);background:none;border:1px solid var(--fb-border);border-radius:var(--r-pill);padding:5px 12px;cursor:pointer;transition:all .25s ease;}
.faith-basics-page .done-btn:hover{border-color:var(--coral);color:var(--coral);background:var(--coral-glow2);}
.faith-basics-page .card.done .done-btn{background:var(--coral);border-color:var(--coral);color:#fff;}
.faith-basics-page .sidebar{display:none;}
@media(min-width:1120px){.faith-basics-page .sidebar{display:block;position:sticky;position:-webkit-sticky;top:100px;align-self:start;background:var(--fb-sidebar-bg);border:1px solid var(--fb-sidebar-border);border-radius:20px;padding:28px 22px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);max-height:calc(100vh - 120px);overflow-y:auto;-webkit-overflow-scrolling:touch;}}
.faith-basics-page .sb-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin-bottom:18px;display:block;}
.faith-basics-page .sb-title{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:19px;line-height:1.1;color:var(--fb-text);margin-bottom:5px;}
.faith-basics-page .sb-sub{font-size:12px;color:var(--fb-text-d);margin-bottom:22px;line-height:1.5;}
.faith-basics-page .sb-bar{height:3px;border-radius:2px;background:var(--fb-prog-track);margin-bottom:22px;overflow:clip;}
.faith-basics-page .sb-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--coral),var(--coral-light));transition:width .5s var(--ease-out);width:0%;}
.faith-basics-page .prog-list{display:flex;flex-direction:column;gap:0;position:relative;}
.faith-basics-page .prog-list::before{content:'';position:absolute;left:10px;top:11px;width:1px;height:calc(100% - 22px);background:var(--fb-prog-track);}
.faith-basics-page .prog-item{display:flex;align-items:flex-start;gap:13px;position:relative;z-index:1;padding:9px 0;cursor:pointer;transition:transform .2s var(--ease-spring);}
.faith-basics-page .prog-item:hover{transform:translateX(2px);}
.faith-basics-page .prog-dot{width:21px;height:21px;border-radius:50%;flex-shrink:0;border:2px solid var(--fb-prog-track);background:var(--fb-bg);display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease-spring);}
.faith-basics-page .prog-dot::after{content:'';width:7px;height:7px;border-radius:50%;background:transparent;transition:all .3s var(--ease-spring);}
.faith-basics-page .prog-item.done .prog-dot{border-color:var(--coral);background:var(--coral);box-shadow:0 0 10px var(--coral-glow);}
.faith-basics-page .prog-item.done .prog-dot::after{background:#fff;}
.faith-basics-page .prog-txt{flex:1;min-width:0;}
.faith-basics-page .prog-name{font-size:11.5px;font-weight:500;color:var(--fb-text-m);line-height:1.35;overflow:clip;text-overflow:ellipsis;white-space:nowrap;transition:color .2s;}
.faith-basics-page .prog-item.done .prog-name{color:var(--coral);text-decoration:line-through;text-decoration-color:rgba(255,107,91,.4);}
.faith-basics-page .prog-type{font-size:9.5px;color:var(--fb-text-d);margin-top:2px;}
.faith-basics-page .empty-state{text-align:center;padding:80px 24px;color:var(--fb-text-d);}
.faith-basics-page .empty-state .glyph{font-size:52px;display:block;margin-bottom:14px;animation:fbFloat 4s ease-in-out infinite;}
.faith-basics-page .empty-state p{font-size:16px;color:var(--fb-text-m);}
.faith-basics-page .select-prompt{display:block;}
.faith-basics-page .res-panel{display:none;}
@keyframes fbFadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes fbFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@media(max-width:480px){.faith-basics-page .hero-content{padding:90px 20px 36px;}.faith-basics-page .level-bar-inner{padding:14px 16px;gap:10px;}.faith-basics-page .level-btn{font-size:12px;padding:9px 16px;}.faith-basics-page .content-wrap{padding:20px 20px 48px;}.faith-basics-page #mainArea,.faith-basics-page .res-panel,.faith-basics-page .cards-grid{padding:0;margin:0;}.faith-basics-page .card-body{padding:6px 8px 8px;}}