/* Terms & Privacy (text comes later): the pandan scene sits in the middle of the page */
.tp-page { min-height: calc(100vh - 79px); box-sizing: border-box; }
.tp { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: calc(100vh - 79px - 88px); }
.tp-scene { width: min(720px, 100%); }
.tp-scene svg { display: block; width: 100%; height: auto; stroke: none; }
.tp-ground { fill: var(--ink); opacity: .07; }

/* Leaves sway from their base, each a little out of step */
.tp-blade { transform-box: fill-box; transform-origin: 50% 100%; animation: tpSway 5s ease-in-out infinite; }
.tp-blade.b1 { animation-duration: 6s; animation-delay: -1s; }
.tp-blade.b2 { animation-duration: 5.5s; animation-delay: -2.5s; }
.tp-blade.b3 { animation-duration: 6.5s; animation-delay: -.5s; }
.tp-blade.b4 { animation-duration: 5.8s; animation-delay: -3s; }
.tp-blade.b5 { animation-duration: 7s; }
@keyframes tpSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }

.fly .wings { transform-box: fill-box; transform-origin: 50% 50%; animation: tpFlap .22s ease-in-out infinite alternate; }
@keyframes tpFlap { from { transform: scaleX(1); } to { transform: scaleX(.25); } }

@media (prefers-reduced-motion: reduce) {
  .tp-blade, .fly .wings { animation: none; }
}
@media (max-width: 760px) {
  .tp { min-height: calc(100vh - 77px - 140px); }
}

/* Centre on the whole page, not just the column next to Back */
@media (min-width: 761px) {
  .tp-page:has(> .back-link) > .tp { grid-column: 1 / -1; grid-row: 1; }
  .tp-page > .back-link { position: relative; z-index: 1; }
}

.tp-title { margin: 8px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; }
.tp-note { margin: 6px 0 0; font-size: 15px; color: var(--muted); }