/* Scoped enhancement for vinai-stars. No theme files are replaced except the
     small server-rendered intro block in front-page.php that this styles. */
  body.vmp-active { --vmp-ui: 0; --vmp-bg-scale: 1.06; }
  body.vmp-active .home-wrap { position: fixed !important; inset: 0; width: 100%; height: 100svh; overflow: hidden; }
  body.vmp-active .home-wrap .home-bg { height: 100% !important; transform: scale(var(--vmp-bg-scale)); transform-origin:
  center; }
  body.vmp-active .home-wrap > :not(.home-bg) { opacity: var(--vmp-ui); }
  .vmp-spacer { width: 1px; pointer-events: none; }
  .vmp-overlay { position: fixed; inset: 0; z-index: 9990; overflow: hidden; isolation: isolate; color: #283e44; font-family:
  Georgia, 'Batang', serif; }
  /* The resting <img> and the canvas it's swapped for occupy the exact same box;
     the img uses object-fit:cover so its first paint is pixel-identical to the
     canvas's p=0 frame (see portal.js), making the swap invisible. */
  .vmp-overlay img,
  .vmp-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .vmp-overlay img { object-fit: cover; object-position: center; }
  .vmp-top { position: absolute; left: 4vw; right: 4vw; top: max(28px, env(safe-area-inset-top)); display: flex; align-items:
  center; justify-content: space-between; gap: 20px; }
  .vmp-brand { font: 11px/1.5 Arial,sans-serif; letter-spacing: .25em; }
  .vmp-skip { color: inherit; background: rgba(255,255,255,.23); border: 1px solid currentColor; border-radius: 30px; padding:
  10px 17px; font: 11px/1.5 Arial,sans-serif; cursor: pointer; backdrop-filter: blur(8px); }
  .vmp-skip:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
  .vmp-intro { position: absolute; top: 13%; left: 20px; right: 20px; text-align: center; pointer-events: none; }
  .vmp-intro small { display: block; font: 10px/1.5 Arial,sans-serif; letter-spacing: .32em; margin-bottom: 14px; }
  .vmp-intro p { margin: 0; font-size: clamp(27px,3.1vw,48px); font-weight: 400; letter-spacing: .09em; line-height: 1.5; }
  .vmp-bottom { position: absolute; bottom: max(27px,env(safe-area-inset-bottom)); left: 4vw; right: 4vw; display: flex;
  align-items: end; justify-content: space-between; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 1px 16px rgba(0,0,0,.45); }
  /* Soft scrim behind the bottom row so the scroll hint stays legible on the bright shoreline. */
  .vmp-overlay::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
  background: linear-gradient(to top, rgba(4,8,16,.55), rgba(4,8,16,0)); }
  .vmp-top, .vmp-intro, .vmp-bottom, .vmp-track { z-index: 1; }
  .vmp-cue { display: flex; gap: 12px; align-items: center; font: 13px/1.6 Arial,sans-serif; letter-spacing: .1em; }
  .vmp-cue::before { content: ''; width: 2px; height: 40px; background: currentColor; animation: vmp-cue-bounce 2s ease-in-out
  infinite; }
  @keyframes vmp-cue-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(8px); opacity: 1; }
  }
  .vmp-chapter { font: 10px/1.5 Arial,sans-serif; letter-spacing: .16em; }
  .vmp-track { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,.12); }
  .vmp-track span { display: block; width: 100%; height: 100%; transform-origin: left; background: #eee4c9; }
  @media(max-width:600px) { .vmp-top,.vmp-bottom { left: 22px; right: 22px; } .vmp-brand { font-size:9px; letter-spacing:.18em;
  } .vmp-intro { top: 16%; } .vmp-intro p { font-size: 29px; } .vmp-chapter { font-size:9px; } }
  @media(prefers-reduced-motion:reduce) { .vmp-overlay,.vmp-spacer { display:none !important; } }