/* ==========================================================
   premium.css — слой премиальных анимаций и материала
   Перенос вида с tezzcover.art на tezzpremade.art
   Логику магазина не трогаем: только внешний вид.
   ========================================================== */

:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
  --gold: #d9bd83;
}

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { -webkit-font-smoothing: antialiased; }

/* 1. тонкое зерно по всей странице */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* 2. появление блоков с мягким расфокусом и каскадом */
.premium-reveal {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 26px, 0);
  transition: opacity 1s var(--ease), transform 1.15s var(--ease), filter 1s var(--ease);
}
.premium-reveal.is-in { opacity: 1; filter: blur(0); transform: none; }

/* 3. меню при прокрутке становится плотнее */
header { transition: background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
header .bar { transition: height .5s var(--ease); }
header.is-stuck {
  background: linear-gradient(180deg, rgba(108, 99, 255, .34) 0%, rgba(108, 99, 255, .16) 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  border-bottom-color: rgba(213, 194, 251, .55);
}
header.is-stuck .bar { height: 62px; }

/* 4. световая окантовка у карточек */
.sold-card, .case, .step { position: relative; }
.sold-card::after, .case::after, .step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .03) 40%, rgba(213, 194, 251, .26));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .8;
  transition: opacity .5s var(--ease);
}
.sold-card:hover::after, .case:hover::after, .step:hover::after { opacity: 1; }

/* 5. карточки и картинки оживают при наведении */
.sold-card { transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.sold-card:hover { transform: translateY(-4px); border-color: rgba(213, 194, 251, .5); box-shadow: 0 22px 46px rgba(0, 0, 0, .5); }
.sold-card img { transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.sold-card:hover img { transform: scale(1.05); filter: grayscale(0) brightness(1.04); }

.case { transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease); }
.case:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0, 0, 0, .55); }

.step { transition: transform .5s var(--ease), border-color .5s var(--ease); }
.step:hover { transform: translateY(-3px); border-color: rgba(213, 194, 251, .42); }

/* 6. кнопки: блик, подъём, отклик */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .30) 50%, rgba(255, 255, 255, 0) 68%);
  transform: translateX(-130%);
  transition: transform .95s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .45); }

/* 7. мягкие стыки между секциями */
.sec { position: relative; transition: transform .6s var(--ease); }
.sec::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -44px;
  height: 88px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(213, 194, 251, 0), rgba(213, 194, 251, .07) 50%, rgba(213, 194, 251, 0));
}

/* 8. полоса прогресса чтения */
.premium-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 90;
  background: linear-gradient(90deg, rgba(213, 194, 251, .95), rgba(126, 112, 255, .95));
  box-shadow: 0 0 18px rgba(213, 194, 251, .5);
  transition: width .12s linear;
}

/* 9. кнопка наверх с кольцом */
.premium-top {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 70;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 7, 21, .78);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.premium-top.is-on { opacity: 1; transform: none; }
.premium-top svg { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(-90deg); }
.premium-top circle { fill: none; stroke-width: 2; }
.premium-top .track { stroke: rgba(255, 255, 255, .16); }
.premium-top .bar { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 138; stroke-dashoffset: 138; transition: stroke-dashoffset .15s linear; }
.premium-top span { position: relative; font-size: 17px; }

/* 10. волна от точки нажатия */
.premium-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: radial-gradient(circle, rgba(213, 194, 251, .45), rgba(213, 194, 251, 0) 70%);
  animation: premiumRipple .7s var(--ease) forwards;
}
@keyframes premiumRipple { to { transform: scale(2.6); opacity: 0; } }

/* 11. кольцо курсора, сам курсор остаётся, чтобы не мешать формам */
.premium-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  display: none;
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.premium-cursor.is-big {
  width: 50px; height: 50px;
  margin: -25px 0 0 -25px;
  background: rgba(213, 194, 251, .12);
  border-color: rgba(213, 194, 251, .7);
}
@media (hover: hover) and (pointer: fine) { .premium-cursor { display: block; } }

/* 12. ссылки меню: подчёркивание с проездом */
nav a { position: relative; }
nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
nav a:hover::after { transform: scaleX(1); }

/* 13. плавность по умолчанию */
a, button, .btn, .sold-card, .case, .step, input, select, textarea {
  transition-timing-function: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  /* по просьбе владельца анимации остаются включёнными и здесь */
}