/* Section entrance transitions: one idea, fabric being unrolled. Only active when sections.js adds .js-sec. */

/* 01 Klien: the rules around the numbers unroll from the centre, then the client carousel slides in. */
.js-sec #portofolio .highlight-band{position:relative;border-top-color:transparent;border-bottom-color:transparent}
.js-sec #portofolio .highlight-band::before,.js-sec #portofolio .highlight-band::after{content:'';position:absolute;left:0;right:0;height:1px;background:var(--line);transform:scaleX(0);transition:transform 1.4s cubic-bezier(.65,0,.15,1)}
.js-sec #portofolio .highlight-band::before{top:-1px}
.js-sec #portofolio .highlight-band::after{bottom:-1px;transition-delay:.15s}
.js-sec #portofolio.is-in .highlight-band::before,.js-sec #portofolio.is-in .highlight-band::after{transform:scaleX(1)}
.js-sec #portofolio .marquee-wrap{opacity:0;transform:translateX(48px);transition:opacity .9s ease .55s,transform 1.3s cubic-bezier(.22,1,.36,1) .55s}
.js-sec #portofolio.is-in .marquee-wrap{opacity:1;transform:none}

/* 03 Tentang kami: heading lines rise, the navy card unrolls left to right with a gold roller on its edge,
   then the year rolls in digit by digit, the rule draws, the quote rises line by line and the frame settles. */
.js-sec #tentang .ln{display:block;clip-path:inset(-.25em -1em -.3em -1em)}
.js-sec #tentang .ln-in{display:block;transform:translateY(125%);transition:transform 1.25s cubic-bezier(.5,0,.1,1);transition-delay:calc(var(--d,0s) + var(--i,0) * .12s)}
.js-sec #tentang.is-in .ln-in{transform:none}
.js-sec #tentang .about-heading>p:not(.eyebrow),.js-sec #tentang .about-heading>.text-link{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.js-sec #tentang.is-in .about-heading>p:not(.eyebrow){opacity:1;transform:none;transition-delay:.45s}
.js-sec #tentang.is-in .about-heading>p:not(.eyebrow)+p{transition-delay:.6s}
.js-sec #tentang.is-in .about-heading>.text-link{opacity:1;transform:none;transition-delay:.75s}

/* polish.js also reveals this card on its own clipped box; keep it opaque so the unroll is what shows. */
.js-sec #tentang .about-statement.pl-reveal{opacity:1;transform:none}
.js-sec #tentang .about-statement{clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.65,0,.15,1) .3s}
.js-sec #tentang.is-in .about-statement{clip-path:inset(0)}
.js-sec #tentang .about-statement::after{content:'';position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent,#e0c47c 12%,#e0c47c 88%,transparent);box-shadow:0 0 18px rgba(224,196,124,.6);pointer-events:none;z-index:2;transition:left 1.5s cubic-bezier(.65,0,.15,1) .3s,opacity .6s ease 1.7s}
.js-sec #tentang.is-in .about-statement::after{left:calc(100% - 2px);opacity:0}
.js-sec #tentang .about-statement::before{opacity:0;transition:opacity 1s ease 2.4s}
.js-sec #tentang.is-in .about-statement::before{opacity:1}
.js-sec #tentang .about-statement>.eyebrow{opacity:0;transition:opacity .8s ease 1.4s}
.js-sec #tentang.is-in .about-statement>.eyebrow{opacity:1}
.js-sec #tentang .big-word>.dg{display:inline-block;font:inherit;letter-spacing:inherit;color:inherit;margin:0;line-height:inherit;clip-path:inset(-.2em -.1em 0 -.1em)}
.js-sec #tentang .big-word .dg>span{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.22,1,.36,1);transition-delay:calc(1.5s + var(--i,0) * .09s)}
.js-sec #tentang.is-in .big-word .dg>span{transform:none}
.js-sec #tentang .statement-line{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.65,0,.15,1) 1.7s}
.js-sec #tentang.is-in .statement-line{transform:scaleX(1)}

@media print{
  .js-sec [data-unroll] *{clip-path:none!important;opacity:1!important;transform:none!important}
  .js-sec #tentang .about-statement::after{display:none}
  .js-sec #tentang .about-statement::before{opacity:1}
  .js-sec #portofolio .highlight-band{border-top-color:var(--line);border-bottom-color:var(--line)}
}