:root {
  --cream: #f4efe2;
  --cream-soft: #fbf7ee;
  --olive: #7f9350;
  --green: #124a30;
  --gold-line: rgba(170, 143, 84, 0.28);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--cream);
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.westin-scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.68) 0%, rgba(255,255,255,.28) 28%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #faf6ed 0%, #f3ecdc 100%);
  isolation: isolate;
}

.scene-bg {
  position: absolute;
  inset: -2.5%;
  z-index: 0;
  background-image: url("hero-bg-clean.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(.99);
  animation: sceneBreath 24s ease-in-out infinite alternate;
  will-change: transform;
}

.scene-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(244,239,226,.12), rgba(255,255,255,.05) 45%, rgba(244,239,226,.16)),
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.34), rgba(255,255,255,0) 46%);
}

.scene-haze {
  position: absolute;
  z-index: 1;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(48px);
  opacity: .24;
  transform: translateZ(0);
}

.scene-haze-left {
  width: 42vw;
  height: 42vw;
  left: -16vw;
  bottom: -18vw;
  background: rgba(136, 154, 91, .22);
}

.scene-haze-right {
  width: 34vw;
  height: 34vw;
  right: -10vw;
  top: -10vw;
  background: rgba(224, 202, 146, .32);
}

.brand-stage {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 49%;
  width: min(56vw, 980px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: brandEnter 900ms cubic-bezier(.18,.85,.22,1) both;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 28vh;
  object-fit: contain;
  filter: drop-shadow(0 16px 34px rgba(41, 43, 24, .08));
  user-select: none;
  -webkit-user-drag: none;
}

.leaves-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.leaf {
  position: absolute;
  width: clamp(36px, 4.4vw, 78px);
  opacity: .20;
  transform-origin: 50% 50%;
  filter: blur(.15px) drop-shadow(0 10px 24px rgba(61, 78, 37, .12));
  will-change: transform;
}

.leaf-a { left: 6%;  bottom: 12%; width: clamp(60px, 5.6vw, 108px); animation: leafFloatA 12s ease-in-out infinite; }
.leaf-b { left: 18%; top: 13%;  width: clamp(28px, 2.8vw, 50px); opacity: .15; animation: leafFloatB 16s ease-in-out infinite; }
.leaf-c { right: 11%; top: 11%; animation: leafFloatC 13s ease-in-out infinite; }
.leaf-d { right: 6%; bottom: 12%; width: clamp(54px, 5.2vw, 96px); opacity: .12; animation: leafFloatD 17s ease-in-out infinite; }
.leaf-e { left: 43%; bottom: 18%; width: clamp(24px, 2.2vw, 40px); opacity: .11; animation: leafFloatE 14s ease-in-out infinite; }
.leaf-f { right: 35%; top: 26%; width: clamp(22px, 2vw, 38px); opacity: .13; animation: leafFloatF 15s ease-in-out infinite; }

.grain {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(46, 50, 30, .03) .65px, transparent .65px);
  background-size: 6px 6px;
}

@keyframes sceneBreath {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.045) translate3d(0, -.45%, 0); }
}

@keyframes brandEnter {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.982); filter: blur(5px); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

@keyframes leafFloatA { 0%,100%{transform:translate3d(0,0,0) rotate(-7deg)} 50%{transform:translate3d(16px,-14px,0) rotate(3deg)} }
@keyframes leafFloatB { 0%,100%{transform:translate3d(0,0,0) rotate(-12deg)} 50%{transform:translate3d(-9px,12px,0) rotate(-2deg)} }
@keyframes leafFloatC { 0%,100%{transform:translate3d(0,0,0) rotate(8deg)} 50%{transform:translate3d(-16px,9px,0) rotate(-4deg)} }
@keyframes leafFloatD { 0%,100%{transform:translate3d(0,0,0) rotate(11deg)} 50%{transform:translate3d(12px,-16px,0) rotate(1deg)} }
@keyframes leafFloatE { 0%,100%{transform:translate3d(0,0,0) rotate(-10deg)} 50%{transform:translate3d(7px,-12px,0) rotate(-1deg)} }
@keyframes leafFloatF { 0%,100%{transform:translate3d(0,0,0) rotate(7deg)} 50%{transform:translate3d(-8px,10px,0) rotate(-1deg)} }

@media (max-width: 900px) {
  html, body {
    overflow: hidden;
    height: 100%;
  }

  .westin-scene {
    min-height: 100dvh;
  }

  .scene-bg {
    inset: -5%;
    background-size: cover;
    background-position: center center;
    transform: scale(1.08);
    opacity: .96;
  }

  .scene-bg::before {
    background:
      radial-gradient(ellipse at 50% 46%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.42) 34%, rgba(255,255,255,.08) 70%),
      linear-gradient(180deg, rgba(250,246,237,.20), rgba(244,239,226,.32));
  }

  .brand-stage {
    top: 47%;
    width: min(88vw, 560px);
    max-width: 560px;
  }

  .brand-logo {
    max-height: none;
    filter: drop-shadow(0 14px 24px rgba(41,43,24,.075));
  }

  .leaf-a { left: -4%; bottom: 8%; width: 86px; opacity: .12; }
  .leaf-b { left: 12%; top: 18%; width: 42px; opacity: .11; }
  .leaf-c { right: 5%; top: 15%; width: 54px; opacity: .13; }
  .leaf-d { right: -4%; bottom: 13%; width: 86px; opacity: .10; }
  .leaf-e { left: 54%; bottom: 20%; width: 38px; opacity: .09; }
  .leaf-f { right: 40%; top: 29%; width: 34px; opacity: .09; }
}

@media (max-width: 520px) {
  .scene-bg {
    inset: -8%;
    transform: scale(1.18);
    background-size: auto 100%;
    background-position: center center;
  }

  .brand-stage {
    top: 46.5%;
    width: 91vw;
  }

  .scene-haze-left { width: 78vw; height: 78vw; left: -42vw; bottom: -34vw; }
  .scene-haze-right { width: 72vw; height: 72vw; right: -38vw; top: -32vw; }

  .grain { opacity: .10; }
}

@media (orientation: portrait) and (max-width: 900px) {
  .scene-bg {
    background-size: auto 100%;
    background-position: center center;
  }

  .brand-stage {
    top: 46%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-bg, .brand-stage, .leaf {
    animation: none !important;
  }
}