/* ------------------------------------------------- */
/* General
/* ------------------------------------------------- */

.artifact__content, .content-block, .button, .tag {
  -webkit-tap-highlight-color: transparent;
}

/* ................................................. */



/* ------------------------------------------------- */
/* Button & tag hover effect
/* ------------------------------------------------- */

.button .button__label,
.tag .tag__label {
  transition: color var(--a-duration--long) var(--a-easing--out-emph);
}


.button .button__circle,
.tag .tag__circle {
  transition:
    transform var(--a-duration--long) var(--a-easing--out-emph),
    background-color var(--a-duration--long) var(--a-easing--out-emph);
  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
}

.button:hover .button__circle,
.tag:hover .tag__circle {
  transform: translate(-50%, -50%) scale(1.25) rotate(0.001deg);
}

[data-wf--button--variant="highlight"]:hover .button__label > p,
[data-wf--functional-button--variant="highlight"]:hover .button__label > p,
[data-wf--tag--variant="highlight"]:hover .tag__label {
  color: var(--colors--bg);
}

/* ................................................. */






/* ------------------------------------------------- */
/* Text cursor
/* ------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  [data-text-cursor] .text-cursor {
    transition: transform var(--a-duration--short) var(--a-easing--out-emph), opacity var(--a-duration--short) var(--a-easing--out-emph);
    transform: translateX(-50%) translateY(-2.1875rem) scale(0) rotate(0.001deg);
  }
  
  [data-text-cursor="active"] .text-cursor {
    opacity: 1; 
    transform: translateX(-50%) translateY(-2.1875rem) scale(1) rotate(0.001deg);
  }
  
  [data-text-cursor="active-edge-right"] .text-cursor {
    opacity: 1; 
    transform: translateX(-100%) translateY(-2.1875rem) scale(1) rotate(0.001deg);
  }
  
  [data-text-cursor="active-edge-left"] .text-cursor {
    opacity: 1; 
    transform: translateX(0%) translateY(-2.1875rem) scale(1) rotate(0.001deg);
  }
}

@media (hover: none) and (pointer: coarse) {
  .text-cursor__wrapper {
    display: none;
  }
}

/* ................................................. */





/* ------------------------------------------------- */
/* Fill content-block in the available space in modals, maintaining its AR
/* ------------------------------------------------- */
@media screen and (min-width: 991px) {
  .modal__container {
    --padding-x: var(--size--size-15, 0.9375rem);
    --padding-y: 15dvh;
    --gap: var(--size--size-5, 0.3125rem);
    --info-width: clamp(var(--size--size-180, 11.25rem), 25dvw, var(--size--size-400, 25rem));
    --content-max-width: calc(100dvw - (var(--padding-x) * 2) - (var(--info-width) * 2) - (var(--gap) * 2));
    --content-max-height: calc(100dvh - (var(--padding-y) * 2));
  }

  .modal__wrapper {
    grid-template-columns: var(--info-width) auto var(--info-width);
  }

  .modal__info,
  .modal__info.is-spacer {
    width: var(--info-width);
  }

  .modal__container .content-block {
    justify-self: center;
    align-self: center;
    max-width: 100%;
    max-height: 100%;
  }

  .modal__container .content-block[data-wf--content-block--layout-format="s-16x9"] {
    width: min(var(--content-max-width), calc(var(--content-max-height) * 16 / 9));
    height: min(var(--content-max-height), calc(var(--content-max-width) * 9 / 16));
  }

  .modal__container .content-block[data-wf--content-block--layout-format="m-3x2"] {
    width: min(var(--content-max-width), calc(var(--content-max-height) * 3 / 2));
    height: min(var(--content-max-height), calc(var(--content-max-width) * 2 / 3));
  }

  .modal__container .content-block[data-wf--content-block--layout-format="l-4x3"] {
    width: min(var(--content-max-width), calc(var(--content-max-height) * 4 / 3));
    height: min(var(--content-max-height), calc(var(--content-max-width) * 3 / 4));
  }

  .modal__container .content-block[data-wf--content-block--layout-format="1x1"] {
    width: min(var(--content-max-width), var(--content-max-height));
    height: min(var(--content-max-height), var(--content-max-width));
  }

  .modal__container .content-block[data-wf--content-block--layout-format="s-4x5"] {
    width: min(var(--content-max-width), calc(var(--content-max-height) * 4 / 5));
    height: min(var(--content-max-height), calc(var(--content-max-width) * 5 / 4));
  }

  .modal__container .content-block[data-wf--content-block--layout-format="m-3x4"] {
    width: min(var(--content-max-width), calc(var(--content-max-height) * 3 / 4));
    height: min(var(--content-max-height), calc(var(--content-max-width) * 4 / 3));
  }

  .modal__container .content-block[data-wf--content-block--layout-format="l-9x16"] {
    width: min(var(--content-max-width), calc(var(--content-max-height) * 9 / 16));
    height: min(var(--content-max-height), calc(var(--content-max-width) * 16 / 9));
  }
}

/* ................................................. */






/* ------------------------------------------------- */
/* Video player (bunny.net)
/* ------------------------------------------------- */

/* Animation */
[data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading, .button) {
  transition: opacity var(--a-duration--interface) var(--a-easing--out-emph), visibility var(--a-duration--interface) var(--a-easing--out-emph);
}

.bunny-player__interface {
  transition: all var(--a-duration--medium) var(--a-easing--out-emph);
}


/* Placeholder */
[data-bunny-player-init][data-player-status="playing"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-status="paused"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .bunny-player__placeholder {
  opacity: 0;
  visibility: hidden;
}

/* Dark Overlay */
[data-bunny-player-init][data-player-status="paused"] .bunny-player__dark,
[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__dark {
  opacity: 0.3;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__dark {
  opacity: 0;
}

/* Play/Pause */
[data-bunny-player-init][data-player-status="playing"] .bunny-player__playpause,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__playpause {
  opacity: 0;
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__playpause {
  opacity: 1;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__play-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__play-svg {
  display: none;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__pause-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__pause-svg {
  display: block;
}

/* Loading */
[data-bunny-player-init][data-player-status="loading"] .bunny-player__loading {
  opacity: 1;
  visibility: visible;
}

/* Interface */
[data-bunny-player-init][data-player-status="playing"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__interface {
  opacity: 0;
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"][data-player-hover="active"] .bunny-player__interface {
  opacity: 1;
}

.bunny-player__toggle-playpause svg,
.bunny-player__toggle-playpause svg *,
.bunny-player__toggle-mute svg,
.bunny-player__toggle-mute svg * {
  pointer-events: none;
}

.content-block {
  user-select: none;
  -webkit-user-select: none;
}

.bunny-player [data-player-control] svg,
.bunny-player [data-player-control] svg * {
  pointer-events: none;
}

.bunny-player[data-player-muted="true"] .bunny-player__volume-up-svg,
.bunny-player[data-player-muted="false"] .bunny-player__volume-mute-svg {
  display: none;
}

.bunny-player[data-player-muted="true"] .bunny-player__volume-mute-svg,
.bunny-player[data-player-muted="false"] .bunny-player__volume-up-svg {
  display: block;
}

/* Timeline */
[data-bunny-player-init][data-player-status="idle"][data-player-activated="false"] .bunny-player__timeline,
[data-bunny-player-init][data-player-status="ready"][data-player-activated="false"] .bunny-player__timeline {
  pointer-events: none;
}

/* Timeline Handle */
[data-bunny-player-init] .bunny-player__timeline-handle {
  transition: transform var(--a-duration--short) var(--a-easing--out-emph);
}

[data-bunny-player-init][data-timeline-drag="true"] .bunny-player__timeline-handle {
  transform: translate(-50%, -50%) scaleY(1);
}

/* Fullscreen */
[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-shrink-svg {
  display: block;
}

[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-scale-svg {
  display: none;
}

/* Cover Mode */
[data-bunny-player-init][data-player-update-size="cover"] {
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

[data-bunny-player-init][data-player-update-size="cover"] [data-player-before] {
  display: none;
}

[data-bunny-player-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-player__video {
  object-fit: cover;
}

/* ................................................. */