/* ==========================================================================
   Hotel Green Park — 3D layer (pairs with js/fx3d.js)
   Everything is scoped to .fx3d, which the script only adds when motion is allowed.
   ========================================================================== */

/* ---------- WebGL hero canvas ---------- */
.hero3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Hero: slides swing in through depth ---------- */
.fx3d .hero__slides {
  perspective: 1400px;
  transform: scale(calc(1.06 * var(--hs, 1))) translate3d(calc(var(--mx, 0) * -26px), calc(var(--my, 0) * -18px), 0);
}
.fx3d .hero__slide {
  transform: translateZ(-280px) rotateY(-16deg);
  transition: opacity 1.6s var(--ease-in-out), transform 2.2s var(--ease);
}
.fx3d .hero__slide.is-active { transform: none; }

/* Headline turns gently with the pointer and sits on an extruded shadow */
.fx3d .hero h1,
.fx3d .page-hero h1 {
  transform: perspective(900px)
    rotateY(calc(var(--mx, 0) * 12deg))
    rotateX(calc(var(--my, 0) * -9deg));
  transform-style: preserve-3d;
  text-shadow:
    0 1px 0 rgba(11, 26, 20, .35),
    0 2px 0 rgba(11, 26, 20, .3),
    0 3px 0 rgba(11, 26, 20, .25),
    0 4px 0 rgba(11, 26, 20, .2),
    0 14px 30px rgba(0, 0, 0, .35);
}
.fx3d .hero__text,
.fx3d .hero__actions {
  translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 10px);
}

/* Enquiry bar folds down into place like a lid */
.fx3d .enquiry { perspective: 1200px; }
.fx3d .enquiry__form.hero-fade {
  transform: rotateX(62deg) translateY(30px);
  transform-origin: 50% 0;
  transition: opacity 1s var(--ease), transform 1.4s var(--ease);
}
.fx3d.is-loaded .enquiry__form.hero-fade { transform: none; transition-delay: .65s; }

/* ---------- Preloader exits by falling back in 3D ---------- */
.fx3d .preloader {
  transform-origin: 50% 0;
  backface-visibility: hidden;
  transition: transform 1.1s var(--ease-in-out) .15s, opacity .4s 1s;
}
.fx3d.is-loaded .preloader {
  transform: perspective(1600px) rotateX(-96deg);
  opacity: 0;
  pointer-events: none;
}

/* ---------- Grids rise off the floor as they scroll in ---------- */
.scroll3d {
  transform: perspective(1600px) rotateX(var(--sx, 0deg)) translateZ(var(--sz, 0px));
  transform-origin: 50% 100%;
  transition: transform .25s linear;
  will-change: transform;
}

/* ---------- 3D reveals ---------- */
.fx3d .stat[data-reveal] {
  transform: perspective(700px) rotateX(-90deg);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}
.fx3d .stat[data-reveal].is-visible { transform: none; }

.fx3d .masonry__item[data-reveal],
.fx3d .amenity[data-reveal],
.fx3d .occasion[data-reveal] {
  transform: perspective(1000px) rotateX(-38deg) translate3d(0, 60px, -90px);
  transform-origin: 50% 0;
}
.fx3d .masonry__item[data-reveal].is-visible,
.fx3d .amenity[data-reveal].is-visible,
.fx3d .occasion[data-reveal].is-visible { transform: none; }
.fx3d .masonry__item.is-settled,
.fx3d .capacity__card.is-settled { transition: transform .35s var(--ease), box-shadow .5s var(--ease), opacity .5s; }
.fx3d .masonry__item.is-settled:hover { box-shadow: 0 30px 60px -25px rgba(16, 34, 27, .45); }

.fx3d [data-reveal="flip"]:not(.depth-scene) {
  transform: perspective(1200px) rotateX(-55deg) translate3d(0, 80px, -120px);
}
.fx3d [data-reveal="flip"]:not(.depth-scene).is-visible { transform: none; }

/* ---------- Pointer glare on cards ---------- */
.glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
:hover > .glare { opacity: 1; }

/* ---------- Buttons lean toward the cursor ---------- */
.fx3d .btn:not([data-reveal]):hover {
  transform: perspective(500px) rotateY(var(--bx, 0deg)) rotateX(var(--by, 0deg)) translateZ(12px);
}

/* ---------- Footer headline: extruded letters ---------- */
.fx3d .footer__big .w > span,
.fx3d .footer__big:not(.split-words) {
  text-shadow:
    0 1px 0 #0e7c5a,
    0 2px 0 #0c6c4f,
    0 3px 0 #0a5e44,
    0 4px 0 #084e39,
    0 5px 0 #063f2e,
    0 12px 22px rgba(0, 0, 0, .45);
}

/* ---------- Page turn between pages ---------- */
.page-turn {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--green-900);
  transform-origin: 0 50%;
  transform: perspective(1400px) rotateY(92deg);
  backface-visibility: hidden;
  visibility: hidden;
  transition: transform .65s var(--ease-in-out), visibility 0s .65s;
}
.page-turn__word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(38px, 6vw, 64px);
  color: var(--white);
  opacity: 0;
  transition: opacity .3s .35s;
}
.is-turning .page-turn { transform: none; visibility: visible; transition: transform .65s var(--ease-in-out); }
.is-turning .page-turn__word { opacity: 1; }

/* ==========================================================================
   Z-axis depth system
   ========================================================================== */

/* Layers move via the `translate` property so they never fight the reveal transforms */
.zl { will-change: translate; }
.fx3d .section > .container,
.fx3d .banner > .container,
.fx3d .footer > .container { transform-origin: 50% 0; will-change: scale, opacity; }
.fx3d .footer { position: relative; overflow: hidden; }
.fx3d .footer > .container { position: relative; z-index: 1; }

/* The badge pokes out of the image stack; don't let the reveal clip it */
.img-stack[data-reveal] { clip-path: none !important; }

/* Photos sit slightly oversized inside their frames so they can drift */
.fx3d .zwin { scale: 1.14; will-change: translate; }
.fx3d .room-row__img { overflow: hidden; }

/* Headings: each word swings up out of the page in 3D */
.fx3d .split-words .w { perspective: 520px; }
.fx3d .split-words .w > span {
  transform: translateY(100%) rotateX(-88deg);
  transform-origin: 50% 100%;
}
.fx3d .split-words.is-visible .w > span { transform: none; }

/* Marquee band tips in 3D with your scroll speed */
.fx3d .marquee {
  transform: perspective(900px) rotateX(calc(var(--skew, 0deg) * -2.2));
  transition: transform .5s var(--ease);
}

/* Floating shapes at different depths */
.zshapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.banner > .zshapes { z-index: 1; }
.zshape {
  position: absolute;
  width: var(--size);
  height: var(--size);
  filter: blur(var(--blur));
  will-change: translate;
}
.zshape::before {
  content: "";
  position: absolute;
  inset: 0;
  animation: zspin var(--spin, 14s) linear infinite;
}
.zshape--ring::before {
  border-radius: 50%;
  border: 2px solid rgba(14, 124, 90, .5);
  box-shadow: inset 0 0 0 4px rgba(127, 214, 178, .12);
}
.zshape--diamond::before {
  background: linear-gradient(135deg, #f3d48e, #c9973f 55%, #8a5f1c);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.zshape--dot::before {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a8ecd0, #0e7c5a 60%, #064832);
  animation-name: zbob;
}
.zshape--cross::before {
  background:
    linear-gradient(var(--gold), var(--gold)) center / 100% 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 2px 100% no-repeat;
  opacity: .8;
}
.section--dark .zshape--ring::before,
.footer .zshape--ring::before,
.banner .zshape--ring::before { border-color: rgba(127, 214, 178, .45); }
@keyframes zspin {
  from { transform: perspective(300px) rotate3d(1, 1, .3, 0deg); }
  to   { transform: perspective(300px) rotate3d(1, 1, .3, 360deg); }
}
@keyframes zbob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.08); }
}

/* ---------- Cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  left: 0; top: 0;
  z-index: 3000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.has-cursor .cursor-dot, .has-cursor .cursor-ring { opacity: 1; }
.cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--gold);
}
.cursor-ring {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 1.5px solid rgba(235, 100, 64, .7);
  display: grid;
  place-items: center;
  transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease),
    background .35s, border-color .35s, scale .2s;
}
.cursor-ring span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
}
.cursor-ring.is-link {
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  background: rgba(235, 100, 64, .12);
}
.cursor-ring.is-view {
  width: 86px; height: 86px; margin: -43px 0 0 -43px;
  background: rgba(14, 124, 90, .85);
  border-color: transparent;
  backdrop-filter: blur(4px);
}
.cursor-ring.is-down { scale: .82; }

@media (max-width: 760px) {
  .scroll3d { transform: perspective(1200px) rotateX(calc(var(--sx, 0deg) * .6)); }
}