/* Здесь вы напишете основную часть стилей страницы.

Будьте внимательны! Для корректной работы скриптов на этом сайте нужно, чтобы в HTML некоторые классы были названы особым образом:
✦ like-icon — для svg-иконки анимированного сердца
✦ card__like-button — для кнопки Like рядом с иконкой
✦ card__icon-button — для кнопки, оборачивающей иконку
✦ is-liked — для обозначения состояния лайкнутой иконки в виде сердца
✦ button__text — для обозначения текстового элемента внутри кнопки

*/

.page {
  position: relative;
  min-inline-size: 320px;
  min-block-size: 100dvb;
  font-family: var(--main-font), sans-serif;
  padding: var(--page-padding);
  font-variation-settings: 'wght' 400;
}

.background {
  position: absolute;
  background-image: var(--page-background-image);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  top: 0;
  left: 0;
  inline-size: 100%;
  block-size: 100vh;
  z-index: -1;
}

.container {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
}

.header {
  margin-block: var(--header-margin-block);
  gap: var(--header-gap);
  font-family: var(--accent-font), sans-serif;
  text-align: center;
}

.main-header {
  font-weight: 400;
  font-size: clamp(3.0625rem, 2.8198rem + 1.0356vw, 4.0625rem);
  align-items: flex-end;
  text-transform: uppercase;
}

.subheader {
  font-style: normal;
  font-weight: 400;
  font-size: clamp(0.875rem, 0.7385rem + 0.5825vw, 1.4375rem);
  text-transform: uppercase;
}

.section {
  margin-inline: auto;
  inline-size: clamp(var(--section-min-size), var(--section-ideal-size), var(--section-max-size));
  color: var(--outline-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  outline: var(--outline-color) var(--button-outline-width) solid;
  min-block-size: var(--section-min-block-size);
  background-color: var(--section-background-color);
}

.section-heading {
  padding: var(--section-heading-padding);
  font-size: var(--section-heading-font-size);
  line-height: var(--section-heading-line-height);
  font-variation-settings: 'wght' 700;
}

.image-container {
  position: relative;
  display: inline-block;
  line-height: 0;
  overflow: hidden;
  outline: var(--outline-color) var(--button-outline-width) solid;
  aspect-ratio: 1 / 1;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-img {
  width: 100%;
  height: auto;
  z-index: 1;
}

.watermark {
  font-family: var(--accent-font), sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--watermark-font-size);
  line-height: var(--watermark-line-height);
  mix-blend-mode: hard-light;
  position: absolute;
  top: var(--watermark-top);
  right: var(--watermark-right);
  opacity: var(--watermark-opacity);
  paint-order: stroke fill;
  color: var(--watermark-color);
  padding: var(--watermark-padding);
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
}

.card-content {
  padding: var(--card-content-padding);
}

.main-text {
  margin-block-end: var(--main-text-margin-end);
}

.secondary-text {
  margin-block-end: var(--secondary-text-margin-end);
}

.button-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  gap: var(--button-gap);
}

.button {
  padding: 0;
  font-family: inherit;
}

/* Общие стили для кнопок с анимацией заполнения */
.card__like-button,
.dialog-open-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--button-transition);
  background-color: var(--button-background);
  outline: var(--button-outline-width) solid var(--button-outline);
  border: none;
}

.card__like-button:focus-visible,
.dialog-open-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
  border: var(--button-outline-width) solid var(--button-outline);
}

.card__like-button::before,
.dialog-open-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--button-hover-background);
  transition: width var(--button-fill-transition);
  z-index: 0;
}

.card__like-button:hover::before,
.dialog-open-button:hover::before {
  width: 100%;
}

.button__text {
  font-family: var(--accent-font);
  font-size: var(--button-font-size);
  position: relative;
  z-index: 1;
}

/* Специфичные стили для кнопки Like */
.card__like-button {
  inline-size: var(--card-like-inline-size);
  block-size: var(--card-like-block-size);
}

.card__like-button .button__text {
  color: var(--button-inverted-foreground);
  mix-blend-mode: difference;
}

.card__like-button .button__icon {
  mix-blend-mode: difference;
  fill: var(--button-inverted-foreground);
}

.dialog-open-button {
  inline-size: var(--dialog-open-inline-size);
  min-block-size: var(--dialog-open-min-block-size);
  margin-inline: auto;
  gap: var(--dialog-open-gap);
}

.dialog-open-button .button__text {
  color: var(--button-foreground);
  mix-blend-mode: normal;
  transition: color var(--button-fill-transition);
}

.dialog-open-button:hover .button__text {
  color: var(--button-inverted-foreground);
}

.dialog-open-button .button__icon {
  position: relative;
  z-index: 1;
  fill: var(--button-foreground);
  transition: fill var(--button-fill-transition);
}

.dialog-open-button:hover .button__icon {
  fill: var(--button-inverted-foreground);
}

.disk-icon {
  max-block-size: var(--disk-icon-size);
  max-inline-size: var(--disk-icon-size);
}

.dialog-disk-icon {
  max-block-size: var(--dialog-disk-icon-size);
  max-inline-size: var(--dialog-disk-icon-size);
}

/* Диалог */
#memory-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: var(--dialog-padding);
  border: var(--button-outline-width) solid var(--dialog-border-color);
  background-color: var(--dialog-background-color);
  max-width: var(--dialog-max-width);
  width: 90%;
  text-align: center;
  z-index: 1000;
  overflow: visible;
}

dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#memory-dialog::backdrop {
  background-color: var(--dialog-backdrop-color);
  z-index: 999;
}

.dialog-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.dialog-text {
  font-family: var(--accent-font);
  font-size: var(--dialog-text-font-size);
  text-align: start;
  text-transform: uppercase;
}

.dialog-close-button {
  block-size: var(--dialog-close-block-size);
  inline-size: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--button-transition);
  background-color: var(--button-background);
  border: var(--button-outline-width) solid var(--dialog-border-color);
  text-transform: uppercase;
}

.dialog-close-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
}

.dialog-close-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--button-hover-background);
  transition: width var(--button-fill-transition);
  z-index: 0;
}

.dialog-close-button:hover::before {
  width: 100%;
}

.dialog-close-button .button__text {
  color: var(--button-foreground);
  mix-blend-mode: normal;
  transition: color var(--button-fill-transition);
  position: relative;
  z-index: 1;
}

.dialog-close-button:hover .button__text {
  color: var(--button-inverted-foreground);
}

/* Фильтры изображений */
.img-filter1 {
  filter: none;
}

.img-filter2 {
  filter: grayscale(0.7);
}

.img-filter3 {
  filter: saturate(3.0);
}

.img-filter4 {
  filter: hue-rotate(20deg);
}

.img-filter5 {
  filter: invert(100%) contrast(0.7);
}

.img-filter6 {
  filter: sepia(0.9);
}

.img-filter7 {
  filter: blur(15px);
}

.img-filter8 {
  filter: hue-rotate(-240deg) blur(2px) contrast(0.5);
}

.card__icon-button {
  block-size: var(--card-icon-button-size);
  inline-size: var(--card-icon-button-size);
  padding: 0;
  cursor: pointer;
  border: none;
  display: flex;
  background-color: transparent;
  align-items: center;
  justify-content: center;
}

.card__icon-button .like-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card__icon-button:focus {
  border: none;
  outline: none;
}

.card__icon-button:focus-visible {
  outline: var(--button-outline) var(--button-outline-width) solid;
}

.contour {
  fill: var(--contour-color);
  transition: fill 0.1s linear;
}

.sparks {
  fill: var(--animation-fill-color);
  opacity: 0;
}

.core {
  fill: var(--core-color);
  transition: fill 0.3s ease 0.03s;
}

.main-body {
  fill: var(--main-body-color);
  transition: fill 0.3s ease;
}

.like-icon:hover .core {
  fill: var(--accent-color, #000);
  transition: fill 0.3s ease 0s;
}

.like-icon:hover .main-body {
  fill: var(--accent-color, #000);
  transition: fill 0.3s ease 0.05s;
}

.like-icon:active .core {
  fill: var(--main-animation-color);
  transition: fill 0.3s ease;
}

.like-icon:active .main-body {
  fill: var(--main-animation-color);
  transition: fill 0.3s ease 0.05s;
}

.like-icon.is-liked .core {
  fill: var(--main-animation-color);
  transition: fill 0.3s ease 0s;
}

.like-icon.is-liked .main-body {
  fill: var(--main-animation-color);
  transition: fill 0.3s ease 0.05s;
}

.like-icon.is-liked .contour {
  fill: var(--main-animation-color);
  transition: fill 0.3s ease 0.06s;
}

.like-icon.is-liked .heart {
  animation: scaleHeart 0.3s ease-in 0.1s 1;
  transform-origin: 19.5px 13.5px;
}

.like-icon.is-liked .sparks {
  animation: sparkFade 0.3s ease-in 0.3s 1;
}


/* Адаптив */
@media (max-width: 375px) {
  .section {
    inline-size: 100%;
    max-inline-size: none;
  }

  .dialog-open-button {
    flex-direction: column;
    min-block-size: var(--dialog-open-mobile-min-block-size);
  }
}

@supports (-webkit-text-stroke: 2px var(--watermark-stroke-color)) or (text-stroke: 2px var(--watermark-stroke-color)) {
  .watermark {
    -webkit-text-stroke: 2px var(--watermark-stroke-color);
    text-stroke: 2px var(--watermark-stroke-color);
  }
}