/* ═══════════════════════════════════════
   MOONLIGHT HOTEL — Animation Styles
   Nanyuki, Kenya
═══════════════════════════════════════ */

/* ── HERO ── */
#hero {
  position:relative; height:100svh; min-height:600px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hvw { position:absolute; inset:0; z-index:1; overflow:hidden; }
#hvid {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(1.08);
  min-width:100%; min-height:100%; width:auto; height:auto;
  object-fit:cover; pointer-events:none;
  filter:brightness(.38) saturate(.7);
}
.hlut {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 110% 60% at 50% 0%, rgba(6,6,15,.5) 0%, transparent 55%),
    linear-gradient(to top, rgba(6,6,15,1) 0%, rgba(6,6,15,.25) 45%, transparent 72%),
    linear-gradient(to right, rgba(6,6,15,.5) 0%, transparent 55%);
  z-index:1; pointer-events:none;
}
.hgrain {
  position:absolute; inset:0; z-index:2; opacity:.04; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;
}
.hbody {
  position:relative; z-index:5; width:100%;
  padding:0 clamp(24px,5vw,80px) clamp(56px,8vw,96px);
  display:grid; grid-template-columns:1fr auto;
  align-items:flex-end; gap:clamp(24px,4vw,60px);
}
.htext { max-width:820px; }
.heye {
  font-size:clamp(9px,.85vw,10px); letter-spacing:.45em;
  text-transform:uppercase; color:var(--gold); font-weight:400;
  display:flex; align-items:center; gap:14px;
  margin-bottom:clamp(16px,2.5vw,28px);
}
.heye::before { content:''; width:28px; height:1px; background:var(--gold); }
.hh1 {
  font-size:clamp(36px,6vw,88px); line-height:.96;
  letter-spacing:-.02em; color:var(--ivory);
  margin-bottom:clamp(18px,3vw,32px); font-weight:300;
}
.hh1 em { font-style:italic; color:var(--gold-lt); }
.hp {
  font-size:clamp(14px,1.25vw,16px); line-height:1.88; color:var(--text);
  max-width:480px; margin-bottom:clamp(28px,4vw,48px);
}
.hacts { display:flex; gap:clamp(12px,2vw,20px); flex-wrap:wrap; }
.haside {
  display:flex; flex-direction:column; align-items:flex-end;
  gap:28px; padding-bottom:4px;
}
.scue {
  display:flex; flex-direction:column;
  align-items:center; gap:10px;
}
.sarrow {
  width:1px; height:56px;
  background:linear-gradient(var(--gold),transparent);
  animation:spulse 2.2s ease-in-out infinite;
}
@keyframes spulse { 0%,100%{opacity:.3} 50%{opacity:1} }
.slabel {
  font-size:9px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--text2); writing-mode:vertical-rl; transform:rotate(180deg);
}
/* Hero rate strip */
.hrates {
  display:flex; flex-direction:column; gap:16px;
  align-items:flex-end;
}
.hr-item { text-align:right; border-right:1px solid var(--gold-line); padding-right:14px; }
.hr-price {
  font-family:var(--serif); font-size:clamp(18px,2.2vw,26px);
  color:var(--gold-lt); line-height:1;
}
.hr-label {
  font-size:clamp(8px,.75vw,9px); letter-spacing:.25em;
  text-transform:uppercase; color:var(--text2); margin-top:3px;
}

/* ── ABOUT SNAP (homepage) ── */
.about-snap-grid {
  display:grid; grid-template-columns:5fr 4fr;
  gap:clamp(40px,7vw,100px); align-items:center;
}
.ih2 {
  font-size:clamp(30px,4.5vw,64px); line-height:1.06;
  letter-spacing:-.01em; color:var(--ivory);
  margin-bottom:clamp(18px,3vw,32px);
}
.ih2 em { font-style:italic; color:var(--gold-lt); }
.ip {
  font-size:clamp(14px,1.2vw,16px); line-height:1.95; color:var(--text);
  max-width:520px; margin-bottom:clamp(24px,3vw,40px);
}
.as-right { position:relative; }
.as-img-main {
  width:100%; aspect-ratio:16/9; overflow:hidden;
}
.as-img-main img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.75) saturate(.85);
  transition:transform .9s var(--ease);
}
.as-img-main:hover img { transform:scale(1.04); }
.as-img-accent {
  position:absolute; bottom:clamp(-16px,-3vw,-32px); left:clamp(-16px,-3vw,-32px);
  width:42%; aspect-ratio:1; overflow:hidden;
  border:clamp(3px,.4vw,5px) solid var(--bg); z-index:2;
}
.as-img-accent img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.78) saturate(.85);
  transition:transform .9s var(--ease);
}
.as-img-accent:hover img { transform:scale(1.06); }

/* ── RATES STRIP (homepage) ── */
.rates-strip {
  padding:var(--section-py) 0;
  background:var(--navy); position:relative;
}
.rates-strip::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(201,169,110,.02) 80px),
             repeating-linear-gradient(0deg, transparent,transparent 79px,rgba(201,169,110,.02) 80px);
}
.rates-cards {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px,3vw,32px); max-width:720px; margin:0 auto;
  position:relative;
}
.rate-card {
  background:var(--bg2); border:1px solid var(--gold-line);
  padding:clamp(28px,4vw,48px) clamp(24px,3vw,40px);
  text-align:center; transition:border-color .4s, transform .4s var(--ease);
}
.rate-card:hover { border-color:rgba(201,169,110,.45); transform:translateY(-6px); }
.rate-card-featured { border-color:rgba(201,169,110,.3); background:rgba(12,12,28,1); }
.rc-icon { font-size:clamp(24px,3vw,36px); margin-bottom:16px; opacity:.7; }
.rc-type {
  font-size:clamp(9px,.85vw,10px); letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap;
}
.rc-badge {
  background:var(--gold); color:var(--bg); font-size:8px;
  letter-spacing:.2em; padding:2px 8px;
}
.rc-price {
  font-family:var(--serif); font-size:clamp(36px,5vw,60px);
  color:var(--gold-lt); line-height:1; font-weight:300; margin-bottom:6px;
}
.rc-per {
  font-size:clamp(10px,.9vw,11px); letter-spacing:.15em;
  color:var(--text2); text-transform:uppercase;
}
.rc-includes {
  font-size:clamp(12px,1vw,13px); color:var(--text);
  margin-top:14px; padding-top:14px; border-top:1px solid var(--gold-line);
}

/* ── ROOMS PREVIEW (homepage) ── */
.rooms-preview-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(8px,1vw,14px); margin-top:clamp(32px,5vw,56px);
}
.rpg-main, .rpg-item {
  position:relative; overflow:hidden; cursor:pointer;
}
.rpg-main { aspect-ratio:3/4; }
.rpg-side { display:flex; flex-direction:column; gap:clamp(8px,1vw,14px); }
.rpg-item { flex:1; min-height:clamp(140px,20vw,280px); }
.rpg-main img, .rpg-item img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.6) saturate(.75); transition:transform .8s var(--ease), filter .5s;
}
.rpg-main:hover img, .rpg-item:hover img {
  transform:scale(1.06); filter:brightness(.75) saturate(.88);
}
.rpg-overlay {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:clamp(16px,2vw,24px);
  background:linear-gradient(to top, rgba(6,6,15,.9) 0%, transparent 100%);
}
.rpg-label {
  font-size:clamp(9px,.85vw,10px); letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold); margin-bottom:4px;
}
.rpg-price {
  font-family:var(--serif); font-size:clamp(16px,2vw,24px);
  color:var(--gold-lt); font-weight:300;
}
.rpg-price span { font-family:var(--sans); font-size:.55em; color:var(--text2); }

/* ── RESTAURANT SNAP ── */
.rest-snap-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,7vw,100px); align-items:center;
}
.rs-imgs { position:relative; }
.rs-main {
  width:100%; aspect-ratio:16/9; object-fit:cover;
  filter:brightness(.75) saturate(.82);
  display:block;
}
.rs-accent {
  position:absolute; bottom:clamp(-16px,-3vw,-32px); right:clamp(-16px,-3vw,-32px);
  width:44%; aspect-ratio:3/4; object-fit:cover;
  filter:brightness(.78) saturate(.85);
  border:clamp(3px,.4vw,5px) solid var(--bg); z-index:2;
}
.rs-copy {}

/* ── RESTAURANT PHOTO GRID ── */
.rest-photo-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:clamp(6px,.8vw,12px);
  padding-top:clamp(32px,5vw,56px);
}
.rpg-wide { grid-column:1/-1; }
.rpg-img { overflow:hidden; }
.rpg-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s;
  filter:brightness(.72) saturate(.8);
  display:block; min-height:clamp(160px,20vw,280px);
}
.rpg-img:hover img { transform:scale(1.06); filter:brightness(.85) saturate(.9); }
.rpg-wide img { aspect-ratio:16/7; min-height:auto; }

/* ── INFO STRIP ── */
.info-strip {
  display:flex; align-items:center; gap:clamp(24px,4vw,56px);
  padding:clamp(32px,4vw,56px); border:1px solid var(--gold-line);
  flex-wrap:wrap;
}
.is-icon { font-size:clamp(40px,5vw,64px); flex-shrink:0; opacity:.7; }

/* ── ROOMS EXTRA IMGS ── */
.rooms-extra-imgs {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,1vw,14px); margin-top:clamp(24px,3vw,40px);
}
.rei { overflow:hidden; aspect-ratio:3/4; }
.rei img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.72) saturate(.8);
  transition:transform .8s var(--ease), filter .5s;
}
.rei:hover img { transform:scale(1.06); filter:brightness(.85) saturate(.9); }

/* ── GALLERY FULL GRID ── */
.gallery-full-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(6px,.8vw,12px);
}
.gfg-item {
  overflow:hidden; position:relative; cursor:pointer;
  aspect-ratio:1;
}
.gfg-item:nth-child(1) { grid-column:1/3; grid-row:1/2; aspect-ratio:auto; }
.gfg-item:nth-child(2) { aspect-ratio:auto; }
.gfg-item:nth-child(8) { grid-column:2/4; aspect-ratio:auto; }
.gfg-item img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s;
  filter:brightness(.68) saturate(.78); display:block;
  min-height:clamp(120px,18vw,260px);
}
.gfg-item:hover img { transform:scale(1.07); filter:brightness(.84) saturate(.92); }
.gi-ov {
  position:absolute; inset:0; background:rgba(6,6,15,.42);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .4s;
}
.gfg-item:hover .gi-ov { opacity:1; }
.gi-pl {
  font-family:var(--serif); font-size:clamp(22px,3vw,38px);
  color:var(--gold-lt); transform:scale(.35) rotate(45deg);
  transition:transform .4s var(--ease3);
}
.gfg-item:hover .gi-pl { transform:scale(1) rotate(0deg); }

/* ── LIGHTBOX ── */
#lightbox {
  position:fixed; inset:0; z-index:9000; background:rgba(6,6,15,.96);
  display:none; align-items:center; justify-content:center; padding:40px;
}
#lightbox.open { display:flex; }
#lb-img { max-width:90vw; max-height:85vh; object-fit:contain; display:block; }
#lightbox-close {
  position:absolute; top:20px; right:28px;
  font-family:var(--serif); font-size:36px; color:var(--gold-lt);
  cursor:pointer; background:none; border:none; line-height:1; z-index:2;
}
#lb-prev, #lb-next {
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:28px; color:var(--gold-lt); background:rgba(6,6,15,.6);
  border:1px solid var(--gold-line); padding:12px 18px;
  cursor:pointer; transition:background .3s; z-index:2;
}
#lb-prev { left:20px; }
#lb-next { right:20px; }
#lb-prev:hover, #lb-next:hover { background:rgba(201,169,110,.15); }

/* ── PAGE HERO ── */
.page-hero {
  position:relative;
  padding:clamp(130px,17vw,220px) 0 clamp(60px,8vw,100px);
  overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(.28) saturate(.55); transform:scale(1.04);
}
.page-hero-lut {
  position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 0%, rgba(6,6,15,.55) 50%, rgba(6,6,15,.3) 100%);
}
.page-hero-content { position:relative; z-index:2; }
.page-hero-eyebrow { margin-bottom:clamp(16px,2vw,24px); }
.page-hero-title {
  font-size:clamp(38px,7.5vw,100px);
  line-height:.95; letter-spacing:-.02em; color:var(--ivory);
}
.page-hero-title em { font-style:italic; color:var(--gold-lt); }
.page-hero-sub {
  font-size:clamp(14px,1.2vw,16px); color:var(--text);
  max-width:520px; line-height:1.85; margin-top:clamp(16px,2vw,24px);
}

/* ── LOCATION SECTION ── */
#location-strip {
  display:grid; grid-template-columns:1fr 1fr; min-height:75vh;
}
.loc-visual {
  position:relative; overflow:hidden;
  background-size:cover; background-position:center;
  filter:brightness(.44) saturate(.62); transition:filter .8s;
}
.loc-visual::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right,transparent 50%,rgba(6,6,15,.8) 100%);
}
#location-strip:hover .loc-visual { filter:brightness(.5) saturate(.68); }
.loc-content {
  background:var(--bg2);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(56px,8vw,110px) clamp(32px,6vw,84px);
}
.loc-h {
  font-size:clamp(28px,4vw,56px); line-height:1.08;
  color:var(--ivory); margin:clamp(14px,2vw,22px) 0;
}
.loc-h em { font-style:italic; color:var(--gold-lt); }
.loc-p {
  font-size:clamp(13px,1.1vw,15px); line-height:1.9; color:var(--text);
  max-width:400px; margin-bottom:clamp(28px,4vw,52px);
}
.loc-rows { display:flex; flex-direction:column; gap:clamp(14px,2vw,22px); }
.loc-row { display:flex; gap:clamp(12px,1.5vw,18px); align-items:flex-start; }
.loc-ic {
  width:clamp(32px,2.8vw,40px); height:clamp(32px,2.8vw,40px); flex-shrink:0;
  border:1px solid rgba(201,169,110,.16);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--gold);
}
.loc-k {
  font-size:clamp(8px,.75vw,9px); letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin-bottom:3px;
}
.loc-v { font-size:clamp(13px,1.1vw,14px); color:var(--text2); line-height:1.5; }
.loc-v a { color:var(--text2); text-decoration:none; transition:color .3s; }
.loc-v a:hover { color:var(--gold); }

/* ── SCROLL REVEAL INIT STATES ── */
.wf { opacity:0; }
.wu { opacity:0; transform:translateY(44px); }
.wz { opacity:0; transform:scale(.94); }

/* ── RESPONSIVE OVERRIDES (animations.css) ── */
@media (max-width:1080px) {
  .hbody { grid-template-columns:1fr; }
  .haside { display:none; }
  .about-snap-grid { grid-template-columns:1fr; }
  .as-img-accent { display:none; }
  .rest-snap-grid { grid-template-columns:1fr; }
  .rs-accent { display:none; }
  .rs-main { aspect-ratio:16/9; }
  .rooms-preview-grid { grid-template-columns:1fr; }
  .rpg-main { aspect-ratio:16/9; }
  .rpg-side { flex-direction:row; }
  .rates-cards { grid-template-columns:1fr 1fr; max-width:560px; }
  .rest-photo-grid { grid-template-columns:1fr 1fr; }
  .rpg-wide { grid-column:1/-1; }
  #location-strip { grid-template-columns:1fr; }
  .loc-visual { height:50vmin; min-height:240px; }
  .gallery-full-grid { grid-template-columns:1fr 1fr 1fr; }
  .gfg-item:nth-child(1) { grid-column:auto; }
  .gfg-item:nth-child(8) { grid-column:auto; }
  .rooms-extra-imgs { grid-template-columns:1fr 1fr; }
  .info-strip { flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px) {
  .rates-cards { grid-template-columns:1fr; max-width:400px; }
  .rest-photo-grid { grid-template-columns:1fr; }
  .rpg-wide { grid-column:auto; }
  .gallery-full-grid { grid-template-columns:1fr 1fr; }
  .rooms-extra-imgs { grid-template-columns:1fr; }
  .rpg-side { flex-direction:column; }
}