/* Hero copy waits for its entrance timeline (scroll-motion.js). */
html.pi-motion .pi-hero__content > .pi-eyebrow,
html.pi-motion .pi-hero__title,
html.pi-motion .pi-hero__lede,
html.pi-motion .pi-hero__actions > *,
html.pi-motion .pi-searchwrap .pi-search,
html.pi-motion .pi-pagehead__inner .pi-eyebrow,
html.pi-motion .pi-pagehead h1,
html.pi-motion .pi-pagehead__lede,
html.pi-motion .pi-headstat > *,
html.pi-motion .pi-phero__tags,
html.pi-motion .pi-phero__place,
html.pi-motion .pi-phero__title {
  opacity: 0;
}

.pi-word {
  display: inline-block;
  will-change: transform, opacity;
}

.pi-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pi-parallax-frame {
  overflow: hidden;
}

/* Parallaxed images are moved by GSAP on every scroll frame; a CSS transform
   transition would trail behind each of those writes. */
.pi-parallax-frame img {
  transition: none;
}

/* Card hover: a 1px ink stroke runs clockwise from the top left corner over
   the grey border, then fades out on leave. One registered number drives all
   four sides so a single easing curve spans the whole lap; the property and
   the reduced motion query cannot be expressed in Breakdance selectors. */
@property --pi-sweep {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.pi-card,
.pi-line,
.pi-pp-plan,
.pi-pp-sheets__chip,
.pi-contactcard {
  position: relative;
  isolation: isolate;
}

.pi-card::after,
.pi-line::after,
.pi-pp-plan::after,
.pi-pp-sheets__chip::after,
.pi-contactcard::after {
  --pi-sweep: 0;
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(var(--pi-ink), var(--pi-ink)) left top / calc(clamp(0, var(--pi-sweep), 1) * 100%) 1px no-repeat,
    linear-gradient(var(--pi-ink), var(--pi-ink)) right top / 1px calc(clamp(0, var(--pi-sweep) - 1, 1) * 100%) no-repeat,
    linear-gradient(var(--pi-ink), var(--pi-ink)) right bottom / calc(clamp(0, var(--pi-sweep) - 2, 1) * 100%) 1px no-repeat,
    linear-gradient(var(--pi-ink), var(--pi-ink)) left bottom / 1px calc(clamp(0, var(--pi-sweep) - 3, 1) * 100%) no-repeat;
  /* Rewinds only once faded out, so the next hover draws from the corner again. */
  transition: opacity 0.2s var(--pi-ease), --pi-sweep 0s linear 0.2s;
}

.pi-card:hover::after,
.pi-line:hover::after,
.pi-pp-plan:hover::after,
.pi-pp-sheets__chip:hover::after,
.pi-contactcard:hover::after,
:is(.pi-card, .pi-line, .pi-pp-plan, .pi-pp-sheets__chip, .pi-contactcard).is-scrollhover::after {
  --pi-sweep: 4;
  opacity: 1;
  transition: opacity 0s, --pi-sweep 0.85s cubic-bezier(0.5, 0, 0.2, 1);
}

/* Touch screens (scroll-hover.js): a slower lap, read while scrolling rather than chasing a pointer. */
:is(.pi-card, .pi-line, .pi-pp-plan, .pi-pp-sheets__chip, .pi-contactcard).is-scrollhover::after {
  transition: opacity 0s, --pi-sweep 2s cubic-bezier(0.5, 0, 0.2, 1);
}

/* The html prefix outranks the Breakdance selector files, which print after this one. */
@media (prefers-reduced-motion: reduce) {
  .pi-card::after,
  .pi-line::after,
  .pi-pp-plan::after,
  .pi-pp-sheets__chip::after,
  .pi-contactcard::after,
  :is(.pi-card, .pi-line, .pi-pp-plan, .pi-pp-sheets__chip, .pi-contactcard).is-scrollhover::after,
  html .pi-nav__link::after,
  html .pi-btn,
  html .pi-search__submit,
  html .pi-doc {
    transition: none;
  }
}

/* Pointer light (pointer-glow.js sets the position and fades --pi-light with GSAP;
   on touch screens it sweeps across by itself, pi-pointer-auto).
   Glow: a soft green light over the dark bands, above the content with screen
   blending, so it also lights opaque cells without hiding their text.
   Light: a larger pool on the project hero that raises the brightness of the
   photo and scrim beneath it (a masked backdrop filter, not a white wash),
   under the copy. */
.pi-pointer-glow {
  position: relative;
  isolation: isolate;
}

.pi-pointer-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(var(--pi-glow-size, 1440px) circle at var(--pi-glow-x, 50%) var(--pi-glow-y, 50%), oklch(0.7 0.24 146 / 0.15), oklch(0.7 0.24 146 / 0.05) 40%, transparent 70%);
  mix-blend-mode: screen;
  opacity: var(--pi-light, 0);
}

/* The light cards and the form of the project contact band sit above the
   glow: screen blending would tint their black swipe fills and the ink submit
   green, while on their light grounds the glow shows nothing anyway. */
html .pi-pointer-glow .pi-pcontact__cards,
html .pi-pointer-glow .pi-pcontact__form {
  position: relative;
  z-index: 2;
}

.pi-pointer-light {
  isolation: isolate;
}

.pi-pointer-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: brightness(1.45);
  backdrop-filter: brightness(1.45);
  -webkit-mask-image: radial-gradient(var(--pi-glow-size, 1100px) circle at var(--pi-glow-x, 50%) var(--pi-glow-y, 50%), #000, rgb(0 0 0 / 0.45) 35%, transparent 70%);
  mask-image: radial-gradient(var(--pi-glow-size, 1100px) circle at var(--pi-glow-x, 50%) var(--pi-glow-y, 50%), #000, rgb(0 0 0 / 0.45) 35%, transparent 70%);
  opacity: var(--pi-light, 0);
}

/* Touch screens: no pointer, so the light sweeps across on its own; a phone
   sized pool, otherwise the circle covers the whole section and never moves. */
.pi-pointer-auto.pi-pointer-glow {
  --pi-glow-size: 620px;
}

.pi-pointer-auto.pi-pointer-light {
  --pi-glow-size: 520px;
}

/* The home hero stacks its scrim at 2 and its copy at 3. */
.pi-hero.pi-pointer-light::after {
  z-index: 2;
}


/* Button fill swipe under GSAP (button-swipe.js adds is-swipe): the fill is
   the band between --pi-swipe-a and --pi-swipe-b, so the CSS background-size
   transition is switched off. The html prefix outranks the Breakdance rules. */
html .pi-search__submit.is-swipe {
  --pi-btn-fill: var(--pi-green);
}

html .pi-doc.is-swipe {
  --pi-btn-fill: var(--pi-ink);
}

html .pi-pp-more.is-swipe {
  --pi-btn-fill: var(--pi-ink);
}

html .pi-pp-gallerybtn.is-swipe {
  --pi-btn-fill: var(--pi-white);
}

/* Breakdance form submit: the dark button of the forms; its :hover turns the
   background green, so the resting ink is pinned and the green comes as fill. */
html .pi-form .breakdance-form .breakdance-form-button__submit.is-swipe {
  --pi-btn-fill: var(--pi-green);
  background-color: var(--pi-ink);
}

html .pi-btn.is-swipe,
html .pi-search__submit.is-swipe,
html .pi-doc.is-swipe,
html .pi-pp-more.is-swipe,
html .pi-pp-gallerybtn.is-swipe,
html .pi-form .breakdance-form .breakdance-form-button__submit.is-swipe {
  background-image: linear-gradient(var(--pi-swipe-dir, to right), transparent var(--pi-swipe-a, 0%), var(--pi-btn-fill, transparent) var(--pi-swipe-a, 0%), var(--pi-btn-fill, transparent) var(--pi-swipe-b, 0%), transparent var(--pi-swipe-b, 0%));
  background-position: 0 0;
  background-size: 100% 100%;
  transition: color 0.2s var(--pi-ease), border-color 0.2s var(--pi-ease);
}

/* Colours by fill state. Each pair restates the resting and the filled look of
   one variant, at a specificity above the Breakdance :hover rules, so hovering
   alone changes nothing until the fill has passed halfway. */
html .pi-btn--primary.is-swipe:not(.is-filled) {
  border-color: var(--pi-green-bright);
  color: var(--pi-ink-deep);
}

html .pi-btn--primary.is-swipe.is-filled {
  border-color: var(--pi-white);
  color: var(--pi-ink-deep);
}

html .pi-btn--dark.is-swipe:not(.is-filled) {
  border-color: var(--pi-ink);
  color: var(--pi-white);
}

html .pi-btn--dark.is-swipe.is-filled {
  border-color: var(--pi-green);
  color: var(--pi-white);
}

html .pi-btn--outline.is-swipe:not(.is-filled) {
  border-color: var(--pi-border-strong);
  color: var(--pi-text);
}

html .pi-btn--outline.is-swipe.is-filled {
  border-color: var(--pi-ink);
  color: var(--pi-white);
}

html .pi-btn--outline-dark.is-swipe:not(.is-filled) {
  border-color: var(--pi-outline-dark);
  color: var(--pi-on-dark);
}

html .pi-btn--outline-dark.is-swipe.is-filled {
  border-color: var(--pi-white);
  color: var(--pi-ink-deep);
}

html .pi-pp-more.is-swipe:not(.is-filled) {
  border-color: oklch(0.82 0.01 145);
  color: var(--pi-text);
}

html .pi-pp-more.is-swipe.is-filled {
  border-color: var(--pi-ink);
  color: var(--pi-white);
}

html .pi-pp-gallerybtn.is-swipe:not(.is-filled) {
  border-color: oklch(0.50 0.02 150);
  color: var(--pi-white);
}

html .pi-pp-gallerybtn.is-swipe.is-filled {
  border-color: var(--pi-white);
  color: var(--pi-ink-deep);
}

html .pi-form .breakdance-form .breakdance-form-button__submit.is-swipe:not(.is-filled) {
  border-color: var(--pi-ink);
  color: var(--pi-white);
}

html .pi-form .breakdance-form .breakdance-form-button__submit.is-swipe.is-filled {
  border-color: var(--pi-green);
  color: var(--pi-white);
}

html .pi-doc.is-swipe:not(.is-filled),
html .pi-doc.is-swipe:not(.is-filled) .pi-doc__label,
html .pi-doc.is-swipe:not(.is-filled) .pi-doc__action {
  color: var(--pi-ink);
}

html .pi-doc.is-swipe.is-filled,
html .pi-doc.is-swipe.is-filled .pi-doc__label,
html .pi-doc.is-swipe.is-filled .pi-doc__action {
  color: var(--pi-white);
}

html[dir="rtl"] .is-swipe {
  --pi-swipe-dir: to left;
}

/* Box hover: light boxes of the hairline grids and the unit and press rows take
   the tint, the light counterpart of the dark feature cells' lift. One shared
   rule for every page and language; the html prefix outranks the Breakdance
   cell backgrounds. */
html .pi-feature:not(.pi-feature--dark),
html .pi-fact,
html .pi-dept,
html .pi-job,
html .pi-keyfact,
html .pi-pp-group,
html .pi-pp-units__row:not(.pi-pp-units__row--head),
html .pi-pp-news__row {
  transition: background-color 0.35s var(--pi-ease);
}

html .pi-feature:not(.pi-feature--dark):hover,
html .pi-fact:hover,
html .pi-dept:hover,
html .pi-job:hover,
html .pi-keyfact:hover,
html .pi-pp-group:hover,
html .pi-pp-units__row:not(.pi-pp-units__row--head):hover,
html .pi-pp-news__row:hover,
html .is-scrollhover:is(.pi-feature:not(.pi-feature--dark), .pi-fact, .pi-dept, .pi-job, .pi-keyfact, .pi-pp-group, .pi-pp-units__row, .pi-pp-news__row) {
  background-color: var(--pi-tint);
}

/* Touch screens (scroll-hover.js): the dark cells' lift and the card photo
   zoom follow the scroll position the same way. */
html .pi-feature--dark.is-scrollhover,
html .pi-pp-navigator__count.is-scrollhover {
  background-color: color-mix(in oklch, var(--pi-ink), var(--pi-white) 5%);
}

html .pi-card.is-scrollhover .pi-card__img {
  transform: scale(1.03);
}

/* Colour sweep through the accent words of a heading, looping back and forth
   (the apartment navigator title, carried over from the old Palota page). The
   html prefix outranks the Breakdance heading colours. */
html .pi-shine {
  background: linear-gradient(to right, #7953cd 20%, #00affa 30%, #0190cd 70%, #764ada 80%);
  background-size: 500% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: pi-shine 5s ease-in-out infinite alternate;
}

@keyframes pi-shine {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html .pi-shine {
    animation: none;
    background-position: 50% 50%;
  }
}