/* ——————————————————————————————————————————————
   TAPAK · lapisan motion
   Prinsip: pelan, berlapis, satu arah (naik). Tidak ada yang berkedip.
   Semua dimatikan di prefers-reduced-motion (paling bawah).
   —————————————————————————————————————————————— */

:root {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --m-dur: 0.9s;
  --m-step: 90ms;
}

/* —— Header masuk —— */

.site-header {
  animation: m-header-in 0.9s var(--m-ease-out) both;
}

@keyframes m-header-in {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

.nav-links a:not(.nav-cta) {
  position: relative;
}

.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.35rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--m-ease);
}

.nav-links a:not(.nav-cta):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.theme-toggle svg {
  transition: transform 0.6s var(--m-ease), opacity 0.3s;
}

.theme-toggle:active {
  transform: scale(0.92);
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun,
html[data-theme="light"] .theme-toggle .theme-icon-moon {
  transform: rotate(0deg);
}

html[data-theme="light"] .theme-toggle .theme-icon-sun,
html[data-theme="dark"] .theme-toggle .theme-icon-moon {
  transform: rotate(-90deg) scale(0.6);
}

/* —— Reveal saat scroll ——
   [data-reveal]         : elemen sendiri
   [data-stagger] > *    : anak-anak, berurutan lewat --i (di-set JS) */

[data-reveal],
[data-stagger] > :not([data-stagger]) {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--m-dur) var(--m-ease),
    transform var(--m-dur) var(--m-ease);
  transition-delay: calc(var(--i, 0) * var(--m-step));
  will-change: opacity, transform;
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translateX(-28px);
}

[data-reveal].in,
[data-stagger].in > :not([data-stagger]) {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* —— Hero (home) —— */

.hero-film > img {
  scale: 1.12;
  transform-origin: 55% 45%;
  animation: m-hero-zoom 3.2s var(--m-ease-out) 0.1s both;
  translate: 0 var(--py, 0px);
}

@keyframes m-hero-zoom {
  from { scale: 1.16; filter: saturate(0.85) brightness(0.9); }
  to   { scale: 1.08; filter: none; }
}

.hero-film-copy {
  translate: 0 var(--py, 0px);
  opacity: var(--po, 1);
}

.hero-film-copy > * {
  animation: m-rise 1.1s var(--m-ease-out) both;
}

.hero-film-copy .kicker {
  animation-delay: 0.35s;
  animation-name: m-kicker;
}

.hero-film-copy h1 { animation: none; }
.hero-film-copy .lead { animation-delay: 0.95s; }
.hero-film-copy .store-badges { animation-delay: 1.15s; }
.hero-film-copy .hero-note { animation-delay: 1.35s; }

@keyframes m-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes m-kicker {
  from { opacity: 0; letter-spacing: 0.34em; transform: translateY(10px); }
  to   { opacity: 1; letter-spacing: 0.16em; transform: none; }
}

/* Kata h1 naik satu per satu (span dibuat JS) */
.hero-film h1 .wl {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.04em 0.02em 0.14em;
  margin: -0.04em -0.02em -0.14em;
}

.hero-film h1 .w {
  display: inline-block;
  transform: translateY(112%);
  animation: m-word 1.15s var(--m-ease-out) both;
  animation-delay: calc(0.5s + var(--i, 0) * 0.11s);
}

@keyframes m-word {
  from { transform: translateY(112%); }
  to   { transform: none; }
}

.hero-film-copy .store-badge {
  transition: transform 0.4s var(--m-ease), box-shadow 0.4s;
}

.hero-film-copy .store-badge:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* Petunjuk scroll di kanan bawah hero */
.scroll-hint {
  position: absolute;
  right: clamp(1.1rem, 4vw, 3rem);
  bottom: clamp(1.4rem, 5vw, 3rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 244, 240, 0.7);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  animation: m-rise 1s var(--m-ease-out) 1.8s both;
}

.scroll-hint span {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, rgba(255, 244, 240, 0.9), transparent);
  background-size: 100% 200%;
  animation: m-scroll-line 2.2s var(--m-ease) infinite;
}

@keyframes m-scroll-line {
  0%   { background-position: 0 100%; opacity: 0; }
  30%  { opacity: 1; }
  100% { background-position: 0 -100%; opacity: 0; }
}

@media (max-width: 720px) {
  .scroll-hint { display: none; }
}

/* —— Rail screenshot —— */

.shot {
  transition: transform 0.6s var(--m-ease);
  translate: 0 var(--py, 0px);
}

[data-stagger].in > .shot {
  transition:
    opacity 1.1s var(--m-ease),
    transform 1.1s var(--m-ease);
}

[data-stagger] > .shot {
  transform: translateY(48px) rotate(1.5deg);
  transform-origin: bottom center;
}

[data-stagger].in > .shot {
  transform: none;
}

.shot img {
  transition: transform 0.6s var(--m-ease), box-shadow 0.6s var(--m-ease);
}

.shot:hover img {
  transform: translateY(-8px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}

.shot figcaption {
  transition: color 0.4s;
}

.shot:hover figcaption {
  color: #fff4f0;
}

/* —— Manifesto —— */

.manifesto-list li {
  position: relative;
  padding-top: 1.1rem;
}

.manifesto-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--m-ease);
  transition-delay: calc(var(--i, 0) * var(--m-step) + 0.2s);
}

[data-stagger].in > li::before {
  transform: scaleX(1);
}

.manifesto-list .value-num {
  display: inline-block;
  transition: color 0.4s, transform 0.5s var(--m-ease);
}

.manifesto-list li:hover .value-num {
  color: var(--maroon);
  transform: translateX(4px);
}

/* Garis jejak yang menggambar diri */
.trail-line {
  display: block;
  width: min(100%, 320px);
  height: auto;
  margin-top: 1.8rem;
  color: var(--maroon);
  overflow: visible;
}

.trail-line path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s var(--m-ease) 0.3s;
}

.trail-line .trail-dot {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.6s var(--m-ease) 2.5s;
}

.trail-line .trail-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.trail-line .trail-start {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.4s 0.2s;
}

.in .trail-line path,
.trail-line.in path {
  stroke-dashoffset: 0;
}

.in .trail-line .trail-dot,
.trail-line.in .trail-dot {
  transform: scale(1);
}

.in .trail-line .trail-start,
.trail-line.in .trail-start {
  opacity: 1;
}

.in .trail-line .trail-ring,
.trail-line.in .trail-ring {
  animation: m-ring 2.4s ease-out 3s infinite;
}

@keyframes m-ring {
  0%   { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* —— Film perusahaan —— */

.house-film > img {
  scale: 1.12;
  translate: 0 var(--py, 0px);
  transition: none;
}

.house-film .text-link {
  transition: transform 0.4s var(--m-ease), border-color 0.3s;
}

.house-film .text-link:hover {
  transform: translateY(-2px);
}

/* —— Pro band —— */

.pro-grid p {
  border-top-color: transparent;
  position: relative;
  transition:
    opacity var(--m-dur) var(--m-ease),
    transform var(--m-dur) var(--m-ease);
}

.pro-grid p::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 100%;
  height: 2px;
  background: rgba(255, 244, 240, 0.35);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--m-ease);
  transition-delay: calc(var(--i, 0) * var(--m-step) + 0.25s);
}

[data-stagger].in > p::before {
  transform: scaleX(1);
}

.pro-grid p:hover::before {
  background: #fff4f0;
}

.pro-grid strong {
  display: inline-block;
  transition: transform 0.45s var(--m-ease);
}

.pro-grid p:hover strong {
  transform: translateX(4px);
}

/* Tombol utama: kilau saat hover */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.9s var(--m-ease);
}

.btn:hover::after {
  transform: translateX(120%);
}

/* —— Penutup —— */

.close-wordmark {
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.2em) !important;
  letter-spacing: -0.02em !important;
  transition:
    clip-path 1.3s var(--m-ease),
    transform 1.3s var(--m-ease),
    letter-spacing 1.3s var(--m-ease),
    opacity 0.5s;
}

[data-stagger].in > .close-wordmark {
  clip-path: inset(-10% 0 -10% 0);
  transform: none !important;
  letter-spacing: -0.06em !important;
}

.close-mark .store-badge {
  transition: transform 0.4s var(--m-ease), box-shadow 0.4s;
}

.close-mark .store-badge:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}

/* —— Footer —— */

.foot-links a,
.foot-nav a {
  transition: color 0.3s, transform 0.35s var(--m-ease);
  display: inline-block;
}

.foot-links a:hover,
.foot-nav a:hover {
  transform: translateY(-1px);
}

/* —— Halaman dalam: mast masuk berlapis —— */

.mast .wrap > * {
  animation: m-rise 1s var(--m-ease-out) both;
}

.mast .wrap > :nth-child(1) { animation-delay: 0.15s; animation-name: m-kicker; }
.mast .wrap > :nth-child(2) { animation-delay: 0.3s; }
.mast .wrap > :nth-child(3) { animation-delay: 0.45s; }
.mast .wrap > :nth-child(4) { animation-delay: 0.55s; animation-name: m-rule; }
.mast .wrap > :nth-child(5) { animation-delay: 0.65s; }
.mast .wrap > :nth-child(6) { animation-delay: 0.8s; }
.mast .wrap > :nth-child(n + 7) { animation-delay: 0.9s; }

@keyframes m-rule {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: none; }
}

.mast-rule {
  transform-origin: left;
}

/* Band .reveal lama: biar anaknya yang bertahap (JS beri data-stagger ke .wrap) */
.band.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* —— Reduced motion: semua diam —— */

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .hero-film > img,
  .hero-film-copy > *,
  .hero-film h1 .w,
  .scroll-hint,
  .scroll-hint span,
  .mast .wrap > *,
  .trail-line .trail-ring {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    scale: 1 !important;
    filter: none !important;
    clip-path: none !important;
  }

  [data-reveal],
  [data-stagger] > *,
  .close-wordmark,
  .shot,
  .manifesto-list li::before,
  .pro-grid p::before,
  .trail-line path,
  .trail-line .trail-dot,
  .trail-line .trail-start,
  .btn::after {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
    translate: none !important;
  }

  .house-film > img,
  .hero-film > img {
    translate: none !important;
  }

  .scroll-hint {
    display: none;
  }
}