/* Casa Tabachin — home 2: scroll-driven film (only loaded on the home page). */

/* header floats over the film until the film is scrolled past */
.pg-index .site-h{position:fixed;left:0;right:0;transition:background .4s,box-shadow .3s}
.pg-index:not(.sf-past) .site-h:not(:has(#nav.open)){background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,0));box-shadow:none}
.pg-index:not(.sf-past) .site-h:not(:has(#nav.open)) .logo,
.pg-index:not(.sf-past) .site-h:not(:has(#nav.open)) .logo b{color:#fff}
.pg-index:not(.sf-past) .site-h:not(:has(#nav.open)) .lang,
.pg-index:not(.sf-past) .site-h:not(:has(#nav.open)) .burger{color:#fff;border-color:rgba(255,255,255,.45)}
.pg-index:not(.sf-past) .site-h:not(:has(#nav.open)) .btn-dark{background:#fff;color:var(--ink);border-color:#fff}
.pg-index:not(.sf-past) .site-h:not(:has(#nav.open)) .btn-dark:hover{background:var(--red);color:#fff;border-color:var(--red)}
@media (min-width:1181px){
  .pg-index:not(.sf-past) #nav > ul > li > a,
  .pg-index:not(.sf-past) #nav .sub-t{color:#fff}
}

/* the scroll track: its height sets how much scrolling the film takes (JS refines it) */
.sf{position:relative;height:900vh;padding:0;background:#0d0d0d}
.sf-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#fff}
.sf-poster img,.sf-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-v{opacity:0;transition:opacity .6s}
.sf.ready .sf-v{opacity:1}
.sf-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0) 42%,rgba(0,0,0,0) 58%,rgba(0,0,0,.5)),linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 45%)}

/* captions — shown while the film time is inside [data-in, data-out] */
.sf-cap{position:absolute;z-index:2;max-width:560px;opacity:0;transform:translateY(26px);pointer-events:none;
  transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.sf-cap.on{opacity:1;transform:none;pointer-events:auto}
.sf-cap .kicker{color:rgba(255,255,255,.85)}
.sf-cap h1,.sf-cap h2{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35);margin:14px 0 14px}
.sf-cap em{color:#f4d7b0}
.sf-cap h1{font-size:clamp(46px,7vw,112px);line-height:.98}
.sf-cap h2{font-size:clamp(36px,4.6vw,72px);line-height:1.02}
.sf-cap p{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:rgba(255,255,255,.92);max-width:470px;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.p-left{left:var(--gut);bottom:clamp(110px,16vh,170px)}
.p-right{right:var(--gut);bottom:clamp(110px,16vh,170px);text-align:right}
.p-right p{margin-left:auto}
.p-intro{left:50%;top:50%;transform:translate(-50%,calc(-50% + 26px));text-align:center;max-width:min(940px,calc(100% - 2*var(--gut)))}
.p-intro.on{transform:translate(-50%,-50%)}
.p-intro p{margin:0 auto}
.p-end .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:#fff;color:var(--ink)}

.sf-suites{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;margin-top:6px}
.sf-suites a{display:flex;flex-direction:column;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.3);color:#fff;font-family:var(--serif);font-size:22px;transition:border-color .25s,padding .25s}
.sf-suites a:hover{border-color:#fff;padding-left:6px}
.sf-suites small{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* chapter rail + progress */
.sf-rail{position:absolute;z-index:3;right:var(--gut);top:50%;transform:translateY(-50%);display:flex;gap:16px}
.sf-rail ol{list-style:none;display:flex;flex-direction:column;gap:6px}
.sf-rail button{display:flex;align-items:center;gap:12px;justify-content:flex-end;background:none;border:0;color:rgba(255,255,255,.55);cursor:pointer;font:inherit;padding:8px 0;min-height:44px;text-align:right;transition:color .3s}
.sf-rail button b{font-weight:500;font-size:11px;letter-spacing:.2em}
.sf-rail button span{font-size:13px;letter-spacing:.08em;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .4s,opacity .3s}
.sf-rail:hover button span,.sf-rail button.on span{max-width:140px;opacity:1}
.sf-rail button:hover,.sf-rail button.on{color:#fff}
.sf-rail button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sf-bar{width:2px;border-radius:2px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.sf-bar i{position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;transform-origin:top;transform:scaleY(0)}

.sf-hint{position:absolute;z-index:2;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;transition:opacity .5s}
.sf-hint i{width:1px;height:46px;background:linear-gradient(#fff,rgba(255,255,255,0));animation:sfHint 1.8s ease-in-out infinite;transform-origin:top}
.sf.moved .sf-hint{opacity:0}
@keyframes sfHint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* loading line while the film downloads */
.sf-load{position:absolute;z-index:4;left:0;right:0;top:0;height:2px;transition:opacity .6s}
.sf-load i{display:block;height:100%;width:100%;background:var(--red);transform-origin:left;transform:scaleX(0);transition:transform .3s}
.sf.ready .sf-load{opacity:0}

/* facts strip lifts over the end of the film */
.facts-band{position:relative;z-index:3;padding:0 0 clamp(30px,5vw,70px)}
.pg-index #suites{padding-top:clamp(40px,6vw,90px)}

/* without JS (or with reduced data) the film is a still hero */
.no-js .sf{height:auto}
.no-js .sf-stage{position:relative}
.no-js .sf-cap.p-intro:first-of-type{opacity:1;transform:translate(-50%,-50%)}
.no-js .sf-rail,.no-js .sf-hint,.no-js .sf-load{display:none}

@media (max-width:760px){
  .sf-rail{top:auto;bottom:22px;right:auto;left:var(--gut);transform:none;flex-direction:column-reverse;gap:10px;width:calc(100% - 2*var(--gut))}
  .sf-rail ol{flex-direction:row;justify-content:space-between;gap:4px}
  .sf-rail button{padding:4px 0;min-height:44px;justify-content:flex-start}
  .sf-rail button span{max-width:none;opacity:1;font-size:11px}
  .sf-rail button:not(.on) span{display:none}
  .sf-bar{width:100%;height:2px}
  .sf-bar i{transform-origin:left;transform:scaleX(0)}
  .sf-hint{display:none}
  .p-left,.p-right{left:var(--gut);right:var(--gut);bottom:110px;text-align:left;max-width:none}
  .p-right p{margin-left:0}
  .sf-shade{background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.1) 60%,rgba(0,0,0,.3))}
  .sf-suites a{font-size:18px;padding:7px 0}
}
@media (prefers-reduced-motion:reduce){
  .sf-cap{transition:opacity .3s}
  .sf-hint i{animation:none}
}