:root{
  --bg-black:#050505;
  --matte-black:#0a0a0a;
  --neon-blue:#005eff;
  --neon-blue-soft:rgba(0,94,255,.22);
  --text-white:#ffffff;
  --text-grey:#666666;
  --font-main:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --card-w:520px;
  --card-h:620px;
  --img-h:460px;
  --gap:clamp(20px,3vw,56px);

  --cta-radius:14px;
  --cta-border:1px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html.no-scroll, html.no-scroll body{ overflow:hidden; }

body{
  background:var(--bg-black);
  color:var(--text-white);
  font-family:var(--font-main);
  overflow:hidden;
}

.matte-grid-overlay{
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--neon-blue-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--neon-blue-soft) 1px, transparent 1px);
  background-size:70px 70px;
  opacity:.10;
  z-index:1;
  pointer-events:none;
}

/* header */
.site-header{
  position:fixed; top:0; left:0; right:0;
  padding:20px 30px;
  z-index:1000;
}
.header-content{display:flex;justify-content:space-between;align-items:center;}
.brand-logo{font-weight:900;font-size:1.3rem;letter-spacing:6px;}
.social-nav{display:flex;gap:18px;align-items:center;}

.nav-telegram-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;
  border:1px solid var(--neon-blue);
  color:var(--neon-blue);
  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:2px;
  text-decoration:none;
  transition:.2s;
}
.nav-telegram-btn:hover{background:var(--neon-blue);color:#000;transform:translateY(-2px);}

.nav-social-link{
  color:var(--text-grey);
  font-size:1.32rem;
  transition:.2s;
  text-decoration:none;
}
.nav-social-link:hover{color:var(--neon-blue);transform:translateY(-2px);}

/* viewport/world */
.viewport{
  width:100vw;height:100vh;position:relative;
  touch-action:pan-y;
}
.world{
  display:flex;height:100vh;width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
  gap:var(--gap);
  position:relative;
  z-index:2;
}
.section{
  height:100vh;flex:0 0 auto;width:max-content;
  display:flex;flex-direction:column;justify-content:center;
  padding:20px;
}
.narrow-section{ width:70vw; }
.section-hero{ padding-left:40px; }

/* hero */
.hero-main-text{ max-width:1400px; }
.hero-main-text h1{
  font-size:clamp(3.2rem,6.8vw,7.2rem);
  font-weight:900;
  line-height:.95;
  letter-spacing:-.02em;
  text-transform:uppercase;
  opacity:0;
  animation:heroTitleIn 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes heroTitleIn{
  0%{opacity:0;transform:translateY(14px);filter:blur(6px);}
  100%{opacity:1;transform:translateY(0);filter:blur(0);}
}
.hero-sub{
  margin-top:15px;
  font-family:var(--font-mono);
  color:var(--neon-blue);
  letter-spacing:4px;
  font-size:.9rem;
  opacity:0;
  animation:heroSubIn 1.0s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:.25s;
}
@keyframes heroSubIn{
  0%{opacity:0;transform:translateY(8px);filter:blur(4px);}
  100%{opacity:1;transform:translateY(0);filter:blur(0);}
}

/* galleries */
.gallery-tight{ padding-left:20px; padding-right:20px; }
.section-gallery,.section-ready-covers{ justify-content:flex-start; padding-top:120px; padding-bottom:40px; }

.gallery-title-wrapper{
  margin-bottom:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  max-width:min(92vw,900px);
}
.g-tag{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:3px;
  color:var(--neon-blue);
  opacity:.9;
  margin-bottom:8px;
  white-space:nowrap;
}
.g-title{ font-size:2.5rem; font-weight:900; line-height:1; }

.gallery-container{
  display:flex;
  gap:14px;
  width:max-content;
  align-items:flex-start;
}

/* cards */
.p-card{
  background:var(--matte-black);
  border:1px solid #151515;
  padding:14px;
  width:var(--card-w);
  height:var(--card-h);
  flex:0 0 auto;
  transition:.25s;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.p-card:hover{
  border-color:var(--neon-blue);
  transform:translateY(-6px);
  box-shadow:0 14px 40px rgba(0,94,255,.12);
}
.p-img{
  width:100%;
  height:var(--img-h);
  background-size:cover;
  background-position:center;
  margin-bottom:14px;
}
.p-category{
  font-family:var(--font-mono);
  font-size:1.05rem;
  opacity:.9;
  margin-bottom:8px;
}
.p-artist{
  font-size:1.55rem;
  font-weight:900;
  line-height:1.05;
}

/* shop */
.section-shop{ align-items:flex-start; padding-right:10px; }
.shop-card-integrated{
  background:var(--matte-black);
  padding:25px;
  max-width:560px;
  border-left:4px solid var(--neon-blue);
}
.shop-card-integrated h2{line-height:1;margin-bottom:10px;}
.shop-card-integrated p{line-height:1.5;max-width:52ch;}
.shop-btn{
  display:inline-block;
  margin-top:15px;
  padding:12px 30px;
  background:var(--neon-blue);
  color:#000;
  text-decoration:none;
  font-weight:900;
  transition:.2s;
}
.shop-btn:hover{transform:scale(1.03);}

/* contacts */
.section-contacts{
  align-items:flex-start;
  justify-content:center;
  width:min(92vw,980px);
  padding-left:min(6vw,80px);
  padding-right:30px;
  position:relative;
}

.c-label{
  font-family:var(--font-mono);
  color:var(--neon-blue);
  font-size:.8rem;
  letter-spacing:3px;
  margin-bottom:18px;
  opacity:.8;
}

/* ✅ FIX BORDER: рисуем рамку псевдо-элементом */
.contact-link-big{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  width:min(980px,92vw);
  padding:22px 22px;

  border-radius:var(--cta-radius);
  color:var(--neon-blue);
  text-decoration:none;

  opacity:0;
  transform:translateY(18px);
  filter:blur(7px);

  /* чтобы рамка не резалась */
  transform:translate3d(0,18px,0);
  -webkit-transform:translate3d(0,18px,0);
  isolation:isolate;
}

.contact-link-big::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--cta-radius);
  border:var(--cta-border) solid rgba(0,94,255,.65);
  pointer-events:none;

  /* супер важно для идеального сглаживания углов */
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

.contact-link-big .cta-text{
  font-weight:900;
  font-size:clamp(3.0rem,6.6vw,6.2rem);
  line-height:1.02;
  letter-spacing:-.02em;
  position:relative;
  z-index:1;
}

.contact-link-big.reveal{
  animation:ctaIn 1.05s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes ctaIn{
  0%{opacity:0;transform:translate3d(0,18px,0);filter:blur(7px);}
  100%{opacity:1;transform:translate3d(0,0,0);filter:blur(0);}
}

.contact-footer-info{
  margin-top:24px;
  font-family:var(--font-mono);
  font-size:.85rem;
  color:#888;
  line-height:1.7;
}

.bottom-footer{
  position:absolute;
  bottom:20px;
  left:20px;
  width:calc(100% - 40px);
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--text-grey);
}

/* end social fixed */
.end-social-fixed{
  position:fixed;
  top:18px;
  right:18px;
  display:flex;
  gap:16px;
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  z-index:9999;
  transition:.45s cubic-bezier(.16,1,.3,1);
}
.end-social-link{
  color:rgba(255,255,255,.42);
  font-size:1.55rem;
  text-decoration:none;
  transition:.2s;
  pointer-events:auto;
}
.end-social-link:hover{color:var(--neon-blue);transform:translateY(-2px);}

body.at-end .end-social-fixed{opacity:1;transform:translateY(0);pointer-events:auto;}
body.at-end .site-header .social-nav{opacity:0;pointer-events:none;transform:translateY(-10px);transition:.3s;}

/* lightbox */
.lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  z-index:5000;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.lightbox.active{display:flex;}
.lightbox-inner{
  position:relative;
  width:min(1100px,96vw);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}
.lightbox img{
  width:100%;
  max-height:74vh;
  object-fit:contain;
  border:1px solid rgba(0,94,255,.55);
  background:#000;
}
.lightbox-close{
  position:absolute;
  top:-8px;
  right:-8px;
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(0,94,255,.55);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:18px;
}
.lightbox-buy-btn{
  width:min(640px,100%);
  background:var(--neon-blue);
  color:#000;
  padding:14px 18px;
  text-align:center;
  text-decoration:none;
  font-weight:900;
  border-radius:10px;
}

/* ✅ MOBILE */
@media (max-width: 900px){
  :root{
    --card-w:86vw;
    --card-h:72vh;
    --img-h:52vh;
    --gap:18px;
    --cta-radius:12px;
  }

  .site-header{ padding:14px 16px; }
  .brand-logo{ font-size:1.05rem; letter-spacing:5px; }

  .nav-telegram-btn{ padding:8px 10px; font-size:.85rem; letter-spacing:1px; }
  .nav-social-link{ font-size:1.15rem; }

  .section-hero{ padding-left:18px; }
  .hero-main-text h1{ font-size:clamp(2.1rem,9vw,3.2rem); }
  .hero-sub{ font-size:.75rem; letter-spacing:3px; }

  .section-gallery,.section-ready-covers{ padding-top:88px; }
  .g-title{ font-size:2.0rem; }

  .section-contacts{
    width:100vw;
    padding-left:calc(16px + env(safe-area-inset-left));
    padding-right:calc(16px + env(safe-area-inset-right));
  }

  .contact-link-big{
    width:100%;
    max-width:100%;
    padding:16px 12px;
  }
  .contact-link-big .cta-text{
    font-size:clamp(2.1rem,9.6vw,3.4rem);
  }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ✅ 100% фикс закруглений (даже на краю экрана) */
.contact-link-big::before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(0,94,255,.65);

  /* radius */
  border-radius:var(--cta-radius);

  /* ГЛАВНЫЙ ФИКС: физически обрезаем углы */
  clip-path: inset(0 round var(--cta-radius));

  pointer-events:none;

  /* сглаживание */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: visible
}

/* =======================================================
   ✅ OVERRIDE FIX (НЕ УДАЛЯЕМ, А ПЕРЕКРЫВАЕМ В КОНЦЕ)
   ======================================================= */
.contact-link-big{
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-font-smoothing: antialiased;
}

.contact-link-big::before{
  /* убираем clip-path который ломает рамку у части браузеров */
  clip-path: none !important;
}
.contact-link-big{ opacity:1 !important; filter:none !important; transform:none !important; }
/* ===== CTA APPEAR ANIMATION (ADD TO THE END) ===== */

.contact-link-big{
  /* стартовое состояние (пока нет .reveal) */
  opacity:0;
  transform:translate3d(0,18px,0);
  filter:blur(8px);
  will-change: transform, filter, opacity;
}

/* рамку тоже анимируем */
.contact-link-big::before{
  opacity:0;
  transform:translateZ(0) scaleX(.92);
  transition:
    opacity .55s cubic-bezier(.16,1,.3,1),
    transform .75s cubic-bezier(.16,1,.3,1);
}

/* текст отдельно — выглядит “дороже” */
.contact-link-big .cta-text{
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:
    opacity .6s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
}

/* финальное состояние */
.contact-link-big.reveal{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
  transition:
    opacity .65s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1),
    filter .9s cubic-bezier(.16,1,.3,1);
}

.contact-link-big.reveal::before{
  opacity:1;
  transform:translateZ(0) scaleX(1);
}

.contact-link-big.reveal .cta-text{
  opacity:1;
  transform:translate3d(0,0,0);
}
/* ===== CONTACT TEXT APPEAR (ADD TO THE END) ===== */

/* старт — скрыто */
.section-contacts .c-label,
.section-contacts .contact-footer-info{
  opacity:0;
  transform:translate3d(0,12px,0);
  filter:blur(6px);
  will-change: transform, filter, opacity;
  transition:
    opacity .65s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1),
    filter .9s cubic-bezier(.16,1,.3,1);
}

/* когда дошёл до конца (body.at-end ставится твоим JS) */
body.at-end .section-contacts .c-label,
body.at-end .section-contacts .contact-footer-info{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}

/* задержки, чтобы было “по ступенькам” */
body.at-end .section-contacts .c-label{
  transition-delay:.08s;
}

body.at-end .section-contacts .contact-footer-info{
  transition-delay:.18s;
}