/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Shadow styles for <private-browsing-mask-intro>, linked by both the component
 * and the Storybook story. The host sets `playing` when the intro should run;
 * the default state is just the mask. */

:host {
  display: inline-block;
  --icon-mask-color: var(--color-violet-50);
}

.circle {
  position: relative;
  /* clip-path masks the kit to the circle even while it is transformed. */
  overflow: hidden;
  clip-path: circle(50%);
  border-radius: var(--border-radius-circle);
  height: var(--size-image-large);
  width: var(--size-image-large);
  background: var(--icon-mask-color);
}

.kit,
.mask {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

.kit {
  display: none;
  width: 100%;
  height: 130%;
  left: 0;
  top: 18%;
  background-image: url("chrome://browser/skin/privatebrowsing/kit-pbw.svg");
  background-position: center top;
  background-size: auto 120%;
}

.mask {
  opacity: 1;
  -moz-context-properties: fill;
  fill: var(--icon-mask-color);
  background-image: url("chrome://browser/skin/privatebrowsing/pbm-logo.svg");
  background-position: center center;
  background-size: contain;
}

.circle.playing .kit {
  display: block;
  animation: pbw-kit-intro 3s both;
}

.circle.playing .mask {
  opacity: 0;
  animation: pbw-mask-fade-in 0.5s ease 2.5s both;
}

/* Rest inside the window, a small bounce that flows straight into the dive out. */
@keyframes pbw-kit-intro {
  0%,
  55% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(-8%);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(150%);
  }
}

@keyframes pbw-mask-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}