body { -webkit-font-smoothing: antialiased; }

/* Scroll reveals (only hidden when JS is running) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* Hero load-in */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes slowzoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.slowzoom { animation: slowzoom 2.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.floaty { animation: floaty 5s ease-in-out infinite; }

/* Ticker / marquee */
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker { animation: ticker 32s linear infinite; }
.ticker-slow { animation-duration: 70s; }
.ticker-wrap:hover .ticker { animation-play-state: paused; }

/* Header state */
#hdr.scrolled { background: rgba(15,36,71,.98); box-shadow: 0 10px 30px -12px rgba(0,0,0,.45); }
#hdr.scrolled .topbar { margin-top: -40px; opacity: 0; }

/* Image zoom on hover */
.zoom img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.zoom:hover img { transform: scale(1.07); }

/* Before / after slider */
.ba .ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-range { -webkit-appearance: none; appearance: none; background: transparent; margin: 0; }
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 64px; height: 2000px; cursor: ew-resize; opacity: 0; }
.ba-range::-moz-range-thumb { width: 64px; height: 2000px; cursor: ew-resize; opacity: 0; border: 0; }
.ba-tab[aria-selected="true"] { background: #FFC20E; color: #0B1120; border-color: #FFC20E; }

/* Gallery filter pills */
.filter[aria-pressed="true"] { background: #1B3A6B; color: #fff; border-color: #1B3A6B; }

/* Lightbox */
#lb { transition: opacity .25s ease; }
#lb.open { opacity: 1; pointer-events: auto; }

/* Subtle dot grid texture */
.dots { background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 22px 22px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  /* Still step through the strip's points, as a gentle fade with no movement */
  .rot-item, .rot-item.off { transform: none !important; transition: opacity .6s ease !important; }
}

/* Phone version of the yellow strip: one point at a time */
.rot-item { opacity: 0; transform: translateY(100%); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.rot-item.on { opacity: 1; transform: none; }
.rot-item.off { opacity: 0; transform: translateY(-100%); }