:root {
  --clr-bg-main: #e4edf1;
  --clr-bg-accent: #8badc9;
  --clr-bg-chip: #99b3cc;
  --clr-txt-main: #111;
  --clr-txt-light: #fff;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --radius-sm: 0.375rem;  /* 6px */
  --radius-lg: 1.25rem;   /* 20px */
  --shadow-sm: 0 0.25rem 0.75rem rgba(0,0,0,.1);
  --shadow-md: 0 0.5rem 1.25rem rgba(0,0,0,.15);
  font-size: 16px; /* base = 1rem */
}

/* ==========  CUSTOM FONTS  ========== */
@font-face{
  font-family:'Viaoda Libre';
  src:url('../assets/fonts/ViaodaLibre-Regular.woff2') format('woff2');
  font-weight:400;                    /* Regular */
  font-style:normal;
  font-display:swap;
}

/* ---------- SF UI Display ---------- */
@font-face{
  font-family:'SF UI Display';
  src:url('../assets/fonts/SF-UI-Display-Regular.woff') format('woff');
  font-weight:400;                    /* Regular */
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'SF UI Display';
  src:url('../assets/fonts/sf-ui-display-light-58646b3e0551.woff') format('woff');
  font-weight:300;                    /* Light */
  font-style:normal;
  font-display:swap;
}

/* ---------- Apple SD Gothic Neo ---------- */
@font-face{
  font-family:'Apple SD Gothic Neo';
  src:url('../assets/fonts/AppleSDGothicNeo-Medium.woff2') format('woff2');
  font-weight:500;                    /* Medium */
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Apple SD Gothic Neo';
  src:url('../assets/fonts/AppleSDGothicNeo-SemiBold.woff2') format('woff2');
  font-weight:600;                    /* SemiBold */
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Apple SD Gothic Neo';
  src:url('../assets/fonts/AppleSDGothicNeo-ExtraBold.woff2') format('woff2');
  font-weight:800;                    /* ExtraBold */
  font-style:normal;
  font-display:swap;
}

/* ---------- Apple SD Gothic Neo ---------- */
@font-face{
  font-family: 'Barkerville';
  src: url('../assets/fonts/baskervi.woff') format('woff');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* ========  RESET / BASICS  ======== */
*,
*::before,
*::after { box-sizing: border-box; }
html{
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior:smooth;
}
html::-webkit-scrollbar{
  display:none;                   /* WebKit */
}
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--clr-bg-main);
  color: var(--clr-txt-main);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
picture,
video{
  max-width: 100%;
  display: block;
  height: auto;
}
iframe{
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}

input{
  margin: 0;
}

/* ========  UTILITIES  ======== */
.container-header {
  width: min(92vw, 120rem);
  margin-inline: auto;
}

.container {
  width: min(100vw, 120rem);
  margin-inline: auto;
}

/* ========  HEADER  ======== */
.header {
  background: var(--clr-bg-main);
}
.header__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  padding: 26px 0;
}
.logo img { height: 2.5rem; }
.nav {
  display: flex;
  width: 42%;
  flex-wrap: wrap;
  justify-content: space-between;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(.75rem, 2vw, 1.3rem);
}
.nav-item{
  font-family:'SF UI Display';  font-weight:400;
}
.socials-bubble{
  display:flex;
  gap:1.2rem;               /* расстояние между иконками */
  padding:8px 45px;         /* внутр. отступы «капсулы» */
  background:#8DA4BD;       /* подложка как на макете */
  border-radius:9999px;     /* идеально-круглые края */
  align-items:center;
}

.soc{
  display:flex;
}

.soc-ico{
  pointer-events:none;      /* чтобы клик шёл по <a>, не по объекту */
}
/* ========  HERO  ======== */
.hero {
  padding-block: var(--space-4);
}
.hero__content {
  display: flex;
  justify-content: space-between;
  margin-left: 8.3%;
  margin-right: 9.8%;
}
.hero__text {
  width: 45%;
}
.hero__image {
  display: flex;
  align-items:center;        /* вертикальный центр */
  justify-content:center;
  width: 35.6%;
}
.title {
  font-family: 'Viaoda Libre', serif;
  font-weight: 400;
  font-size: clamp(4.7rem,  /* ≤1300 px */
                   calc(7.23vw - 1.17rem),  /* 1300-1920 px */
                   7.5rem);
  line-height: .8;
  margin: 0;
}
.subtitle {
  text-transform: uppercase;
  font-family: 'SF UI Display';
  font-weight: 300;
  font-size: clamp(1.6rem, calc(1.37vw + 0.49rem), 2.13rem);
  letter-spacing: clamp(0.02rem, calc(0.72vw - 0.7rem), 0.3rem);
  margin-block: var(--space-2);
  line-height: 1.1;
}
.description {
  font-family: 'SF UI Display';
  font-weight: 300;
    font-size: clamp(
      1.1rem,                    /* ≤1300 px */
      calc(1.03vw + 0.26rem),    /* 1300-1920 px */
      1.5rem                     /* ≥1920 px */
  );
  text-align: justify;
}

/* ========  COLLECTIONS  ======== */
.collections{
  background:#8badc9;
  padding-block:var(--space-3);
}

.collections-scroll__wrapper{
  display:flex !important;          /* принудительно строкой */
  overflow-x:auto;
  justify-content: space-evenly;
  gap:var(--space-2);
  padding-inline:var(--space-2);
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.collections-scroll__wrapper::-webkit-scrollbar{display:none;}

.collection-card{
  all:unset;              /* стираем ВСЁ, что на неё раньше навесили */
  display:block;
  flex:0 0 10rem;         /* 160 px фикс – как у релизов */
  scroll-snap-align:start;
  text-align:center;
  box-sizing:border-box;  /* вернём after all:unset */
}
.collection-card img{
  width:100%;
  border-radius:.5rem;
  box-shadow:var(--shadow-sm);
}

.collection-card .title{
  margin:.5rem 0 0;
  font-family: Arial, Helvetica, sans-serif; /* Arial как базовый, дальше фолбэки */
  font-weight: 700;      /* Bold */
  font-style: italic;    /* Italic */
  font-size:.85rem;
  text-transform:uppercase;
  text-align:left;
  line-height:1.2rem;
  color:#fff;
}
.collection-card .source{
  font-family: Arial, Helvetica, sans-serif; /* базовый — Arial */
  font-weight: 400;      /* обычный (Regular) */
  font-style: italic;    /* курсив */
  
  font-size:.6rem;
  text-transform:uppercase;
  color:#fff;
  text-align:left;
  line-height:1.2rem;
  margin:0;
}
/* ========  RELEASES  ======== */
.releases {
  background: url("../assets/img/release-background.jpg");
  padding-top: 70px;
  padding-bottom: 235px;
  background-attachment: fixed;
  background-position: center;
  transform: translateZ(0);
}
.releases-scroll__wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--space-2);
}
.releases-scroll__wrapper::-webkit-scrollbar { display:none; }
.release-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  text-align: center;
  padding-left: 26px;
}
.release-item img {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.release-title { 
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;             /* bold */
  font-style: italic;           /* italic */
  font-size:1.025rem;
  text-transform:uppercase;
  text-align:left;
}
.release-artist { 
  font-family: Arial, Helvetica, sans-serif;
  font-weight:400;              /* regular */
  font-style:italic;            /* italic */
  font-size:.77rem;
  text-transform:uppercase;
  color:#444;
  text-align:left;
}

.carousel-dots{
  display:flex;
  justify-content:center;
  gap:18px;
  margin:24px 0;
}
.carousel-dots span{
  width:18px;height:18px;
  border-radius:50%;
  background:#8da4bd;
  opacity:.45;
  cursor:pointer;
  transition:opacity .3s, transform .3s;
}
.carousel-dots span.active{
  opacity:1;transform:scale(1.15);
}

/* ========== MINI PLAYER ========== */
.mini-player{
  position:fixed; left:50%; bottom:60px;
  transform:translateX(-50%) translateY(100%);
  width:660px; max-width:calc(100% - 48px);
  padding:22px 12px 20px 92px;          /* место под обложку */
  background:#fff; border-radius: 100px;
  box-shadow:0 12px 36px rgba(0,0,0,.15);
  display:flex;
  align-items:center;
  justify-content: flex-end;
  font-family:inherit; font-size:14px;
  transform:translateX(-50%) translateY(0);     /* сразу на месте */
  opacity:1;
  z-index:1000;
}
input[type=range].no-thumb::-moz-range-thumb{
  width:0; height:0;
  opacity:0;
  pointer-events:none;   /* чтобы не хватался */
}
input[type="range" i] {
  color: #c5d6e4;
}
.mini-player.show{ transform:translateX(-50%) translateY(0); opacity:1; }
.hidden{ pointer-events:none; }

.pl-panel{
  width: 49%;
}

.pl-cover{
  position:absolute; left:5.2%; top:50%;
  width: 96px; height:96px; object-fit:cover;
  border-radius:50%; transform:translate(-25%, -50%);
}

.pl-meta{
  grid-area:meta;
  color: #8badc9;
  padding-right: 17px;
}
.pl-title{                              /* Apple ExtraBold (800) */
  font-family: 'Apple SD Gothic Neo', sans-serif;
  font-weight: 800;                     /* Extra-Bold */
  font-size: 1rem;
  display:block;
}

.pl-artist{                             /* Apple Medium (500) */
  font-family: 'Apple SD Gothic Neo', sans-serif;
  font-weight: 500;                     /* Medium */
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pl-controls{
  grid-area:controls;
  display:flex;
  justify-content: center;
  gap:24px;
  margin-bottom: 20px;
}
.pl-btn{ width:32px; height:32px; border:none; background:none; cursor:pointer; }
.ico{ background: center/contain no-repeat; }
.prev { background-image:url('../assets/img/prev.svg'); }
.play { background-image:url('../assets/img/play.svg'); }
.pause{ background-image:url('../assets/img/pause.svg'); }
.next { background-image:url('../assets/img/next.svg'); }
.vol  { background-image:url('../assets/img/vol.svg'); width:24px; height:24px; }
.pl-progress{
  display:grid;
  grid-template-areas:
    "bar bar"
    "cur dur";
  row-gap:6px;
}
#pl-range{
  flex:1 1 auto;
  accent-color:#8da4bd;
  height:4px;
  grid-area:bar;
  width: 100%;
}
#pl-cur{ grid-area:cur; justify-self:start; }
#pl-dur{ grid-area:dur; justify-self:end; }
.ts{
  font-family:'Apple SD Gothic Neo', serif;
  font-weight:600;
  font-size:.72rem;
  color:#8badc9;
  text-align:center;
}

.pl-vol{
  grid-area:vol;
  display:flex;
  align-items:center;
}
#pl-vol{
  width:100px;
  accent-color:#8da4bd;
  height:3px;
}

/* ========  GALLERY  ======== */
.gallery {
  background: url("../assets/img/gallery-background.png") center / cover no-repeat;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-3);
}
.gallery__content{
  margin: 0 auto;                        /* центр вместо margin-left:20% */
  display:flex; flex-direction:column; align-items:center;
  margin-left: 20%;
}
.gallery-image-container{                /* блок: картинка + точки */
  display:flex;
  flex-direction:column;
  align-items:center;
  margin: 100px 0;
}

/* гибкая картинка */
.gallery-image-current{
  width: clamp(260px, 70vw, 28rem);      /* 260-448 px */
  height:auto;
  border-radius:.25rem;
  box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.18));
  transition: opacity .4s ease-in-out;
  opacity: 1;
  box-shadow:
    0 16px 32px rgba(0, 0, 0, .20),   /* главный мягкий шлейф */
    0  4px 12px rgba(0, 0, 0, .08),   /* лёгкий inner-glow по периметру */
    0  0  0 1px rgba(255,255,255,.12);/* тонкая “рамка”-блик для контраста */
}
.gallery-image-current.fade-out{ opacity: 0; }
.gallery-image-current.fade-in { opacity: 0; }

@keyframes dot-pulse {
  0%   { transform: scale(.9); }
  55%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* класс, который будет на 0.25 с */
.dot.pulse{
  animation: dot-pulse .25s cubic-bezier(.35,1.35,.45,1);
}

.slider-dots{
  display: flex;
  width: 37%;
  justify-content: space-between;
  margin-top:35px;
}
.slider-dots .dot{
  background:#8da4bd;
  width:18px;
  height:18px;
  display:inline-block;

  border-radius:50%;
  opacity:.45;
  cursor:pointer;
  transition:opacity .3s;
}
.slider-dots .dot.active{opacity:1;}

@media(max-width:480px){
  .slider-dots{gap:10px;}
  .slider-dots .dot{width:10px;height:10px;}
}

/* ========  VIDEO SECTION  ======== */
.video-section {
  background: url("../assets/img/release-background.jpg") center / cover no-repeat;
  padding-block: var(--space-4);
}
.video-section__content {
  display: flex;
  justify-content: space-around;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem,100%), 1fr));
  align-items: center;
}
.video-wrapper{
  width: 52%;
}
.video-wrapper iframe {
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.video-description {
  background: var(--clr-txt-light);
  width: 32.6%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.video-description__title{
  font-family: 'Barkerville', serif;            /* ← вместо Viaoda Libre */
  font-weight: 400;                             /* Regular */
  font-size: clamp(6rem, calc(7.74vw - 4.65px), 9rem);
  line-height: clamp(6rem, calc(7.74vw - 4.65px), 9rem);
  margin: 0;
  padding-left: 10%;
  padding-bottom: 40px;
}
.video-description__content {
  font-family: 'SF UI Display', sans-serif;
  font-weight: 300;                  /* Light */
  font-size: clamp(1.2rem, calc(1.29vw + 2.43px), 1.7rem);
  padding: 0 10%;
  text-align: justify;
}
.video-description__author {
  padding-top: 70px;
  padding-bottom: 20px;
}

/* ========  FOOTER  ======== */
.footer {
  background: var(--clr-bg-chip);
  padding-block: var(--space-3);
}
.footer__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.social {
  font-family: Arial, Helvetica, sans-serif;  /* Arial */
  font-weight: 700;                           /* bold  */
  font-style: italic;                         /* italic*/

  display:flex;
  align-items:center;
  gap:var(--space-1);
  color:var(--clr-txt-light);
  font-size:clamp(.75rem,1.8vw,.875rem);
  opacity:.85;
  transition:opacity .3s;
}
.social:hover { opacity: 1; }
.social img { width: 1rem; height: 1rem; }

@media (max-width: 1300px){
  .hero__content{
    flex-direction:column;
  }
  .hero__image{
    width: 100%;
  }
  .hero__text{
    width: 560px;
    margin: 0 auto;
  }
  .nav{
    display: none;
  }
  .video-section__content{
    flex-direction: column;
  }
  .video-description{
    margin-top: 70px;
    width: 600px;
  }
  .video-wrapper{
    width: 600px;
  }
}
@media (max-width: 768px){
  .hero__content{
    margin-left: 0;
    margin-right: 0;
  }
  .mini-player{
    transform:translateX(-50%) translateY(0) scale(.80);
    width: 555px;
    padding: 8px 12px 8px 92px;
  }
  .pl-cover{width:72px;height:72px;}
  .pl-title{
    font-size: 0.8rem;
  }
  .pl-artist{
    font-size: 0.6rem;
  }
  .pl-meta{
    padding-right: 12px;
  }
  .pl-panel{
    width: 38%;
  }
  .pl-btn{
    width: 29px;
  }
  .gallery__content{
    margin-left: auto;
  }
  .video-description{
    width: 90vw;
  }
  .video-wrapper{
    width: 90vw;
  }
  .release-item{
    width: 210px;
  }
  .carousel-dots span{
    width: 11px;
    height: 11px;
  }

}

@media (max-width: 608px){
  .hero__text, .video-description, .video-wrepper{
    width: 92vw;
  }
  .socials-bubble{
    padding: 4px 18px;
  }
  .soc-ico{
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 480px){
  .header__content{
    flex-direction: column;
  }
  .logo{
    padding-bottom: 20px;
  }
  .title{
    font-size: 3.4rem;
    line-height: 1.0;
  }
  .mini-player{
    padding: 8px 12px 8px 18%;
    justify-content: space-around;
  }
  .pl-controls{
    gap: 7px;
  }
  .pl-btn {
        width: 22px;
  }
  .pl-controls{
    margin-bottom: 10px;
  }
  .pl-vol {
    display: none;
  }
  .pl-cover{
    transform: translate(-15%, -50%);
  }
  .pl-meta{
    padding-right: 5px;
  }
  .pl-cover{width:56px;height:56px;}
  .release-item {
    width: 130px;
  }
  .release-title{
    font-size: 0.6rem;
  }
  .release-artist{
    font-size: 0.47rem;
  }
  .releases{
    padding-bottom: 185px;
  }
}