/* =========================================================
   HERO
   ========================================================= */
.stage{
  position:relative;
  width:100%;
  height: 100vh;
  overflow:hidden;
  background: var(--page-bg);
}

.photowall-wrap{
  position:absolute;
  inset:0;
  z-index:1;
  will-change: transform;
}

.photowall{
  position:absolute;
  top:0;
  left:0;
  display:grid;
  gap:0 !important;
  background: var(--page-bg);
  align-content:start;
  justify-content:start;
  width: max-content;
  height: max-content;
}

.tile{
  position:relative;
  overflow:hidden;
  background: var(--page-bg);
  width: var(--cell, 240px);
  height: var(--cell, 240px);
}

.tile .card{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:translateZ(0);
  will-change:transform,opacity,clip-path;
  background: var(--page-bg);
}

.tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.03);
  filter:brightness(var(--img-dim)) saturate(var(--img-sat));
}

/* Film grain overlay */
.grain{
  position:absolute;
  inset:-30%;
  pointer-events:none;
  z-index:4;
  opacity:0.05;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  animation: grainMove 4s steps(10) infinite;
}

@keyframes grainMove{
  0%{ transform: translate3d(0,0,0); }
  10%{ transform: translate3d(-2%, -3%, 0); }
  20%{ transform: translate3d(-4%, 2%, 0); }
  30%{ transform: translate3d(3%, -4%, 0); }
  40%{ transform: translate3d(5%, 1%, 0); }
  50%{ transform: translate3d(-3%, 4%, 0); }
  60%{ transform: translate3d(-6%, -1%, 0); }
  70%{ transform: translate3d(2%, 5%, 0); }
  80%{ transform: translate3d(6%, -2%, 0); }
  90%{ transform: translate3d(-2%, -5%, 0); }
  100%{ transform: translate3d(0,0,0); }
}

/* Vignette */
.stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(11,15,16,0.10) 0%,
      rgba(11,15,16,0.58) 70%,
      rgba(11,15,16,0.82) 100%
    );
}

/* =========================================================
   HERO TITLE (CENTERED + COMPACT + SHADOW)
   ========================================================= */
.hero-title{
  position:absolute;
  left: 0;
  right: 0;
  top: calc(var(--header-h) + var(--hero-top));
  z-index: 6;
  pointer-events:none;
  text-align:center;
}

.hero-title .line1{
  margin: 0;
  font-size: clamp(46px, 6.2vw, 84px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 0.98;
  color: rgba(255,255,255,0.88);
  text-shadow:
    0 2px 0 rgba(0,0,0,0.35),
    0 10px 28px rgba(0,0,0,0.55),
    0 0 22px rgba(0,0,0,0.35);
}

.hero-title .line2{
  margin: 0;
  font-size: clamp(64px, 8.3vw, 120px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.92;
  color: rgba(255,255,255,0.96);
  text-shadow:
    0 2px 0 rgba(0,0,0,0.38),
    0 14px 34px rgba(0,0,0,0.62),
    0 0 28px rgba(0,0,0,0.40);
}

/* Hero fade into overlap */
.hero-fade{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height: 260px;
  z-index:5;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(11,15,16,0.00) 0%,
    rgba(11,15,16,0.40) 30%,
    rgba(11,15,16,0.76) 70%,
    rgba(11,15,16,0.98) 100%
  );
}

/* =========================================================
   Tile transitions
   ========================================================= */
.t-slideLeft.out{animation:outSlideLeft .5s forwards}
.t-slideLeft.in{animation:inSlideLeft .6s forwards}
@keyframes outSlideLeft{to{opacity:0;transform:translateX(-70%) scale(.98)}}
@keyframes inSlideLeft{from{opacity:0;transform:translateX(70%) scale(.98)}to{opacity:1;transform:translateX(0) scale(1)}}

.t-slideRight.out{animation:outSlideRight .5s forwards}
.t-slideRight.in{animation:inSlideRight .6s forwards}
@keyframes outSlideRight{to{opacity:0;transform:translateX(70%) scale(.98)}}
@keyframes inSlideRight{from{opacity:0;transform:translateX(-70%) scale(.98)}to{opacity:1;transform:translateX(0) scale(1)}}

.t-slideUp.out{animation:outSlideUp .5s forwards}
.t-slideUp.in{animation:inSlideUp .6s forwards}
@keyframes outSlideUp{to{opacity:0;transform:translateY(-70%) scale(.98)}}
@keyframes inSlideUp{from{opacity:0;transform:translateY(70%) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.t-slideDown.out{animation:outSlideDown .5s forwards}
.t-slideDown.in{animation:inSlideDown .6s forwards}
@keyframes outSlideDown{to{opacity:0;transform:translateY(70%) scale(.98)}}
@keyframes inSlideDown{from{opacity:0;transform:translateY(-70%) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.t-zoomRotate.out{animation:outZoomRotate .5s forwards}
.t-zoomRotate.in{animation:inZoomRotate .7s forwards}
@keyframes outZoomRotate{to{opacity:0;transform:scale(1.25) rotate(8deg)}}
@keyframes inZoomRotate{from{opacity:0;transform:scale(.7) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}

.t-flipY.out{animation:outFlipY .55s forwards}
.t-flipY.in{animation:inFlipY .75s forwards}
@keyframes outFlipY{to{opacity:0;transform:rotateY(90deg) scale(.95)}}
@keyframes inFlipY{from{opacity:0;transform:rotateY(-90deg) scale(.95)}to{opacity:1;transform:rotateY(0) scale(1)}}

.t-wipe.out{animation:outWipe .5s forwards}
.t-wipe.in{animation:inWipe .7s forwards}
@keyframes outWipe{to{opacity:0;clip-path:inset(0 0 0 100%)}}
@keyframes inWipe{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

.t-drop.out{animation:outDrop .5s forwards}
.t-drop.in{animation:inDrop .7s forwards}
@keyframes outDrop{to{opacity:0;transform:translateY(85%) rotate(6deg)}}
@keyframes inDrop{from{opacity:0;transform:translateY(-85%) rotate(-6deg)}to{opacity:1;transform:translateY(0) rotate(0)}}