@charset "UTF-8";
/* CSS Document */

/* Subtle film grain overlay */
.film-grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;
  opacity:.10;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Page transition overlay */
#transitionFX{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  transition: opacity .35s ease;
}
#transitionFX.on{opacity:1}

#transitionFX .fog{
  position:absolute; inset:-20%;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(255,255,255,.12), transparent 65%),
    radial-gradient(closest-side at 70% 60%, rgba(207,231,255,.12), transparent 70%),
    radial-gradient(closest-side at 55% 30%, rgba(255,122,26,.10), transparent 70%);
  filter: blur(22px);
  animation: fogMove 1.2s ease-in-out infinite alternate;
}

#transitionFX .sweep{
  position:absolute; inset:-40%;
  background: linear-gradient(120deg,
    transparent 35%,
    rgba(207,231,255,.22) 45%,
    rgba(255,255,255,.12) 50%,
    rgba(255,122,26,.10) 55%,
    transparent 65%);
  filter: blur(6px);
  animation: sweep 900ms ease-in-out infinite;
  opacity:.9;
}

@keyframes fogMove{
  from{transform: translateX(-2%) translateY(-1%) scale(1.02)}
  to{transform: translateX(2%) translateY(1%) scale(1.04)}
}
@keyframes sweep{
  0%{transform: translateX(-22%)}
  100%{transform: translateX(22%)}
}

/* Reveal on scroll */
[data-reveal]{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal-on{opacity:1; transform: translateY(0px)}

/* Gallery tile hover */
.tile{
  position:relative;
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid rgba(200,220,255,.14);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  transition: transform .28s ease, border-color .28s ease;
}
.tile:hover{
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(207,231,255,.45);
}
.tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.04);
  transition: transform .55s ease, filter .55s ease;
  filter: contrast(1.06) saturate(1.06);
}
.tile:hover img{
  transform: scale(1.12);
  filter: contrast(1.12) saturate(1.12);
}
.tile::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(600px 240px at 30% 15%, rgba(255,255,255,.12), transparent 60%),
              linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55));
  opacity:.75;
  pointer-events:none;
}