/* Chalet Byron — homepage motion (adds to site.css). claude, 12 Nov 2026. See homefx.py. */
/* 1. film grain */
.fx-grain{position:relative;overflow:hidden}
.fx-grain picture{display:block}
.fx-grain-c{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:overlay;opacity:.35}
/* 3. rotating headline word */
.fx-rot{display:inline-block;color:var(--deep);perspective:600px}
.fx-rot > span{display:inline-block;transform-origin:50% 60%;backface-visibility:hidden}
.fx-rot .fx-out{animation:fx-flip-out .45s cubic-bezier(.5,0,.75,0) forwards}
.fx-rot .fx-in{animation:fx-flip-in .55s cubic-bezier(.2,.9,.3,1.1)}
@keyframes fx-flip-out{to{transform:rotateX(90deg);opacity:0}}
@keyframes fx-flip-in{from{transform:rotateX(-90deg);opacity:0}to{transform:none;opacity:1}}
/* 2. scroll expand */
.fx-expand > .wrap{gap:24px}
.fx-stage{display:flex;justify-content:center}
.fx-frame{width:100%;aspect-ratio:3/2;max-width:100%;background:var(--adobe)}
.fx-frame picture{height:100%}
.fx-frame img{width:100%;height:100%;object-fit:cover;transform:scale(var(--fx-z,1))}
.fx-on .fx-frame{transform:scale(.62);border-radius:120px 120px 0 0;will-change:transform}
.fx-on .fx-frame img{transform:scale(var(--fx-z,1.12))}
.fx-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;color:var(--muted);font-size:16px}
/* 5. accordion gallery */
.fx-acc{display:flex;gap:8px;height:480px}
.fx-panel{position:relative;flex:1;min-width:0;overflow:hidden;border:0;padding:0;margin:0;background:var(--adobe);color:var(--white);text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fx-panel picture{position:absolute;inset:0;display:block}
.fx-panel img{position:absolute;left:-6%;top:-6%;width:112%;height:112%;max-width:none;object-fit:cover}
.fx-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,26,22,.8),rgba(30,26,22,0) 55%)}
.fx-cap-in{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;display:grid;gap:6px}
.fx-ph{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2}
.fx-pd{display:block;font-size:16px;line-height:1.45}
.fx-panel:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.fx-on .fx-panel{transition:flex .6s cubic-bezier(.3,.9,.3,1)}
.fx-on .fx-panel.is-open{flex:4.2}
.fx-on .fx-panel img{transition:transform .8s ease}
.fx-on .fx-panel.is-open img{transform:translateX(var(--fx-px,0))}
.fx-on .fx-ph{white-space:nowrap}
.fx-on .fx-panel:not(.is-open) .fx-pd{display:none}
.fx-on .fx-panel.is-open .fx-pd{animation:fx-rise .4s .15s both}
@keyframes fx-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fx-on .fx-panel:not(.is-open) .fx-ph{writing-mode:vertical-rl;transform:rotate(180deg)}
/* 4. logo loop */
.fx-loop{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fx-track{display:flex;width:max-content;animation:fx-marquee 38s linear infinite}
.fx-loop:hover .fx-track,.fx-loop:focus-within .fx-track{animation-play-state:paused}
.fx-track ul{display:flex;align-items:center;gap:56px;padding:0 28px;margin:0;list-style:none}
.fx-track a{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.3;text-decoration:none;white-space:nowrap;color:var(--ink);opacity:.72;transition:opacity .2s,color .2s}
.fx-track a:hover,.fx-track a:focus-visible{opacity:1;color:var(--deep)}
.fx-dot{color:var(--adobe)}
@keyframes fx-marquee{to{transform:translateX(-50%)}}
@media (max-width:720px){
  .fx-acc{flex-direction:column;height:auto}
  .fx-panel{flex:none;height:220px}
  .fx-on .fx-panel{height:72px;transition:height .55s cubic-bezier(.3,.9,.3,1)}
  .fx-on .fx-panel.is-open{flex:none;height:340px}
  .fx-on .fx-panel:not(.is-open) .fx-ph{writing-mode:horizontal-tb;transform:none}
  .fx-on .fx-frame{transform:scale(.78);border-radius:90px 90px 0 0}
  .fx-track a{font-size:22px}
  .fx-track ul{gap:36px;padding:0 18px}
}
@media (prefers-reduced-motion: reduce){
  .fx-track{animation:none;width:auto}
  .fx-track ul{flex-wrap:wrap;justify-content:center;gap:12px 32px}
  .fx-track ul[aria-hidden]{display:none}
  .fx-loop{-webkit-mask-image:none;mask-image:none}
  .fx-rot .fx-out,.fx-rot .fx-in,.fx-on .fx-panel.is-open .fx-pd{animation:none}
}