/*
 * Reserved band layout
 * - Trigger: min-height slot in page flow (space for splashes to show)
 * - Layer:   fixed square, anchored left or right (top/bottom on mobile)
 *
 * Tunable via CSS custom properties (set inline by shortcode attributes).
 */

.entry-content {
  position: relative;
}

.entry-content > :not(.respekt-splash-trigger) {
  position: relative;
  z-index: 1;
}

.entry-content > .respekt-splash-trigger {
  z-index: 0;
}

.entry-content > .respekt-splash-trigger--full {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.entry-content .wp-block-column .respekt-splash-trigger--full {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.respekt-splash-trigger {
  --respekt-splash-min: 220px;
  --respekt-splash-vw: 26vw;
  --respekt-splash-max: 400px;
  --respekt-splash-min-md: 275px;
  --respekt-splash-vw-md: 32.5vw;
  --respekt-splash-max-md: 500px;
  --respekt-splash-d: clamp(var(--respekt-splash-min), var(--respekt-splash-vw), var(--respekt-splash-max));
  --respekt-splash-band-scale: 1.15;
  --respekt-splash-delay: 500ms;
  --respekt-splash-pink-gap: 420ms;
  --respekt-splash-pink-delay: calc(var(--respekt-splash-delay) + var(--respekt-splash-pink-gap));
  --respekt-splash-duration: 900ms;
  --respekt-splash-blue-x: -58%;
  --respekt-splash-blue-y: -50%;
  --respekt-splash-pink-x: -28%;
  --respekt-splash-pink-y: -24%;
  --respekt-splash-pink-width: 88%;
  --respekt-splash-blue-rotate-start: -28deg;
  --respekt-splash-blue-rotate-end: -9deg;
  --respekt-splash-pink-rotate-start: 24deg;
  --respekt-splash-pink-rotate-end: 6deg;

  display: block;
  position: relative;
  width: 100%;
  min-height: calc(var(--respekt-splash-d) * var(--respekt-splash-band-scale));
  margin-block: clamp(28px, 4vw, 56px);
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.respekt-splash-layer {
  position: absolute;
  width: var(--respekt-splash-d);
  height: var(--respekt-splash-d);
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  overflow: visible;
}

.respekt-splash-trigger--left .respekt-splash-layer {
  right: auto;
  left: 0;
}

.respekt-splash-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}

.respekt-splash-img--blue {
  z-index: 1;
  transform: translate(var(--respekt-splash-blue-x), var(--respekt-splash-blue-y)) scale(0.05) rotate(-18deg);
}

.respekt-splash-img--pink {
  z-index: 2;
  width: var(--respekt-splash-pink-width);
  transform: translate(var(--respekt-splash-pink-x), var(--respekt-splash-pink-y)) scale(0.05) rotate(12deg);
}

.respekt-splash-trigger.respekt-splash-is-active .respekt-splash-img--blue {
  animation: respekt-splash-blue var(--respekt-splash-duration) cubic-bezier(.18, .9, .25, 1.25) forwards;
  animation-delay: var(--respekt-splash-delay);
}

.respekt-splash-trigger.respekt-splash-is-active .respekt-splash-img--pink {
  animation: respekt-splash-pink var(--respekt-splash-duration) cubic-bezier(.18, .9, .25, 1.25) forwards;
  animation-delay: var(--respekt-splash-pink-delay);
}

@keyframes respekt-splash-blue {
  0% {
    opacity: 0;
    transform: translate(var(--respekt-splash-blue-x), var(--respekt-splash-blue-y)) scale(0.05) rotate(var(--respekt-splash-blue-rotate-start));
    filter: blur(3px);
  }

  55% {
    opacity: 1;
    transform: translate(var(--respekt-splash-blue-x), var(--respekt-splash-blue-y)) scale(1.02) rotate(-7deg);
    filter: blur(0);
  }

  78% {
    transform: translate(var(--respekt-splash-blue-x), var(--respekt-splash-blue-y)) scale(0.96) rotate(-10deg);
  }

  100% {
    opacity: 1;
    transform: translate(var(--respekt-splash-blue-x), var(--respekt-splash-blue-y)) scale(1) rotate(var(--respekt-splash-blue-rotate-end));
  }
}

@keyframes respekt-splash-pink {
  0% {
    opacity: 0;
    transform: translate(var(--respekt-splash-pink-x), var(--respekt-splash-pink-y)) scale(0.05) rotate(var(--respekt-splash-pink-rotate-start));
    filter: blur(3px);
  }

  55% {
    opacity: 1;
    transform: translate(var(--respekt-splash-pink-x), var(--respekt-splash-pink-y)) scale(1.02) rotate(4deg);
    filter: blur(0);
  }

  78% {
    transform: translate(var(--respekt-splash-pink-x), var(--respekt-splash-pink-y)) scale(0.97) rotate(7deg);
  }

  100% {
    opacity: 1;
    transform: translate(var(--respekt-splash-pink-x), var(--respekt-splash-pink-y)) scale(1) rotate(var(--respekt-splash-pink-rotate-end));
  }
}

/* Two-column rows: text + shortcode in wp-block-columns */
.respekt-splash-row .respekt-splash-trigger {
  margin-block: 0;
}

@media (min-width: 701px) {
  .respekt-splash-trigger {
    --respekt-splash-d: clamp(var(--respekt-splash-min-md), var(--respekt-splash-vw-md), var(--respekt-splash-max-md));
  }

  .respekt-splash-row .wp-block-columns {
    flex-wrap: nowrap !important;
  }

  .respekt-splash-row .wp-block-columns > .wp-block-column {
    flex-basis: 50% !important;
    flex-grow: 0;
  }
}

@media (max-width: 700px) {
  .respekt-splash-trigger {
    --respekt-splash-d: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-block: clamp(20px, 5vw, 40px);
  }

  .respekt-splash-trigger--left {
    justify-content: flex-start;
  }

  .respekt-splash-trigger--right {
    justify-content: flex-end;
  }

  .respekt-splash-layer {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    flex-shrink: 0;
  }

  .respekt-splash-hide-mobile {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .respekt-splash-trigger.respekt-splash-is-active .respekt-splash-img {
    animation: none;
    opacity: 1;
  }

  .respekt-splash-trigger.respekt-splash-is-active .respekt-splash-img--blue {
    transform: translate(var(--respekt-splash-blue-x), var(--respekt-splash-blue-y)) scale(1) rotate(var(--respekt-splash-blue-rotate-end));
  }

  .respekt-splash-trigger.respekt-splash-is-active .respekt-splash-img--pink {
    transform: translate(var(--respekt-splash-pink-x), var(--respekt-splash-pink-y)) scale(1) rotate(var(--respekt-splash-pink-rotate-end));
  }
}