/* Dynamic theme via CSS variables set on :root / [data-theme] — values injected inline too */

/* Image animation system — all site images should use .img-anim */
.img-anim {
  opacity: 0;
  will-change: transform, opacity;
}
.img-anim.is-in,
.img-anim.img-anim--force {
  opacity: 1;
}

.img-anim--fade_in.is-in { animation: iaFadeIn 1.2s ease forwards; }
.img-anim--fade_up.is-in { animation: iaFadeUp 1.1s cubic-bezier(.16,1,.3,1) forwards; }
.img-anim--zoom_in.is-in { animation: iaZoomIn 1.25s cubic-bezier(.16,1,.3,1) forwards; }
.img-anim--zoom_out.is-in { animation: iaZoomOut 1.4s ease forwards; }
.img-anim--slide_left.is-in { animation: iaSlideLeft 1.15s cubic-bezier(.16,1,.3,1) forwards; }
.img-anim--slide_right.is-in { animation: iaSlideRight 1.15s cubic-bezier(.16,1,.3,1) forwards; }
.img-anim--rotate_in.is-in { animation: iaRotateIn 1.2s cubic-bezier(.16,1,.3,1) forwards; }
.img-anim--reveal_mask.is-in { animation: iaReveal 1.3s cubic-bezier(.16,1,.3,1) forwards; clip-path: inset(0 0 0 0); }

.img-anim--kenburns.is-in {
  opacity: 1;
  animation: iaKenBurns 18s ease-in-out infinite alternate;
}
.img-anim--float.is-in {
  opacity: 1;
  animation: iaFloat 6s ease-in-out infinite;
}
.img-anim--parallax_soft.is-in {
  opacity: 1;
  animation: iaKenBurns 22s ease-in-out infinite alternate;
}
.img-anim--pulse_glow.is-in {
  opacity: 1;
  animation: iaPulse 4s ease-in-out infinite;
}
.img-anim--pan_left.is-in {
  opacity: 1;
  animation: iaPanLeft 22s linear infinite alternate;
}
.img-anim--pan_right.is-in {
  opacity: 1;
  animation: iaPanRight 22s linear infinite alternate;
}
.img-anim--scale_breathe.is-in {
  opacity: 1;
  animation: iaBreathe 7s ease-in-out infinite;
}

@keyframes iaFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes iaFadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: none; }
}
@keyframes iaZoomIn {
  from { opacity: 0; transform: scale(1.18); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes iaZoomOut {
  from { opacity: 0; transform: scale(.88); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes iaSlideLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to { opacity: 1; transform: none; }
}
@keyframes iaSlideRight {
  from { opacity: 0; transform: translateX(48px); }
  to { opacity: 1; transform: none; }
}
@keyframes iaRotateIn {
  from { opacity: 0; transform: scale(1.08) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}
@keyframes iaReveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes iaKenBurns {
  from { transform: scale(1.05) translate(0, 0); }
  to { transform: scale(1.18) translate(-2%, 1.5%); }
}
@keyframes iaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes iaPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.03); filter: brightness(1.08); }
}
@keyframes iaPanLeft {
  from { transform: scale(1.15) translateX(3%); }
  to { transform: scale(1.15) translateX(-3%); }
}
@keyframes iaPanRight {
  from { transform: scale(1.15) translateX(-3%); }
  to { transform: scale(1.15) translateX(3%); }
}
@keyframes iaBreathe {
  0%, 100% { transform: scale(1.06); }
  50% { transform: scale(1.12); }
}

/* Fill service/hall visual frames — always visible (don't stay opacity:0) */
.service-visual .cover-media,
.hall-item .cover-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88 !important;
}
.service-visual .cover-media.is-in,
.hall-item .cover-media.is-in {
  opacity: 1 !important;
}
.service-visual .cover-media.img-anim--kenburns.is-in,
.service-visual .cover-media.img-anim--pan_left.is-in,
.service-visual .cover-media.img-anim--pan_right.is-in,
.service-visual .cover-media.img-anim--scale_breathe.is-in,
.service-visual .cover-media.img-anim--parallax_soft.is-in,
.service-visual .cover-media.img-anim--pulse_glow.is-in,
.service-visual .cover-media.img-anim--float.is-in {
  width: 100%;
  height: 100%;
}

.page-hero-media {
  position: relative;
  overflow: hidden;
  min-height: 42vh;
  display: flex;
  align-items: flex-end;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}
.page-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,4,6,.35), rgba(10,4,6,.92));
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.upload-hint {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .35rem;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .85rem;
}
.theme-option {
  border: 1px solid var(--border);
  padding: .75rem;
  cursor: pointer;
  background: rgba(0,0,0,.25);
  transition: .2s;
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
}
.theme-option:hover,
.theme-option.selected {
  border-color: var(--gold);
}
.theme-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  height: 36px;
  margin-bottom: .55rem;
}
.theme-swatches i { display: block; height: 100%; }
.theme-option small { color: var(--muted); font-size: .75rem; }
.theme-option strong { display: block; font-size: .85rem; margin-bottom: .15rem; }