/* lalidev demos — shared lively motion layer.
   Color-agnostic: only transforms/opacity/shadow so it drops into any demo's palette. */

@media (prefers-reduced-motion: no-preference){
  /* hero entrance — staggered rise (add class "hero-anim" to the hero copy wrapper) */
  @keyframes lvRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  .hero-anim>*{opacity:0;animation:lvRise .85s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-anim>*:nth-child(1){animation-delay:.06s}
  .hero-anim>*:nth-child(2){animation-delay:.16s}
  .hero-anim>*:nth-child(3){animation-delay:.26s}
  .hero-anim>*:nth-child(4){animation-delay:.36s}
  .hero-anim>*:nth-child(5){animation-delay:.46s}
  .hero-anim>*:nth-child(6){animation-delay:.56s}
  .hero-anim>*:nth-child(n+7){animation-delay:.62s}

  /* scroll-reveal variants (direction set per element by _lively.js) */
  [data-rv]{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity}
  [data-rv="up"]{transform:translateY(30px)}
  [data-rv="left"]{transform:translateX(-42px)}
  [data-rv="right"]{transform:translateX(42px)}
  [data-rv="scale"]{transform:scale(.92)}
  [data-rv].in{opacity:1;transform:none}
}

/* nav shrink on scroll (tighten height + add depth; no color assumptions) */
nav{transition:box-shadow .3s ease}
nav .nav-in{transition:height .3s ease}
nav.lv-shrink .nav-in{height:60px}
nav.lv-shrink{box-shadow:0 8px 30px rgba(0,0,0,.28)}

/* framed image tiles — gentle zoom on hover */
:where(.g,.gal,.prop,.prod,.room,.gstrip .g){overflow:hidden}
:where(.g,.gal,.prop,.prod,.room,.gstrip .g) img,
:where(.g,.gal,.prop,.prod,.room,.gstrip .g) .cover{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
:where(.g,.gal,.prop,.prod,.room,.gstrip .g):hover img,
:where(.g,.gal,.prop,.prod,.room,.gstrip .g):hover .cover{transform:scale(1.08)}

/* smooth magnetic-button return */
a.btn{will-change:transform}

/* ===== full-bleed cinematic hero (opt-in: class="hero fullbleed") =====
   Image fills the whole hero, text overlaid on a directional dark scrim,
   slow Ken-Burns motion. Overrides the demos' split-card hero rules.
   hero-media must be a DIRECT child of .hero (sibling of .wrap). */
.hero.fullbleed{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;padding:0}
.hero.fullbleed>.wrap{position:relative;z-index:2;width:100%}
.hero.fullbleed .hero-in{display:block;background:none;border-radius:0;padding:0;gap:0}
.hero.fullbleed .hero-copy{position:relative;z-index:2;padding:70px 0;max-width:660px;align-self:auto}
.hero.fullbleed .hero-media{position:absolute!important;inset:0;z-index:0;margin:0;border:0;border-radius:0;min-height:0;box-shadow:none;overflow:hidden}
.hero.fullbleed .hero-media .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.hero.fullbleed .hero-media::before{content:none!important}
.hero.fullbleed .hero-media::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg, rgba(6,8,10,.92) 0%, rgba(6,8,10,.70) 32%, rgba(6,8,10,.26) 60%, rgba(6,8,10,.50) 100%),
  linear-gradient(180deg, rgba(6,8,10,.24), rgba(6,8,10,.56))}
.hero.fullbleed .hero-media .float{z-index:2}
.hero.fullbleed .hero-media .f1{top:104px;right:34px;left:auto;bottom:auto}
.hero.fullbleed .hero-media .f2{bottom:40px;right:34px;left:auto;top:auto}
@media (prefers-reduced-motion: no-preference){
  .hero.fullbleed .hero-media .cover{animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
  @keyframes kenburns{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.16) translate(-2%,-2%)}}
}
/* light-theme demos: flip overlaid text to white over the scrim */
.hero.fullbleed.text-light h1,
.hero.fullbleed.text-light .eyebrow,
.hero.fullbleed.text-light .trust,.hero.fullbleed.text-light .trust .t,
.hero.fullbleed.text-light .hero-stats .s b{color:#fff}
.hero.fullbleed.text-light p.sub{color:rgba(255,255,255,.86)}
.hero.fullbleed.text-light .hero-stats .s span{color:rgba(255,255,255,.72)}
.hero.fullbleed.text-light .pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
@media (max-width:760px){
  .hero.fullbleed{min-height:78vh}
  .hero.fullbleed .hero-copy{padding:118px 0 88px}
  .hero.fullbleed .hero-media .float{display:none}
}