@font-face { font-family: Inter; src: url('/assets/Inter-Bold.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/Inter-Black.woff2') format('woff2'); font-style: normal; font-weight: 900; font-display: swap; }

:root {
  --cream: #f4ead8;
  --lime: #ccff00;
  --coral: #f7aaa2;
  --ink: #11111d;
  --display: Inter, system-ui, sans-serif;
  --body: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { color: var(--ink); background: #e9f4d6; font-family: var(--body); font-weight: 700; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--ink); background: var(--lime); }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100svh;
  min-height: 680px;
  padding: clamp(30px, 4.5svh, 54px) clamp(20px, 4vw, 64px) 62px;
  overflow: hidden;
  text-align: center;
}
.hero__sky { position: absolute; inset: 0; z-index: -3; }
.hero__sky picture { display: block; width: 100%; height: 100%; }
.hero__sky img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero__sky::after { content: ''; position: absolute; inset: 0; background: var(--cream); opacity: .12; }
.hero__grain {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: .055; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__top { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.hero__title {
  display: flex; justify-content: center;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(76px, min(10.5vw, 14.5svh), 160px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.065em;
}
.hero__subtitle {
  margin: 12px 0 0;
  font-family: var(--body);
  font-size: clamp(25px, min(2.7vw, 3.8svh), 37px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.025em;
  color: var(--ink);
}
.hero__note { position: relative; margin-top: 20px; padding: 12px 27px 13px; border: 2px solid var(--ink); border-radius: 9px 12px 10px 8px; background: var(--cream); box-shadow: 0 4px 0 var(--ink); transform: rotate(-1deg); }
.hero__note::before, .hero__note::after { content: ''; position: absolute; top: -8px; width: 42px; height: 15px; background: var(--coral); border: 1px solid #11111d66; transform: rotate(-13deg); }
.hero__note::before { left: 17px; }
.hero__note::after { right: 17px; transform: rotate(11deg); }
.hero__address { margin: 0 0 5px; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.3; font-weight: 900; letter-spacing: -.045em; }
.hero__address span { color: var(--ink); }
.hero__copy { margin: 0; font-size: clamp(12px, 1.05vw, 14px); font-weight: 700; line-height: 1.55; letter-spacing: -.01em; }

.hero__stage { position: relative; width: 100%; flex: 1 1 0; min-height: 260px; margin-top: 12px; display: flex; justify-content: center; align-items: flex-end; }
.hero__muse { position: relative; z-index: 3; width: min(41vw, 580px); height: 100%; max-height: 650px; }
.hero__muse::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 1%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse, #11130d32, transparent 70%); }
.hero__illustration { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.hero__signin { position: relative; z-index: 6; margin-top: 19px; }
/* Shared ID button: landing/id/demo/index.html, using this landing's Inter font. */
.musechain-id-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 22px; border-radius: 14px; border: 1px solid #a9d400;
  background: var(--lime); color: #0b0b0f;
  font: 700 16px/1 var(--body); letter-spacing: -.01em; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 8%), 0 1px 2px rgb(15 15 25 / 5%);
  transition: background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.musechain-id-button:hover { background: #bdf000; }
.musechain-id-button img { height: 30px; width: auto; flex: none; }
.musechain-id-button .mcid-id { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; margin-left: -4px; border-radius: 999px; background: #0b0b0f; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; vertical-align: middle; }
.hero__signin-help { margin: 9px 0 0; font-size: 11px; line-height: 1.4; color: var(--ink); }

.hero__mail { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mail-fall { position: absolute; top: -190px; left: var(--x); width: var(--size); animation: mail-fall var(--duration) linear infinite; animation-delay: var(--delay); will-change: transform; }
.mail-sway { animation: mail-sway calc(var(--duration) / 2.6) ease-in-out infinite alternate; animation-delay: var(--delay); }
.mail { width: 100%; height: auto; object-fit: contain; }
.mail[hidden] { display: none; }
.mail-fall--one { --x: 3%; --size: clamp(95px, 10vw, 155px); --duration: 13s; --delay: -4s; --spin: 65deg; --drift: 28px; }
.mail-fall--two { --x: 17%; --size: clamp(70px, 7vw, 112px); --duration: 16s; --delay: -10s; --spin: -90deg; --drift: -32px; }
.mail-fall--three { --x: 29%; --size: clamp(85px, 8vw, 140px); --duration: 14s; --delay: -1s; --spin: -65deg; --drift: 22px; }
.mail-fall--four { --x: 43%; --size: clamp(82px, 7vw, 115px); --duration: 18s; --delay: -12s; --spin: 80deg; --drift: -20px; }
.mail-fall--five { --x: 58%; --size: clamp(70px, 6.5vw, 105px); --duration: 15s; --delay: -6s; --spin: 110deg; --drift: 24px; }
.mail-fall--six { --x: 71%; --size: clamp(95px, 9vw, 150px); --duration: 17s; --delay: -1.5s; --spin: -55deg; --drift: -27px; }
.mail-fall--seven { --x: 83%; --size: clamp(85px, 8vw, 135px); --duration: 13s; --delay: -8s; --spin: 75deg; --drift: 20px; }
.mail-fall--eight { --x: 93%; --size: clamp(65px, 6vw, 100px); --duration: 19s; --delay: -5s; --spin: -110deg; --drift: -20px; }
@keyframes mail-fall { from { transform: translateY(0) rotate(-15deg); } to { transform: translateY(calc(100svh + 420px)) rotate(var(--spin)); } }
@keyframes mail-sway { from { transform: translateX(calc(var(--drift) * -1)) rotate(-6deg); } to { transform: translateX(var(--drift)) rotate(6deg); } }

.hero__flora { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.flora { position: absolute; bottom: 0; height: auto; transform-origin: 50% 100%; }
.flora--tree-round { left: -14%; bottom: -6%; width: clamp(260px, max(30vw, 40vh), 680px); animation: rustle 7.5s ease-in-out infinite; }
.flora--bush { left: -2%; bottom: -8%; width: clamp(170px, max(18vw, 24vh), 400px); animation: rustle 5.5s ease-in-out -2s infinite; }
.flora--grass { left: 29%; bottom: -5%; width: clamp(200px, max(22vw, 28vh), 460px); animation: rustle 4.5s ease-in-out -1s infinite; }
.flora--hedge { right: -8%; bottom: -8%; width: clamp(320px, max(36vw, 46vh), 760px); animation: rustle 6.5s ease-in-out -3s infinite; }
.flora--tree-tall { right: 2%; bottom: -2%; width: clamp(100px, max(10vw, 14vh), 240px); animation: rustle 8s ease-in-out -4s infinite; }
@keyframes rustle { 0%, 100% { transform: rotate(-1.4deg) translateX(0); } 50% { transform: rotate(1.4deg) translateX(4px); } }
.hero.is-paused .mail-fall, .hero.is-paused .mail-sway, .hero.is-paused .flora { animation-play-state: paused; }

.hero__footer { position: absolute; z-index: 8; bottom: 17px; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; font-size: 12px; font-weight: 750; }
.hero__brand { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); box-shadow: 0 3px 0 var(--ink); }
.hero__brand img { width: 28px; height: 28px; object-fit: contain; }
.hero__receive { padding: 5px 9px; border-radius: 8px; background: #f4ead8dd; }
.hero__footer nav { display: flex; align-items: center; gap: 18px; padding: 8px 12px; border-radius: 999px; background: var(--cream); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.hero__footer nav a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1000px) {
  .hero { height: auto; min-height: 100svh; padding-top: 32px; }
  .hero__title { font-size: clamp(68px, 11vw, 110px); }
  .hero__subtitle { font-size: clamp(25px, 3.6vw, 34px); }
  .hero__stage { flex: 1 1 auto; align-items: flex-end; margin-top: 14px; }
  .hero__muse { width: min(84vw, 470px); height: clamp(330px, 45svh, 500px); margin-top: 4px; }
}

@media (max-width: 640px) {
  .hero { padding: 20px 18px 70px; }
  .hero__title { display: block; font-size: clamp(70px, 21vw, 112px); line-height: .9; }
  .hero__title span { display: block; }
  .hero__subtitle { margin-top: 15px; font-size: clamp(23px, 6.2vw, 31px); }
  .hero__note { margin-top: 19px; padding: 11px 17px 12px; }
  .hero__address { font-size: 18px; margin-bottom: 4px; }
  .hero__copy { max-width: 320px; font-size: 12px; line-height: 1.55; }
  .hero__stage { margin-top: 12px; }
  .hero__signin { margin-top: 18px; }
  .musechain-id-button { padding-inline: 17px; font-size: 15px; gap: 8px; }
  .hero__muse { flex: 0 0 min(84vw, 390px); height: clamp(240px, 37svh, 350px); margin-top: 0; }
  .mail-fall { --size: 90px; --drift: 15px; }
  .mail-fall--one { --x: -8%; }
  .mail-fall--two { --x: 20%; --size: 65px; }
  .mail-fall--three, .mail-fall--four, .mail-fall--five { display: none; }
  .mail-fall--six { --x: 75%; }
  .mail-fall--seven { --x: 89%; --size: 75px; }
  .mail-fall--eight { --x: 54%; --size: 60px; }
  .flora--tree-round, .flora--bush { display: none; }
  .flora--grass { left: -10%; bottom: -3%; width: 58vw; }
  .flora--hedge { right: -18%; bottom: -7%; width: 68vw; }
  .flora--tree-tall { right: -16%; bottom: -6%; width: 34vw; }
  .hero__footer { left: 18px; right: 18px; bottom: 17px; gap: 12px; font-size: 11px; }
  .hero__brand { gap: 6px; padding-right: 9px; }
  .hero__brand img { width: 25px; height: 25px; }
  .hero__receive { display: none; }
  .hero__footer nav { gap: 17px; }
}

@media (max-width: 359px) {
  .hero { padding-inline: 14px; }
  .musechain-id-button { padding-inline: 14px; font-size: 14px; gap: 7px; }
  .hero__copy { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mail-fall { top: 24%; transform: rotate(-12deg); }
  .mail-fall:nth-child(even) { top: 65%; transform: rotate(12deg); }
  .mail-fall--three, .mail-fall--four, .mail-fall--five { display: none; }
}