/* ═══ GHIBLI ═══ */
.gb-hero { position:relative; min-height:75vh; overflow:hidden; display:flex; align-items:center; padding-top:var(--nav-h); background:#0a1828; }
.gb-night-sky { position:absolute; inset:0; background:radial-gradient(ellipse at 70% 30%, #1a3060 0%, #0a1828 60%); }
.gb-stars { position:absolute; inset:0; background-image:radial-gradient(1.5px 1.5px at 10% 15%,white .8,transparent 0),radial-gradient(1px 1px at 25% 8%,white .6,transparent 0),radial-gradient(2px 2px at 40% 20%,white .7,transparent 0),radial-gradient(1.5px 1.5px at 55% 5%,white .8,transparent 0),radial-gradient(1px 1px at 68% 18%,white .5,transparent 0),radial-gradient(2px 2px at 80% 10%,white .7,transparent 0),radial-gradient(1px 1px at 92% 22%,white .6,transparent 0),radial-gradient(1.5px 1.5px at 15% 35%,white .4,transparent 0),radial-gradient(1px 1px at 35% 42%,white .5,transparent 0),radial-gradient(1.5px 1.5px at 75% 38%,white .6,transparent 0),radial-gradient(1px 1px at 88% 45%,white .4,transparent 0); }
.gb-moon { position:absolute; top:8%; right:12%; animation:moonGlow 4s ease-in-out infinite; }
@keyframes moonGlow { 0%,100%{filter:drop-shadow(0 0 20px rgba(248,240,180,.4))} 50%{filter:drop-shadow(0 0 40px rgba(248,240,180,.7))} }
.gb-hero-inner { position:relative; z-index:10; padding:4rem 2rem 14rem 5%; max-width:600px; }
.gb-kicker { font-family:var(--jp); font-size:.72rem; letter-spacing:.18em; color:rgba(200,220,255,.6); margin-bottom:.8rem; }
.gb-title { font-family:var(--serif); font-size:clamp(2.4rem,6vw,4.5rem); font-weight:300; line-height:1.1; color:white; margin-bottom:1rem; }
.gb-title em { color:#a8d8f8; font-weight:400; }
.gb-sub { font-family:var(--serif); font-size:1.05rem; font-style:italic; color:rgba(255,255,255,.7); line-height:1.7; margin-bottom:1.2rem; }
.gb-jp { font-family:var(--jp); font-size:1rem; color:rgba(168,216,248,.6); letter-spacing:.18em; }
.gb-castle { position:absolute; bottom:0; left:0; right:0; z-index:5; height:280px; pointer-events:none; }
.gb-castle svg { width:100%; height:100%; }

/* Films */
.gb-films { padding:7rem 0; background:var(--cream); }
.gb-films-header { text-align:center; margin-bottom:4rem; }
.gb-sec-title { font-family:var(--serif); font-size:clamp(2rem,4.5vw,3.2rem); font-weight:300; color:var(--ink); line-height:1.15; margin-bottom:.8rem; }
.gb-sec-title em { color:var(--teal); font-weight:400; }
.gb-sec-title.centered { text-align:center; }
.gb-sec-sub { font-family:var(--serif); font-size:1rem; font-style:italic; color:var(--ink-soft); }
.gb-sec-sub.centered { text-align:center; }
.gb-films-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.gb-film-card { background:white; border-radius:20px; overflow:hidden; border:1.5px solid var(--line); transition:transform .4s var(--ease),box-shadow .4s var(--ease); }
.gb-film-card:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(44,62,45,.14); }
.gb-film-art { height:200px; overflow:hidden; }
.gb-film-art svg { width:100%; height:100%; }
.gb-film-text { padding:1.5rem; }
.gb-film-year { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); }
.gb-film-text h3 { font-family:var(--serif); font-size:1.25rem; font-weight:400; color:var(--ink); margin:.3rem 0 .6rem; }
.gb-film-text p { font-family:var(--serif); font-size:.88rem; line-height:1.7; color:var(--ink-soft); font-style:italic; margin-bottom:.8rem; }
.gb-film-tag { font-family:var(--jp); font-size:.75rem; color:var(--teal); letter-spacing:.1em; }

/* Soot Sprites Section */
.gb-soot { padding:0; background:#0e0c10; }
.gb-soot-bg { padding:7rem 0; }
.gb-soot-header { text-align:center; margin-bottom:3rem; }
.gb-soot-scene { margin:2.5rem auto; max-width:900px; }
.gb-soot-svg { width:100%; height:auto; display:block; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.gb-soot-caption { max-width:640px; margin:3rem auto 0; text-align:center; }
.gb-soot-caption p { font-family:var(--serif); font-size:1rem; color:rgba(255,255,255,.65); line-height:1.8; font-style:italic; margin-bottom:1rem; }
.gb-soot-caption strong { color:rgba(255,255,255,.9); font-weight:400; }
.gb-soot-quote { font-family:var(--serif); font-size:1.05rem; color:#f8e890; font-style:italic; line-height:1.7; border-left:2px solid rgba(248,232,144,.4); padding-left:1.2rem; margin-top:1.5rem; text-align:left; }
@keyframes sootBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes bohFloat { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)} }
@keyframes starFloat { 0%,100%{transform:translateY(0) scale(1); opacity:.6} 50%{transform:translateY(-6px) scale(1.3); opacity:1} }

/* Quiz */
.gb-quiz { padding:7rem 0; background:linear-gradient(160deg,#1a3a1a 0%,#2d5a27 100%); }
.gb-quiz-inner { max-width:700px; margin:0 auto; text-align:center; }
.gb-quiz-inner .gb-sec-title { color:white; }
.gb-quiz-inner .gb-sec-title em { color:#a8d8a8; }
.gb-quiz-inner .gb-sec-sub { color:rgba(255,255,255,.65); }
.gb-quiz-card { background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.15); border-radius:24px; padding:2.5rem; margin-top:3rem; backdrop-filter:blur(8px); }
.quiz-question { font-family:var(--serif); font-size:1.2rem; color:white; line-height:1.6; margin-bottom:2rem; }
.quiz-options { display:flex; flex-direction:column; gap:.8rem; }
.quiz-btn {
  padding:1rem 1.5rem; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2); border-radius:12px;
  color:rgba(255,255,255,.85); font-family:var(--serif); font-size:.95rem;
  cursor:pointer; text-align:left; line-height:1.5;
  transition:background .25s ease,transform .25s var(--ease),border-color .25s;
}
.quiz-btn:hover { background:rgba(255,255,255,.18); transform:translateX(6px); border-color:rgba(168,216,168,.5); }
.quiz-result { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.quiz-result.hidden { display:none; }
.quiz-result-art svg { width:120px; height:auto; filter:drop-shadow(0 8px 24px rgba(0,0,0,.3)); }
.quiz-result h3 { font-family:var(--serif); font-size:1.8rem; font-weight:400; color:white; }
.quiz-result p { font-family:var(--serif); font-size:1rem; color:rgba(255,255,255,.75); line-height:1.7; font-style:italic; max-width:48ch; }
.quiz-reset { margin-top:.5rem; padding:.7rem 2rem; background:rgba(168,216,168,.15); border:1px solid rgba(168,216,168,.4); color:#a8d8a8; font-family:var(--serif); font-size:.9rem; border-radius:50px; cursor:pointer; transition:background .2s; }
.quiz-reset:hover { background:rgba(168,216,168,.3); }

/* Next */
.gb-next { padding:7rem 0; background:#0a1828; text-align:center; }
.gb-next-label { font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(200,220,255,.45); margin-bottom:.8rem; }
.gb-next-title { font-family:var(--serif); font-size:clamp(1.8rem,4vw,3rem); font-weight:300; color:white; margin-bottom:2.5rem; }
.gb-next-title em { color:#f8e890; }
.btn-ghibli-gold { display:inline-block; padding:.9rem 2.5rem; background:rgba(248,232,144,.1); border:1.5px solid rgba(248,232,144,.4); color:#f8e890; font-family:var(--serif); font-size:1rem; font-style:italic; border-radius:50px; transition:background .3s ease,transform .3s var(--ease); }
.btn-ghibli-gold:hover { background:rgba(248,232,144,.2); transform:translateY(-3px); }

@media(max-width:900px){ .gb-films-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .gb-films-grid { grid-template-columns:1fr; } .gb-castle { height:180px; } }