/* =========================================================
   TEXT ANIMATION EFFECTS  (added by js/main.js; no JS = normal text)
   1) headings: word-by-word mask reveal   2) eyebrow: letter-spacing close-in
   
   ========================================================= */

body{
              font-family: var(--serif, "Poppins", system-ui, Arial, sans-serif);

}


.tw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.twi{display:inline-block;will-change:transform}
.txa .twi{transform:translateY(115%) rotate(5deg);transform-origin:0 100%;opacity:0;transition:transform .9s cubic-bezier(.2,.75,.2,1),opacity .6s ease;transition-delay:calc(var(--i) * 70ms)}
.txa .t-in .twi,.txa .tsplit.t-in .twi{transform:none;opacity:1}

.txa .eyebrow,.txa .tf-facility-head>span{opacity:0;letter-spacing:.7em;transition:opacity .9s ease,letter-spacing 1.2s cubic-bezier(.2,.7,.2,1)}
.txa .eyebrow.t-in,.txa .tf-facility-head>span.t-in{opacity:1;letter-spacing:.3em}
.txa .phero .eyebrow{letter-spacing:.3em}

.txa .eyebrow.t-in {
  color: aliceblue;
  font-size: 12px;
}

@media(prefers-reduced-motion:reduce){
  .txa .twi,.txa .eyebrow,.txa .tf-facility-head>span{transition:none;transform:none;opacity:1;letter-spacing:.3em}
}


/* ===== About arch image: slow auto-pan, left to right (and back) - desktop + mobile =====
   The image is made 2x wider than the arch and slid sideways with the "translate" property,
   so it does not clash with the existing zoom-in (transform) and runs smoothly on phones. */
.ab2-arch img{
  width:200%;max-width:none;height:100%;object-fit:cover;object-position:50% 50%;
  translate:0 0;
  animation:abPan 30s ease-in-out 2.4s infinite alternate;
  will-change:translate;
}
@keyframes abPan{from{translate:0 0}to{translate:-50% 0}}