/* карточка для stagger */
.wmys-section{
  background: radial-gradient(circle at center, #111 0%, #000 100%);
  padding: 60px 0;
  padding-bottom: 0px;
}

.wmys-card{
  display: grid;
  justify-items: center;
  gap: 16px;
  --d: 0s; /* задержка появления для stagger, задаётся из JS */
}

/* ===== БАЗА (Desktop ≥ 992px) ===== */
/* твой фотоблок (photo-mat) + анимационные хуки */
.wmys-media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #191919;          /* «мат» */
  padding: 3px;                  /* паспарту */
  box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
  justify-self: center;

  max-width: 480px;              /* десктоп по умолчанию */

  /* reveal-хуки */
  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition:
    transform .8s cubic-bezier(.22,.61,.36,1) var(--d),
    opacity .8s ease var(--d),
    box-shadow .25s ease;
  will-change: transform, opacity;
}

/* изображение — готово к Ken Burns */
.wmys-media > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transform: scale(1.01);
  transform-origin: 50% 50%;
  transition: transform 6s ease-out;
}

/* белый «мат» (твой) */
.wmys-media::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(#fff,#fff);
  opacity:.08;
}

/* блик для hover (desktop) */
.wmys-media::after{
  content:"";
  position:absolute;
  inset:-40%;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.18), rgba(255,255,255,0) 36%);
  opacity: 0;
  transition: opacity .3s ease;
}

/* подпись */
.wmys-caption{
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: transform .7s ease var(--d), opacity .7s ease var(--d);
  transition-delay: calc(var(--d) + 0.12s); /* ⬅ задержка для fade-in после фото */
}

/* выравнивание карточек на десктопе */
.wmys-card{
  align-items: center;
  justify-items: center;
}

/* ===== когда элемент во вьюпорте ===== */
.wmys-card.is-inview .wmys-media{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.wmys-card.is-inview .wmys-caption{
  opacity: 1;
  transform: translateY(0);
}

/* Ken Burns: чередуем направления, чтобы не было однообразия */
.wmys-card.is-inview .wmys-media > img{
  animation: wmys-ken 7.5s ease-out both;
}
.wmys-card:nth-of-type(2n).is-inview .wmys-media > img{
  animation: wmys-ken-alt 7.5s ease-out both;
}
@keyframes wmys-ken{
  from { transform: scale(1.06) translateY(6px); }
  to   { transform: scale(1.02) translateY(0); }
}
@keyframes wmys-ken-alt{
  from { transform: scale(1.06) translateX(6px); }
  to   { transform: scale(1.02) translateX(0); }
}

/* ===== Hover 3D tilt + shine (только там, где есть hover) ===== */
@media (hover:hover){
  .wmys-media.is-tilting{
    transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
    box-shadow:
      0 14px 32px rgba(0,0,0,.50),
      0 3px 12px rgba(0,0,0,.35);
  }
  .wmys-media.is-tilting::after{ opacity: .65; }
}

/* ===== АДАПТИВ ПОД ТВОИ БРЕЙКПОИНТЫ (max-width) ===== */

/* Tablet ≤ 991px */
@media (max-width: 991px){
  .wmys-media{ max-width: 400px; }
}

/* Mobile ≤ 767px */
@media (max-width: 767px){
  .wmys-media{ max-width: 320px; }
}

/* Small Mobile ≤ 479px */
@media (max-width: 479px){
  .wmys-media{ max-width: 260px; }
}

/* уважение к reduced motion */
@media (prefers-reduced-motion: reduce){
  .wmys-media, .wmys-caption{ transition: none !important; }
  .wmys-media > img{ animation: none !important; transition: none !important; }
}

/* Типографика — Lora */
.wmys-section .heading_h1,
.wmys-section .wmys-caption,
.wmys-section .wmys-caption h2,
.wmys-section .wmys-caption p {
  font-family: 'Lora', serif !important;
  font-style: italic;
}
.wmys-section .heading_h1 { font-weight: 600; }
.wmys-section .wmys-caption h2 {
  font-weight: 500;
  letter-spacing: 0.4px; /* ⬅ лёгкий letter-spacing для элегантности */
}
.wmys-section .wmys-caption p  { font-weight: 400; }

/* Декоративная линия у заголовка + старт для анимации */
.wmys-section .heading_h1::after {
  content: "";
  display: block;
  width: 320px;
  height: 2px;
  margin: 12px auto 10px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  border-radius: 2px;

  transform: scaleX(0.6);
  transform-origin: center;
  opacity: 0;
  transition: opacity .6s ease .1s, transform .6s ease .1s;
}

/* Заголовочный блок */
.wmys-header {
  position: relative;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important; /* место под линию */
}

/* Анимация появления заголовка */
.wmys-header .heading_h1{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
}

/* Когда заголовок во вьюпорте */
.wmys-header.is-visible .heading_h1{
  opacity: 1;
  transform: translateY(0);
}
.wmys-header.is-visible .heading_h1::after{
  opacity: 1;
  transform: scaleX(1);
}

/* Адаптив для линии под заголовком */
@media (max-width: 991px){
  .wmys-section .heading_h1::after { width: 360px; }
}
@media (max-width: 767px){
  .wmys-section .heading_h1::after { width: 300px; }
}
@media (max-width: 479px){
  .wmys-section .heading_h1::after { width: 260px; }
}

/* ====== Базовые размеры (Desktop ≥ 992px) ====== */
.wmys-section .heading_h1 {
  font-size: 2.2rem;   /* секционный заголовок */
  line-height: 1.3;
}
.wmys-section .wmys-caption h2 {
  font-size: 1.6rem;   /* заголовки карточек */
  line-height: 1.3;
}
.wmys-section .wmys-caption p {
  font-size: 1.05rem;  /* текст */
  line-height: 1.5;
}

/* Tablet ≤ 991px */
@media (max-width: 991px) {
  .wmys-section .heading_h1 { font-size: 2rem; }
  .wmys-section .wmys-caption h2 { font-size: 1.45rem; }
  .wmys-section .wmys-caption p { font-size: 1rem; }
}

/* Mobile ≤ 767px */
@media (max-width: 767px) {
  .wmys-section .heading_h1 { font-size: 1.7rem; }
  .wmys-section .wmys-caption h2 { font-size: 1.3rem; }
  .wmys-section .wmys-caption p { font-size: 0.95rem; }
}

/* Small Mobile ≤ 479px */
@media (max-width: 479px) {
  .wmys-section .heading_h1 { font-size: 1.5rem; }
  .wmys-section .wmys-caption h2 { font-size: 1.15rem; }
  .wmys-section .wmys-caption p { font-size: 0.9rem; }
}