/* ============================================================
   THE RIDGE HOUSE — Site chrome
   Nav · Footer · Snow canvas · Cursor · Page transitions
   ============================================================ */

/* ---------- TOP NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
  transition: background var(--med), backdrop-filter var(--med),
              border-color var(--med), padding var(--med);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  padding: 14px 40px;
  background: rgba(244, 247, 250, 0.72);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom-color: var(--frost-border);
}
body.cabin .nav.scrolled {
  background: rgba(27, 18, 11, 0.78);
  border-bottom-color: rgba(232, 184, 99, .18);
}

.brand {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
}
.brand__mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  opacity: 0.9;
}
.brand__name {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
}
.brand__name span {
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  opacity: .65;
  margin-left: 8px;
}

.nav__links {
  display: flex; gap: 36px;
  list-style: none; margin: 0; padding: 0;
}
.nav__links a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--quick), color var(--quick);
  position: relative;
}
.nav__links a:hover { opacity: 1; color: var(--hearth); }
.nav__links a.active::after {
  content: ""; position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -6px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--hearth);
}

.nav__cta {
  display: flex; align-items: center; gap: 16px;
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav { padding: 16px 20px; }
}

/* ---------- FOOTER ---------- */
.footer {
  position: relative;
  background: #0E1518;
  color: #C7D1D8;
  padding: 96px 0 32px;
  overflow: hidden;
}
.footer::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(200,116,26,.10), transparent 60%),
    radial-gradient(50% 70% at 20% 100%, rgba(127,168,201,.10), transparent 60%);
  pointer-events: none;
}
.footer .container { position: relative; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }

.footer h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--candle);
  margin: 0 0 20px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer a {
  color: inherit; text-decoration: none;
  font-size: 14px; opacity: 0.78;
  transition: opacity var(--quick), color var(--quick);
}
.footer a:hover { opacity: 1; color: var(--candle); }

.footer__brand .display {
  color: #FBEFD8;
  font-size: 32px;
  margin: 0 0 16px;
}
.footer__brand p { font-size: 14px; line-height: 1.7; opacity: .7; max-width: 320px; }

.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12px; opacity: .55;
}
.footer__bottom .powered { font-family: var(--sans); letter-spacing: 0.12em; }

/* ---------- SNOW CANVAS ---------- */
#snow-canvas {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.85;
}

/* ---------- CUSTOM CURSOR ---------- */
.cursor-flake {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--frost);
  pointer-events: none;
  z-index: 9999;
  transition: width 220ms cubic-bezier(.2,.6,.2,1),
              height 220ms cubic-bezier(.2,.6,.2,1),
              background 220ms,
              opacity 220ms;
  mix-blend-mode: difference;
  opacity: 0.7;
  transform: translate(-50%, -50%);
}
.cursor-flake.hover {
  width: 36px; height: 36px;
  background: rgba(232, 184, 99, 0.5);
  mix-blend-mode: normal;
}
@media (hover: none), (pointer: coarse) {
  .cursor-flake { display: none; }
}

/* ---------- WHITEOUT TRANSITION ---------- */
.whiteout {
  position: fixed; inset: 0;
  background: var(--glacier);
  pointer-events: none;
  opacity: 0;
  z-index: 9000;
  transition: opacity 380ms ease;
}
.whiteout.active { opacity: 1; pointer-events: auto; }

/* ---------- BOOKING DRAWER (Simplotel-styled) ---------- */
.drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(15, 22, 25, 0.55);
  backdrop-filter: blur(4px);
  z-index: 9100;
  opacity: 0; pointer-events: none;
  transition: opacity 320ms ease;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(640px, 100vw);
  background: #FFFFFF;
  z-index: 9200;
  transform: translateX(100%);
  transition: transform 420ms cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -30px 0 80px -20px rgba(0,0,0,.4);
}
.drawer.open { transform: translateX(0); }

.drawer__head {
  background: linear-gradient(180deg, #6E6E6E 0%, #4E4E4E 100%);
  color: #fff;
  padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.drawer__head .h2 {
  font-family: "Lato", sans-serif;
  font-weight: 700; font-size: 20px; line-height: 28px; margin: 0;
}
.drawer__close {
  background: transparent; border: none; color: #fff;
  font-size: 24px; cursor: pointer; line-height: 1;
  width: 32px; height: 32px; border-radius: 4px;
  transition: background 120ms;
}
.drawer__close:hover { background: rgba(255,255,255,.12); }

.drawer__body {
  flex: 1; overflow-y: auto; padding: 28px 24px;
  font-family: "Lato", sans-serif;
  color: #3B3B3B;
}
.drawer__body label {
  display: block;
  font: 400 14px/20px "Lato", sans-serif;
  color: #3B3B3B; margin-bottom: 6px;
}
.drawer__body input,
.drawer__body select {
  width: 100%; height: 40px;
  padding: 0 13px;
  border-radius: 4px;
  border: 1px solid #BBC7CC;
  font: 400 16px/24px "Lato", sans-serif;
  color: #3B3B3B;
  background: #fff;
  outline: none;
}
.drawer__body input:focus,
.drawer__body select:focus { border-color: #3B3B3B; }
.drawer__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 20px;
}
.drawer__step {
  background: #F8F8F8;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.drawer__step h3 {
  font: 700 18px/28px "Lato", sans-serif;
  margin: 0 0 16px;
  letter-spacing: -0.45px;
}
.sp-cta {
  background: #C8741A; /* Hearth amber from cinematic theme — ties drawer to brand */
  color: #fff;
  border: none;
  font: 700 16px/24px "Lato", sans-serif;
  padding: 12px 28px; border-radius: 4px;
  cursor: pointer;
  transition: box-shadow 150ms;
}
.sp-cta:hover {
  box-shadow: 0 2px 4px -2px rgba(0,0,0,.10), 0 4px 6px -1px rgba(0,0,0,.10);
}
.sp-link {
  color: #C8741A; font: 400 14px "Lato", sans-serif;
  background: transparent; border: none; cursor: pointer; padding: 0;
}
.sp-link:hover { text-decoration: underline; }

.stepper {
  display: inline-flex; align-items: center;
  border: 1px solid #BBC7CC; border-radius: 4px;
  height: 40px;
  font: 400 16px/24px "Lato", sans-serif;
}
.stepper button {
  width: 40px; height: 38px;
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; color: #3B3B3B;
}
.stepper button:hover { background: #F3F4F6; }
.stepper span { width: 40px; text-align: center; }

.drawer__powered {
  padding: 14px 24px;
  border-top: 1px solid #E5E5E5;
  font: 400 12px/16px "Lato", sans-serif;
  color: #737373; text-align: center;
}

/* ============================================================
   DOOR MENU — hamburger that opens like a cabin door
   ============================================================ */

/* Trigger lives in the nav */
.door-trigger {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  padding: 0;
  opacity: 0.78;
  transition: opacity var(--quick), color var(--quick), background var(--quick), border-color var(--quick);
}
.door-trigger:hover {
  opacity: 1;
  color: var(--hearth);
  background: rgba(232, 184, 99, 0.06);
}
body.cabin .door-trigger:hover { color: var(--candle); border-color: var(--candle); }
.door-trigger svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
}

@media (max-width: 600px) {
  .door-trigger { width: 36px; height: 36px; }
}

/* Full-screen overlay */
.door-menu {
  position: fixed; inset: 0;
  z-index: 9300;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 1100ms;
}
.door-menu.open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s;
}

.door-menu__scrim {
  position: absolute; inset: 0;
  background: rgba(15, 8, 4, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 600ms ease;
}
.door-menu.open .door-menu__scrim { opacity: 1; }

.door-menu__close {
  position: absolute;
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent;
  color: rgba(245, 230, 208, 0.7);
  border: 1px solid rgba(232, 184, 99, 0.3);
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transition: opacity 400ms ease 700ms, color var(--quick), border-color var(--quick);
}
.door-menu.open .door-menu__close { opacity: 1; }
.door-menu__close:hover {
  color: var(--candle);
  border-color: var(--candle);
}
.door-menu__close svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
}

.door-menu__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1800px;
  perspective-origin: 30% 50%;
}

/* The cabin doorway — stone/timber frame surrounds door + interior */
.door-menu__frame {
  position: relative;
  width: min(680px, 92vw);
  height: min(880px, 92vh);
  transform-style: preserve-3d;
  padding: 14px;
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px,
      transparent 1px, transparent 6px),
    linear-gradient(180deg, rgba(58, 36, 20, 0.95), rgba(20, 12, 6, 0.96));
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow:
    0 50px 120px rgba(0,0,0,0.7),
    inset 0 0 60px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(232, 184, 99, 0.08);
  border-radius: 4px;
  /* slight initial dimming for entry */
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 500ms ease, transform 500ms ease;
}
.door-menu.open .door-menu__frame { opacity: 1; transform: none; }

/* Interior — the warm cabin behind the door */
.door-menu__interior {
  position: absolute;
  inset: 14px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(232, 184, 99, 0.14), transparent 65%),
    radial-gradient(60% 50% at 50% 100%, rgba(200, 116, 26, 0.10), transparent 70%),
    linear-gradient(180deg, #2A1B0F 0%, #1B120B 50%, #0F0805 100%);
  overflow: hidden;
  border-radius: 2px;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.7);
}

.door-menu__lantern {
  position: absolute;
  top: -90px; left: 50%;
  transform: translateX(-50%);
  width: 360px; height: 280px;
  background: radial-gradient(ellipse at center,
    rgba(232, 184, 99, 0.42) 0%,
    rgba(232, 184, 99, 0.16) 40%,
    transparent 70%);
  filter: blur(14px);
  animation: doorLantern 5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes doorLantern {
  to { opacity: 0.62; transform: translateX(-50%) scale(1.06); }
}

.door-menu__list {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  list-style: none; margin: 0;
  padding: 80px 24px 100px;
  overflow-y: auto;
}
.door-menu__list li {
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.door-menu.open .door-menu__list li { opacity: 1; transform: none; }
.door-menu.open .door-menu__list li:nth-child(1)  { transition-delay: 700ms; }
.door-menu.open .door-menu__list li:nth-child(2)  { transition-delay: 760ms; }
.door-menu.open .door-menu__list li:nth-child(3)  { transition-delay: 820ms; }
.door-menu.open .door-menu__list li:nth-child(4)  { transition-delay: 880ms; }
.door-menu.open .door-menu__list li:nth-child(5)  { transition-delay: 940ms; }
.door-menu.open .door-menu__list li:nth-child(6)  { transition-delay: 1000ms; }
.door-menu.open .door-menu__list li:nth-child(7)  { transition-delay: 1060ms; }
.door-menu.open .door-menu__list li:nth-child(8)  { transition-delay: 1120ms; }
.door-menu.open .door-menu__list li:nth-child(9)  { transition-delay: 1180ms; }
.door-menu.open .door-menu__list li:nth-child(10) { transition-delay: 1240ms; }
.door-menu.open .door-menu__list li:nth-child(11) { transition-delay: 1300ms; }

.door-menu__list a {
  display: block;
  text-decoration: none;
  color: #F5E6D0;
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.05;
  transition: color var(--quick);
  padding: 4px 12px;
}
.door-menu__list a:hover { color: var(--candle); }
.door-menu__list a.active .title { color: var(--candle); }
.door-menu__list a.active .title::before {
  content: "·"; margin-right: 14px; color: var(--candle); opacity: 0.8;
}
.door-menu__list a.active .title::after {
  content: "·"; margin-left: 14px; color: var(--candle); opacity: 0.8;
}
.door-menu__list .title {
  display: block;
  font-size: clamp(24px, 3.4vw, 36px);
  font-style: italic;
  letter-spacing: -0.005em;
}
.door-menu__list .sub {
  display: block;
  font-family: var(--hand, "Caveat", cursive);
  font-size: 16px;
  color: rgba(232, 184, 99, 0.5);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.door-menu__contact {
  position: absolute;
  left: 0; right: 0; bottom: 28px;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 184, 99, 0.5);
  opacity: 0;
  transition: opacity 500ms ease 1400ms;
}
.door-menu.open .door-menu__contact { opacity: 1; }
.door-menu__contact a {
  color: inherit;
  text-decoration: none;
  transition: color var(--quick);
}
.door-menu__contact a:hover { color: var(--candle); }
.door-menu__contact .dot { margin: 0 14px; opacity: 0.5; }

/* The door itself — cedar planks, brass knob, recessed panels */
.door-menu__door {
  position: absolute;
  inset: 14px;
  background:
    repeating-linear-gradient(91deg,
      rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px,
      transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent calc(33.333% - 1px),
      rgba(0,0,0,0.55) calc(33.333% - 1px), rgba(0,0,0,0.55) calc(33.333% + 1px),
      transparent calc(33.333% + 1px), transparent calc(66.666% - 1px),
      rgba(0,0,0,0.55) calc(66.666% - 1px), rgba(0,0,0,0.55) calc(66.666% + 1px),
      transparent calc(66.666% + 1px), transparent 100%),
    linear-gradient(180deg, #5C3A21 0%, #4A2D17 50%, #3A2414 100%);
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.55),
    inset 8px 0 14px rgba(0,0,0,0.45),
    inset -3px 0 6px rgba(232, 184, 99, 0.06),
    -10px 0 36px rgba(0,0,0,0.5);
  transform-origin: left center;
  transform: rotateY(0);
  transition: transform 1100ms cubic-bezier(.5,.0,.2,1), box-shadow 1100ms ease;
  border-radius: 2px;
  will-change: transform;
}
.door-menu.open .door-menu__door {
  transform: rotateY(96deg);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.7),
    -50px 16px 100px rgba(0,0,0,0.6);
}

.door-menu__panels {
  position: absolute;
  inset: 32px 60px 32px 32px;
  display: grid;
  grid-template-rows: 1fr 1.6fr;
  gap: 22px;
  pointer-events: none;
}
.door-menu__panels > div {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.14));
  border: 1px solid rgba(0,0,0,0.55);
  box-shadow:
    inset 0 0 0 2px rgba(232, 184, 99, 0.06),
    inset 0 6px 12px rgba(0,0,0,0.5),
    inset 0 -2px 4px rgba(232, 184, 99, 0.05);
  border-radius: 1px;
}

.door-menu__hinges {
  position: absolute;
  left: 4px; top: 0; bottom: 0;
  width: 12px;
  pointer-events: none;
}
.door-menu__hinges::before,
.door-menu__hinges::after {
  content: "";
  position: absolute;
  left: 0;
  width: 12px; height: 30px;
  background: linear-gradient(180deg, #8B6620 0%, #5C3A21 50%, #2A1A0A 100%);
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 2px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.5);
}
.door-menu__hinges::before { top: 14%; }
.door-menu__hinges::after  { bottom: 14%; }

.door-menu__knob {
  position: absolute;
  right: 28px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
    #FBE188 0%, #E8B863 30%, #A07820 65%, #5E4308 100%);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.5),
    inset 1px 1px 2px rgba(255,235,180,0.7),
    inset -2px -2px 4px rgba(0,0,0,0.4);
  pointer-events: none;
}
.door-menu__knob::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(232, 184, 99, 0.18);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .door-menu__door,
  .door-menu__frame,
  .door-menu__list li,
  .door-menu__contact { transition-duration: 200ms !important; transition-delay: 0ms !important; }
  .door-menu.open .door-menu__door { transform: rotateY(96deg); }
}

@media (max-width: 600px) {
  .door-menu__frame { width: 96vw; height: 94vh; padding: 8px; }
  .door-menu__interior,
  .door-menu__door { inset: 8px; }
  .door-menu__panels { inset: 20px 44px 20px 20px; gap: 14px; }
  .door-menu__list { padding: 60px 16px 80px; gap: 8px; }
  .door-menu__list .title { font-size: 22px; }
  .door-menu__list .sub { font-size: 13px; }
  .door-menu__close { top: 14px; right: 14px; width: 38px; height: 38px; }
  .door-menu__contact { font-size: 10px; bottom: 18px; }
  .door-menu__contact .dot { display: block; margin: 4px 0; }
}