/* Home page additions on top of style.css:
   – hero with the self-turning pop-up book
   – all-dark sections */

/* logo in the top bar is always visible (not only after scrolling) */
.brand{opacity:1;transform:none}

.footer-credit{margin-top:10px}
.footer-credit a{color:var(--gold-light);transition:color .3s}
.footer-credit a:hover{color:#fff}

/* ---------- hero layout ---------- */
.hero-book{text-align:left;padding-top:96px}
.hero-book .hero-inner{width:min(1180px,100%);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,60px);align-items:center}
.hero-name{font-size:clamp(2.2rem,4.8vw,4.2rem);line-height:1.1;margin:10px 0 14px}
.hero-book .tagline{margin-top:0}
.hero-book .motto-line,.hero-book .cta{justify-content:flex-start}
.hero-book .motto-line span{padding-left:0}
.hero-book .peak-1{fill:var(--navy-deep)}

/* ---------- the book scene ---------- */
.scene{
  --cx:50%; --by:76%; --oy:33%;
  --os:min(30vh,22vw,270px);
  --pw:min(22vh,14vw,220px);
  --ph:calc(var(--pw) * 1.3);
  position:relative;height:min(64vh,560px);perspective:1100px;perspective-origin:50% 45%;transition:transform .3s ease-out;will-change:transform
}
.book{position:absolute;left:var(--cx);top:var(--by);width:calc(var(--pw) * 2);height:var(--ph);margin:calc(var(--ph) / -2) 0 0 calc(var(--pw) * -1);font-size:calc(var(--pw) / 12);transform:rotateX(60deg) rotateZ(-8deg);transform-style:preserve-3d}
.book .shadow{position:absolute;inset:6% -6% -14%;background:rgba(0,0,0,.6);filter:blur(26px);transform:translateZ(-40px)}
.book .board{position:absolute;inset:-3.5% -2.5%;border-radius:1em;background:linear-gradient(180deg,#22314a,#0d1422);box-shadow:0 0 0 1px rgba(216,166,64,.7);transform:translateZ(-4px)}
.book .glow{position:absolute;inset:8% 22%;border-radius:50%;background:radial-gradient(closest-side,rgba(246,220,131,.75),transparent);transform:translateZ(16px);opacity:0;transition:opacity .6s}
.scene.lit .glow{opacity:1}

.base,.leaf{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d}
.base.l{left:0}
.base.r,.leaf{left:50%}
.leaf{transform-origin:0 50%;will-change:transform}
.face{position:absolute;inset:0;padding:1.3em 1.2em;display:flex;flex-direction:column;gap:.8em;background:#fbf6ea;color:#1b2536;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.back{transform:rotateY(180deg)}
.face.right{border-radius:0 .5em .5em 0}
.face.left{border-radius:.5em 0 0 .5em}
.face::before,.face::after{content:"";position:absolute;inset:0}
.face.right::before{background:linear-gradient(to right,rgba(40,25,0,.3),rgba(40,25,0,.06) 10%,transparent 26%)}
.face.left::before{background:linear-gradient(to left,rgba(40,25,0,.3),rgba(40,25,0,.06) 10%,transparent 26%)}
.face.right::after{background:linear-gradient(to right,rgba(0,0,0,.05),rgba(0,0,0,.4));opacity:var(--s,0)}
.face.left::after{background:linear-gradient(to left,rgba(0,0,0,.05),rgba(0,0,0,.4));opacity:var(--s,0)}
.face b{font-family:Cinzel,serif;font-weight:700;font-size:3.2em;line-height:1;color:transparent;-webkit-text-stroke:.03em #a17024}
.face h3{font-family:Cinzel,serif;font-weight:600;font-size:1em;letter-spacing:.08em;color:#a17024}
.face .lines{flex:1;background:repeating-linear-gradient(180deg,#d9ccab 0 .13em,transparent .13em .85em);opacity:.75}
.face.cover{align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 35%,#22314a,var(--navy) 55%,var(--navy-deep))}
.face.cover img{width:84%}

.objects{position:absolute;left:var(--cx);top:var(--oy);width:var(--os);height:var(--os);margin:calc(var(--os) / -2) 0 0 calc(var(--os) / -2)}
.obj{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(95%) scale(.12) rotate(-14deg);transition:transform .45s cubic-bezier(.55,0,.9,.4),opacity .3s .12s;filter:drop-shadow(0 18px 26px rgba(0,0,0,.45))}
.obj.on{opacity:1;transform:none;transition:transform 1s cubic-bezier(.2,1.5,.35,1),opacity .35s}
.obj .float{width:100%;height:auto;animation:bob 4.5s ease-in-out infinite}
.obj svg.float{height:100%;overflow:visible}
.rays{animation:blink 1.8s ease-in-out infinite}
.flame{transform-box:fill-box;transform-origin:50% 0;animation:flame .22s ease-in-out infinite alternate}
.flame.f2{animation-duration:.16s}
.plane{animation:plane 3.5s ease-in-out infinite}
.dots circle{animation:blink 1.2s ease-in-out infinite}
.dots circle:nth-child(2){animation-delay:.2s}.dots circle:nth-child(3){animation-delay:.4s}
.twinkle{transform-box:fill-box;transform-origin:center;animation:twinkle 2.2s ease-in-out infinite}
.flag{transform-box:fill-box;transform-origin:0 50%;animation:wave 1.4s ease-in-out infinite alternate}

.beam{position:absolute;left:var(--cx);top:var(--oy);width:calc(var(--os) * 1.15);height:calc(var(--by) - var(--oy));margin-left:calc(var(--os) * -.575);background:linear-gradient(to top,rgba(246,220,131,.4),rgba(246,220,131,0) 85%);clip-path:polygon(36% 100%,64% 100%,100% 0,0 0);filter:blur(8px);opacity:0;transition:opacity .7s}
.scene.lit .beam{opacity:1}
.sparks{position:absolute;left:var(--cx);top:var(--by);width:0;height:0}
.sparks i{position:absolute;left:var(--x);top:0;width:var(--d);height:var(--d);border-radius:50%;background:var(--gold-light);opacity:0;animation:spark var(--t) linear var(--w) infinite}

.js .scene{animation:scene-in 1.2s .4s both}
@keyframes scene-in{from{opacity:0}to{opacity:1}}
@keyframes bob{0%,100%{transform:translateY(-3%) rotate(-1.5deg)}50%{transform:translateY(3%) rotate(1.5deg)}}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes flame{from{transform:scaleY(.8)}to{transform:scaleY(1.12)}}
@keyframes plane{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-8px)}}
@keyframes twinkle{0%,100%{transform:scale(.85) rotate(0)}50%{transform:scale(1.12) rotate(12deg)}}
@keyframes wave{from{transform:scaleX(1)}to{transform:scaleX(.82)}}
@keyframes spark{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(calc(var(--os) * -1.5))}}

/* ---------- dark sections ---------- */
.section.dark+.section.dark,.motto+.section.dark{border-top:1px solid rgba(216,166,64,.14)}
.dark strong{color:#fff;font-weight:500}
.dark .pillars{background:rgba(255,255,255,.05);border:1px solid rgba(246,220,131,.18);border-top:3px solid var(--gold);box-shadow:none}
.dark .pillars-title{color:#fff!important}
.dark .pillar{border-top-color:rgba(255,255,255,.1)}
.dark .pillar h3{color:#fff}
.dark .pillar>span{color:var(--gold)}
.dark .promise{background:rgba(255,255,255,.05);border:1px solid rgba(246,220,131,.2);box-shadow:none}

/* programme cards: illustrated objects */
.art{width:104px;height:104px;margin-bottom:20px;transition:transform .5s var(--ease)}
.art svg{width:100%;height:100%;overflow:visible;animation:bob 5s ease-in-out infinite}
.card:nth-child(2) .art svg{animation-delay:-1.2s}
.card:nth-child(3) .art svg{animation-delay:-2.4s}
.card:nth-child(4) .art svg{animation-delay:-3.6s}
.card:hover .art{transform:translateY(-8px) scale(1.08)}

/* ---------- class videos ---------- */
.vid-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.vid-head h2{margin:0}
.yt-btn{gap:10px}
.yt-btn svg{width:22px;height:22px;fill:#ff3d3d}
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vid{display:block;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(246,220,131,.16);transition:transform .45s var(--ease),border-color .4s,box-shadow .45s}
a.vid:hover{transform:translateY(-8px);border-color:rgba(246,220,131,.55);box-shadow:0 30px 50px -30px rgba(0,0,0,.9)}
.vid-feature{grid-column:span 2;grid-row:span 2}
.vid-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(120% 120% at 30% 20%,#2c4064,#141e30)}
.vid-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s}
.vid-thumb svg{position:absolute;left:50%;top:50%;width:68px;height:48px;translate:-50% -50%;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));transition:scale .4s var(--ease)}
.vid-feature .vid-thumb svg{width:92px;height:65px}
a.vid:hover .vid-thumb img{transform:scale(1.07);filter:brightness(.8)}
a.vid:hover .vid-thumb svg{scale:1.15}
.vid-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,16,27,.55))}
.vid-body{padding:18px 20px 20px;display:grid;gap:6px}
.vid-body h3{font-size:1rem;color:#fff;line-height:1.35}
.vid-feature .vid-body h3{font-size:1.25rem}
.vid-tag{justify-self:start;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);padding:3px 10px;border-radius:99px;border:1px solid rgba(246,220,131,.4)}
.vid-watch{font-size:.8rem;font-weight:500;color:var(--gold)}
.vid-empty .vid-thumb svg{opacity:.35}
.vid-empty .vid-body h3{color:#8f9bb0;font-weight:500}

/* ---------- phone ---------- */
@media (max-width:860px){
  .hero-book{text-align:center;padding-top:80px;padding-bottom:12vh}
  .hero-book .hero-inner{grid-template-columns:1fr;gap:0}
  .hero-book .motto-line{justify-content:center;margin:10px 0 18px}
  .hero-book .cta{justify-content:center}
  .hero-book .btn{padding:11px 24px}
  .scene{--os:min(17vh,44vw);--pw:min(13vh,31vw);height:35vh;min-height:250px}
  .vid-grid{grid-template-columns:1fr 1fr}
  .vid-feature{grid-column:1/-1;grid-row:auto}
}
@media (max-width:560px){
  .vid-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .obj .float,.art svg,.rays,.flame,.plane,.dots circle,.twinkle,.flag,.sparks i{animation:none}
}