/* Dreamer Miami: Coming Soon (minimal) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  background:#FBF7F1; color:#1E5B3A;
  font-family:"Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.stage{position:relative; z-index:1; flex:1 0 auto; overflow:hidden; overflow:clip; /* clips the walking flamingo at the viewport edges */ display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 24px 24px; text-align:center}
.mark{position:relative; width:min(58vw,250px)}
/* the flamingo is its own element, sitting exactly in the logo's flamingo slot */
.fl-slot{position:absolute; left:29.5238%; top:.4425%; width:42.8571%; height:57.9646%; will-change:transform}
.fl-svg{display:block; width:100%; height:100%; overflow:visible}
.fl-leg--far{stroke:#D96F8F}
.fl-knee{fill:#E77E9C}.fl-knee--far{fill:#D96F8F}
.logo{display:block; width:100%; height:auto}

.soon{margin:clamp(36px,6vh,56px) 0 0; font:500 clamp(.95rem,3.6vw,1.1rem)/1 "Cormorant Garamond", Georgia, serif;
  text-transform:uppercase; letter-spacing:.5em; padding-left:.5em; /* optically re-centre tracked text */
  color:#1E5B3A}
.ig{margin-top:22px; font-size:.8rem; letter-spacing:.06em; color:#6E8A78; text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:color .3s, border-color .3s}
.ig:hover,.ig:focus-visible{color:#1E5B3A; border-bottom-color:#E9A3B3; outline:none}

.foot{position:relative; z-index:1; padding:0 24px max(28px, env(safe-area-inset-bottom)); text-align:center}
.foot address{font-style:normal; font-size:.7rem; letter-spacing:.08em; color:#9AA59C}

@media (min-width:768px){
  .mark{width:300px}
}

/* Palm fronds: quiet, muted, corners only */
.scene{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.palm{position:absolute; width:380px; height:390px; color:#7E9A86; fill:currentColor;
  left:calc(var(--bx) - 180px); top:calc(var(--by) - 381px);
  transform-origin:180px 381px; transform:rotate(var(--rot)) scale(var(--s)); opacity:var(--o)}
/* mobile first: two small fronds, well away from the logo */
.palm--tl{--bx:-40px; --by:-36px; --rot:146deg; --s:.58; --o:.28}
.palm--br{--bx:calc(100% + 36px); --by:calc(100% - 36px); --rot:-30deg; --s:.52; --o:.24}
.palm--tr,.palm--bl{display:none}
@media (min-width:768px){
  .palm--tr,.palm--bl{display:block}
  .palm--tl{--bx:-24px; --by:-24px; --s:1; --o:.3}
  .palm--tr{--bx:calc(100% + 30px); --by:-30px; --rot:-146deg; --s:.72; --o:.24}
  .palm--bl{--bx:-30px; --by:calc(100% + 30px); --rot:42deg; --s:.7; --o:.24}
  .palm--br{--bx:calc(100% + 24px); --by:calc(100% + 24px); --rot:-42deg; --s:.95; --o:.28}
}

/* Logo colours */
.fl-leg{fill:none;stroke:#E77E9C;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.fl-outline{fill:none;stroke:#D9577E;stroke-width:1.6;stroke-linejoin:round}
.fl-tail{fill:#D9577E}.fl-feather{fill:none;stroke:#E4668C;stroke-width:1.5;stroke-linecap:round;opacity:.7}
.fl-neck{fill:none;stroke:#F59AB2;stroke-width:10;stroke-linecap:round}
.fl-head{fill:#F59AB2}.fl-beak{fill:#FBE6DC}.fl-beaktip{fill:#2A2A2A}.fl-eye{fill:#2A2A2A}.fl-eye-hi{fill:#fff}
.ltr-fg{fill:#1E5B3A}.ltr-sh{fill:#9BDDB0}.miami path{fill:#1E5B3A}

/* Soft entrance, then slow, subtle ambient motion */
@media (prefers-reduced-motion:no-preference){
  .mark{animation:rise 1.6s cubic-bezier(.22,.61,.36,1) .15s both}
  .soon{animation:fade 1.2s ease 1.2s both}
  .ig,.foot{animation:fade 1.2s ease 1.6s both}


  .palm{animation:palmIn 2.4s ease .3s both, sway var(--dur) ease-in-out var(--ph) infinite alternate}
  .palm--tl{--dur:11s; --ph:-2s; --sw:3.6deg}
  .palm--tr{--dur:13.5s; --ph:-7s; --sw:-3.2deg}
  .palm--bl{--dur:9.5s; --ph:-4s; --sw:3.2deg}
  .palm--br{--dur:12.5s; --ph:-9s; --sw:-3.6deg}
}
@keyframes palmIn{from{opacity:0}}
@keyframes sway{from{transform:rotate(var(--rot)) scale(var(--s))}to{transform:rotate(calc(var(--rot) + var(--sw))) scale(var(--s))}}
@keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}