/* =========================================================
   Bagus Nugroho — Split Screen Persegi (Final)
   + Animasi staggered + Partikel sparkling
   + Mobile: auto-hover saat panel masuk viewport
   + Panel <div> (bukan link), hanya CTA yang clickable
   Aksen: Revenue #4B6382 · Visual #E3C39D · Music #A4B5C4
   Teks: kiri (Revenue) · tengah (Visual) · kanan (Music)
   ========================================================= */

:root{
  --ink: #0a0a0a;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-slow: cubic-bezier(.16,1,.3,1);

  --accent-revenue: #4B6382;
  --accent-visual:  #E3C39D;
  --accent-music:   #A4B5C4;
}

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

html, body{
  height:100%;
  background:var(--ink);
  color:#fff;
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* ================= LAYOUT ================= */
.split{
  display:flex;
  height:100vh;
  width:100vw;
}

.panel{
  position:relative;
  flex:1;
  overflow:hidden;
  cursor: default;                 /* panel bukan link */
  color:#fff;
  isolation:isolate;
  transition: flex .9s var(--ease-slow);
  --accent: var(--accent-revenue);
}

.panel--revenue{ --accent: var(--accent-revenue); }
.panel--visual { --accent: var(--accent-visual);  }
.panel--music  { --accent: var(--accent-music);   }

@media (hover:hover){
  .split:hover .panel{ flex:.82; }
  .split .panel:hover{ flex:1.55; }
}

/* ---------- Background (anchor agak ke atas) ---------- */
.panel__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transform-origin: center 30%;
  transition: transform 1.8s var(--ease-slow), filter 1.2s var(--ease);
  filter: grayscale(100%) brightness(.48) contrast(1.05);
  z-index:-4;
}

.panel:hover .panel__bg{
  transform: scale(1.08);
  filter: grayscale(15%) brightness(.68) contrast(1.05);
}

@media (hover:hover){
  .split:hover .panel:not(:hover) .panel__bg{
    filter: grayscale(100%) brightness(.28) contrast(1.05);
  }
}

/* ---------- Tint warna aksen ---------- */
.panel__tint{
  position:absolute;
  inset:0;
  background: var(--accent);
  mix-blend-mode: soft-light;
  opacity:.32;
  z-index:-3;
  pointer-events:none;
  transition:opacity 1s var(--ease);
}

.panel:hover .panel__tint{ opacity:.5; }

/* ---------- Cinematic overlay ---------- */
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,.9) 100%);
  z-index:-2;
  pointer-events:none;
}

/* ---------- Garis pemisah vertikal ---------- */
.panel + .panel::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:1px;
  background:rgba(255,255,255,.16);
  z-index:2;
}

/* ================= INNER ================= */
.panel__inner{
  position:absolute;
  inset:0;
  padding: clamp(28px, 3.4vw, 56px) clamp(24px, 2.8vw, 44px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* Revenue — kiri */
.panel--revenue .panel__inner{
  align-items:flex-start;
  text-align:left;
}

/* Visual — tengah */
.panel--visual .panel__inner{
  align-items:center;
  text-align:center;
}

/* Music — kanan */
.panel--music .panel__inner{
  align-items:flex-end;
  text-align:right;
}

.panel--music p{ margin-left:auto; }

/* ---------- Content wrapper ---------- */
.panel__content{
  position:relative;
  z-index:1;
  max-width: 34ch;
  transition: transform 1.1s var(--ease-slow);
}

.panel:hover .panel__content{
  transform:translateY(-6px);
}

/* ---------- Staggered reveal ---------- */
.panel__content > *{
  opacity:0;
  transform: translateY(18px);
  animation: reveal 1s var(--ease-slow) forwards;
}

.panel:nth-child(1) .panel__content > *:nth-child(1){ animation-delay:.20s; }
.panel:nth-child(1) .panel__content > *:nth-child(2){ animation-delay:.30s; }
.panel:nth-child(1) .panel__content > *:nth-child(3){ animation-delay:.40s; }
.panel:nth-child(1) .panel__content > *:nth-child(4){ animation-delay:.50s; }
.panel:nth-child(1) .panel__content > *:nth-child(5){ animation-delay:.60s; }

.panel:nth-child(2) .panel__content > *:nth-child(1){ animation-delay:.35s; }
.panel:nth-child(2) .panel__content > *:nth-child(2){ animation-delay:.45s; }
.panel:nth-child(2) .panel__content > *:nth-child(3){ animation-delay:.55s; }
.panel:nth-child(2) .panel__content > *:nth-child(4){ animation-delay:.65s; }
.panel:nth-child(2) .panel__content > *:nth-child(5){ animation-delay:.75s; }

.panel:nth-child(3) .panel__content > *:nth-child(1){ animation-delay:.50s; }
.panel:nth-child(3) .panel__content > *:nth-child(2){ animation-delay:.60s; }
.panel:nth-child(3) .panel__content > *:nth-child(3){ animation-delay:.70s; }
.panel:nth-child(3) .panel__content > *:nth-child(4){ animation-delay:.80s; }
.panel:nth-child(3) .panel__content > *:nth-child(5){ animation-delay:.90s; }

@keyframes reveal{
  to{ transform:translateY(0); opacity:1; }
}

/* Garis aksen */
.panel__rule{
  display:inline-block;
  width:32px;
  height:1px;
  background: var(--accent);
  margin-bottom:1.4rem;
  transition:width .9s var(--ease);
}

.panel:hover .panel__rule{ width:64px; }

.panel__eyebrow{
  display:block;
  font-size: clamp(.68rem, .78vw, .75rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-bottom:1.1rem;
  font-weight:400;
}

.panel h2{
  font-family:'Playfair Display', serif;
  font-weight:500;
  font-size: clamp(1.8rem, 3.1vw, 3rem);
  line-height:1.05;
  letter-spacing:-.015em;
  margin-bottom:1.1rem;
  color:#fff;
}

.panel h2 em{
  font-style:italic;
  font-weight:500;
  color: var(--accent);
}

.panel p{
  font-size: clamp(.84rem, .92vw, .95rem);
  line-height:1.7;
  color:rgba(255,255,255,.68);
  max-width:32ch;
  font-weight:300;
}

/* ---------- CTA (link) ---------- */
.panel__cta{
  margin-top:2rem;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-size:.74rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:500;
  color:#fff;
  text-decoration:none;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(255,255,255,.28);
  transition:border-color .5s var(--ease), gap .5s var(--ease);
  width:fit-content;
  cursor:pointer;
}

.panel:hover .panel__cta{
  border-color: var(--accent);
  gap:1.2rem;
}

.panel__cta svg{
  width:15px;
  height:15px;
  transition:transform .5s var(--ease);
}

.panel:hover .panel__cta svg{ transform:translateX(4px); }

/* ================= MOBILE: .is-active = efek hover ================= */
@media (hover: none){
  /* Foto berwarna + zoom */
  .panel.is-active .panel__bg{
    transform: scale(1.08);
    filter: grayscale(15%) brightness(.68) contrast(1.05);
  }

  /* Panel lain meredup */
  .panel:not(.is-active) .panel__bg{
    filter: grayscale(100%) brightness(.28) contrast(1.05);
  }

  /* Tint aksen */
  .panel.is-active .panel__tint{ opacity:.5; }

  /* Konten naik */
  .panel.is-active .panel__content{
    transform: translateY(-6px);
  }

  /* Garis aksen memanjang */
  .panel.is-active .panel__rule{ width:64px; }

  /* CTA border jadi warna aksen */
  .panel.is-active .panel__cta{
    border-color: var(--accent);
    gap: 1.2rem;
  }
  .panel.is-active .panel__cta svg{ transform: translateX(4px); }
}

/* ================= PARTIKEL SPARKLING ================= */
.cursor-particle{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  z-index:9998;
  font-size:14px;
  font-weight:500;
  opacity:.9;
  transform: translate(-50%, -50%);
  animation: particle-fade .9s var(--ease) forwards;
  will-change: transform, opacity;
}

.cursor-particle--revenue{
  color:#9BB4D4;
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:16px;
  text-shadow: 0 0 8px rgba(155,180,212,.7);
}
.cursor-particle--music{
  color:#C9D6E0;
  font-size:16px;
  text-shadow: 0 0 8px rgba(201,214,224,.7);
}
.cursor-particle--visual{
  color:#E3C39D;
  font-size:12px;
  text-shadow: 0 0 10px rgba(227,195,157,.8);
}

@keyframes particle-fade{
  0%{
    opacity:.9;
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  100%{
    opacity:0;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(.4);
  }
}

/* Mobile: matikan partikel */
@media (max-width: 900px){
  .cursor-particle{ display:none; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  html, body{ overflow:auto; }

  .split{
    flex-direction:column;
    height:auto;
    min-height:100vh;
  }

  .panel{
    min-height: 70vh;
    flex:auto !important;
  }

  .split:hover .panel{ flex:auto; }

  .panel + .panel::before{
    left:0; right:0; top:0; bottom:auto;
    width:auto; height:1px;
  }

  .panel__inner{
    justify-content:flex-end !important;
    align-items:flex-start !important;
    text-align:left !important;
  }

  .panel--music p{ margin-left:0; }

  .panel__content > *{
    opacity:1;
    transform:none;
    animation:none;
  }
}