/* Experience layer: motion, saved plans + compare, lifestyle strip.
   Loaded on every page after mica-layer. Everything here respects prefers-reduced-motion. */

/* ---- page transitions (cross-document view transitions) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:xp-out .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:xp-in .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes xp-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes xp-in{from{opacity:0;transform:translateY(18px)}}
header.nav{view-transition-name:site-nav}

/* ---- hero: slow push-in, word-by-word headline, parallax handled in JS ---- */
/* The headline waits for the word split so it doesn't flash; it shows anyway if the script never runs. */
.xp-on .hero .h-xl:not(.xp-split){opacity:0;animation:xp-show 0s 1.5s forwards}
@keyframes xp-show{to{opacity:1}}
.hero .bg{will-change:transform}
.xp-on .hero .bg img{animation:xp-kb 18s cubic-bezier(.2,.6,.2,1) both}
@keyframes xp-kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.xp-w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(6px);animation:xp-word .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes xp-word{to{opacity:1;transform:none;filter:none}}
.xp-on .hero .lead,.xp-on .hero .cta,.xp-on .hero .stats{animation:xp-rise .9s cubic-bezier(.2,.7,.2,1) both}
.xp-on .hero .lead{animation-delay:.55s}.xp-on .hero .cta{animation-delay:.7s}.xp-on .hero .stats{animation-delay:.85s}
@keyframes xp-rise{from{opacity:0;transform:translateY(24px)}}
.hero .xp-scroll{position:absolute;left:50%;bottom:18px;translate:-50% 0;width:26px;height:42px;border:2px solid rgba(255,255,255,.7);border-radius:999px;z-index:2;pointer-events:none}
.hero .xp-scroll::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:xp-dot 1.8s ease-in-out infinite}
@keyframes xp-dot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media (max-width:900px){.hero .xp-scroll{display:none}}

/* ---- images ease into frame as they scroll in ---- */
@supports (animation-timeline:view()){
  main .section .ph>img,main .xp-life figure img{animation:xp-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes xp-zoom{from{scale:1.16}to{scale:1}}
}

/* magnetic buttons use the independent `translate` property so existing hover transforms still work */
.xp-mag{transition:translate .35s cubic-bezier(.2,.7,.2,1),transform .25s,box-shadow .25s,background .2s,color .2s}

/* ---- lifestyle strip ---- */
.xp-life{background:var(--forest);color:var(--cream);padding:var(--section) 0 calc(var(--section) - 24px);overflow:hidden;position:relative}
.xp-life .xp-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.xp-life .eyebrow{color:var(--sage)}.xp-life .eyebrow::before{background:var(--sage)}
.xp-life .h-lg i{color:var(--sage)}
.xp-life .lead{color:rgba(245,243,238,.78)}
.xp-life .xp-nav{display:flex;gap:10px}
.xp-life .xp-nav button{width:52px;height:52px;border-radius:999px;border:2px solid var(--cream);background:transparent;color:var(--cream);font:500 20px/1 var(--font-sans);cursor:pointer;transition:background .2s,color .2s}
.xp-life .xp-nav button:hover{background:var(--cream);color:var(--forest)}
.xp-life .strip{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:56px var(--gutter) 40px;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.xp-life .strip::-webkit-scrollbar{display:none}
.xp-life .strip.drag{cursor:grabbing;scroll-snap-type:none}
.xp-life figure{flex:none;width:min(78vw,400px);margin:0;scroll-snap-align:center;background:var(--cream);color:var(--forest);padding:12px 12px 18px;border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.35);transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1);position:relative;user-select:none}
.xp-life figure:nth-child(odd){--r:-2.5deg}.xp-life figure:nth-child(even){--r:2deg;margin-top:28px}.xp-life figure:nth-child(3n){--r:-1deg}
.xp-life figure:hover{transform:rotate(0) translateY(-8px) scale(1.02)}
.xp-life .shot{aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--concrete)}
.xp-life .shot img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.xp-life figcaption{font:500 17px/1.25 var(--font-display);margin-top:14px;text-transform:lowercase;letter-spacing:.005em}
.xp-life .tag{position:absolute;z-index:3;top:28px;right:-10px;pointer-events:none;background:var(--sage);color:var(--forest);border:2px solid var(--forest);font:600 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border-radius:999px;transform:rotate(6deg);box-shadow:3px 3px 0 var(--forest)}
.xp-life figure:nth-child(3n+2) .tag{background:var(--cream);transform:rotate(-5deg)}
.xp-life .tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.xp-life .tags a{color:var(--cream);text-decoration:none;border:1.5px solid rgba(245,243,238,.4);padding:8px 14px;border-radius:999px;font:500 12px/1 var(--font-sans);letter-spacing:.08em;transition:background .2s,color .2s,border-color .2s}
.xp-life .tags a:hover{background:var(--sage);border-color:var(--sage);color:var(--forest)}
.xp-life .xp-note{font:400 12px/18px var(--font-sans);color:rgba(245,243,238,.5);margin:8px 0 0}

/* ---- saved floor plans ---- */
.card[data-plan]{position:relative}
.xp-fav{position:absolute;top:12px;right:12px;z-index:3;width:44px;height:44px;border-radius:999px;border:2px solid var(--forest);background:var(--cream);color:var(--forest);display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .2s,background .2s}
.xp-fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.xp-fav:hover{transform:scale(1.08)}
.xp-fav[aria-pressed="true"]{background:var(--garnet);border-color:var(--garnet);color:#fff}
.xp-fav[aria-pressed="true"] svg{fill:currentColor}
.xp-fav.pop{animation:xp-pop .45s cubic-bezier(.2,.7,.2,1.6)}
@keyframes xp-pop{40%{transform:scale(1.3)}}

.xp-tray{position:fixed;left:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:12px;background:var(--forest);color:var(--cream);border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 14px 40px rgba(14,23,32,.35);font:500 13px/1 var(--font-sans);letter-spacing:.06em;transform:translateY(calc(100% + 140px));visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
.xp-tray.on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.xp-tray b{font-weight:600}
.xp-tray button{min-height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--sage);color:var(--forest);font:600 12px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.xp-dlg{border:2px solid var(--forest);border-radius:24px;padding:0;width:min(1040px,calc(100vw - 24px));max-height:calc(100dvh - 40px);background:var(--paper);color:var(--ink)}
.xp-dlg::backdrop{background:rgba(14,23,32,.55);backdrop-filter:blur(4px)}
.xp-dlg[open]{animation:xp-rise .4s cubic-bezier(.2,.7,.2,1)}
.xp-dlg .dh{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;border-bottom:2px solid var(--forest);position:sticky;top:0;background:var(--paper);z-index:1}
.xp-dlg .dh h2{margin:0}
.xp-dlg .xp-x{width:44px;height:44px;border-radius:999px;border:2px solid var(--forest);background:transparent;cursor:pointer;font:500 18px/1 var(--font-sans);color:var(--forest)}
.xp-cmp{overflow-x:auto;padding:8px 26px 4px}
.xp-cmp table{border-collapse:collapse;width:100%;min-width:560px}
.xp-cmp th,.xp-cmp td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font:400 15px/1.4 var(--font-sans)}
.xp-cmp th{font:500 11px/16px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap;width:150px}
.xp-cmp td img{width:100%;max-width:220px;aspect-ratio:4/3;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px}
.xp-cmp .nm{font:400 30px/1 var(--font-display)}
.xp-cmp .best{color:var(--moss);font-weight:600}
.xp-cmp .rm{border:0;background:none;color:var(--garnet);cursor:pointer;font:500 12px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;padding:6px 0}
.xp-dlg .df{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:20px 26px 26px}
.xp-dlg .df .cap{margin:0}

@media (max-width:900px){
  .xp-tray{left:12px;bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .xp-life figure:nth-child(even){margin-top:16px}
  .xp-life .xp-nav{display:none}
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .xp-on .hero .h-xl:not(.xp-split){opacity:1;animation:none}
  .xp-w,.xp-on .hero .bg img,.xp-on .hero .lead,.xp-on .hero .cta,.xp-on .hero .stats,.hero .xp-scroll::after{animation:none!important;opacity:1;transform:none;filter:none}
  main .section .ph>img,main .xp-life figure img{animation:none!important}
  .xp-life figure{transition:none}
}

/* ---- Mica Creek Living ownership section, always on seafoam ---- */
.xp-mcl{background:#A9BFD0;color:#14202B;--ink-muted:#1F3346;--moss:#14202B}
.xp-mcl .eyebrow{color:#14202B!important}.xp-mcl .eyebrow::before{background:#14202B}
.xp-mcl .cs .word{color:#14202B}
.xp-mcl .cs .word i{color:#2F5778}
.xp-mcl .lead{color:#1A2B3C}
.xp-mcl .cs li{border-top-color:rgba(20,32,43,.22)}
.xp-mcl .btn:not(.primary){border-color:#14202B;color:#14202B}
.xp-mcl .btn:not(.primary):hover{background:#F5F3EE}
.xp-mcl-mark{display:block;width:120px;height:60px;margin:0 0 22px;overflow:visible}

/* ---- mobile hero ---- */
/* The photo fills the whole hero behind the copy, as on desktop, under a plain dark shade for legibility.
   (It used to stop partway down and fade into the slate-blue section colour, which read as a muddy colour wash.) */
@media (max-width:900px){
  html .hero{display:block;min-height:0!important}
  html .hero .bg{inset:0;width:100%;height:auto;overflow:hidden}
  html .hero .bg img{object-position:58% 50%}
  html .hero .bg::after{background:linear-gradient(180deg,rgba(14,23,32,.35) 0%,rgba(14,23,32,.2) 30%,rgba(14,23,32,.62) 62%,rgba(14,23,32,.8) 100%)!important}
  html .hero .wrap{padding-top:max(64px,min(46vw,52vh))}
  .xp-on .hero .bg img{animation-name:xp-kb-sm}
}
@keyframes xp-kb-sm{from{transform:scale(1.05)}to{transform:scale(1)}}

/* ---- section transitions: content glides in, section colors stay put ---- */
/* Whole sections no longer fade (that flashed their background color); their contents reveal instead,
   with a longer, softer ease and a gentle stagger between siblings. */
html.js main section.mc-rv,html.js main .hero.mc-rv{opacity:1;transform:none;transition:none}
html.js .rv{opacity:0;transform:translateY(32px);transition:opacity 1.3s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1)}
html.js .rv.in,html.js .rv.mc-rv.in{opacity:1;transform:none}
html.js .rv:nth-child(2){transition-delay:.08s}html.js .rv:nth-child(3){transition-delay:.16s}html.js .rv:nth-child(4){transition-delay:.24s}html.js .rv:nth-child(n+5){transition-delay:.32s}
/* section headings unveil from beneath a mask */
html.js .sec-head.rv h2{clip-path:inset(0 0 100% 0);translate:0 .35em;transition:clip-path 1.4s cubic-bezier(.16,1,.3,1) .1s,translate 1.4s cubic-bezier(.16,1,.3,1) .1s}
html.js .sec-head.rv.in h2{clip-path:inset(-10% -5% -20% -5%);translate:0 0}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .sec-head.rv h2{opacity:1;transform:none;translate:none;clip-path:none;transition:none}
}

/* ---- Industry Cincinnati: light-sage accent (Indianapolis uses seafoam). Deeper sage for hovers and marks on light grounds ---- */
.card:hover{box-shadow:6px 6px 0 0 var(--sage-deep,#7E9BB2)}
.mc-prog{background:var(--sage-deep,#7E9BB2)}
.xp-life .tags a:hover{background:var(--sage-deep,#7E9BB2);border-color:var(--sage-deep,#7E9BB2);color:var(--forest)}
.quiz .opts button:hover,.dmap-map .leaflet-bar a:hover{background:var(--sage)}
.xp-mcl .btn:not(.primary):hover{background:#F5F3EE;border-color:#14202B}
/* lifestyle strip: labels sit on the photo itself */
.xp-life .shot{position:relative}
.xp-life .shot .tag{top:14px;left:14px;right:auto;z-index:2;transform:rotate(-4deg);box-shadow:3px 3px 0 var(--forest)}
.xp-life figure:nth-child(3n+2) .shot .tag{transform:rotate(3deg)}

html body .xp-life .xp-head .eyebrow{color:var(--sage)!important}
.xp-life .lead{color:rgba(245,243,238,.86)}
/* ---- Industry Cincinnati: rusty blue for the large dark surfaces (ink stays for text, borders and small marks) ---- */
:root{--rust-blue:#4B6B84}
html body :is(.dark,.studio,.hero,.banner,.menu,.ticker.garnet,.collage .note,.ugc .v,.stick,.builder .result,.rcard,.xp-life,.xp-tray,footer){background-color:var(--rust-blue)}
.xp-life .lead{color:rgba(245,243,238,.86)}

/* Hero stats: labels are blocks with their own line height and the columns have real gutters, so long labels
   ("Minutes to the streetcar", "Fitness and resident access") wrap inside their column instead of running into the next one */
html body .hero .stats{column-gap:28px}
html body .hero .stats>div{min-width:0}
html body .hero .stats div span{display:block;margin-top:6px;line-height:17px}
@media (max-width:1100px){html body .hero .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}}
/* Space held for the lifestyle strip on the life page until the script swaps it in (matches the strip's rendered height) */
.xp-life-slot{min-height:1100px;background:var(--rust-blue,var(--forest))}
@media (max-width:900px){.xp-life-slot{min-height:970px}}