/*
  Progressive Offset switchable entrance animation library.
  Current type and speed live in intro-settings.js so Tideway can control
  them later. No hero image or page content is modified by this file.
*/

.po-intro {
  --po-black: #08090b;
  --po-paper: #ffffff;
  --po-cyan: #10b7c6;
  --po-magenta: #db3f78;
  --po-yellow: #ffc72c;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  overflow: hidden;
  pointer-events: all;
  isolation: isolate;
}

html.po-intro-pending {
  overflow: hidden;
}

html.po-intro-pending .po-intro {
  display: block;
}

.po-intro__surface,
.po-intro__curtain,
.po-intro__split,
.po-intro__press,
.po-intro__ink,
.po-intro__halftone,
.po-intro__paper,
.po-intro__flash,
.po-intro__splat,
.po-intro__cmyk,
.po-intro__brand,
.po-intro__paper-brand {
  position: absolute;
}

.po-intro__surface,
.po-intro__curtain,
.po-intro__press,
.po-intro__halftone,
.po-intro__flash {
  inset: 0;
}

.po-intro__surface,
.po-intro__curtain,
.po-intro__split,
.po-intro__press,
.po-intro__ink,
.po-intro__halftone,
.po-intro__paper,
.po-intro__flash,
.po-intro__splat {
  background-color: var(--po-black);
}

.po-intro__surface,
.po-intro__curtain,
.po-intro__split,
.po-intro__press,
.po-intro__ink,
.po-intro__halftone,
.po-intro__paper,
.po-intro__flash,
.po-intro__splat,
.po-intro__cmyk,
.po-intro__brand,
.po-intro__paper-brand {
  display: none;
}

.po-intro__brand,
.po-intro__paper-brand,
.po-intro__cmyk {
  top: 50%;
  left: 50%;
  width: min(440px, 72vw);
  z-index: 10;
  transform: translate(-50%, -50%);
}

.po-intro__brand,
.po-intro__paper-brand {
  justify-items: center;
  gap: 20px;
  opacity: 0;
}

.po-intro__brand img,
.po-intro__paper-brand img,
.po-intro__cmyk-copy img {
  display: block;
  width: 100%;
  height: auto;
}

.po-intro__brand img {
  filter: grayscale(1) brightness(0) invert(1);
}

.po-intro__brand::after,
.po-intro__paper-brand::after {
  content: "";
  width: min(220px, 52vw);
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--po-cyan) 0 33.33%,
    var(--po-magenta) 33.33% 66.66%,
    var(--po-yellow) 66.66% 100%
  );
}

/* Current curtain wipe */
.po-intro[data-animation="curtain"] .po-intro__curtain,
.po-intro[data-animation="curtain"] .po-intro__brand {
  display: grid;
}

.po-intro[data-animation="curtain"] .po-intro__curtain {
  transform: scaleX(0);
  transform-origin: left center;
  animation: po-curtain var(--po-intro-duration) cubic-bezier(.76,0,.24,1) both;
}

.po-intro[data-animation="curtain"] .po-intro__brand {
  animation: po-logo var(--po-intro-duration) ease both;
}

@keyframes po-curtain {
  0% { transform: scaleX(0); transform-origin: left center; }
  28%, 72% { transform: scaleX(1); transform-origin: left center; }
  100% { transform: translateX(-100%); }
}

/* Split curtain */
.po-intro[data-animation="split"] .po-intro__split,
.po-intro[data-animation="split"] .po-intro__brand {
  display: grid;
}

.po-intro__split {
  top: 0;
  bottom: 0;
  width: 51%;
}

.po-intro__split--left { left: 0; }
.po-intro__split--right { right: 0; }

.po-intro[data-animation="split"] .po-intro__split--left {
  animation: po-split-left var(--po-intro-duration) cubic-bezier(.76,0,.24,1) both;
}

.po-intro[data-animation="split"] .po-intro__split--right {
  animation: po-split-right var(--po-intro-duration) cubic-bezier(.76,0,.24,1) both;
}

.po-intro[data-animation="split"] .po-intro__brand {
  animation: po-logo var(--po-intro-duration) ease both;
}

@keyframes po-split-left {
  0% { transform: translateX(-101%); }
  28%, 72% { transform: translateX(0); }
  100% { transform: translateX(-101%); }
}

@keyframes po-split-right {
  0% { transform: translateX(101%); }
  28%, 72% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* Vertical press wipe */
.po-intro[data-animation="press"] .po-intro__press,
.po-intro[data-animation="press"] .po-intro__brand {
  display: grid;
}

.po-intro__press span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 12px;
  background: linear-gradient(90deg, var(--po-cyan), var(--po-magenta), var(--po-yellow));
}

.po-intro[data-animation="press"] .po-intro__press {
  animation: po-press var(--po-intro-duration) cubic-bezier(.65,0,.35,1) both;
}

.po-intro[data-animation="press"] .po-intro__brand {
  animation: po-logo var(--po-intro-duration) ease both;
}

@keyframes po-press {
  0% { transform: translateY(-102%); }
  30%, 72% { transform: translateY(0); }
  100% { transform: translateY(102%); }
}

/* CMYK registration */
.po-intro[data-animation="cmyk"] .po-intro__surface,
.po-intro[data-animation="cmyk"] .po-intro__cmyk,
.po-intro[data-animation="cmyk"] .po-intro__brand {
  display: grid;
}

.po-intro[data-animation="cmyk"] .po-intro__surface {
  animation: po-surface-out var(--po-intro-duration) ease both;
}

.po-intro__cmyk-copy {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
}

.po-intro__cmyk-copy--c img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(74%) saturate(695%) hue-rotate(138deg) brightness(88%);
}

.po-intro__cmyk-copy--m img {
  filter: brightness(0) saturate(100%) invert(38%) sepia(91%) saturate(1221%) hue-rotate(306deg) brightness(89%);
}

.po-intro__cmyk-copy--y img {
  filter: brightness(0) saturate(100%) invert(85%) sepia(68%) saturate(1633%) hue-rotate(326deg) brightness(105%);
}

.po-intro[data-animation="cmyk"] .po-intro__cmyk-copy--c {
  animation: po-register-c var(--po-intro-duration) cubic-bezier(.22,1,.36,1) both;
}

.po-intro[data-animation="cmyk"] .po-intro__cmyk-copy--m {
  animation: po-register-m var(--po-intro-duration) cubic-bezier(.22,1,.36,1) both;
}

.po-intro[data-animation="cmyk"] .po-intro__cmyk-copy--y {
  animation: po-register-y var(--po-intro-duration) cubic-bezier(.22,1,.36,1) both;
}

.po-intro[data-animation="cmyk"] .po-intro__brand {
  animation: po-register-final var(--po-intro-duration) ease both;
}

@keyframes po-register-c {
  0%, 10% { opacity: 0; transform: translate(-34px, -18px); }
  20% { opacity: .92; }
  48% { opacity: .82; transform: translate(0); }
  58%, 100% { opacity: 0; transform: translate(0); }
}

@keyframes po-register-m {
  0%, 14% { opacity: 0; transform: translate(30px, -12px); }
  24% { opacity: .92; }
  48% { opacity: .82; transform: translate(0); }
  58%, 100% { opacity: 0; transform: translate(0); }
}

@keyframes po-register-y {
  0%, 18% { opacity: 0; transform: translate(-12px, 28px); }
  28% { opacity: .92; }
  48% { opacity: .82; transform: translate(0); }
  58%, 100% { opacity: 0; transform: translate(0); }
}

@keyframes po-register-final {
  0%, 48% { opacity: 0; transform: translate(-50%, -50%) scale(.985); }
  60%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  94%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.01); }
}

/* Smooth ink spread */
.po-intro[data-animation="ink-spread"] .po-intro__ink,
.po-intro[data-animation="ink-spread"] .po-intro__brand {
  display: grid;
}

.po-intro__ink {
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  border-radius: 41% 59% 53% 47% / 55% 38% 62% 45%;
}

.po-intro[data-animation="ink-spread"] .po-intro__ink {
  animation: po-ink-spread var(--po-intro-duration) cubic-bezier(.68,-.2,.32,1.2) both;
}

.po-intro[data-animation="ink-spread"] .po-intro__brand {
  animation: po-logo var(--po-intro-duration) ease both;
}

@keyframes po-ink-spread {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0); }
  36%, 74% { transform: translate(-50%, -50%) scale(18) rotate(45deg); }
  100% { transform: translate(-50%, -50%) scale(0) rotate(90deg); }
}

/* Halftone reveal */
.po-intro[data-animation="halftone"] .po-intro__halftone,
.po-intro[data-animation="halftone"] .po-intro__brand {
  display: grid;
}

.po-intro__halftone {
  background-image: radial-gradient(circle, var(--po-paper) 1px, transparent 1.5px);
  background-size: 14px 14px;
  clip-path: circle(0 at 50% 50%);
}

.po-intro[data-animation="halftone"] .po-intro__halftone {
  animation: po-halftone var(--po-intro-duration) cubic-bezier(.65,0,.35,1) both;
}

.po-intro[data-animation="halftone"] .po-intro__brand {
  animation: po-logo var(--po-intro-duration) ease both;
}

@keyframes po-halftone {
  0% { clip-path: circle(0 at 50% 50%); background-size: 24px 24px; }
  38%, 74% { clip-path: circle(90% at 50% 50%); background-size: 9px 9px; }
  100% { clip-path: circle(0 at 50% 50%); background-size: 18px 18px; }
}

/* Paper-sheet feed */
.po-intro[data-animation="paper"] .po-intro__paper,
.po-intro[data-animation="paper"] .po-intro__paper-brand {
  display: grid;
}

.po-intro__paper {
  top: 8%;
  right: 7%;
  bottom: 8%;
  left: 7%;
  background: var(--po-paper);
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}

.po-intro__paper span {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 12px;
  background: linear-gradient(90deg, var(--po-cyan), var(--po-magenta), var(--po-yellow), var(--po-black));
}

.po-intro__paper-brand img { filter: none; }

.po-intro[data-animation="paper"] .po-intro__paper,
.po-intro[data-animation="paper"] .po-intro__paper-brand {
  animation: po-paper var(--po-intro-duration) cubic-bezier(.65,0,.35,1) both;
}

@keyframes po-paper {
  0% { opacity: 0; transform: translate(-50%, 125%); }
  34%, 72% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -125%); }
}

.po-intro[data-animation="paper"] .po-intro__paper {
  animation-name: po-paper-sheet;
}

@keyframes po-paper-sheet {
  0% { transform: translateY(125%); }
  34%, 72% { transform: translateY(0); }
  100% { transform: translateY(-125%); }
}

/* Logo line draw */
.po-intro[data-animation="line"] .po-intro__surface,
.po-intro[data-animation="line"] .po-intro__brand {
  display: grid;
}

.po-intro[data-animation="line"] .po-intro__surface {
  animation: po-surface-out var(--po-intro-duration) ease both;
}

.po-intro[data-animation="line"] .po-intro__brand {
  animation: po-line-logo var(--po-intro-duration) ease both;
}

.po-intro[data-animation="line"] .po-intro__brand::after {
  transform-origin: left;
  animation: po-line-draw var(--po-intro-duration) ease both;
}

@keyframes po-line-logo {
  0%, 22% { opacity: 0; transform: translate(-50%, -48%); }
  44%, 82% { opacity: 1; transform: translate(-50%, -50%); }
  94%, 100% { opacity: 0; transform: translate(-50%, -51%); }
}

@keyframes po-line-draw {
  0%, 28% { transform: scaleX(0); }
  52%, 100% { transform: scaleX(1); }
}

/* Press flash */
.po-intro[data-animation="flash"] .po-intro__surface,
.po-intro[data-animation="flash"] .po-intro__flash,
.po-intro[data-animation="flash"] .po-intro__brand {
  display: grid;
}

.po-intro[data-animation="flash"] .po-intro__surface {
  animation: po-surface-out var(--po-intro-duration) ease both;
}

.po-intro__flash {
  background: var(--po-paper);
  opacity: 0;
}

.po-intro[data-animation="flash"] .po-intro__flash {
  animation: po-flash var(--po-intro-duration) ease both;
}

.po-intro[data-animation="flash"] .po-intro__brand {
  animation: po-logo var(--po-intro-duration) ease both;
}

@keyframes po-flash {
  0%, 29%, 36%, 100% { opacity: 0; }
  32% { opacity: 1; }
  39% { opacity: .45; }
}

/* Scale and sharpen */
.po-intro[data-animation="scale"] .po-intro__surface,
.po-intro[data-animation="scale"] .po-intro__brand {
  display: grid;
}

.po-intro[data-animation="scale"] .po-intro__surface {
  animation: po-surface-out var(--po-intro-duration) ease both;
}

.po-intro[data-animation="scale"] .po-intro__brand {
  animation: po-scale-sharp var(--po-intro-duration) cubic-bezier(.2,.8,.2,1) both;
}

@keyframes po-scale-sharp {
  0%, 16% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); filter: blur(14px); }
  52%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.92); filter: blur(0); }
}

/* Content cascade */
.po-intro[data-animation="cascade"] {
  display: none !important;
  pointer-events: none;
}

html.po-intro-page-cascade .site-header,
html.po-intro-page-cascade .hero-content > *,
html.po-intro-page-cascade .services-grid > * {
  animation: po-cascade var(--po-intro-cascade-duration, 920ms) cubic-bezier(.22,1,.36,1) both;
}

html.po-intro-page-cascade .hero-content > *:nth-child(2) { animation-delay: 120ms; }
html.po-intro-page-cascade .hero-content > *:nth-child(3) { animation-delay: 240ms; }
html.po-intro-page-cascade .services-grid > *:nth-child(1) { animation-delay: 320ms; }
html.po-intro-page-cascade .services-grid > *:nth-child(2) { animation-delay: 420ms; }
html.po-intro-page-cascade .services-grid > *:nth-child(3) { animation-delay: 520ms; }
html.po-intro-page-cascade .services-grid > *:nth-child(4) { animation-delay: 620ms; }

@keyframes po-cascade {
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Page-transition wipe */
.po-intro[data-animation="page-wipe"] .po-intro__curtain,
.po-intro[data-animation="page-wipe"] .po-intro__brand {
  display: grid;
}

.po-intro[data-animation="page-wipe"] .po-intro__curtain {
  animation: po-page-wipe var(--po-intro-duration) cubic-bezier(.76,0,.24,1) both;
}

.po-intro[data-animation="page-wipe"] .po-intro__brand {
  animation: po-logo var(--po-intro-duration) ease both;
}

@keyframes po-page-wipe {
  0% { transform: translateX(-101%); }
  34%, 68% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* Ink splat */
.po-intro[data-animation="ink-splat"] .po-intro__splat,
.po-intro[data-animation="ink-splat"] .po-intro__brand {
  display: grid;
}

.po-intro__splat {
  top: 50%;
  left: 50%;
  width: 112px;
  height: 112px;
  border-radius: 42% 58% 36% 64% / 57% 38% 62% 43%;
}

.po-intro__splat i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--po-black);
}

.po-intro__splat b {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--po-black);
}

.po-intro__splat b:nth-of-type(1) { left: 48px; top: -22px; }
.po-intro__splat b:nth-of-type(2) { right: -15px; top: 8px; }
.po-intro__splat b:nth-of-type(3) { right: -25px; top: 68px; }
.po-intro__splat b:nth-of-type(4) { right: 3px; bottom: -21px; }
.po-intro__splat b:nth-of-type(5) { left: 38px; bottom: -29px; }
.po-intro__splat b:nth-of-type(6) { left: -20px; bottom: -8px; }
.po-intro__splat b:nth-of-type(7) { left: -27px; top: 38px; }
.po-intro__splat b:nth-of-type(8) { left: 4px; top: -13px; }

.po-intro[data-animation="ink-splat"] .po-intro__splat {
  animation: po-splat var(--po-intro-duration) cubic-bezier(.68,-.35,.32,1.3) both;
}

.po-intro[data-animation="ink-splat"] .po-intro__brand {
  animation: po-logo var(--po-intro-duration) ease both;
}

@keyframes po-splat {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-18deg); }
  24% { transform: translate(-50%, -50%) scale(1.25) rotate(5deg); }
  42%, 74% { transform: translate(-50%, -50%) scale(18) rotate(12deg); }
  100% { transform: translate(-50%, -50%) scale(0) rotate(28deg); }
}

@keyframes po-logo {
  0%, 30% { opacity: 0; transform: translate(-50%, -48%) scale(.975); }
  43%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  86%, 100% { opacity: 0; transform: translate(-50%, -52%) scale(1.01); }
}

@keyframes po-surface-out {
  0%, 84% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 640px) {
  .po-intro__brand,
  .po-intro__paper-brand,
  .po-intro__cmyk {
    width: min(330px, 78vw);
  }

  .po-intro__brand::after,
  .po-intro__paper-brand::after {
    height: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .po-intro {
    display: none !important;
  }
}