:root{

  --bg:#050505;

  --white:#ffffff;

  --text:rgba(255,255,255,0.82);

  --text-soft:rgba(255,255,255,0.65);

  --glass:rgba(255,255,255,0.06);

  --border:rgba(255,255,255,0.08);

  --accent:rgba(255,255,255,0.9);
}

/* =========================================
RESET
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins',sans-serif;
  background:#000;
  color:#fff;
  line-height:1.8;
}

/* =========================================
BACKGROUND
========================================= */

#gallery-premium{
  position:relative;
}

#gallery-premium .bg{

  min-height:100vh;

  padding:100px 20px 120px;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.55),
      rgba(0,0,0,0.75),
      rgba(0,0,0,0.95)
    ),
    url("images/img5.jpg");

  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

/* LIGHT OVERLAY */

#gallery-premium .bg::before{

  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 45%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.05), transparent 40%);

  pointer-events:none;
}

/* CONTAINER */

#gallery-premium .container{
  max-width:1200px;
  margin:auto;
  position:relative;
  z-index:2;
}

/* =========================================
TITLE
========================================= */

#gallery-premium .page-title{
  text-align:center;
  margin-bottom:80px;
}

#gallery-premium .page-title h1{

  font-size:clamp(3rem,6vw,5rem);

  font-weight:700;

  margin-bottom:18px;

  background:linear-gradient(to bottom,#fff,#d8d8d8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

#gallery-premium .page-title p{

  max-width:750px;
  margin:auto;

  color:var(--text);
  font-size:1.05rem;
  line-height:1.9;
}

/* =========================================
YEAR BLOCK (ACCORDION)
========================================= */

.year-item{

  position:relative;

  margin-bottom:25px;

  border-radius:28px;

  overflow:hidden;

  background:var(--glass);

  border:1px solid var(--border);

  backdrop-filter:blur(14px);

  transition:.4s ease;
}

/* HEADER */

.year-header{

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:28px 30px;

  cursor:pointer;

  transition:.3s ease;
}

.year-header:hover{
  background:rgba(255,255,255,0.04);
}

.year-left{
  display:flex;
  align-items:center;
  gap:18px;
}

.year-icon{
  font-size:2rem;
}

.year-title{
  font-size:1.4rem;
  font-weight:700;
}

.year-subtitle{
  font-size:.95rem;
  color:var(--text-soft);
}

/* ARROW */

.year-arrow{
  font-size:1.3rem;
  opacity:.7;
  transition:.3s ease;
}

/* CONTENT */

.year-content{
  max-height:0;
  overflow:hidden;

  transition:max-height .5s ease, padding .5s ease;
  padding:0 30px;
}

/* ACTIVE STATE */

.year-item.active{
  border-color:rgba(255,255,255,0.25);
  box-shadow:0 0 30px rgba(255,255,255,0.06);
}

.year-item.active .year-content{
  max-height:320px;
  padding:25px 30px 35px;
}

.year-item.active .year-arrow{
  transform:rotate(180deg);
}

/* =========================================
GALLERY CARD
========================================= */

.year-inner{
  display:flex;
  justify-content:center;
}

.gallery-card{

  text-align:center;

  padding:40px;

  border-radius:24px;

  background:rgba(255,255,255,0.04);

  border:1px solid rgba(255,255,255,0.1);

  backdrop-filter:blur(12px);

  max-width:500px;

  transition:.35s ease;
}

.gallery-card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,0.25);
}

.gallery-card strong{
  display:block;
  font-size:1.4rem;
  margin-bottom:10px;
  color:#fff;
}

.gallery-card span{
  display:block;
  color:var(--text-soft);
  margin-bottom:22px;
  line-height:1.7;
}

/* BUTTON */

.gallery-btn{

  display:inline-block;

  padding:12px 22px;

  border-radius:999px;

  background:rgba(255,255,255,0.08);

  border:1px solid rgba(255,255,255,0.2);

  color:#fff;

  font-weight:700;

  text-decoration:none;

  transition:.3s ease;
}

.gallery-btn:hover{
  background:rgba(255,255,255,0.15);
  transform:scale(1.05);
}

/* =========================================
GLOW EFFECT (NEUTRAL)
========================================= */

.year-item::before{

  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:60%;
  height:100%;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );

  transform:skewX(-25deg);

  animation:shine 6s linear infinite;
}

@keyframes shine{
  0%{ left:-120%; }
  100%{ left:140%; }
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:768px){

  #gallery-premium .bg{
    padding:100px 16px 80px;
    background-attachment:scroll;
  }

  .year-header{
    padding:22px;
  }

  .year-title{
    font-size:1.2rem;
  }

  .gallery-card{
    padding:28px;
  }

  .gallery-btn{
    width:100%;
    text-align:center;
  }
}