:root{
  --cream:#faf8f4;
  --cream-deep:#f1ede4;
  --linen:#e9e3d6;
  --bronze:#8a7a5c;
  --ink:#2a2621;
  --ink-soft:#5c574d;
  --ink-faint:#8b8477;
  --red-1:#8c1b2c;
  --red-2:#4a0f1a;

  --font-display:'Bebas Neue', 'Cormorant Garamond', sans-serif;
  --font-serif:'Cormorant Garamond', serif;
  --font-body:'Manrope', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
  }
}

html,body{height:100%;overflow:hidden;}

body{
  font-family:var(--font-body);
  background:var(--cream);
  overflow:hidden;
}

.scene{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) clamp(190px, 34vh, 420px);
  justify-items:center;
  align-items:start;
  overflow:hidden;
  padding:clamp(18px, 3vw, 40px) 0 0;
}
.sky{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 60% at 50% 0%, #ffffff 0%, transparent 55%),
    linear-gradient(180deg, #fdfcfa 0%, #f4f1e9 40%, #ece6d8 72%, #e6dfce 100%);
  z-index:0;
}

.haze{
  position:absolute;
  inset:0;
  background:radial-gradient(80% 40% at 50% 100%, rgba(120,105,70,0.10), transparent 70%);
  z-index:1;
}
.brand{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:var(--ink);
  text-align:center;
  animation:fadeInUp 1s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay:0.1s;
  max-width:900px;
}

.brand__mark{
  width:52px;
  height:40px;
  opacity:0.8;
}

.brand__name{
  font-family:var(--font-serif);
  font-size:20px;
  font-weight:700;
  letter-spacing:0.14em;
  color:var(--ink);
}

.brand__name span{
  font-weight:700;
  color:var(--ink);
}

.brand__sub{
  font-family:var(--font-body);
  font-size:9px;
  font-weight:500;
  letter-spacing:0.32em;
  color:var(--ink-faint);
}

.content{
  position:relative;
  z-index:3;
  align-self:center;
  text-align:center;
  padding:0 24px;
  max-width:900px;
}

.eyebrow{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:19px;
  font-weight:600;
  color:#5c4326;
  margin-bottom:10px;
  letter-spacing:0.02em;
  animation:fadeInUp 1s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay:0.28s;
}

.headline{
  font-family:var(--font-display);
  font-weight:400;
  line-height:0.86;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.headline__line{
  font-size:clamp(3.7rem, 12vw, 7.4rem);
  letter-spacing:0.03em;
  color:#8c1b2c;
  text-shadow: 0 2px 8px rgba(74,15,26,0.25);
  animation:fadeInUp 1.1s cubic-bezier(0.22,1,0.36,1) both;
}

.headline__line:nth-child(1){ animation-delay:0.42s; }
.headline__line:nth-child(2){ animation-delay:0.56s; }

.subtitle{
  margin-top:20px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(0.9rem, 1.5vw, 0.97rem);
  line-height:1.7;
  letter-spacing:0.01em;
  color:var(--ink-soft);
  animation:fadeInUp 1s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay:0.75s;
}

@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
.illustration{
  position:relative;
  z-index:2;
  width:100vw;
  margin-left:calc(50% - 50vw);
  height:100%;
  overflow:hidden;
  opacity:0;
  animation:fadeIn 1.4s ease-out both;
  animation-delay:0.3s;
}

.villa{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.drape{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:100%;
  z-index:2;
  filter:drop-shadow(0 18px 26px rgba(90,20,30,0.22));
  animation:driftWave 10s ease-in-out infinite alternate;
}

@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes driftWave{
  0%   { transform:translateY(0) scale(1); }
  100% { transform:translateY(-10px) scale(1.012); }
}

@media (max-width:560px){
  .scene{
    grid-template-rows:auto minmax(0, 1fr) clamp(170px, 30vh, 280px);
    padding:18px 0 0;
  }

  .brand{gap:8px;}
  .content{padding:0 8px;}
  .headline__line{font-size:clamp(3.1rem, 18vw, 5.4rem);}
  .subtitle{margin-top:16px;}
}

@media (min-width:900px){
  .scene{padding-top:clamp(24px, 3vw, 44px);}
}