/* ═══════════════════════════════════════════════════════════════════════════
   style.css — Fifi's Spaceship · 7th Records · 2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── Variables ──────────────────────────────────────────────────────────── */
:root{
  --bg:#080705;
  --amber:#c8843e;
  --gold:#e0a84a;
  --cream:#f0e5d0;
  --red:#c21028;
  --muted:#6a5540;
  --dim:#2a1e14;
  --ease:cubic-bezier(0.76,0,0.24,1);
}

html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);cursor:default}

/* ── Grain overlay ──────────────────────────────────────────────────────── */
.grain{
  position:fixed;inset:0;z-index:999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.045;mix-blend-mode:overlay;
}

/* ── Sections (scroll-jacking) ──────────────────────────────────────────── */
.section{
  position:fixed;inset:0;width:100%;height:100vh;overflow:hidden;
  transform:translateY(100%);
  transition:transform 0.9s var(--ease);
  will-change:transform;
}
.section.active{transform:translateY(0)}
.section.prev{transform:translateY(-100%)}

/* ── Side navigation ────────────────────────────────────────────────────── */
.side-nav{
  position:fixed;right:32px;top:50%;transform:translateY(-50%);
  z-index:100;display:flex;flex-direction:column;gap:14px;align-items:center;
}
.nav-dot{
  width:6px;height:6px;border-radius:50%;
  border:1.5px solid rgba(240,229,208,0.35);
  cursor:pointer;transition:all 0.3s;position:relative;
}
.nav-dot.active{background:var(--cream);border-color:var(--cream);transform:scale(1.4)}
.nav-dot:hover{border-color:var(--amber)}
.nav-dot::after{
  content:attr(data-label);
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:0.15em;
  color:var(--cream);white-space:nowrap;opacity:0;
  transition:opacity 0.2s;pointer-events:none;text-transform:uppercase;
}
.nav-dot:hover::after{opacity:1}

/* ── Section label (partagé) ────────────────────────────────────────────── */
.section-label{
  font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:0.4em;
  text-transform:uppercase;color:var(--amber);
}

/* ═══════════════════════════════════════════════════════════════════════════
   S1 — HERO
   ═══════════════════════════════════════════════════════════════════════════ */
#s1{background:var(--bg)}

#s1 .bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:brightness(0.60) saturate(0.75);
  transform:scale(1.04);transition:transform 1.2s var(--ease) 0.1s;
}
#s1.active .bg{transform:scale(1)}

#s1 .vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(8,7,5,0.85) 100%);
}

#s1 .content{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;
  padding:0 8vw 8vh;
}

#s1 .band-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(72px,12vw,180px);
  line-height:0.88;letter-spacing:0.04em;
  color:var(--cream);text-align:left;
  opacity:0;transform:translateY(30px);
  transition:opacity 0.9s var(--ease) 0.3s, transform 0.9s var(--ease) 0.3s;
}
#s1.active .band-name{opacity:1;transform:translateY(0)}
#s1 .band-name .line{display:block}

#s1 .scroll-hint{
  position:absolute;bottom:40px;right:8vw;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.35em;
  text-transform:uppercase;color:rgba(240,229,208,0.4);
  opacity:0;transition:opacity 0.6s ease 1.2s;
}
#s1.active .scroll-hint{opacity:1}

#s1 .scroll-line{
  width:1px;height:40px;
  background:linear-gradient(to bottom,var(--amber),transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{opacity:0.4;transform:scaleY(1)}
  50%{opacity:1;transform:scaleY(1.15)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   S2 — SINGLE
   ═══════════════════════════════════════════════════════════════════════════ */
#s2{display:flex;background:var(--bg)}

#s2 .left{
  position:relative;width:50%;height:100%;overflow:hidden;
  border-right:1px solid rgba(200,132,62,0.1);
}
#s2 .left-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#0f0a05,#1a100a);
}
#s2 .artwork-wrap{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
#s2 .artwork-glow{
  position:absolute;width:60%;padding-bottom:60%;border-radius:50%;
  background:radial-gradient(circle,rgba(200,132,62,0.15),transparent 70%);
  filter:blur(40px);
}
#s2 .artwork-wrap img{
  position:relative;width:clamp(240px,45%,420px);
  aspect-ratio:1;object-fit:cover;
  box-shadow:0 30px 80px rgba(0,0,0,0.7),0 0 0 1px rgba(200,132,62,0.15);
  opacity:0;transform:scale(0.92);
  transition:opacity 0.8s ease 0.2s, transform 1s var(--ease) 0.2s;
}
#s2.active .artwork-wrap img{opacity:1;transform:scale(1)}

#s2 .right{
  width:50%;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:6vh 7vw;
}

#s2 .new-single{
  font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:0.4em;
  text-transform:uppercase;color:var(--amber);
  opacity:0;transform:translateY(16px);transition:all 0.7s ease 0.1s;
}
#s2.active .new-single{opacity:1;transform:translateY(0)}

#s2 .single-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(42px,6vw,88px);
  font-weight:300;font-style:italic;line-height:0.95;
  color:var(--cream);margin:16px 0 20px;
  opacity:0;transform:translateY(20px);transition:all 0.8s var(--ease) 0.2s;
}
#s2.active .single-title{opacity:1;transform:translateY(0)}

#s2 .release-date{
  font-family:'Josefin Sans',sans-serif;font-size:11px;letter-spacing:0.25em;
  text-transform:uppercase;color:rgba(240,229,208,0.4);margin-bottom:40px;
  opacity:0;transform:translateY(14px);transition:all 0.7s ease 0.3s;
}
#s2.active .release-date{opacity:1;transform:translateY(0)}

#s2 .stream-links{
  display:flex;flex-wrap:wrap;gap:10px;
  opacity:0;transform:translateY(14px);transition:all 0.7s ease 0.4s;
}
#s2.active .stream-links{opacity:1;transform:translateY(0)}

.stream-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border:1px solid rgba(200,132,62,0.3);
  font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.2em;
  text-transform:uppercase;color:rgba(240,229,208,0.6);
  text-decoration:none;transition:all 0.25s;
}
.stream-btn:hover{color:var(--cream);border-color:var(--amber);background:rgba(200,132,62,0.08)}
.stream-btn svg{width:14px;height:14px;fill:currentColor;opacity:0.8}

/* ═══════════════════════════════════════════════════════════════════════════
   S3 — ABOUT
   ═══════════════════════════════════════════════════════════════════════════ */
#s3{display:flex;background:var(--bg)}

#s3 .photo-side{
  width:42%;height:100%;overflow:hidden;position:relative;
}
#s3 .photo-side img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(0.7) saturate(0.8);
  transform:scale(1.05);transition:transform 1.2s var(--ease) 0.1s;
}
#s3.active .photo-side img{transform:scale(1)}

#s3 .text-side{
  width:58%;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:6vh 6vw;overflow-y:auto;
}

#s3 .section-label{
  opacity:0;transform:translateY(16px);transition:all 0.6s ease 0.1s;
}
#s3.active .section-label{opacity:1;transform:translateY(0)}

#s3 .about-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(52px,7vw,100px);
  letter-spacing:0.04em;color:var(--cream);margin:10px 0 24px;
  opacity:0;transform:translateY(20px);transition:all 0.8s var(--ease) 0.2s;
}
#s3.active .about-title{opacity:1;transform:translateY(0)}

#s3 .bio-text{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(14px,1.4vw,18px);
  font-weight:300;line-height:1.75;color:rgba(240,229,208,0.7);
  max-width:520px;margin-bottom:36px;
  opacity:0;transform:translateY(14px);transition:all 0.7s ease 0.3s;
}
#s3.active .bio-text{opacity:1;transform:translateY(0)}

#s3 .members-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
  margin-bottom:32px;
  opacity:0;transform:translateY(14px);transition:all 0.7s ease 0.4s;
}
#s3.active .members-grid{opacity:1;transform:translateY(0)}

.member-role{
  font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--amber);margin-bottom:5px;
}
.member-name{
  font-family:'Cormorant Garamond',serif;font-size:clamp(13px,1.2vw,16px);
  font-weight:400;color:var(--cream);
}

#s3 .sounds-like{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  opacity:0;transform:translateY(14px);transition:all 0.7s ease 0.5s;
}
#s3.active .sounds-like{opacity:1;transform:translateY(0)}

.sounds-label{
  font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.3em;
  text-transform:uppercase;color:rgba(240,229,208,0.4);margin-right:4px;
}
.ref-tag{
  padding:5px 12px;border:1px solid rgba(200,132,62,0.2);
  font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.15em;
  text-transform:uppercase;color:rgba(240,229,208,0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   S4 — DISCOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */
#s4{
  display:flex;flex-direction:column;justify-content:center;
  padding:6vh 8vw;background:var(--bg);
}

#s4 .section-label{
  opacity:0;transform:translateY(16px);transition:all 0.6s ease 0.1s;
}
#s4.active .section-label{opacity:1;transform:translateY(0)}

#s4 .disco-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,7vw,96px);
  letter-spacing:0.04em;color:var(--cream);margin:10px 0 40px;
  opacity:0;transform:translateY(20px);transition:all 0.8s var(--ease) 0.2s;
}
#s4.active .disco-title{opacity:1;transform:translateY(0)}

.disco-carousel{
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(16px);transition:all 0.7s ease 0.3s;
}
#s4.active .disco-carousel{opacity:1;transform:translateY(0)}

.disco-track{
  display:flex;gap:28px;
  transition:transform 0.6s cubic-bezier(0.76,0,0.24,1);
}
.disco-track .disco-card{
  flex:0 0 calc((100vw - 16vw - 56px) / 3);min-width:0;
}

.carousel-controls{
  display:flex;align-items:center;justify-content:center;
  gap:16px;margin-top:20px;
}
.carousel-btn{
  background:transparent;border:1px solid rgba(200,132,62,0.35);
  color:var(--amber);cursor:pointer;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  transition:all 0.3s ease;flex-shrink:0;
}
.carousel-btn svg{width:16px;height:16px}
.carousel-btn:hover{background:rgba(200,132,62,0.12);border-color:var(--amber)}
.carousel-btn:disabled{opacity:0.25;cursor:default;pointer-events:none}
.carousel-dots{display:flex;gap:8px;align-items:center}
.carousel-dot{
  width:5px;height:5px;border-radius:50%;padding:0;border:none;cursor:pointer;
  background:rgba(200,132,62,0.25);transition:all 0.3s ease;
}
.carousel-dot.active{background:var(--amber);transform:scale(1.4)}

.card-artwork{
  position:relative;width:100%;padding-bottom:100%;overflow:hidden;margin-bottom:14px;
}
.card-artwork img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform 0.5s var(--ease);
}
.disco-card:hover .card-artwork img{transform:scale(1.04)}

.year-over{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.25em;
  text-transform:uppercase;color:rgba(240,229,208,0.5);
  background:rgba(8,7,5,0.6);padding:4px 8px;
}
.new-badge{
  position:absolute;top:12px;right:12px;z-index:2;
  font-family:'Josefin Sans',sans-serif;font-size:8px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--bg);
  background:var(--amber);padding:4px 8px;
}

.card-format{
  font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.25em;
  text-transform:uppercase;color:var(--amber);margin-bottom:6px;
}
.card-name{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(20px,2vw,28px);
  font-weight:300;font-style:italic;color:var(--cream);line-height:1.1;margin-bottom:6px;
}
.card-sub{
  font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.15em;
  text-transform:uppercase;color:rgba(240,229,208,0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   S5 — LIVE
   ═══════════════════════════════════════════════════════════════════════════ */
#s5{background:var(--bg);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:0 8vw}

#s5 .live-bg{
  position:absolute;inset:0;
  background-image:url('/assets/img/pictures/live-4.jpg');
  background-size:cover;background-position:center;
  filter:brightness(0.22) saturate(0.6);
  transform:scale(1.04);transition:transform 1.2s var(--ease) 0.1s;
}
#s5.active .live-bg{transform:scale(1)}

#s5 .live-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(8,7,5,0.85) 50%,transparent 100%);
}

#s5 .section-label{
  font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:0.35em;
  color:var(--amber);text-transform:uppercase;margin-bottom:12px;position:relative;z-index:1;
  transform:translateY(16px);opacity:0;transition:all 0.6s ease 0.15s;
}
#s5.active .section-label{transform:translateY(0);opacity:1}

#s5 .live-big{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(80px,15vw,200px);line-height:0.85;
  color:var(--cream);letter-spacing:0.01em;position:relative;z-index:1;margin-bottom:48px;
  transform:translateY(30px);opacity:0;transition:all 0.9s var(--ease) 0.2s;
}
#s5.active .live-big{transform:translateY(0);opacity:1}

.stages-list{position:relative;z-index:1;display:flex;flex-direction:column;gap:0}
.stage-item{
  display:flex;align-items:center;padding:16px 0;
  border-bottom:1px solid rgba(200,132,62,0.12);
  transform:translateX(-20px);opacity:0;
  transition:all 0.6s ease;
}
.stage-item:nth-child(1){transition-delay:0.35s}
.stage-item:nth-child(2){transition-delay:0.45s}
.stage-item:nth-child(3){transition-delay:0.55s}
.stage-item:nth-child(4){transition-delay:0.65s}
#s5.active .stage-item{transform:translateX(0);opacity:1}
.stage-num{font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.15em;color:var(--amber);width:40px;opacity:0.6}
.stage-name{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.5vw,32px);color:var(--cream);font-weight:600;flex:1}
.stage-tour{font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--amber);opacity:0.6;margin-left:10px;vertical-align:middle;font-weight:400}
.stage-loc{font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:0.15em;color:rgba(240,229,208,0.35);text-transform:uppercase}
.stage-date{font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.12em;color:rgba(240,229,208,0.4);margin-left:16px}
.stage-ticket{
  font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;
  margin-left:16px;padding:5px 12px;flex-shrink:0;
}
.ticket-btn{
  border:1px solid rgba(200,132,62,0.4);color:var(--amber);
  text-decoration:none;transition:all 0.3s ease;
}
.ticket-btn:hover{background:rgba(200,132,62,0.12);border-color:var(--amber)}
.sold-out-badge{color:rgba(240,229,208,0.25);border:1px solid rgba(240,229,208,0.1)}
.stage-item.sold-out .stage-name{opacity:0.4}
.stage-item.sold-out .stage-loc{opacity:0.3}

/* ═══════════════════════════════════════════════════════════════════════════
   S6 — CONNECT
   ═══════════════════════════════════════════════════════════════════════════ */
#s6{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg);text-align:center;
}

#s6 .connect-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(56px,9vw,130px);
  letter-spacing:0.04em;line-height:0.88;color:var(--cream);
  opacity:0;transform:translateY(24px);transition:all 0.9s var(--ease) 0.1s;
}
#s6.active .connect-name{opacity:1;transform:translateY(0)}

#s6 .connect-sub{
  margin-top:14px;
  font-family:'Josefin Sans',sans-serif;font-size:11px;letter-spacing:0.3em;
  color:rgba(240,229,208,0.4);text-transform:uppercase;
  opacity:0;transform:translateY(16px);transition:all 0.7s ease 0.3s;
}
#s6.active .connect-sub{opacity:1;transform:translateY(0)}

#s6 .divider{
  width:1px;height:48px;
  background:linear-gradient(to bottom,var(--amber),transparent);
  margin:28px auto;
  transform:scaleY(0);opacity:0;transform-origin:top;
  transition:all 0.5s ease 0.4s;
}
#s6.active .divider{transform:scaleY(1);opacity:1}

.social-row{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  opacity:0;transform:translateY(16px);transition:all 0.7s ease 0.5s;
}
#s6.active .social-row{opacity:1;transform:translateY(0)}

.social-link{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 20px;border:1px solid rgba(200,132,62,0.2);
  font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.22em;
  color:rgba(240,229,208,0.55);text-decoration:none;text-transform:uppercase;
  transition:all 0.25s;
}
.social-link:hover{color:var(--cream);border-color:var(--amber);background:rgba(200,132,62,0.08)}
.social-link svg{width:13px;height:13px;fill:currentColor;opacity:0.8}

#s6 .press-info{
  margin-top:36px;
  font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:0.2em;
  color:rgba(240,229,208,0.25);text-transform:uppercase;
  opacity:0;transform:translateY(16px);transition:all 0.6s ease 0.6s;
}
#s6.active .press-info{opacity:1;transform:translateY(0)}
#s6 .press-info a{color:rgba(200,132,62,0.6);text-decoration:none;transition:color 0.2s}
#s6 .press-info a:hover{color:var(--amber)}

#s6 .label-footer{
  position:absolute;bottom:30px;
  font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:0.25em;
  color:rgba(240,229,208,0.18);text-transform:uppercase;
}
#s6 .label-footer span{color:var(--red)}
#s6 .label-footer a{color:inherit;text-decoration:none;transition:color 0.3s ease}
#s6 .label-footer a:hover{color:rgba(240,229,208,0.45)}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  #s2{flex-direction:column}
  #s2 .left{width:100%;height:45%}
  #s2 .right{width:100%;padding:4vh 8vw;border-left:none;border-top:1px solid rgba(200,132,62,0.1)}
  #s3{flex-direction:column}
  #s3 .photo-side{width:100%;height:40%}
  #s3 .text-side{width:100%;padding:4vh 7vw}
  #s3 .members-grid{grid-template-columns:repeat(3,1fr)}
  .disco-track .disco-card{flex:0 0 calc(100vw - 16vw)}
  .side-nav{right:16px}
}