/* BIJU — section transitions. Put data-tx="…" on a section; assets/transitions.js does the wiring.
   over   — the previous section pins, this one slides over it (rounded top, soft shadow)
   unfold — starts as an inset rounded card, expands to full width while scrolling
   bridge — a wide photo (data-img) straddles the boundary into this section, with slight parallax
   float  — inset panel with big radius, deep shadow and a hairline gold frame, overlapping neighbours
   arch   — top edge is an arch that flattens while scrolling
   fade   — no edge: neighbouring colours dissolve into this section */
:root{--bh:calc((min(1240px,100vw) - 64px) * 8 / 21 / 2);--ah:clamp(60px,9vw,140px);--fh:clamp(48px,5vw,80px)}
[data-tx]{position:relative}
[data-tx]>.wrap{position:relative;z-index:2}

/* over */
.tx-pin{position:sticky;top:var(--pin,0px)}
[data-tx="over"]{z-index:3;border-radius:36px 36px 0 0;box-shadow:0 -34px 70px -34px rgba(7,30,33,.45)}

/* unfold */
[data-tx="unfold"]{clip-path:inset(0 calc(var(--k,0) * 4.5%) round calc(var(--k,0) * 44px))}

/* bridge */
.tx-bridge{position:relative;z-index:3;background:linear-gradient(var(--from,#fff) 50%,transparent 50%)}
.tx-bridge .ph{position:relative;aspect-ratio:21/8;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.65)}
.tx-bridge .ph>div{position:absolute;inset:-12% 0;background:center/cover;transform:translate3d(0,var(--py,0px),0)}
.tx-bridge .ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
[data-tx="bridge"]{margin-top:calc(var(--bh) * -1);padding-top:calc(var(--bh) + 90px) !important}

/* float */
[data-tx="float"]{margin:-56px clamp(10px,1.6vw,24px);border-radius:32px;z-index:3;box-shadow:0 50px 90px -50px rgba(7,30,33,.75)}
.tx-frame{position:absolute;inset:14px;border:1px solid rgba(255,195,108,.16);border-radius:22px;pointer-events:none;z-index:1}

/* arch */
.tx-before-arch{padding-bottom:calc(110px + var(--ah)) !important}
[data-tx="arch"]{margin-top:calc(var(--ah) * -1);padding-top:calc(110px + var(--ah)) !important;z-index:3;
  border-top-left-radius:50% calc(var(--k,0) * var(--ah));border-top-right-radius:50% calc(var(--k,0) * var(--ah))}

/* fade */
/* short band, eased stops: light colour drops off fast so there is no long muddy grey zone */
[data-tx="fade"]{padding-top:calc(var(--fh) + 60px) !important;padding-bottom:calc(var(--fh) + 60px) !important}
.tx-fade{position:absolute;left:0;right:0;height:var(--fh);pointer-events:none;z-index:1}
.tx-fade.t{top:0;background:linear-gradient(in oklab,var(--c),color-mix(in oklab,var(--c) 45%,transparent) 18%,color-mix(in oklab,var(--c) 14%,transparent) 45%,color-mix(in oklab,var(--c) 3%,transparent) 75%,transparent)}
.tx-fade.b{bottom:0;background:linear-gradient(in oklab,transparent,color-mix(in oklab,var(--c) 3%,transparent) 25%,color-mix(in oklab,var(--c) 14%,transparent) 55%,color-mix(in oklab,var(--c) 45%,transparent) 82%,var(--c))}

@media (max-width:640px){
  :root{--bh:calc((100vw - 40px) * 10 / 16 / 2)}
  .tx-bridge .ph{aspect-ratio:16/10}
  [data-tx="over"]{border-radius:24px 24px 0 0}
  [data-tx="float"]{margin:-40px 8px;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){.tx-pin{position:static}}