/* ==================================================================
   CONSCIENTE — experience layer
   Motion and interaction on top of style.css. Everything here is scoped
   to html.fx, which js/experience.js adds — remove the two experience
   files from a page and it falls back to the plain site.
================================================================== */

/* ---------- film grain ---------- */
.fx body::after {
  content: '';
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- opening curtain + page transitions ---------- */
.intro {
  position: fixed; inset: 0; z-index: 400;
  background: var(--black); color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: transform 1.1s cubic-bezier(.76, 0, .24, 1), opacity .5s ease;
}
.intro svg { width: 64px; height: 64px; overflow: visible; }
.intro circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw 1.3s cubic-bezier(.6, 0, .2, 1) forwards; }
.intro circle + circle { animation-delay: .18s; }
.intro span {
  font-family: var(--serif); font-size: 15px; letter-spacing: .5em; text-transform: uppercase; padding-left: .5em;
  opacity: 0; animation: intro-word 1s .45s var(--ease) forwards;
}
.intro.is-done { transform: translateY(-100%); }
.intro--quick { transition: opacity .6s ease; }
.intro--quick svg, .intro--quick span { display: none; }
.intro--quick.is-done { transform: none; opacity: 0; pointer-events: none; }
.intro--leave { opacity: 0; pointer-events: none; transition: opacity .42s ease; }
.intro--leave.is-on { opacity: 1; pointer-events: auto; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-word { from { opacity: 0; letter-spacing: .9em; } to { opacity: .9; letter-spacing: .5em; } }

/* ---------- scroll progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: #fff; mix-blend-mode: difference;
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}

/* ---------- header: steps aside on the way down, returns on the way up ---------- */
.fx .site-header {
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s, transform .7s var(--ease);
}
.fx .site-header.is-hidden { transform: translateY(-101%); }

/* ---------- headings rise word by word ---------- */
.fx .split-text .w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0 .09em .16em 0; margin: 0 -.09em -.16em 0;
}
.fx .split-text .wi {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1.15s var(--ease);
  transition-delay: calc(var(--i) * 42ms + var(--d, 0ms));
}
.fx .statement.split-text .wi, .fx .h3--italic.split-text .wi { transition-delay: calc(var(--i) * 22ms + var(--d, 0ms)); }
.fx .split-text.is-in .wi,
.fx .is-in .split-text .wi,
.fx .is-ready .hero .split-text .wi { transform: none; }
.fx.js .split-text[data-reveal] { opacity: 1; transform: none; }
.fx [data-delay='1'] .split-text, .fx .split-text[data-delay='1'] { --d: 120ms; }

/* ---------- hero: slow settle, parallax, staged entrance ---------- */
.fx .hero { overflow: hidden; }
.fx .hero__media { will-change: transform; }
.fx .hero__media.has-img .ph__img { animation: hero-settle 9s cubic-bezier(.16, .6, .2, 1) both; }
@keyframes hero-settle { from { transform: scale(1.16); } to { transform: scale(1); } }
.fx .hero .split-text .wi { --d: 250ms; }
.fx .hero__meta, .fx .hero__foot, .fx .hero__logo {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
}
.fx .hero__logo { transform: scale(.94); transition-duration: 1.8s; transition-delay: .2s; }
.fx .hero__meta { transition-delay: .15s; }
.fx .hero__foot { transition-delay: .75s; }
.fx .is-ready .hero__meta, .fx .is-ready .hero__foot, .fx .is-ready .hero__logo { opacity: 1; transform: none; }

/* ---------- photographs unveil instead of fading ----------
   (the wipe sits on the inner layer: a holder that clips itself is never
   seen by the scroll observer, so it would stay hidden) */
.fx.js .ph[data-reveal] { opacity: 1; transform: none; transition: background-color 1s var(--ease); }
.fx.js .ph[data-reveal]:not(.is-in) { background-color: transparent; }
.fx.js .ph[data-reveal]:not(.is-in)::after { opacity: 0; }
.fx.js .ph[data-reveal] .ph__img,
.fx.js .ph[data-reveal] .ph__label {
  clip-path: inset(0 0 0 0);
  transition: opacity 1.2s var(--ease), transform 1.8s var(--ease), clip-path 1.5s var(--ease);
}
.fx.js .ph[data-reveal]:not(.is-in) .ph__img { clip-path: inset(0 0 100% 0); transform: scale(1.2); }
.fx.js .ph[data-reveal]:not(.is-in) .ph__label { clip-path: inset(0 0 100% 0); }
.fx.js .ph[data-reveal][data-delay='1'] .ph__img { transition-delay: .12s; }
.fx.js .ph[data-reveal][data-delay='2'] .ph__img { transition-delay: .24s; }

.fx .photo-grid__item { transition: background-color 1s var(--ease); }
.fx .photo-grid__item:not(.is-in) { background-color: transparent; }
.fx .photo-grid__item img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.4s var(--ease), transform 1.8s var(--ease), opacity .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.fx .photo-grid__item:not(.is-in) img { clip-path: inset(0 0 100% 0); transform: scale(1.18); }
.fx .photo-grid__item.is-in:hover img { transition-delay: 0s; }

/* ---------- villa cards ---------- */
.fx.js .villa-card[data-reveal] { opacity: 1; transform: none; }
.fx .villa-card:nth-child(3n + 2) { --d: .12s; }
.fx .villa-card:nth-child(3n) { --d: .24s; }
.fx .villa-card .ph { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease) var(--d, 0s); }
.fx .villa-card.is-in .ph { clip-path: inset(0 0 0 0); }
.fx .villa-card:not(.is-in) .ph__img { transform: scale(1.2); }
.fx .villa-card__meta, .fx .villa-card__specs {
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--d, 0s) + .4s);
}
.fx .villa-card.is-in .villa-card__meta { opacity: 1; transform: none; }
.fx .villa-card.is-in .villa-card__specs { opacity: 1; transform: none; }
.fx .villa-card__meta { position: relative; padding-bottom: 6px; }
.fx .villa-card__meta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .5;
  transform: scaleX(0); transform-origin: right;
  transition: transform .7s var(--ease);
}
.fx .villa-card:hover .villa-card__meta::after { transform: scaleX(1); transform-origin: left; }
.fx .villa-card__name { transition: letter-spacing .6s var(--ease); }
.fx .villa-card:hover .villa-card__name { letter-spacing: .03em; }

/* ---------- buttons fill from below ---------- */
.fx .btn {
  background-image: linear-gradient(var(--white), var(--white));
  background-repeat: no-repeat; background-position: bottom; background-size: 100% 0;
  transition: background-size .6s var(--ease), color .45s var(--ease), transform .5s var(--ease);
}
.fx .btn:hover { background-color: transparent; background-image: linear-gradient(var(--white), var(--white)); background-size: 100% 100%; color: #000; }
.fx .section--light .btn { background-image: linear-gradient(var(--ink), var(--ink)); }
.fx .section--light .btn:hover { background-color: transparent; background-image: linear-gradient(var(--ink), var(--ink)); color: var(--white); }
.fx .nav__cta { transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease), opacity .3s; }

/* ---------- the two locations lean toward the one you point at ---------- */
@media (min-width: 900px) and (hover: hover) {
  .fx .locations { display: flex; }
  .fx .location { flex: 1 1 0; min-width: 0; transition: flex-grow 1.1s var(--ease); }
  .fx .locations:hover .location:hover { flex-grow: 1.35; }
}
.fx .location .link { transition: transform .8s var(--ease); }
.fx .location:hover .link { transform: translateX(8px); }
.fx .location__name { transition: transform .9s var(--ease); }
.fx .location:hover .location__name { transform: translateY(-4px); }

/* ---------- lightbox opens softly ---------- */
.fx .lightbox.is-open { animation: lb-in .5s ease both; }
.fx .lightbox.is-open img { animation: lb-img .9s var(--ease) both; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-img { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }

/* ---------- cursor companion (mouse only) ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 500;
  pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
}
.cursor.is-on { opacity: 1; }
.cursor__dot {
  position: absolute; left: 0; top: 0;
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%;
  background: #fff; mix-blend-mode: difference;
  transform: scale(.09);
  transition: transform .55s var(--ease), background-color .3s;
}
.cursor.is-link .cursor__dot { transform: scale(.42); }
.cursor.is-label .cursor__dot { transform: scale(1); mix-blend-mode: normal; background: var(--white); }
.cursor__label {
  position: absolute; left: 0; top: 0; width: 92px; margin: -6px 0 0 -46px;
  text-align: center;
  font-size: 10px; line-height: 12px; letter-spacing: .26em; text-transform: uppercase; padding-left: .26em;
  color: #000;
  opacity: 0; transition: opacity .3s ease;
}
.cursor.is-label .cursor__label { opacity: 1; transition-delay: .12s; }
.fx-cursor .villa-card, .fx-cursor .location, .fx-cursor .photo-grid__item, .fx-cursor .gallery__item.has-img { cursor: none; }
/* Sacred Valley hero: the cursor says "Build", with arrows nudging left and right */
.fx-cursor .hero--build { cursor: none; }
.fx-cursor .hero--build a { cursor: pointer; }
.cursor::before, .cursor::after {
  content: ''; position: absolute; top: -5px; width: 9px; height: 9px;
  border: solid #fff; border-width: 0 0 1px 1px;
  opacity: 0; transition: opacity .3s ease;
}
.cursor::before { left: -64px; transform: rotate(45deg); animation: build-nudge-l 1.6s ease-in-out infinite; }
.cursor::after { left: 55px; transform: rotate(-135deg); animation: build-nudge-r 1.6s ease-in-out infinite; }
.cursor.is-build::before, .cursor.is-build::after { opacity: 1; transition-delay: .15s; }
@keyframes build-nudge-l { 50% { transform: translateX(-6px) rotate(45deg); } }
@keyframes build-nudge-r { 50% { transform: translateX(6px) rotate(-135deg); } }

@media (prefers-reduced-motion: reduce) {
  .fx body::after { display: none; }
}