/* Purity Orient shared styles — liquid glass surfaces and on-appear animations.
   Used by every page; keep page-specific CSS in that page's own <style> block. */
::selection { background: #c9d1ff; color: #000066; }

  /* Liquid glass surfaces */
  .glass {
    background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 8px 32px rgba(0,0,102,.10), inset 0 1px 1px rgba(255,255,255,.85);
  }
  .glass-dark {
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.15);
  }

  /* On-appear animations */
  .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s ease, transform .8s ease; }
  .reveal-left { opacity: 0; transform: translateX(-2.5rem); transition: opacity .8s ease, transform .8s ease; }
  .reveal-right { opacity: 0; transform: translateX(2.5rem); transition: opacity .8s ease, transform .8s ease; }
  .reveal-blur { opacity: 0; transform: translateY(1rem) scale(.98); filter: blur(14px); transition: opacity .9s ease, transform .9s ease, filter .9s ease; }
  .revealed { opacity: 1; transform: none; filter: none; }
  .d1 { transition-delay: .12s } .d2 { transition-delay: .24s } .d3 { transition-delay: .36s } .d4 { transition-delay: .48s }

  /* Header slides in on page load */
  @keyframes header-in { from { opacity: 0; transform: translateY(-1.25rem); } to { opacity: 1; transform: none; } }
  header[role="banner"] { animation: header-in .7s ease .15s backwards; }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-blur { opacity: 1; transform: none; filter: none; transition: none; }
    .d1, .d2, .d3, .d4 { transition-delay: 0s }
    header[role="banner"] { animation: none; }
  }
  html { scroll-padding-top: 7rem; }