/* ==========================================================================
   Premium animation add-on (experimental) — every page except Home.
   Loaded with assets/js/premium.js. To switch it off, remove the premium.css
   <link> and the premium.js <script> from a page (see README).
   All states below only apply once premium.js has added html.pm, so the site
   still shows everything if the script never runs.
   ========================================================================== */

@property --ps { syntax: "<number>"; inherits: false; initial-value: 1.15; }

/* ---------- Scroll progress bar under the sticky header ---------- */
.pm-progress { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 3px; background: var(--red);
  transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; pointer-events: none; }

/* ---------- Headings: words rise from behind a mask, one after another ---------- */
.pm .pw { display: inline-block; clip-path: inset(-.25em -.15em -.18em -.15em); }
.pm .pw-i { display: inline-block; transform: translate3d(0, 125%, 0) rotate(5deg); transform-origin: 0 100%;
  transition: transform 1.15s cubic-bezier(.19, 1, .22, 1); transition-delay: var(--d, 0s); }
.pm .pm-words.is-in .pw-i { transform: none; }
.pm .hero__title, .pm .certs__title, .pm .dist__title { animation: none !important; }
.pm .pm-line { display: block; will-change: transform; }

/* ---------- Statements: words light up as you scroll through them ---------- */
.pm .sw { opacity: .14; transition: opacity .4s ease; }
.pm .sw.on { opacity: 1; }

/* ---------- Photos: slow parallax depth (and a cinematic zoom on hero photos) ---------- */
.pm .pm-px { transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.15)) !important;
  transition: clip-path 1.25s cubic-bezier(.77, 0, .18, 1), --ps 3.2s cubic-bezier(.2, .7, .2, 1) !important;
  transition-delay: var(--rv-delay, 0s) !important; will-change: transform; }
/* banners (and the certifications photo) are never zoomed, so the whole photo shows at its own sharpness */
.pm .hero__bg.pm-px, .pm .certs__side > img.pm-px { transform: none !important; }

/* ---------- Images that open like a curtain ---------- */
.pm .pm-curtain { clip-path: inset(0 100% 0 0); transform: scale(1.18); transform-origin: 30% 50%;
  transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1), transform 1.8s cubic-bezier(.19, 1, .22, 1);
  transition-delay: var(--d, 0s); }
.pm .pm-curtain.is-in { clip-path: inset(0 0 0 0); transform: none; }

/* ---------- About: chapter photos and commitment photos come in from the left, their text from the right
   (main.js does the sliding; this only makes the distance longer) ---------- */
.pm .chapter, .pm .pillar-imgs { --rv-x: calc(190 * var(--u)); }

/* ---------- Brands: the photo slides out from behind the logo card ---------- */
.pm .brand-card { position: relative; z-index: 2; }
.pm .pm-from-card { --fx: -45%; --fy: 0%; opacity: 0; transform: translate3d(var(--fx), var(--fy), 0);
  transition: transform 1.6s cubic-bezier(.19, 1, .22, 1), opacity 1s ease; transition-delay: var(--d, 0s); }
.pm .brand-row--reverse .pm-from-card { --fx: 45%; }
.pm .pm-from-card.is-in { opacity: 1; transform: none; }

/* ---------- Logos and icons pop in ---------- */
.pm .pm-pop { opacity: 0; transform: scale(.4) rotate(-14deg);
  transition: transform .9s cubic-bezier(.34, 1.56, .64, 1), opacity .45s ease; transition-delay: var(--d, 0s); }
.pm .pm-pop.is-in { opacity: 1; transform: none; }

/* ---------- Cards and tiles flip up in 3D ---------- */
.pm .pm-flip { opacity: 0; transform: perspective(1400px) rotateX(16deg) translate3d(0, 70px, 0) scale(.95); transform-origin: 50% 0;
  transition: transform 1.25s cubic-bezier(.19, 1, .22, 1), opacity .8s ease; transition-delay: var(--d, 0s); }
.pm .pm-flip.is-in { opacity: 1; transform: none; }

/* ---------- Boxes zoom in ---------- */
.pm .pm-zoom { opacity: 0; transform: scale(.9);
  transition: transform 1.2s cubic-bezier(.19, 1, .22, 1), opacity .8s ease; transition-delay: var(--d, 0s); }
.pm .pm-zoom.is-in { opacity: 1; transform: none; }

/* ---------- Lines and borders draw themselves ---------- */
.pm .pillar + .pillar { position: relative; border-left-color: transparent; }
.pm .pillar + .pillar::before { content: ""; position: absolute; left: calc(-1.3 * var(--u)); top: 0; bottom: 0; border-left: calc(1.3 * var(--u)) solid var(--rule);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.4s cubic-bezier(.65, 0, .35, 1); transition-delay: var(--d, 0s); }
.pm .pillar.is-in + .pillar::before, .pm .pillar + .pillar.is-in::before { transform: none; }

.pm .contact-cols::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.5s cubic-bezier(.65, 0, .35, 1) .2s; }
.pm .contact-cols.is-in::before { transform: none; }

.pm .cert__divider { position: relative; overflow: visible; border-top-color: transparent; }
.pm .cert__divider::after { content: ""; position: absolute; left: 0; right: 0; top: calc(-1.3 * var(--u)); height: calc(1.3 * var(--u)); min-height: 1px; background: rgba(255,255,255,.9);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.65, 0, .35, 1); transition-delay: var(--d, 0s); }
.pm .cert__divider.is-in::after { transform: none; }

/* boxes: the four sides draw in from the corners, clockwise */
.pm .pm-border { position: relative; border-color: transparent !important; }
.pm .pm-border::after { content: ""; position: absolute; inset: calc(-1.3 * var(--u)); z-index: 1; pointer-events: none;
  --c: var(--pm-border, var(--black)); --w: calc(1.3 * var(--u));
  background:
    linear-gradient(var(--c), var(--c)) left top / 0 var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--w) 0 no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 0 var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--w) 0 no-repeat;
  transition: background-size 1.7s cubic-bezier(.65, 0, .35, 1); transition-delay: var(--d, 0s); }
.pm .pm-border.is-in::after { background-size: 100% var(--w), var(--w) 100%, 100% var(--w), var(--w) 100%; }
.pm .statement.pm-border { --pm-border: var(--white); }
.pm .statement.pm-border::after { inset: calc(-1.4 * var(--u)); --w: calc(1.4 * var(--u)); }

.pm .pm-ul { padding-bottom: .06em; background: linear-gradient(var(--red), var(--red)) 0 100% / 0% max(2px, calc(3 * var(--u))) no-repeat;
  transition: background-size 1.1s cubic-bezier(.65, 0, .35, 1); transition-delay: var(--d, 0s); }
.pm .is-in > .pm-ul { background-size: 100% max(2px, calc(3 * var(--u))); }

/* ---------- Gentle float on brand logos (after they appear) ---------- */
@keyframes pm-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -9px, 0); } }
.pm .pm-floating { animation: pm-float 5.5s ease-in-out infinite; }

/* ---------- Media page: sliding underline under the active tab ---------- */
.pm .tabs { position: relative; }
.pm-tab-ind { position: absolute; left: 0; top: 0; height: calc(4 * var(--u)); min-height: 2px; background: var(--red); pointer-events: none;
  transition: transform .6s cubic-bezier(.65, 0, .35, 1), width .6s cubic-bezier(.65, 0, .35, 1); }

@media (max-width: 900px) {
  .pm .pw-i { transform: translate3d(0, 125%, 0) rotate(4deg); }
  .pm .pm-flip { transform: perspective(900px) rotateX(14deg) translate3d(0, 44px, 0) scale(.95); }
  .pm .pillar:nth-child(3)::before { display: none; }
  .pm .tabs { row-gap: 14px; }
  .pm .chapter, .pm .pillar-imgs { --rv-x: 80px; }
  .pm .pm-from-card, .pm .brand-row--reverse .pm-from-card { --fx: 0%; --fy: 45%; }   /* phones: the card is below the photo */
  @keyframes pm-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }
}