/* Al-Matsurat — landing page sinematik.
   Halaman bertransisi pagi → petang → gelap mengikuti scroll,
   memakai token tema yang sama dengan aplikasinya. */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-title);
  font-family: var(--font-ui);
  overflow-x: hidden;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; }

/* Transisi tema — warna menyeberang perlahan saat data-tema berganti */
body,
.site-header,
.band,
.statement,
h1, h2, p, span, li, figcaption,
.contents-list li,
.phone,
.scroll-hint {
  transition:
    background-color 1.1s var(--ease-standard),
    color 1.1s var(--ease-standard),
    border-color 1.1s var(--ease-standard),
    box-shadow 1.1s var(--ease-standard);
}

/* ---------- atmosfer: lapisan langit di belakang seluruh halaman ---------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0;
  transition: opacity 1.6s var(--ease-standard);
  will-change: transform, opacity;
}
.orb-dawn {
  width: 60vw; height: 60vw;
  right: -12vw; top: -18vw;
  background: radial-gradient(circle, rgba(255, 236, 200, 0.85), rgba(226, 237, 236, 0) 65%);
}
.orb-dawn-2 {
  width: 34vw; height: 34vw;
  left: -10vw; bottom: -8vw;
  background: radial-gradient(circle, rgba(22, 96, 92, 0.16), rgba(22, 96, 92, 0) 70%);
}
.orb-dusk {
  width: 70vw; height: 70vw;
  right: -18vw; top: 4vh;
  background: radial-gradient(circle, rgba(236, 160, 74, 0.42), rgba(249, 243, 233, 0) 65%);
}
.orb-dusk-2 {
  width: 40vw; height: 40vw;
  left: -12vw; top: 45vh;
  background: radial-gradient(circle, rgba(138, 78, 23, 0.18), rgba(249, 243, 233, 0) 70%);
}
.orb-night {
  width: 55vw; height: 55vw;
  left: 20vw; top: -14vw;
  background: radial-gradient(circle, rgba(121, 194, 185, 0.14), rgba(13, 19, 21, 0) 70%);
}
body[data-tema="pagi"]   .orb-dawn   { opacity: 1; }
body[data-tema="pagi"]   .orb-dawn-2 { opacity: 1; }
body[data-tema="petang"] .orb-dusk   { opacity: 1; }
body[data-tema="petang"] .orb-dusk-2 { opacity: 1; }
body[data-tema="gelap"]  .orb-night  { opacity: 1; }

/* bintang — hanya tampak saat gelap */
.stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s var(--ease-standard);
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(237,242,243,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 8%,  rgba(237,242,243,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 30%, rgba(237,242,243,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 12%, rgba(237,242,243,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 26%, rgba(237,242,243,.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 21% 44%, rgba(237,242,243,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 52%, rgba(237,242,243,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 47%, rgba(237,242,243,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 55%, rgba(237,242,243,.55) 50%, transparent 51%);
  animation: twinkle 7s ease-in-out infinite alternate;
}
body[data-tema="gelap"] .stars { opacity: .8; }
@keyframes twinkle {
  from { filter: brightness(.75); }
  to   { filter: brightness(1.15); }
}

/* ---------- pemandangan gunung (gaya logo) ---------- */
/* warna pemandangan per tema — siluet lembut sedikit lebih pekat dari bg */
body[data-tema="pagi"] {
  --scene-far: #d8e3e3;
  --scene-near: #c4d5d4;
  --scene-sun: #f0cd90;
  --scene-sun-glow: rgba(240, 205, 144, 0.55);
}
body[data-tema="petang"] {
  --scene-far: #eddcbf;
  --scene-near: #dfc7a0;
  --scene-sun: #e9994b;
  --scene-sun-glow: rgba(233, 153, 75, 0.5);
}
body[data-tema="gelap"] {
  --scene-far: #162125;
  --scene-near: #0f171a;
  --scene-sun: #79c2b9;
  --scene-sun-glow: rgba(121, 194, 185, 0.35);
}
.scenery {
  position: absolute;
  left: 0; right: 0; bottom: -60px;
  height: clamp(220px, 38vh, 420px);
}
.scenery svg {
  width: 100%;
  height: 100%;
  display: block;
}
.scenery g { will-change: transform; }
.scene-far  { fill: var(--scene-far); }
.scene-near { fill: var(--scene-near); }
.scene-sun {
  fill: var(--scene-sun);
  filter: drop-shadow(0 0 34px var(--scene-sun-glow));
}
.scene-far, .scene-near, .scene-sun, .scene-moon, .scene-moon-bite {
  transition: fill 1.1s var(--ease-standard), opacity 1.1s var(--ease-standard);
}
.scene-moon { fill: #79c2b9; opacity: 0; }
.scene-moon-bite { fill: var(--bg); opacity: 0; }
body[data-tema="gelap"] .scene-moon { opacity: .9; }
body[data-tema="gelap"] .scene-moon-bite { opacity: 1; }
body[data-tema="gelap"] .scene-sun-g { opacity: 0; transition: opacity 1.1s var(--ease-standard); }
.scene-sun-g { transition: opacity 1.1s var(--ease-standard); }
@media (max-width: 860px) {
  .scenery { height: clamp(150px, 24vh, 260px); }
}

/* butiran halus di atas segalanya — tekstur film */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 40;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) clamp(20px, 4vw, 48px);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.site-header img { height: 40px; width: auto; display: block; }
.site-header .badge {
  font-size: var(--text-ui-sm);
  line-height: var(--lh-ui-sm);
  letter-spacing: var(--tracking-nomor);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- tombol ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-2);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  transition:
    background var(--dur-fast) var(--ease-standard),
    box-shadow .5s var(--ease-standard),
    transform .35s var(--ease-out);
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(15 29 34 / .12);
}
.btn:hover {
  background: var(--accent-press);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn:active { transform: translateY(0); }

/* ---------- kerangka umum section ---------- */
.shell {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}
.kicker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-nomor);
  letter-spacing: var(--tracking-nomor);
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.kicker::after {
  content: "";
  flex: none;
  width: 56px;
  height: 1px;
  background: var(--line-strong);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(96px, 14vh, 160px) clamp(20px, 4vw, 48px) clamp(48px, 8vh, 96px);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.hero-kicker {
  font-size: var(--text-nomor);
  letter-spacing: var(--tracking-nomor);
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
}
body.loaded .hero-kicker { animation: fade-in 1.2s var(--ease-out) .15s forwards; }
.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--text-title);
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .line > span {
  display: inline-block;
  transform: translateY(115%);
}
body.loaded .hero h1 .line > span { animation: rise 1.15s var(--ease-out) forwards; }
body.loaded .hero h1 .line:nth-child(1) > span { animation-delay: .25s; }
body.loaded .hero h1 .line:nth-child(2) > span { animation-delay: .38s; }
body.loaded .hero h1 .line:nth-child(3) > span { animation-delay: .51s; }
@keyframes rise {
  to { transform: translateY(0); }
}
@keyframes fade-in {
  to { opacity: 1; }
}
.hero-sub {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.65;
  color: var(--text-translation);
  text-wrap: pretty;
  opacity: 0;
}
body.loaded .hero-sub { animation: fade-up 1.1s var(--ease-out) .7s forwards; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  opacity: 0;
}
body.loaded .hero-actions { animation: fade-up 1.1s var(--ease-out) .85s forwards; }
.hero-note {
  margin: 0;
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  color: var(--text-muted);
  opacity: 0;
}
body.loaded .hero-note { animation: fade-up 1.1s var(--ease-out) 1s forwards; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* panggung ponsel */
.phone-stage {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1400px;
  opacity: 0;
}
body.loaded .phone-stage { animation: fade-up 1.4s var(--ease-out) .55s forwards; }
.phone-halo {
  position: absolute;
  inset: -12% -20%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%);
  filter: blur(30px);
  z-index: -1;
}
.phone-ring {
  position: absolute;
  width: 130%;
  aspect-ratio: 1;
  top: 50%; left: 50%;
  translate: -50% -50%;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  opacity: .55;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 78%);
  mask-image: linear-gradient(to bottom, black 30%, transparent 78%);
}
.phone {
  width: min(320px, 78vw);
  aspect-ratio: 360 / 780;
  border-radius: 46px;
  padding: 11px;
  background: #0d1315;
  border: 1px solid rgb(255 255 255 / .09);
  box-shadow:
    0 2px 6px rgb(15 29 34 / .12),
    0 30px 60px -18px rgb(15 29 34 / .35),
    0 80px 140px -40px rgb(15 29 34 / .4);
  transform-style: preserve-3d;
  will-change: transform;
}
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgb(255 255 255 / .14) 0%, transparent 32%);
  pointer-events: none;
}
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 36px;
  display: block;
}
.phone-float { animation: bob 7s ease-in-out infinite alternate; will-change: transform; }
@keyframes bob {
  from { transform: translateY(-8px); }
  to   { transform: translateY(10px); }
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  translate: -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: var(--text-nomor);
  letter-spacing: var(--tracking-nomor);
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
}
body.loaded .scroll-hint { animation: fade-in 1.4s var(--ease-out) 1.5s forwards; }
.scroll-hint::after {
  content: "";
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--text-muted), transparent);
  animation: drip 2.2s var(--ease-standard) infinite;
}
@keyframes drip {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- fitur ---------- */
.features {
  padding: clamp(72px, 11vh, 140px) 0;
}
.features-grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: clamp(32px, 5vh, 56px);
}
.feature-item {
  position: relative;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.feature-item h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.15;
  color: var(--text-title);
}
.feature-item p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-translation);
  text-wrap: pretty;
  max-width: 42ch;
}

/* ---------- pernyataan sinematik ---------- */
.statement {
  padding: clamp(96px, 16vh, 200px) 0;
  text-align: center;
}
.statement p {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text-title);
  text-wrap: balance;
}
.statement .kicker {
  justify-content: center;
  margin-bottom: var(--space-7);
}
.statement .kicker::before {
  content: "";
  flex: none;
  width: 56px;
  height: 1px;
  background: var(--line-strong);
}

/* ---------- galeri layar ---------- */
.screens {
  padding: clamp(64px, 10vh, 130px) 0 clamp(96px, 14vh, 180px);
}
.screens-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: clamp(48px, 7vh, 88px);
}
.screens-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.1;
  color: var(--text-title);
}
.screens-grid {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}
.screens-grid figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  will-change: transform;
}
.screens-grid figure:nth-child(2) { margin-top: clamp(24px, 5vw, 72px); }
.screens-grid figure:nth-child(4) { margin-top: clamp(24px, 5vw, 72px); }
.shot {
  aspect-ratio: 360 / 780;
  border-radius: 30px;
  padding: 8px;
  background: #0d1315;
  border: 1px solid rgb(255 255 255 / .09);
  box-shadow:
    0 2px 6px rgb(15 29 34 / .14),
    0 26px 54px -20px rgb(15 29 34 / .38);
  overflow: hidden;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  display: block;
}
.screens-grid figcaption {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  color: var(--text-muted);
}
.screens-grid figcaption .num {
  font-size: var(--text-nomor);
  letter-spacing: var(--tracking-nomor);
  font-variant-numeric: tabular-nums;
}

/* ---------- daftar isi ---------- */
.contents {
  padding: clamp(64px, 10vh, 140px) 0 clamp(96px, 15vh, 200px);
}
.contents-inner {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
}
.contents-inner h2 {
  position: sticky;
  top: 120px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.1;
  color: var(--text-title);
}
.contents-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.contents-list li {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(22px, 3vh, 34px) 0;
  border-bottom: 1px solid var(--line);
}
.contents-list li:first-child { border-top: 1px solid var(--line); }
.contents-list .num {
  flex: none;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  color: var(--text-muted);
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
.contents-list .desc {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--text-translation);
}

/* ---------- ajakan penutup (malam) ---------- */
.cta {
  position: relative;
  padding: clamp(120px, 20vh, 240px) 0;
  text-align: center;
}
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
}
.cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-title);
  max-width: 16ch;
  text-wrap: balance;
}
.cta p {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--text-translation);
  max-width: 46ch;
  text-wrap: pretty;
}
.cta .btn { min-height: 56px; padding: 0 34px; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.site-footer img { height: 30px; width: auto; display: block; opacity: .9; }
.site-footer span {
  font-size: var(--text-ui-sm);
  line-height: var(--lh-ui-sm);
  color: var(--text-muted);
}

/* ---------- reveal saat scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(46px);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.1s var(--ease-out),
    background-color 1.1s var(--ease-standard),
    color 1.1s var(--ease-standard),
    border-color 1.1s var(--ease-standard);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* keadaan awal tanpa animasi — dipasang JS sesaat saat halaman dimuat
   di posisi tengah (anchor / pemulihan scroll), dilepas setelah 2 frame.
   Juga dipakai permanen lewat ?noanim=1 (mematikan seluruh gerak). */
body.no-anim,
body.no-anim * {
  transition: none !important;
}
body.noanim-lock,
body.noanim-lock * {
  transition: none !important;
  animation: none !important;
}
body.noanim-lock .hero {
  min-height: auto;
  padding-top: 160px;
  padding-bottom: 100px;
}
body.noanim-lock .reveal,
body.noanim-lock .hero-kicker,
body.noanim-lock .hero-sub,
body.noanim-lock .hero-actions,
body.noanim-lock .hero-note,
body.noanim-lock .phone-stage,
body.noanim-lock .scroll-hint,
body.noanim-lock .hero h1 .line > span {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- responsif ---------- */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 120px;
    text-align: left;
  }
  .phone-stage { order: -1; }
  .phone { width: min(240px, 62vw); }
  .screens-grid { grid-template-columns: repeat(2, 1fr); }
  .screens-grid figure:nth-child(2),
  .screens-grid figure:nth-child(4) { margin-top: clamp(20px, 6vw, 40px); }
  .contents-inner { grid-template-columns: 1fr; }
  .contents-inner h2 { position: static; }
  .scroll-hint { display: none; }
}

/* ---------- hormati preferensi gerak minimal ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1 .line > span,
  .hero-kicker, .hero-sub, .hero-actions, .hero-note,
  .phone-stage, .scroll-hint {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .phone-float, .stars { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none !important; }
}