/* One continuous tabletop and one cotton-paper material, from cover to colophon. */
.home-page {
  position: relative;
  isolation: isolate;
  --letter-gutter: 64px;
  --frame-color: #b0945f;
  --frame-outline: #c9b38a;
  --invitation-material:
    radial-gradient(ellipse 700px 420px at 100% 0, #fffdf6a8, transparent 90%),
    linear-gradient(115deg, #7e5f3907, transparent 70%),
    linear-gradient(#fffaf04d, #fffaf04d),
    var(--ivory-material) center top / 700px repeat;
}
.site-scenery {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(#b9975316, #b9975316),
    url("/img/stationery/continuous-stationery.webp") center top / 100% auto
      repeat-y,
    #ede2cf;
}
.home-page .hero-stage,
.motion-ready .home-page .hero-stage {
  background: transparent;
}
.home-page .envelope-scroll {
  background: transparent;
}
.home-page .hero-stage::before {
  display: none;
}
.hero-backdrop {
  position: absolute;
  inset: 0 0 -60px;
  pointer-events: none;
  opacity: var(--backdrop-opacity, 1);
  transform: translateY(var(--backdrop-y, 0px));
  background:
    radial-gradient(ellipse 24% 28% at 77% 43%, #513b2010, transparent 80%),
    linear-gradient(#fff9ed20, transparent 26%),
    linear-gradient(105deg, #b9975310, #b9975308 65%, #b9975310),
    #eee4d3 var(--reference-paper) center top / 100% auto no-repeat;
}
.home-page .letter-content,
.motion-ready .home-page .letter-content.is-unfolding,
.home-page .invitation-paper {
  background: var(--invitation-material);
}
.home-page .letter-content {
  width: calc(100% - var(--letter-gutter) * 2);
  box-shadow: var(
    --paper-cast-shadow,
    -16px 12px 32px #3928172e,
    -1px 2px 4px #39281721
  );
}
.home-page .letter-content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border: 4px solid transparent;
  border-image: url("/img/stationery/cotton-paper-edge.svg") 8 / 4px / 0 round;
  box-shadow: inset 1px 1px 0 #fffdf48c, inset -1px -1px 0 #af94703d;
}
.home-page .letter-body {
  z-index: 1;
}
.home-page .letter-content::before,
.motion-ready .home-page .letter-content.is-unfolding::before {
  border-color: var(--frame-color);
  outline-color: var(--frame-outline);
}
.home-page .letter-body > section,
.home-page .stories-section,
.home-page .pricing-section,
.home-page .consultation-section,
.home-page .site-footer {
  background: transparent;
}
.home-page .section-topline {
  border-color: #aa906146;
}
.home-page .story-feature {
  padding: 10px 10px 0;
  border: 1px solid #b39a714d;
  background: #fffaf23d;
  box-shadow: -8px 10px 22px #4935210c;
}
.home-page .story-small {
  padding: 7px;
  border: 1px solid #b39a714d;
}
.home-page .story-caption {
  padding-inline: 8px;
}
.home-page .pricing-card:not(.recommended) {
  background: #fffaf226;
}
.home-page .consultation-section {
  border-top: 1px solid #aa906146;
}
.home-page .site-footer {
  margin-inline: var(--letter-gutter);
}

/* Ink is revealed in whole phrases: readable, quiet, and never a typewriter loop. */
.reveal-enabled [data-stationery-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 650ms ease,
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-enabled [data-stationery-reveal="ink"] {
  mask-image: linear-gradient(#000, #000);
  mask-size: 0% 100%;
  mask-repeat: no-repeat;
  transform: translateY(6px);
  transition:
    mask-size 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 650ms ease,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-enabled [data-stationery-reveal="photo"] {
  clip-path: inset(0 0 12% 0);
  transition:
    clip-path 1300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1000ms ease,
    transform 1300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-enabled [data-stationery-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 -3% 0 -3%);
  mask-size: 100% 100%;
}
.home-page .short-rule {
  transform-origin: left;
}
.reveal-enabled .journey-intro:has(.is-revealed) .short-rule {
  animation: stationery-rule 1200ms 250ms both;
}
@keyframes stationery-rule {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (min-width: 1600px) {
  .home-page {
    --letter-gutter: 80px;
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .home-page {
    --letter-gutter: 36px;
  }
}
@media (max-width: 767px) {
  .home-page {
    /* Ruang meja di sisi kertas diperkecil agar isi lebih lega pada layar HP. */
    --letter-gutter: 10px;
  }
  .hero-backdrop {
    background:
      linear-gradient(#d1b47e30, #d1b47e30),
      var(--ivory-material) center/500px;
  }
  .hero-backdrop::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 75vw;
    background:
      linear-gradient(#b9975310, #b9975310),
      var(--reference-paper) center top/100% auto no-repeat;
    mask-image: linear-gradient(#000 58%, transparent);
  }
}
@media (prefers-reduced-motion: reduce), print {
  .reveal-enabled [data-stationery-reveal],
  .reveal-enabled [data-stationery-reveal].is-revealed {
    opacity: 1;
    transform: none;
    clip-path: none;
    mask-image: none;
    transition: none;
  }
  .reveal-enabled .journey-intro:has(.is-revealed) .short-rule {
    animation: none;
  }
}
.envelope-pending .home-page .letter-content {
  visibility: hidden;
}

/* Textures arrive asynchronously. Every physical fold must stay opaque even
   before the burgundy bitmap is decoded, or the ivory card shows through. */
.home-page .fold-left,
.home-page .fold-right,
.home-page .fold-bottom::after,
.home-page .flap-inner {
  background-color: #572b2a;
}
.home-page .fold-bottom {
  background-color: #794c43;
}
.home-page .hero-stage[data-opening-state="loading"] > .letter-content {
  visibility: hidden;
}