/* BBC Academy page transition — unique to the academy.
   Two navy panels open like the doors of a classroom / the cover of a
   book, revealing the next page. The B-B-C mark pops in, a red line
   sweeps under ACADEMY, then the panels slide apart. Loaded on every page. */
.page-transition { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.page-transition.pt-hidden { display: none; }
.pt-panel { position: absolute; top: 0; bottom: 0; width: 51%; background: #0b2035; transition: transform .75s cubic-bezier(.76, 0, .24, 1); }
.pt-panel.pt-left { left: 0; }
.pt-panel.pt-right { right: 0; }
.pt-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .3s ease; }
.pt-mark { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; direction: ltr; }
.pt-mark b { background: #fff; color: #102a43; font: 700 20px/1 'DM Sans', sans-serif; padding: 11px 10px 10px; letter-spacing: -.05em; animation: pt-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.pt-mark b:nth-child(2) { background: #c94243; color: #fff; animation-delay: .08s; }
.pt-mark b:nth-child(3) { animation-delay: .16s; }
.pt-word { color: #fff; font: 700 15px 'DM Sans', sans-serif; letter-spacing: .42em; margin-inline-start: .42em; animation: pt-rise .5s ease .28s both; }
.pt-line { width: 120px; height: 3px; background: #c94243; transform-origin: center; animation: pt-line .55s ease .45s both; }
.pt-tag { color: rgba(255,255,255,.65); font: 500 12px 'DM Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; animation: pt-rise .5s ease .55s both; }
/* Leaving (entering a page): panels slide apart like opening doors. */
.page-transition.pt-leaving .pt-panel.pt-left { transform: translateX(-101%); }
.page-transition.pt-leaving .pt-panel.pt-right { transform: translateX(101%); }
.page-transition.pt-leaving .pt-content { opacity: 0; }
/* Starting an exit: panels begin off-screen, then cover the page. */
.page-transition.pt-start .pt-panel.pt-left { transform: translateX(-101%); transition: none; }
.page-transition.pt-start .pt-panel.pt-right { transform: translateX(101%); transition: none; }
.page-transition.pt-start .pt-content { opacity: 0; transition: none; }
@keyframes pt-pop { from { opacity: 0; transform: translateY(16px) rotateY(80deg); } to { opacity: 1; transform: translateY(0) rotateY(0); } }
@keyframes pt-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pt-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
  .pt-panel, .pt-content { transition: none; animation: none; }
}