/* Showcase, phones held upright only (html.phone-hero). See phone-hero.js. */
.hero-still,.hero-welcome,.tour-phone{display:none}

.phone-hero .hero-player-portrait{display:none}
.phone-hero .hero-still{display:block;position:absolute;inset:0;overflow:hidden}
.phone-hero .hero-still img{width:100%;height:100%;object-fit:cover;transform-origin:50% 40%;
  animation:heroDrift 14s cubic-bezier(.2,.6,.2,1) both}
@keyframes heroDrift{from{transform:scale(1.18) translateY(2%)}to{transform:scale(1.02) translateY(0)}}
/* Darken the lower part so the title reads cleanly over the photo. */
.phone-hero .hero-still::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.62) 100%)}

.phone-hero .hero-welcome{display:block;position:absolute;z-index:2;left:var(--pad);right:var(--pad);
  bottom:calc(max(28px,env(safe-area-inset-bottom)) + 9svh);color:#fff;pointer-events:none}
.hero-welcome-kicker{margin:0 0 16px;overflow:hidden;font:700 10px/1.4 CompassSans,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.hero-welcome-kicker span{display:inline-block;animation:heroRise 1.1s cubic-bezier(.16,1,.3,1) .5s both}
.hero-welcome-title{margin:0;font:400 clamp(52px,15vw,72px)/.9 CompassDisplay,serif;letter-spacing:-.04em}
.hero-welcome-title .w{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;vertical-align:top}
.hero-welcome-title .w>span{display:inline-block;animation:heroRise 1.3s cubic-bezier(.16,1,.3,1) both}
.hero-welcome-title .w:nth-of-type(1)>span{animation-delay:.8s}
.hero-welcome-title .w:nth-of-type(2)>span{animation-delay:.92s}
.hero-welcome-title .w:nth-of-type(3)>span{animation-delay:1.15s}
.hero-welcome-title .w:nth-of-type(4)>span{animation-delay:1.27s}
.hero-welcome-title .w:nth-of-type(5)>span{animation-delay:1.39s}
@keyframes heroRise{from{transform:translateY(115%)}to{transform:translateY(0)}}

/* The welcome is now said in the hero, so drop the repeat in the next section (facts stay). */
.phone-hero .welcome-title{display:none}

/* Property Video on phones: the vertical film, full width and tall. */
.phone-hero #tour .video-frame{aspect-ratio:9/16}
.phone-hero #propertyVideo,.phone-hero #videoResume{display:none}
.phone-hero .tour-phone{display:block;width:100%;height:100%;object-fit:cover;background:#000}

@media(prefers-reduced-motion:reduce){
  .phone-hero .hero-still img,.hero-welcome-kicker span,.hero-welcome-title .w>span{animation:none}
}

/* Phones: Welcome facts on the hero, small and quiet beneath the title. */
.hero-facts{display:none}
.phone-hero .hero-facts{display:block;margin-top:22px;padding-top:14px;border-top:1px solid rgba(255,255,255,.45);
  animation:heroFade 1.2s ease 1.9s both}
.hero-facts-address{margin:0 0 12px;font:700 9px/1.4 CompassSans,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.hero-facts-row{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:10px}
.hero-fact{display:grid;gap:4px}
.hero-fact strong{font:500 20px/1 CompassSansMedium,CompassSans,Arial,sans-serif;letter-spacing:-.04em}
.hero-fact span{font:700 8px/1.2 CompassSans,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hero-facts-price{margin:14px 0 0;font:400 13px/1.3 CompassSans,Arial,sans-serif;letter-spacing:.02em;color:rgba(255,255,255,.92)}
@keyframes heroFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Title a touch smaller so title + facts sit comfortably on the photo. */
.phone-hero .hero-welcome{bottom:calc(max(24px,env(safe-area-inset-bottom)) + 5svh)}
/* Stronger shade at the bottom of the photo for the extra text. */
.phone-hero .hero-still::after{background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.1) 45%,rgba(0,0,0,.72) 100%)}
@media(prefers-reduced-motion:reduce){.phone-hero .hero-facts{animation:none}}
/* The Welcome card now only repeated the hero, so phones skip it. */
.phone-hero #welcome{display:none}
/* Slow push-in toward the front doors (instead of pulling back from them). */
.phone-hero .hero-still img{transform-origin:50% 43%;animation:heroPush 19s cubic-bezier(.25,.1,.25,1) both}
@keyframes heroPush{from{transform:scale(1)}to{transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.phone-hero .hero-still img{animation:none}}
/* Walk-up clip: plays once, muted, and holds on its last frame (the doors). The photo underneath is that
   same last frame, shown if the phone will not play video (Low Power Mode) or Reduce Motion is on. */
.phone-hero .hero-still.has-clip img{animation:none;transform:none}
.phone-hero .hero-still .hero-clip{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}
.phone-hero .hero-still .hero-clip.is-off{opacity:0}

/* Kiahuna: the welcome still holds steady (no zoom), so the background film takes over without a jump. */
.phone-hero .hero-still img{animation:none!important;transform:none!important}
/* Kiahuna: the welcome film stays hidden over the still until its first real frame is painted, then fades in. */
.phone-hero .hero-still .hero-clip{opacity:0;transition:opacity .3s ease}
.phone-hero .hero-still .hero-clip.is-live{opacity:1}
.phone-hero .hero-still .hero-clip.is-off{opacity:0!important}

/* Kiahuna: "Kiahuna Plantation Unit 99" always stays on one line (phone-hero.js scales it to fit). */
.hero-welcome-title{white-space:nowrap}
.hero-welcome-title .w:nth-of-type(6)>span{animation-delay:1.51s}