/* Copyright 2026 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=//resources/cr_elements/cr_shared_vars.css.js
 * #scheme=relative
 * #css_wrapper_metadata_end */

:host {
  --product-logo-size: 72px;
  --title-font-size: 60px;
  --content-width: 732px;
  --color-button-background-prominent: var(--color-sys-primary);
  --color-button-foreground-prominent: var(--color-sys-on-primary);
  --color-button-foreground: var(--color-sys-primary);
  --color-button-border: var(--color-sys-tonal-outline);

  align-items: center;
  color: var(--cr-primary-text-color);
  display: flex;
  flex-direction: column;
  gap: 48px;
  height: 100%;
  justify-content: center;
}

#product-logo {
  height: var(--product-logo-size);
  width: var(--product-logo-size);
}

.title {
  color: var(--color-sys-on-surface);
  font-size: var(--title-font-size);
  margin: 0;
  max-width: var(--content-width);
  text-align: center;
  width: 100%;
}

#buttonContainer {
  display: flex;
  gap: 8px;
}

@media screen and ((max-width: 780px) or (max-height: 600px)) {
  :host {
    --product-logo-size: 48px;
    --title-font-size: 32px;

    gap: 32px;
  }
}

@media screen and ((max-width: 900px) or (max-height: 650px)) {
  .animation {
    display: none;
  }
}

.animation {
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

#leftAnimation {
  aspect-ratio: 500 / 700;
  height: 65vh;
  left: 0;
  top: 55%;
  /* 50vw - var(--content-width) / 2 is the space between the left edge of the
   * screen and the left edge of the content area.
   *
   * The animation begins translating to the left when the free space between
   * the screen edge and the main content reaches 50% of the animation's width
   * (to prevent overlapping). Bigger value makes the animation move earlier.
   *
   * If the result is positive, min it with 0 to prevent the animation from
   * being pulled from the left edge to the center. */
  transform: translate(
    min(0px, calc(50vw - var(--content-width) / 2 - 50%)), -50%);
}

#rightAnimation {
  aspect-ratio: 500 / 700;
  height: 65vh;
  right: 0;
  top: 30%;
  /* 50vw - var(--content-width) / 2 is the space between the right edge of the
   * screen and the right edge of the content area.
   *
   * The animation begins translating to the right when the free space between
   * the screen edge and the main content reaches 50% of the animation's width
   * (2 * 25%). Bigger value makes the animation move earlier.
   *
   * Dividing by 2 makes the animation push out smoother, 1px of animation size
   * for every 2px of space shrank.
   * Everything is maxed with 0 to prevent the animation from being pulled
   * from the right edge to the center of the screen. */
  transform: translate(
    max(0px, calc(25% - (50vw - var(--content-width) / 2) / 2)),
    -50%);
  width: auto;
}

#bottomAnimation {
  aspect-ratio: 700 / 400;
  bottom: -5px;
  height: auto;
  left: 70%;
  /* 50vh - 200px (arbitrary value, around half of the screen height we cut
   * out the animations at) is the space between the bottom edge of the screen
   * and the bottom edge of the content area.
   *
   * The animation begins translating down when the free space between the
   * bottom edge of the screen and the main content reaches 80% of the
   * animation's height (2 * 40%).
   *
   * Dividing it by 2 makes the animation push out smoother, 1px of animation
   * for every 2px of space shrank.
   * Everything is maxed with 0 to prevent the animation from being
   * pushed out of the bottom edge to the center of the screen. */
  transform: translate(-50%, max(0px, calc(40% - (50vh - 200px) / 2)));
  width: 40vw;
}

/* For RTL languages, flip the direction */
:host-context([dir=rtl]) #leftAnimation {
  left: auto;
  right: 0;
  transform: scaleX(-1) translate(
    min(0px, calc(50vw - var(--content-width) / 2 - 50%)),
    -50%);
}

:host-context([dir=rtl]) #rightAnimation {
  left: 0;
  right: auto;
  transform: scaleX(-1) translate(
    max(0px, calc(40% - (50vw - var(--content-width) / 2) / 2)),
    -50%);
}

:host-context([dir=rtl]) #bottomAnimation {
  left: auto;
  right: 70%;
  transform: scaleX(-1) translate(
    -50%,
    max(0px, calc(40% - (50vh - 200px) / 2)));
}