/* Golden Palmetto Realty: motion layer (13 Oct 2026)
   Everything here only runs when motion.js has put .mo on <html>,
   and nothing runs for people who ask their phone for reduced motion.
   Only transform and opacity move, so it stays smooth on phones. */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --glow:0 0 0 1px rgba(201,162,74,.55),0 10px 30px -8px rgba(201,162,74,.45);
}

/* ---------- reveal on scroll ---------- */
.mo [data-reveal]{
  opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:var(--rd,0ms);will-change:opacity,transform;
}
.mo [data-reveal].is-in{opacity:1;transform:none;}

/* ---------- hero: load in, map draws, pin breathes, slow gold light ---------- */
.mo .hero{position:relative;overflow:hidden;isolation:isolate;}
.mo .hero::before,.mo .hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  width:60vmax;height:60vmax;filter:blur(60px);opacity:.16;
}
.mo .hero::before{background:radial-gradient(circle,var(--gold-soft) 0%,transparent 62%);top:-30vmax;right:-18vmax;animation:gpDrift1 26s ease-in-out infinite alternate;}
.mo .hero::after{background:radial-gradient(circle,#1B4C7E 0%,transparent 62%);bottom:-34vmax;left:-20vmax;opacity:.10;animation:gpDrift2 32s ease-in-out infinite alternate;}
@keyframes gpDrift1{to{transform:translate3d(-8vmax,6vmax,0) scale(1.08);}}
@keyframes gpDrift2{to{transform:translate3d(9vmax,-5vmax,0) scale(1.12);}}

.mo .hero-in > div > *{opacity:0;transform:translate3d(0,18px,0);animation:gpUp .9s var(--ease-out) forwards;}
.mo .hero-in > div > *:nth-child(1){animation-delay:.05s}
.mo .hero-in > div > *:nth-child(2){animation-delay:.15s}
.mo .hero-in > div > *:nth-child(3){animation-delay:.25s}
.mo .hero-in > div > *:nth-child(4){animation-delay:.35s}
.mo .hero-in > div > *:nth-child(5){animation-delay:.45s}
.mo .hero-in > div > *:nth-child(6){animation-delay:.55s}
@keyframes gpUp{to{opacity:1;transform:none;}}

.mo .hero-photo{opacity:0;animation:gpUp 1.1s var(--ease-out) .25s forwards,gpFloat 9s ease-in-out 1.4s infinite alternate;}
@keyframes gpFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-8px,0)}}
.mo .hero-photo svg.art > path:last-of-type{stroke-dasharray:var(--len,4000);stroke-dashoffset:var(--len,4000);animation:gpDraw 2.4s var(--ease-out) .5s forwards;}
.mo .hero-photo svg.art > path:first-of-type{opacity:0;animation:gpFade 1.6s ease 1.8s forwards;}
@keyframes gpDraw{to{stroke-dashoffset:0}}
@keyframes gpFade{to{opacity:.18}}
.mo .hero-photo svg.art circle[fill="url(#pulse)"]{transform-box:fill-box;transform-origin:center;animation:gpBreathe 3.6s ease-in-out infinite;}
@keyframes gpBreathe{0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.35);opacity:1}}

/* ---------- buttons: spring, glow, magnetic (JS adds the pull) ---------- */
.mo .btn{
  transition:transform .45s var(--ease-spring),box-shadow .35s ease,background .2s ease,border-color .2s ease,color .2s ease;
  transform:translate3d(var(--mx,0),var(--my,0),0);will-change:transform;
}
.mo .btn:hover{transform:translate3d(var(--mx,0),var(--my,0),0) scale(1.03);box-shadow:var(--glow);}
.mo .btn:active{transform:translate3d(var(--mx,0),var(--my,0),0) scale(.97);transition-duration:.12s;}

/* nav links: gold underline grows from the middle */
.mo nav.main a{position:relative;border-bottom-color:transparent !important;transition:color .25s ease,transform .45s var(--ease-spring);}
.mo nav.main a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;
  background:var(--gold-soft);transform:scaleX(0);transform-origin:center;transition:transform .45s var(--ease-spring);
}
.mo nav.main a:hover{transform:translate3d(0,-1px,0);}
.mo nav.main a:hover::after,.mo nav.main a[aria-current]::after{transform:scaleX(1);}
.mo .callbtn{transition:color .25s ease,transform .45s var(--ease-spring);}
.mo .callbtn:hover{transform:scale(1.04);}

/* header picks up a soft shadow once you scroll */
.mo header.top{transition:box-shadow .35s ease,background .35s ease;}
.mo header.top.scrolled{box-shadow:0 8px 24px -14px rgba(6,32,62,.35);}

/* thin gold reading bar along the top */
.gp-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));transform-origin:0 50%;transform:scaleX(0);}

/* ---------- listing cards: lift, photo zoom, gold edge, small tilt ---------- */
.mo .card{
  transition:transform .55s var(--ease-spring),box-shadow .4s ease,border-color .4s ease;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0);
  will-change:transform;
}
.mo .card .photo img{transition:transform 1.1s var(--ease-out),filter .6s ease;transform:scale(1.001);}
.mo .card:hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-6px,0);
  border-color:var(--gold-soft);box-shadow:0 22px 40px -18px rgba(6,32,62,.45),0 0 0 1px rgba(201,162,74,.35);
}
.mo .card:hover .photo img{transform:scale(1.06);}
.mo .card .price{transition:color .3s ease;}
.mo .card:hover .price{color:var(--gold);}

/* team cards and other white panels lift a touch */
.mo .person,.mo .sidecard{transition:transform .55s var(--ease-spring),box-shadow .4s ease,border-color .4s ease;}
.mo .person:hover{transform:translate3d(0,-4px,0);border-color:var(--gold-soft);box-shadow:0 18px 34px -18px rgba(6,32,62,.4);}

/* ---------- listing page gallery ---------- */
.mo .gallery img{transition:transform 1.1s var(--ease-out),filter .5s ease;}
.mo .gallery a:hover img,.mo .gallery .g:hover img,.mo .gallery button:hover img{transform:scale(1.04);}
.mo .gallery > *{overflow:hidden;}
.mo .lb-stage img{animation:gpFadeIn .45s var(--ease-out);}
@keyframes gpFadeIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* form fields: gold focus ring eases in */
.mo input,.mo textarea,.mo select{transition:border-color .25s ease,box-shadow .35s ease;}
.mo input:focus,.mo textarea:focus,.mo select:focus{box-shadow:0 0 0 4px rgba(201,162,74,.22);}

/* "use my location" gets a quiet pulse so people standing at a sign see it */
.mo .geobtn svg{animation:gpPin 2.6s ease-in-out infinite;transform-origin:50% 90%;}
@keyframes gpPin{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* ---------- dark mode keeps the same moves ---------- */
:root[data-theme="dark"] .mo .hero::before,:root[data-theme="dark"].mo .hero::before{opacity:.12;}
:root[data-theme="dark"].mo .card:hover{box-shadow:0 22px 40px -18px rgba(0,0,0,.7),0 0 0 1px rgba(201,162,74,.4);}

/* ---------- reduced motion: keep soft fades and hover color, drop the movement ---------- */
@media (prefers-reduced-motion:reduce){
  .mo [data-reveal]{transform:none;transition:opacity .6s ease;}
  .mo .hero-in > div > *{transform:none;animation:gpFadeOnly .7s ease forwards;}
  .mo .hero-photo{animation:gpFadeOnly .9s ease .2s forwards;}
  @keyframes gpFadeOnly{to{opacity:1}}
  .mo .hero::before,.mo .hero::after,.mo .geobtn svg,
  .mo .hero-photo svg.art circle[fill="url(#pulse)"]{animation:none;}
  .mo .card,.mo .card:hover,.mo .person:hover,.mo nav.main a:hover,.mo .btn,.mo .btn:hover,.mo .btn:active{transform:none;}
  .mo .card:hover .photo img,.mo .gallery a:hover img,.mo .gallery .g:hover img{transform:none;}
}

/* ---------- home intro: one scroll plays a photoreal walk in, to the laptop, into the home page ---------- */
.walkin{display:none;}
.wi .walkin{display:block;position:fixed;inset:0;z-index:80;}
html.wi-lock,html.wi-lock body{overflow:hidden;overscroll-behavior:none;}
.walkin-stage{position:absolute;inset:0;overflow:hidden;background:#0B1B2E url(../images/intro/poster.jpg?v=20261013h) center/cover no-repeat;
  transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1),filter .8s ease;}
.walkin.out .walkin-stage{opacity:0;transform:scale(1.04);filter:blur(4px);pointer-events:none;}
.walkin.gone{display:none !important;}
.walkin-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.walkin-shade{transition:opacity .6s ease;}
.walkin.playing .walkin-shade{opacity:0;}
.walkin-copy{transition:opacity .5s ease,transform .6s ease;}
.walkin.playing .walkin-copy{opacity:0;transform:translate3d(0,-40px,0);pointer-events:none;}
.walkin.playing .walkin-skip{opacity:.75;}
.walkin.zooming .walkin-shade,.walkin.zooming .walkin-copy,.walkin.zooming .walkin-skip{visibility:hidden;}
.walkin.zooming .walkin-tag{opacity:0;transition:opacity .3s ease;}
.wi-glow{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity,background;}
.walkin.lit .walkin-stage{background:transparent;transition:none;}
.walkin.lit .walkin-video{visibility:hidden;}
.walkin-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,20,40,.55) 0%,rgba(6,20,40,.15) 38%,rgba(6,20,40,0) 60%,rgba(6,20,40,.25) 100%);}
.walkin-copy{position:absolute;left:0;right:0;top:calc(62px + 4vh);padding:0 16px;text-align:center;color:#FFFFFF;will-change:opacity,transform;}
.walkin-eyebrow{margin:0 0 .7rem;font-size:.8rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#E3C67A;text-shadow:0 2px 12px rgba(0,0,0,.5);}
.walkin-title{margin:0;font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(2.6rem,7vw,5.4rem);line-height:1.02;letter-spacing:-.01em;text-shadow:0 6px 30px rgba(0,0,0,.45);}
.walkin-hint{display:inline-flex;align-items:center;gap:.4rem;margin:1.2rem 0 0;font-weight:600;font-size:1rem;color:#EEF3F9;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.walkin-hint svg{animation:wiNudge 1.8s var(--ease-out) infinite;}
@keyframes wiNudge{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(6px);opacity:1}}
.hint-touch{display:none;}
@media (hover:none){.hint-touch{display:inline}.hint-desk{display:none}}
.walkin-tag{position:absolute;left:16px;bottom:22px;font:500 .7rem/1 Inter,system-ui,sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.75);text-shadow:0 1px 6px rgba(0,0,0,.6);}
.walkin-skip{position:absolute;right:16px;bottom:18px;font:600 .85rem/1 Inter,system-ui,sans-serif;color:#FFFFFF;
  background:rgba(6,32,62,.55);border:1px solid rgba(201,162,74,.6);border-radius:99px;padding:.6rem 1rem;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .3s ease,transform .45s var(--ease-spring),background .2s ease;}
.walkin-skip:hover{background:rgba(6,32,62,.8);transform:scale(1.04);}

/* ---------- hot property ---------- */
.card{position:relative;}
.hotbadge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:.35rem;
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1B1405;
  background:linear-gradient(135deg,#F3D27A,#C9A24A);border-radius:99px;padding:.35rem .7rem;box-shadow:0 6px 16px -6px rgba(0,0,0,.45);}
.hotbadge svg{width:13px;height:13px;}
.hot{display:grid;grid-template-columns:1.25fr 1fr;gap:0;margin:0 0 2rem;border:1px solid var(--gold-soft);border-radius:var(--radius);
  overflow:hidden;background:var(--white);box-shadow:0 24px 48px -28px rgba(6,32,62,.55);text-decoration:none;color:inherit;position:relative;}
.hot .hot-photo{position:relative;min-height:260px;background:var(--tint);overflow:hidden;}
.hot .hot-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out);}
.hot:hover .hot-photo img{transform:scale(1.05);}
.hot .hot-in{padding:clamp(1.3rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.45rem;justify-content:center;}
.hot .hot-kicker{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.hot .hot-why{font-size:.92rem;color:var(--muted,#5A6B80);margin:0 0 .4rem;}
.hot .hot-price{font-family:Fraunces,Georgia,serif;font-size:clamp(1.8rem,3.6vw,2.4rem);font-weight:600;color:var(--ink);}
.hot .hot-addr{font-weight:600;font-size:1.05rem;color:var(--ink);}
.hot .hot-facts{color:var(--muted,#5A6B80);font-size:.95rem;}
.hot .btn{align-self:flex-start;margin-top:.8rem;}
.mo .hot{transition:transform .55s var(--ease-spring),box-shadow .4s ease;}
.mo .hot:hover{transform:translate3d(0,-4px,0);box-shadow:0 30px 56px -26px rgba(6,32,62,.6);}
.mo .hot .hotbadge{animation:hotPulse 2.8s ease-in-out infinite;}
@keyframes hotPulse{0%,100%{box-shadow:0 6px 16px -6px rgba(0,0,0,.45),0 0 0 0 rgba(201,162,74,.55)}50%{box-shadow:0 6px 16px -6px rgba(0,0,0,.45),0 0 0 8px rgba(201,162,74,0)}}
@media (max-width:760px){.hot{grid-template-columns:1fr}.hot .hot-photo{min-height:0;aspect-ratio:4/3}}
.hotline{display:inline-flex;align-items:center;gap:.4rem;margin:.2rem 0 .4rem .4rem;font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#1B1405;background:linear-gradient(135deg,#F3D27A,#C9A24A);border-radius:99px;padding:.25rem .7rem;vertical-align:middle;}

/* keep the footer from jumping while listings load (layout shift) */
#listing-grid:empty,#grid:empty{min-height:70vh;}
main#top #body:empty{min-height:90vh;}

@media (prefers-reduced-motion:reduce){
  .walkin-hint svg,.mo .hot .hotbadge{animation:none;}
}

/* ---------- coast to the mountains band (13 Oct 2026) ---------- */
.pano{position:relative;background:#0B1B2E;overflow:hidden;}
.pano-frame{position:relative;height:clamp(440px,52vw,680px);overflow:hidden;}
.pano-img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;min-width:112%;object-fit:cover;
  transform:translate3d(var(--px,0px),0,0) scale(var(--ps,1.04));transform-origin:0 50%;will-change:transform;}
.pano-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,20,40,.78) 0%,rgba(6,20,40,.46) 34%,rgba(6,20,40,0) 62%),linear-gradient(0deg,rgba(6,20,40,.45) 0%,rgba(6,20,40,0) 40%);}
.pano-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#FFFFFF;}
.pano-copy .eyebrow{color:#E3C67A;}
.pano-copy h2{color:#FFFFFF;max-width:13ch;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.04;text-shadow:0 4px 24px rgba(0,0,0,.35);}
.pano-copy p:not(.eyebrow){max-width:34ch;margin:.9rem 0 1.4rem;color:#EEF3F9;font-size:1.06rem;line-height:1.55;text-shadow:0 2px 12px rgba(0,0,0,.4);}
.pano-tag{position:absolute;right:16px;bottom:14px;z-index:2;font:500 .7rem/1 Inter,system-ui,sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.72);text-shadow:0 1px 6px rgba(0,0,0,.6);}
@media (max-width:700px){
  .pano-frame{height:clamp(480px,128vw,620px);}
  .pano-shade{background:linear-gradient(0deg,rgba(6,20,40,.86) 0%,rgba(6,20,40,.55) 46%,rgba(6,20,40,.05) 78%);}
  .pano-copy{justify-content:flex-end;padding-bottom:2.6rem;}
}
@media (prefers-reduced-motion: reduce){.pano-img{transform:none;min-width:100%;width:100%;}}

/* ---------- home grid: "+N more lots here" tag on a card's photo (13 Oct 2026) ---------- */
.card .moretag{position:absolute;left:12px;z-index:3;margin-top:calc(-2.4rem);display:inline-flex;align-items:center;
  padding:.38rem .7rem;border-radius:99px;font:600 .78rem/1 Inter,system-ui,sans-serif;color:#FFFFFF;
  background:rgba(11,27,46,.72);border:1px solid rgba(227,198,122,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}