/* ==========================================================================
   Hobart Downtown — 3D parallax styles (shared across all pages)
   Pairs with js/three-d.js
   ========================================================================== */

.stage {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  perspective: 1200px;
  perspective-origin: 50% 45%;
  background: #233022;
}
/* Shorter hero for inner pages */
.stage.stage-page { height: 66vh; min-height: 480px; }

.stage-inner {
  position: absolute; inset: -8%;
  transform-style: preserve-3d;
  will-change: transform;
}
.layer {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}
.layer-photo { background-size: cover; background-position: center; }
.layer-sky {
  background: radial-gradient(120% 90% at 50% 0%, #4A5E44 0%, #2C3A2A 45%, #1F291D 100%);
}
.layer-glow {
  background: radial-gradient(40% 35% at 50% 38%, rgba(217,164,65,.45), transparent 70%);
  mix-blend-mode: screen;
}
.vignette {
  background: linear-gradient(180deg, rgba(20,30,25,.35) 0%, rgba(20,30,25,0) 25%, rgba(20,30,25,.18) 55%, rgba(20,30,25,.92) 100%);
  pointer-events: none;
}
.grain {
  opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bigtype {
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:700;
  font-size: clamp(5rem, 20vw, 18rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(218,211,199,.16);
  letter-spacing:-0.02em; white-space:nowrap; user-select:none; pointer-events:none;
}
.glass {
  background: rgba(28,42,35,.34);
  border: 1px solid rgba(255,255,255,.38);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-radius: 18px;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.7);
}
.float-chip { position:absolute; will-change:transform; }

.tilt-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  will-change: transform;
}
.sheen { position:absolute; inset:0; border-radius:inherit; pointer-events:none; transition:background .2s; }

.depth-stack { position: relative; height: clamp(420px, 60vh, 640px); }
.depth-img {
  position:absolute; border-radius:20px; overflow:hidden; will-change:transform;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.55); border:5px solid #fff;
}
.hint {
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  display:flex; align-items:center; gap:.6rem; z-index:5;
}
@media (pointer:coarse){ .hint .mouseword{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .stage-inner, .layer, .float-chip { transform:none !important; }
}

/* ----- Editorial layered gallery (replaces the basic photo stack) -------- */
.gal { position: relative; }
.gal-fig { position:absolute; border-radius:16px; overflow:hidden; will-change:transform;
  box-shadow: 0 30px 60px -30px rgba(43,38,32,.55), 0 4px 14px -8px rgba(43,38,32,.35); }
.gal-fig img { width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.gal-fig:hover img { transform: scale(1.05); }
.gal-cap { position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.2rem .95rem;
  display:flex; align-items:baseline; gap:.5rem; color:#fff;
  background:linear-gradient(0deg, rgba(20,24,20,.82), rgba(20,24,20,0)); }
.gal-cap b { font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; line-height:1; }
.gal-cap span { font-size:.78rem; opacity:.85; letter-spacing:.03em; }
.gal-num { position:absolute; top:.85rem; left:1rem; z-index:2; color:#fff; font-family:'Fraunces',serif;
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-shadow:0 1px 8px rgba(0,0,0,.55); }
.gal-ring { position:absolute; border:1.5px solid var(--terra); border-radius:18px; opacity:.45; }
.gal-dot { position:absolute; border-radius:50%; background:var(--gold); opacity:.18; filter:blur(2px); }