/* ==========================================================================
   PARTAKE NYC — FX layer. Motion, texture, mobile craft.
   Loaded after pk.css on every page. Everything degrades to static
   when prefers-reduced-motion is set.
   ========================================================================== */

/* ---------- paper grain over the whole site ---------- */
.fx-grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}
@media(max-width:760px){.fx-grain{opacity:.35}}

/* ---------- intro curtain ---------- */
.fx-curtain{position:fixed;inset:0;z-index:200;background:var(--green-deep);display:grid;place-items:center;transition:transform 1s cubic-bezier(.76,0,.24,1)}
.fx-curtain img{width:clamp(120px,20vw,190px);opacity:0;transform:translateY(10px) scale(.96);animation:fxmark .9s var(--ease) forwards}
.fx-curtain.is-up{transform:translateY(-101%)}
@keyframes fxmark{to{opacity:1;transform:none}}

/* ---------- scroll progress ---------- */
.fx-prog{position:fixed;top:calc(var(--nav-h) - 2px);left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:61;background:linear-gradient(90deg,var(--gold),var(--lime));pointer-events:none;opacity:1;transition:opacity .3s ease}


/* ---------- masked line/word reveals ---------- */
.fx-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.1em .16em .22em;margin:-.1em -.16em -.22em}
.fx-w>i{display:inline-block;font-style:inherit;transform:translateY(115%);opacity:0;transition:transform .95s var(--ease),opacity .6s ease;transition-delay:calc(var(--i,0) * 55ms)}
.fx-ready .fx-w>i,.fx-w.in>i{transform:none;opacity:1}

/* staggered children on any revealed block */
.rv .btns,.rv .chips,.rv .lede,.rv p,.rv .hero__facts,.rv .stats{transition:opacity .8s var(--ease) .12s,transform .8s var(--ease) .12s}
.rv-stagger>*{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.rv-stagger.in>*{opacity:1;transform:none}

/* ---------- parallax media ---------- */
.fx-px{will-change:transform}

/* ---------- frames: gold hairline that draws on hover ---------- */
.frame{position:relative}
.frame::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease);z-index:2}
.split__media:hover .frame::after,.room:hover .frame::after,.hero__media:hover.frame::after{transform:scaleX(1)}

/* ---------- buttons: sheen + magnetic ---------- */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn>*{position:relative;z-index:2}
.btn::before{content:'';position:absolute;top:-60%;bottom:-60%;left:-40%;width:26%;z-index:1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);opacity:0;transition:opacity .2s ease}
.btn:hover::before{opacity:1;animation:fxsheen .85s var(--ease)}
@keyframes fxsheen{from{left:-40%}to{left:120%}}
.btn--ghost::before,.btn--outline-light::before{background:linear-gradient(100deg,transparent,rgba(0,96,74,.14),transparent)}

/* ---------- text links ---------- */
.tlink{position:relative;padding-bottom:3px}
.tlink::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.tlink:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- menu rows: green wash slides in ---------- */
.menus a{position:relative;isolation:isolate}
.menus a::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,96,74,.07),rgba(141,198,63,.09));transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.menus a:hover::before{transform:scaleX(1)}
.menus a:hover{background:transparent}

/* ---------- room cards ---------- */
.room{position:relative;transform-style:preserve-3d}
.room__media{position:relative;overflow:hidden}
.room__media::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(12,43,34,.5));opacity:0;transition:opacity .45s ease}
.room:hover .room__media::before{opacity:1}
.room__cap{position:relative;display:inline-flex;align-items:center;gap:8px}
.room__cap::before{content:'';width:14px;height:1px;background:var(--gold);transition:width .4s var(--ease)}
.room:hover .room__cap::before{width:26px}

/* ---------- gallery: caption on hover, stagger in ---------- */
.gal button{transition:transform .5s var(--ease)}
.gal button::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,43,34,.55));opacity:0;transition:opacity .4s ease;pointer-events:none}
.gal button:hover::after{opacity:1}
.gal button:hover{transform:translateY(-3px)}
.gal button:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ---------- stats: counters ---------- */
.stats b,.hero__facts b{font-variant-numeric:tabular-nums}

/* ---------- marquee polish ---------- */
.mq{position:relative}
.mq::before,.mq::after{content:'';position:absolute;top:0;bottom:0;width:clamp(40px,8vw,120px);z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--green-deep),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--green-deep),transparent)}
.mq:hover .mq__row{animation-play-state:paused}

/* ---------- section rule that draws in ---------- */
.head{position:relative}
.head::after{content:'';position:absolute;left:0;right:0;bottom:calc(clamp(28px,3.4vw,48px) * -.4);height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease)}
.head.in::after,.rv.in .head::after{transform:scaleX(1)}

/* ---------- floating reserve pill (desktop) ---------- */
.fx-book{position:fixed;right:22px;bottom:22px;z-index:57;display:none;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--r-pill);background:var(--green-deep);color:#FFFDF7;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 22px 44px -20px rgba(0,40,30,.8);opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease),background .25s ease}
.fx-book:hover{background:var(--green);color:#fff}
.fx-book.is-on{opacity:1;transform:none}
.fx-book i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(141,198,63,.22)}
@media(min-width:961px){.fx-book{display:inline-flex}}

/* ---------- footer: back to top ---------- */
.fx-top{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,239,228,.7);background:none;border:0;cursor:pointer;font-family:var(--f-b);padding:0}
.fx-top:hover{color:var(--lime)}
.fx-top span{transition:transform .3s var(--ease)}
.fx-top:hover span{transform:translateY(-3px)}

/* ---------- image rise-in reveal ---------- */
.fx-rise{clip-path:inset(0 0 101% 0);transition:clip-path 1.15s var(--ease)}
.fx-rise.in{clip-path:inset(0 0 0 0)}
/* phones never clip media — a stuck reveal reads as a missing photo */
@media(max-width:760px){.fx-rise{clip-path:none!important}.fx-px{transform:none!important}}

/* ---------- menu hover preview (desktop) ---------- */
.fx-peek{position:fixed;z-index:70;width:230px;aspect-ratio:4/3;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.92) rotate(-3deg);transition:opacity .28s var(--ease),transform .38s var(--ease);overflow:hidden;border-radius:6px;box-shadow:0 30px 60px -28px rgba(0,64,47,.75)}
.fx-peek img{width:100%;height:100%;object-fit:cover}
.fx-peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}

/* ---------- hero scroll cue ---------- */
.fx-cue{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.fx-cue i{position:relative;display:block;width:1px;height:34px;background:var(--line-2);overflow:hidden}
.fx-cue i::after{content:'';position:absolute;left:0;top:-34px;width:1px;height:34px;background:var(--green);animation:fxcue 2.2s var(--ease) infinite}
@keyframes fxcue{0%{transform:translateY(0)}70%,100%{transform:translateY(68px)}}
@media(max-width:900px){.fx-cue{display:none}}
@media(prefers-reduced-motion:reduce){.fx-cue i::after{animation:none;top:0}}

/* ---------- big-screen simulator ---------- */
.sim{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0A1512}
.sim__stage{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.sim__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.sim__txt{position:relative;z-index:2;padding:0 6%;text-align:center;font-family:var(--f-d);font-size:clamp(26px,6.2vw,74px);line-height:1.02;color:#FFFDF7;text-shadow:0 0 32px rgba(141,198,63,.55),0 0 90px rgba(0,174,140,.4);word-break:break-word}
.sim__txt em{font-style:italic;color:var(--lime)}
.sim__scan{position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 2px,transparent 2px 4px);mix-blend-mode:screen}
.sim__bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px;background:var(--paper-2);border-top:1px solid var(--line)}
.sim__bar input{flex:1 1 200px;font-family:var(--f-b);font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:10px;padding:13px 15px}
.sim__bar input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,96,74,.12)}
/* ---------- nav live status ---------- */
.nav__live{display:none;align-items:center;gap:9px;margin-left:auto;padding:8px 15px;border:1px solid rgba(255,253,247,.22);border-radius:var(--r-pill);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,239,228,.85);white-space:nowrap}
.nav__live i{width:7px;height:7px;border-radius:50%;background:var(--lime);position:relative;flex:0 0 auto}
.nav__live i::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--lime);opacity:.5;animation:vzpulse 2.4s ease-out infinite}
.nav__live.is-closed i{background:#E08A5B}
.nav__live.is-closed i::after{border-color:#E08A5B}
.nav__live em{font-style:normal;color:rgba(242,239,228,.6);font-weight:600}
.nav__links+.nav__live{margin-left:6px}
@media(max-width:1180px){.nav__live{display:none!important}}
@media(min-width:1181px){.nav__live{display:inline-flex}}

/* ---------- statement band ---------- */
.say{padding:clamp(60px,8vw,120px) var(--pad-x);background:var(--paper-2);border-block:1px solid var(--line);text-align:center;position:relative;overflow:hidden}
.say__eye{font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 22px}
.say__q{margin:0 auto;max-width:22ch;font-family:var(--f-d);font-weight:400;font-size:clamp(32px,5.4vw,72px);line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
.say__q em{font-style:italic;color:var(--green);display:block}
.say__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:0 34px;margin-top:30px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.say__meta span{display:inline-flex;align-items:center;gap:34px}
.say__meta span+span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lime)}

/* ---------- page transition ---------- */
html.fx-out body{opacity:0;transition:opacity .24s ease}
/* ==========================================================================
   MOBILE CRAFT
   ========================================================================== */
@media(max-width:760px){
  /* horizontal snap rails instead of stacked cards */
  .rooms{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 0 6px;margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);scrollbar-width:none}
  .rooms::-webkit-scrollbar{display:none}
  .rooms>*{flex:0 0 82%;scroll-snap-align:center}
  .gal{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;grid-template-columns:none;margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);scrollbar-width:none}
  .gal::-webkit-scrollbar{display:none}
  .gal button{flex:0 0 74%;scroll-snap-align:center;aspect-ratio:1}
  .gal .tall,.gal .wide{flex:0 0 74%;grid-row:auto;grid-column:auto;aspect-ratio:1}
  .fx-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
  .fx-dots b{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:width .3s var(--ease),background .3s ease}
  .fx-dots b.on{width:20px;background:var(--green)}

  /* stats read as a tight spec list on a phone, not three empty boxes */
  .stats{border:0;gap:0;flex-direction:column;border-top:1px solid var(--line)}
  .stats>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex:1 1 auto;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:13px 0}
  .stats b{font-size:22px;line-height:1.1;flex:0 0 auto}
  .stats span{text-align:right;font-size:11.5px;letter-spacing:.1em;line-height:1.3}
  .bg-green .stats,.bg-green .stats>div{border-color:rgba(255,253,247,.2)}

  /* footer centers up on a phone */
  .foot{text-align:center}
  .foot__brand img{margin-left:auto;margin-right:auto}
  .foot__brand p{margin-left:auto;margin-right:auto;max-width:34ch}
  .foot__cols{gap:26px 20px}
  .foot__bottom{justify-content:center;text-align:center;flex-direction:column;gap:14px}
  .foot__bottom .sp{display:none}

  /* type + rhythm */
  .hero__facts>div{padding-right:14px}
  .sec{padding-inline:var(--pad-x)}

  /* mobile bar: icons, safe area, live state */
  .mbar{padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -14px 30px -24px rgba(0,64,47,.7)}
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;position:relative}
  .mbar a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .mbar a.is-key{color:#FFFDF7;background:var(--green)}
  .mbar a:active{background:rgba(0,96,74,.1)}
  .mbar a.is-key:active{background:var(--green-deep)}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}

  /* tap feedback */
  .room:active,.gal button:active,.menus a:active{transform:scale(.985)}
  .btn:active{transform:scale(.97)}

  /* lightbox: full-bleed, swipe */
  .lb{padding:0}
  .lb img{max-width:100vw;max-height:78vh}
  .lb__nav{width:44px;height:44px;bottom:26px;top:auto;transform:none}
  .lb__nav--prev{left:24px}
  .lb__nav--next{right:24px}
  .lb__count{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.18em;color:rgba(255,253,247,.75)}
}
.lb__count{display:none}
@media(max-width:760px){.lb.is-open .lb__count{display:block}}

/* mobile menu: staggered entrance */
.mmenu a{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mmenu.is-open a{opacity:1;transform:none}
.mmenu.is-open a:nth-child(1){transition-delay:.06s}
.mmenu.is-open a:nth-child(2){transition-delay:.1s}
.mmenu.is-open a:nth-child(3){transition-delay:.14s}
.mmenu.is-open a:nth-child(4){transition-delay:.18s}
.mmenu.is-open a:nth-child(5){transition-delay:.22s}
.mmenu.is-open a:nth-child(6){transition-delay:.26s}
.mmenu.is-open a:nth-child(7){transition-delay:.3s}
.mmenu.is-open a:nth-child(8){transition-delay:.34s}
.nav__burger span{transition:transform .3s var(--ease),opacity .2s ease}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* focus visibility everywhere */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.bg-green a:focus-visible,.foot a:focus-visible{outline-color:var(--lime)}

@media(prefers-reduced-motion:reduce){
  .fx-grain{display:none}
  .fx-curtain{display:none}
  .fx-w>i{transform:none;opacity:1}
  .btn::before{display:none}
  .fx-px{transform:none!important}
}