/* Quivvy — gaya cukil kayu: hero poster buronan + warna buku cerita */
:root {
  --paper: #EFE6D2; --paper-2: #F6EFDF; --ink: #231B14; --soft: #5E4E3C;
  --green: #3F6B37; --green-d: #2C4E27; --red: #B83A2A; --gold: #C89B3C;
  --display: "IM Fell English SC", Georgia, serif;
  --serif: "IM Fell English", Georgia, serif;
  --body: "Spectral", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 18px; line-height: 1.65;
  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='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 40px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Menu */
nav { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-block: 18px; border-bottom: 2px solid var(--ink); }
.nr { display: flex; gap: 34px; align-items: center; font: 19px/1 var(--display); letter-spacing: .08em; }
.nr a:not(.btn):hover { color: var(--red); }
.brand img { width: 66px; height: 66px; border-radius: 50%; }

.btn { display: inline-flex; align-items: center; justify-content: center; font: 20px/1 var(--display); letter-spacing: .08em;
       padding: 16px 26px; border: 2px solid var(--ink); border-radius: 4px; transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translateY(-2px); }
.btn.green { background: var(--green); border-color: var(--green-d); color: var(--paper); box-shadow: 0 4px 0 var(--green-d); }
.btn.green:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--green-d); }
.btn.ghost { background: var(--paper-2); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; padding-block: 64px 84px; }
.eyebrow { font: italic 22px/1.2 var(--serif); color: var(--red); }
h1 { font: 104px/.92 var(--display); font-weight: 400; margin: 14px 0 22px; text-wrap: balance; }
h1 em { font-style: normal; color: var(--green); }
.lede { font-size: 21px; max-width: 34ch; color: var(--soft); margin: 0 0 30px; }
.ca { display: flex; border: 2px solid var(--ink); background: var(--paper-2); margin-bottom: 24px; max-width: 540px; }
.ca > span { flex: 1; min-width: 0; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.ca b { font: 16px/1 var(--display); color: var(--red); letter-spacing: .1em; font-weight: 400; }
#ca-text { font: 600 15px/1.2 ui-monospace, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca button { border: 0; border-left: 2px solid var(--ink); background: var(--gold); font: 18px/1 var(--display); letter-spacing: .08em; padding: 0 22px; color: var(--ink); cursor: pointer; }
.ctas { display: flex; flex-wrap: wrap; gap: 16px; }
/* Poster dipaku di dua sudut atas; bagian bawahnya ketiup angin */
.poster { position: relative; justify-self: center; width: 100%; max-width: 520px; transform: rotate(2.5deg); perspective: 1100px; }
.sheet { position: relative; transform-origin: 50% 0; box-shadow: 0 30px 50px -20px rgba(35,27,20,.55), 0 2px 0 rgba(35,27,20,.3);
         animation: wind 9s ease-in-out infinite; will-change: transform; }
.shade { position: absolute; inset: 0; pointer-events: none; opacity: 0;
         background: linear-gradient(180deg, transparent 25%, rgba(35,27,20,.22) 100%), linear-gradient(100deg, transparent 40%, rgba(255,250,235,.22) 55%, transparent 70%);
         animation: wind-shade 9s ease-in-out infinite; }
/* Paku pas di atas titik paku yang kecetak di poster (22/300 dari tepi) */
.nail { position: absolute; top: calc(7.33% - 8px); width: 16px; height: 16px; z-index: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9a8b78, #231B14 70%); }
.nail.l { left: calc(7.33% - 8px); }
.nail.r { right: calc(7.33% - 8px); }
@media (min-width: 961px) { .sheet { filter: url(#paper-wind); } }
/* Hembusan nggak rata: angin pelan, hembusan kencang, reda, hembusan kecil */
@keyframes wind {
  0%   { transform: rotateX(0deg)   rotateY(0deg)    rotate(0deg); }
  10%  { transform: rotateX(-5deg)  rotateY(-1.5deg) rotate(-.3deg); }
  18%  { transform: rotateX(-2deg)  rotateY(1deg)    rotate(.2deg); }
  30%  { transform: rotateX(-12deg) rotateY(-3deg)   rotate(-.6deg); }
  36%  { transform: rotateX(-7deg)  rotateY(2deg)    rotate(.4deg); }
  44%  { transform: rotateX(-10deg) rotateY(-1deg)   rotate(-.3deg); }
  56%  { transform: rotateX(-3deg)  rotateY(1.5deg)  rotate(.3deg); }
  70%  { transform: rotateX(-1deg)  rotateY(-.5deg)  rotate(0deg); }
  82%  { transform: rotateX(-6deg)  rotateY(-2deg)   rotate(-.4deg); }
  90%  { transform: rotateX(-2deg)  rotateY(.8deg)   rotate(.1deg); }
  100% { transform: rotateX(0deg)   rotateY(0deg)    rotate(0deg); }
}
@keyframes wind-shade {
  0%, 70%, 100% { opacity: .05; }
  10% { opacity: .45; } 18% { opacity: .2; } 30% { opacity: 1; } 36% { opacity: .6; }
  44% { opacity: .85; } 56% { opacity: .3; } 82% { opacity: .55; } 90% { opacity: .2; }
}

/* Pita berjalan */
.strip { background: var(--red); color: var(--paper); border-block: 2px solid var(--ink); overflow: hidden; white-space: nowrap;
         font: 30px/1 var(--display); letter-spacing: .12em; padding-block: 18px; }
.strip .run { display: inline-block; animation: run 40s linear infinite; }
.strip i { font-style: normal; color: var(--gold); padding-inline: 18px; }
@keyframes run { to { transform: translateX(-50%); } }

/* Judul bab */
section { padding-block: 110px 0; scroll-margin-top: 20px; }
.chap { text-align: center; margin-bottom: 52px; }
.chap .n { font: italic 22px/1 var(--serif); color: var(--red); }
.chap h2 { font: 68px/1 var(--display); font-weight: 400; margin: 10px 0 14px; text-wrap: balance; }
.orn { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--red); font-size: 22px; }
.orn::before, .orn::after { content: ""; flex: 0 0 90px; border-top: 1.5px solid currentColor; opacity: .7; }

/* The Tale */
.tale { display: grid; grid-template-columns: 360px 1fr; gap: 72px; align-items: center; max-width: 1060px; margin: 0 auto; }
.tale p { margin: 0 0 18px; max-width: 58ch; }
/* Balada: tiap bait dipisah, huruf awal bait pertama besar merah */
.ballad .sung { font: italic 20px/1.3 var(--serif); color: var(--red); margin-bottom: 22px; }
.ballad .stanza { font: 23px/1.6 var(--serif); margin: 0 0 26px; }
.ballad .stanza:last-child { margin-bottom: 0; }
.ballad .stanza .l { display: block; padding-left: 1.4em; text-indent: -1.4em; }
.ballad .sung + .stanza .l:first-child::first-letter { font: 46px/1 var(--display); color: var(--red); }

/* Tokenomics */
.loot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sack { border: 2px solid var(--ink); background: var(--paper-2); padding: 34px 30px 30px; text-align: center; }
.sack .pct { font: 92px/1 var(--display); }
.sack .pct.word { font-size: 76px; line-height: 92px; }
.sack h3 { font: 26px/1.1 var(--display); font-weight: 400; margin: 10px 0 6px; }
.sack p { margin: 0; color: var(--soft); font-size: 16px; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 30px; border-block: 1.5px solid var(--ink); }
.facts span { padding: 18px 36px; font: 22px/1 var(--display); letter-spacing: .04em; }
.facts span + span { border-left: 1px solid var(--ink); }
.facts b { color: var(--red); font-weight: 400; }

/* How to buy */
.howband { margin-top: 110px; background: var(--green); color: var(--paper); padding-block: 90px 100px;
           border-block: 2px solid var(--ink); box-shadow: inset 0 8px 0 var(--green-d), inset 0 -8px 0 var(--green-d); scroll-margin-top: 0; }
.howband .chap .n { color: #F2C9A0; }
.howband .orn { color: var(--gold); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin: 0; padding: 0; list-style: none; }
.step { text-align: center; }
.medal { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 6px var(--green), 0 0 0 8px var(--gold);
         display: grid; place-items: center; font: 40px/1 var(--display); color: var(--gold); }
.step h3 { font: 30px/1.1 var(--display); font-weight: 400; margin: 8px 0 10px; }
.step p { margin: 0; color: #D9E3CF; font-size: 17px; }

/* Roadmap ala daftar isi */
.contents { max-width: 860px; margin: 0 auto; }
.entry { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: baseline; padding-block: 20px 8px; }
.entry .num { font: italic 22px/1 var(--serif); color: var(--red); width: 120px; }
.entry .what { display: flex; align-items: baseline; gap: 12px; font: 34px/1.1 var(--display); min-width: 0; }
.entry .what::after { content: ""; flex: 1; border-bottom: 2px dotted var(--soft); transform: translateY(-6px); }
.entry .st { font: 20px/1 var(--display); letter-spacing: .08em; }
.entry .st.now { color: var(--paper); background: var(--red); padding: 8px 12px 6px; }
.entry ul { grid-column: 2 / 4; margin: 4px 0 6px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 26px; color: var(--soft); font-size: 17px; }
.entry li::before { content: "➶ "; color: var(--green); }

/* Penutup gelap */
.gang { margin-top: 120px; background: var(--ink); color: var(--paper); padding-block: 96px; }
.gang .wrap { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: center; }
.gang .eyebrow { color: #E9846F; }
.gang h2 { font: 76px/1 var(--display); font-weight: 400; margin: 10px 0 18px; text-wrap: balance; }
.gang p { font-size: 21px; color: #CDBB93; max-width: 44ch; margin: 0 0 30px; }
.gang .btn { border-color: var(--paper); color: var(--paper); }
.gang .btn.light { background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 #8F806A; }
.soon { font: italic 21px/1.3 var(--serif); color: #E9846F; margin: 0; }

footer { background: var(--ink); color: #A99C82; font-size: 14px; border-top: 1px solid #3A3127; }
footer .wrap { display: flex; justify-content: space-between; gap: 40px; padding-block: 30px 40px; }
footer p { margin: 0; max-width: 80ch; }

/* Detail kecil: Quivvy dengan pose beda di beberapa titik */
.ca-wrap { position: relative; max-width: 540px; margin: 84px 0 24px; }
.ca-wrap .ca { position: relative; z-index: 1; margin-bottom: 0; }
.peek { position: absolute; right: 100px; top: -74px; width: 98px; height: 98px; transition: transform .25s ease; }
.ca-wrap:hover .peek { transform: translateY(-16px) rotate(-6deg); }

.sack { position: relative; }
/* Ngintip dari belakang kartu, sama kayak di kotak CA. z-index -1 = digambar di belakang latar kartu */
.sack .mini { position: absolute; z-index: -1; top: -56px; right: 26px; width: 94px; height: 94px; transition: transform .25s ease; }
.sack:hover .mini { transform: translateY(-16px) rotate(-6deg); }

.howband { position: relative; }
.loot-q { position: absolute; right: 3%; bottom: -28px; width: 150px; height: 150px; z-index: 2; }


footer .disc { display: flex; gap: 14px; align-items: center; }
footer .disc img { width: 64px; height: 64px; flex: none; }

/* The Tale: Quivvy manah. Satu siklus 6 detik:
   tarik pelan → lepas → panah melesat keluar bingkai → tali bergetar & badan kedorong → ambil panah baru → jeda */
.portrait svg { display: block; width: 100%; height: auto; }
.shoot .q-char, .shoot .q-arrow, .shoot .q-pull, .shoot .q-bow,
.shoot .q-string-pulled, .shoot .q-string-rest { transform-box: fill-box; }
.shoot .q-char { transform-origin: 50% 100%; animation: q-recoil 6s ease-in-out infinite; }
.shoot .q-bow { transform-origin: 100% 50%; animation: q-bow 6s ease-in-out infinite; }
.shoot .q-string-pulled { transform-origin: 0% 50%; animation: q-string-pulled 6s ease-in-out infinite; }
.shoot .q-string-rest { animation: q-string-rest 6s linear infinite; }
.shoot .q-arrow { animation: q-arrow 6s infinite; }
.shoot .q-pull { animation: q-pull 6s ease-in-out infinite; }

@keyframes q-arrow {
  0%, 8%   { transform: translateX(0);      opacity: 1; animation-timing-function: ease-in-out; }
  38%, 40% { transform: translateX(10px);   opacity: 1; animation-timing-function: cubic-bezier(.6, 0, 1, .4); }
  48%      { transform: translateX(-360px); opacity: 1; }
  49%, 72% { transform: translateX(-360px); opacity: 0; }
  73%      { transform: translateX(24px);   opacity: 0; animation-timing-function: ease-out; }
  82%, 100% { transform: translateX(0);     opacity: 1; }
}
@keyframes q-pull {
  0%, 8%   { transform: translateX(0); }
  38%, 40% { transform: translateX(10px); }
  42%      { transform: translateX(-6px); }
  48%, 100% { transform: translateX(0); }
}
@keyframes q-string-pulled {
  0%, 8%      { transform: scaleX(1);    opacity: 1; }
  38%, 40%    { transform: scaleX(1.09); opacity: 1; }
  40.5%, 79%  { transform: scaleX(1);    opacity: 0; }
  80%, 100%   { transform: scaleX(1);    opacity: 1; }
}
@keyframes q-string-rest {
  0%, 40%    { opacity: 0; transform: translateX(0); }
  40.5%      { opacity: 1; transform: translateX(-8px); }
  42%        { transform: translateX(6px); }
  43.5%      { transform: translateX(-4px); }
  45%        { transform: translateX(2px); }
  46.5%, 79% { opacity: 1; transform: translateX(0); }
  80%, 100%  { opacity: 0; transform: translateX(0); }
}
@keyframes q-bow {
  0%, 8%    { transform: scaleX(1); }
  38%, 40%  { transform: scaleX(1.07); }
  42%       { transform: scaleX(.95); }
  45%       { transform: scaleX(1.02); }
  48%, 100% { transform: scaleX(1); }
}
@keyframes q-recoil {
  0%, 40%   { transform: translate(0, 0) rotate(0deg); }
  42%       { transform: translate(5px, 0) rotate(1.5deg); }
  51%       { transform: translate(0, 0) rotate(0deg); }
  /* Lompat kecil dua kali pas girang */
  54.5%     { transform: translate(0, -6px) rotate(-1deg); }
  58%       { transform: translate(0, 0) rotate(0deg); }
  61.5%     { transform: translate(0, -4px) rotate(1deg); }
  65%, 100% { transform: translate(0, 0) rotate(0deg); }
}

/* Ganti ekspresi, nyambung sama gerakan manah:
   bidik (narik) → ngikutin panah (lepas) → girang (kena) → smug (ambil panah baru) → bidik lagi */
.shoot .q-face-aim   { animation: q-face-aim 6s infinite; }
.shoot .q-face-watch { animation: q-face-watch 6s infinite; }
.shoot .q-face-cheer { animation: q-face-cheer 6s infinite; }
.shoot .q-face-smug  { animation: q-face-smug 6s infinite; }
@keyframes q-face-aim   { 0%, 40% { opacity: 1; } 40.5%, 81.5% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes q-face-watch { 0%, 40% { opacity: 0; } 40.5%, 51% { opacity: 1; } 51.5%, 100% { opacity: 0; } }
@keyframes q-face-cheer { 0%, 51% { opacity: 0; } 51.5%, 68% { opacity: 1; } 68.5%, 100% { opacity: 0; } }
@keyframes q-face-smug  { 0%, 68% { opacity: 0; } 68.5%, 81.5% { opacity: 1; } 82%, 100% { opacity: 0; } }

/* Tablet & HP */
@media (max-width: 960px) {
  .wrap { padding-inline: 20px; }
  .nr a:not(.btn) { display: none; }
  .brand img { width: 54px; height: 54px; }
  .btn { font-size: 18px; padding: 14px 20px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-block: 36px 60px; }
  .hero > * { min-width: 0; }
  h1 { font-size: clamp(54px, 14vw, 88px); }
  .lede { font-size: 19px; }
  .poster { max-width: min(400px, 92%); transform: rotate(2deg); }
  .strip { font-size: 22px; padding-block: 14px; }
  section { padding-block: 76px 0; }
  .chap { margin-bottom: 36px; }
  .chap h2 { font-size: clamp(40px, 10vw, 60px); }
  .tale { grid-template-columns: 1fr; gap: 32px; }
  .ballad .stanza { font-size: 18.5px; }
  .tale .portrait { width: 100%; max-width: 280px; margin: 0 auto; }
  .loot { grid-template-columns: 1fr; gap: 64px; margin-top: 56px; }
  .sack { padding: 26px 22px; }
  .sack .pct { font-size: 72px; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; }
  .facts span { padding: 16px 12px; text-align: center; font-size: 18px; }
  .facts span + span { border-left: 0; }
  .facts span:nth-child(even) { border-left: 1px solid var(--ink); }
  .facts span:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .howband { margin-top: 76px; padding-block: 70px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .entry { grid-template-columns: 1fr auto; gap: 4px 14px; }
  .entry .num { grid-column: 1 / -1; width: auto; }
  .entry .what { font-size: 28px; }
  .entry ul { grid-column: 1 / -1; }
  .gang { margin-top: 80px; padding-block: 70px; }
  .gang .wrap { grid-template-columns: 1fr; }
  .gang .art { max-width: 240px; order: -1; }
  .gang h2 { font-size: clamp(44px, 11vw, 64px); }
  footer .wrap { flex-direction: column; gap: 12px; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .ctas .btn { flex: 1 1 100%; }
  .loot-q { width: 104px; height: 104px; right: 10px; bottom: -22px; }
  .sack .mini { right: 20px; top: -48px; width: 80px; height: 80px; }
  .peek { right: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .strip .run { animation: none; }
  .sheet, .shade { animation: none; filter: none !important; }
  html { scroll-behavior: auto; }
  .btn, .peek, .sack .mini { transition: none; }
  .shoot * { animation: none !important; }
}