/*
Theme Name: Album Theme
Theme URI: https://www.aimotioncentre.com
Author: AI Motion Centre
Description: A premium, minimalist single-page landing theme for music videos.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: album-theme
*/

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --gold:#c9a84c;
  --gold-light:#e8c97a;
  --text-dim:rgba(255,255,255,0.5);
  --text-mid:rgba(255,255,255,0.75);
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
}
html,body{height:100%;overflow:hidden;background:#080808;}
body{font-family:'Helvetica Neue',Arial,sans-serif;color:#fff;position:relative;}

#bg{
  position:fixed;inset:0;z-index:0;
  background:url('Cover.jpg') no-repeat center center/cover;
  transform:scale(1.1);
  will-change:transform;
}
#overlay{
  position:fixed;inset:0;z-index:1;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.04) 0%,
      rgba(0,0,0,0.0)  20%,
      rgba(0,0,0,0.0)  45%,
      rgba(0,0,0,0.65) 80%,
      rgba(0,0,0,0.82) 100%);
}

/* Particles */
#cvs{position:fixed;inset:0;z-index:2;pointer-events:none;}

/* Nav */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:32px 56px;
  opacity:0;transform:translateY(-16px);
}
.nav-logo{font-size:0.68rem;font-weight:700;letter-spacing:0.25em;text-transform:uppercase;color:var(--text-mid);}
.nav-links{display:flex;gap:28px;}
.nav-links a{font-size:0.7rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;transition:color 0.25s;}
.nav-links a:hover{color:#fff;}

/* Bottom stack */
#content{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  padding:0 56px 48px;
  display:flex;flex-direction:column;gap:22px;
}

.eyebrow{
  display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(24px);
}
.eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;}
.eyebrow-text{font-size:0.68rem;font-weight:700;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-light);}
.eyebrow-rule{flex:1;height:1px;background:linear-gradient(to right,rgba(201,168,76,0.15),transparent);}

.title-wrap{opacity:0;transform:translateY(36px);}
h1{
  font-size:clamp(2.8rem,6.5vw,6rem);
  font-weight:800;line-height:0.9;
  letter-spacing:-0.02em;
  text-shadow:0 2px 32px rgba(0,0,0,0.5);
}
.title-en{
  display:block;
  margin-top:10px;
  font-size:clamp(0.78rem,1.3vw,1rem);
  font-weight:300;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text-mid);
}

.desc-block{
  font-size:clamp(0.8rem,1.1vw,0.9rem);
  line-height:1.9;
  color:var(--text-dim);
  max-width:440px;
  opacity:0;transform:translateY(24px);
}

.actions-row{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  opacity:0;transform:translateY(24px);
}

/* Watch CTA */
.btn-watch{
  display:inline-flex;align-items:center;gap:13px;
  background:rgba(255,255,255,0.09);
  border:1px solid rgba(255,255,255,0.32);
  color:#fff;
  padding:13px 28px 13px 16px;
  border-radius:60px;
  font-size:0.82rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background 0.3s,border-color 0.3s;
  position:relative;overflow:hidden;
}
.btn-watch:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.65);}
.btn-watch:active{transform:scale(0.97);}

.play-ring{
  width:32px;height:32px;border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  position:relative;
}
.play-ring::after{
  content:'';
  position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.38);
  animation:pring 2.2s ease-out infinite;
}
@keyframes pring{
  0%{transform:scale(1);opacity:0.7;}
  100%{transform:scale(1.75);opacity:0;}
}

.socials{display:flex;align-items:center;gap:14px;}
.soc-a{
  display:flex;align-items:center;gap:6px;
  color:var(--text-dim);text-decoration:none;
  font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;
  transition:color 0.22s;
}
.soc-a:hover{color:#fff;}
.soc-a svg{width:13px;height:13px;}
.sep{width:1px;height:16px;background:rgba(255,255,255,0.18);}

/* Footer bar */
#foot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:18px;
  opacity:0;transform:translateY(16px);
}
.foot-prod{font-size:0.65rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.28);}
.foot-links{display:flex;gap:18px;}
.foot-links a{font-size:0.68rem;color:rgba(255,255,255,0.32);text-decoration:none;letter-spacing:0.05em;transition:color 0.2s;}
.foot-links a:hover{color:rgba(255,255,255,0.7);}

/* Scroll indicator */
#scroll-ind{
  position:fixed;right:40px;bottom:52px;z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;
}
.scroll-label{font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.28);writing-mode:vertical-rl;}
.scroll-bar{width:1px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,0.3),transparent);animation:sbar 1.9s ease-in-out infinite;}
@keyframes sbar{
  0%{transform:scaleY(0);transform-origin:top;}
  49%{transform:scaleY(1);transform-origin:top;}
  50%{transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}

/* ─── MODAL ─── */
#modal{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;
}
#m-back{
  position:absolute;inset:0;
  background:rgba(0,0,0,0);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  cursor:pointer;
}
#m-inner{
  position:relative;
  width:96vw;
  max-width:1440px;
  opacity:0;
  transform:scale(0.86) translateY(44px);
}
#m-player{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 60px 140px rgba(0,0,0,0.9),0 0 0 1px rgba(255,255,255,0.07);
}
#m-player iframe{width:100%;height:100%;border:none;display:block;}
#m-close{
  position:absolute;top:20px;right:20px;z-index:10;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;width:38px;height:38px;border-radius:50%;
  font-size:0.95rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.3s var(--ease-expo);
}
#m-close:hover{background:rgba(255,255,255,0.22);transform:rotate(90deg);}
.m-cap{
  margin-top:20px;text-align:center;
  font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.35);
  font-weight:300;
}

/* Responsive */
@media(max-width:768px){
  #nav{padding:20px 22px;}
  .nav-links{display:none;}
  #content{padding:0 22px 30px;gap:16px;}
  h1{font-size:clamp(2.2rem,9vw,3.2rem);}
  .desc-block{display:none;}
  #scroll-ind{right:16px;bottom:36px;}
}
@media(max-width:480px){
  #content{padding:0 16px 24px;}
  .btn-watch{padding:11px 20px 11px 13px;font-size:0.76rem;}
  .sep ~ .soc-a{display:none;}
}