/* Shared base for the three templates: reveal animations, lightbox, resets. Each template sets its own look. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Reveal: hidden only when JS is running, so the page still shows without it */
.js .rv { opacity: 0; transition: opacity 1.1s cubic-bezier(.25,.46,.45,.94), transform 1.1s cubic-bezier(.25,.46,.45,.94); }
.js .rv.rv-up { transform: translateY(28px); }
.js .rv.rv-left { transform: translateX(-36px); }
.js .rv.rv-right { transform: translateX(36px); }
.js .rv.in { opacity: 1; transform: none; }
.rv-img { overflow: hidden; }
.js .rv-img img { transform: scale(1.12); transition: transform 1.8s cubic-bezier(.25,.46,.45,.94); }
.js .rv-img.in img, .js .rv.in .rv-img img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv-img img { transition: none !important; transform: none !important; opacity: 1 !important; }
  html { scroll-behavior: auto; }
}

/* Accessibility helpers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: #23314a; color: #fff; padding: 12px 18px; font: 600 14px/1 system-ui, sans-serif; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid #23314a; outline-offset: 3px; }
.lb :focus-visible, .announce :focus-visible { outline-color: #fff; }
img[data-lb]:focus-visible { outline-offset: -4px; outline: 3px solid #fff; box-shadow: 0 0 0 3px #23314a; }

/* Lightbox */
img[data-lb] { cursor: zoom-in; }
.lb { position: fixed; inset: 0; background: rgba(15,18,24,.94); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.lb.on { opacity: 1; pointer-events: auto; }
.lb[hidden] { display: none; }
.lb img { max-width: 90vw; max-height: 84vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.lb button { position: absolute; background: none; border: 0; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; padding: 12px 18px; opacity: .75; }
.lb button:hover { opacity: 1; }
.lb-x { top: 10px; right: 10px; }
.lb-p { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-n { right: 4px; top: 50%; transform: translateY(-50%); }
.lb-c { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #ddd; font: 13px/1.4 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }

/* Preview banner (temporary hosting note) */
.preview-bar { position: fixed; left: 16px; bottom: 16px; z-index: 900; font: 12px/1.3 system-ui, sans-serif; background: rgba(20,24,32,.88); color: #fff; padding: 9px 14px; border-radius: 999px; text-decoration: none; letter-spacing: .04em; }
.preview-bar:hover { background: #000; }