:root {
  --bg: #efe8dc;
  --panel: rgba(245, 240, 232, 0.72);
  --panel-strong: rgba(255, 255, 255, 0.9);
  --text: #26221d;
  --text-soft: rgba(38, 34, 29, 0.62);
  --gold: #e9b32f;
  --shadow: 0 24px 80px rgba(33, 22, 8, 0.24);
  --blur: blur(24px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 223, 128, 0.3), transparent 28%),
    radial-gradient(circle at 80% 25%, rgba(255, 255, 255, 0.35), transparent 22%),
    linear-gradient(135deg, #f2e9dc 0%, #d8d1c4 42%, #f3eadb 100%);
}

button,
input {
  font: inherit;
}

.page-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 24px;
}

.page-shell__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px) saturate(1.15) brightness(0.78);
  transform: scale(1.08);
}

.page-shell__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 250, 244, 0.24), rgba(255, 246, 235, 0.56)),
    radial-gradient(circle at 50% 30%, rgba(255, 243, 202, 0.28), transparent 35%),
    linear-gradient(135deg, rgba(43, 30, 15, 0.42), rgba(65, 42, 12, 0.18));
}

/* Intro overlay (initial open screen) */
.intro-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10000;
  /* much lighter veil so background/cutscene remains visible */
  background: linear-gradient(180deg, rgba(7,7,7,0.14), rgba(7,7,7,0.18));
  color: #fff;
}
.intro-overlay__inner{
  text-align: center;
  padding: 28px 36px;
  border-radius: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* very subtle card so background shows through */
  background: rgba(22,18,14,0.12);
  box-shadow: 0 24px 60px rgba(0,0,0,0.36);
}
.intro-title{
  font-family: "Noto Sans JP", serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 3.6vw, 3.6rem);
  margin: 0 0 18px 0;
  color: #ffd9a8;
}
.intro-open{
  appearance: none;
  border: 0;
  background: linear-gradient(90deg, #ffd26b, #eaa32f);
  color: #271d12;
  font-weight: 900;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(34,22,8,0.36);
  transition: transform 220ms var(--anim-ease), opacity 220ms var(--anim-ease);
}
.intro-open:active{ transform: translateY(1px) scale(0.996); }

/* Hide overlay when body has .intro-closed */
body.intro-closed .intro-overlay{
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms var(--anim-ease);
}

@media (prefers-reduced-motion: reduce){
  .intro-open{ transition: none; }
  .intro-overlay{ transition: none; }
}

/* Entrance animations: smoother, keyframe-driven with hardware hints */
:root{
  --anim-hero-dur: 1600ms;
  --anim-ui-dur: 1200ms;
  --anim-stagger: 80ms;
  --anim-ease: cubic-bezier(0.16,0.84,0.24,1);
  --typing-dur-a: 900ms;
  --typing-dur-b: 700ms;
  --typing-steps-a: 8;
  --typing-steps-b: 5;
  --typing-delay-b: 1200ms;
}

@keyframes heroDrop {
  0% { transform: translateY(-84px) scale(0.992); opacity: 0; }
  70% { transform: translateY(4px) scale(1.002); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes uiRise {
  0% { transform: translateY(28px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* performance hint */
.hero-art img,
.side-nav__item,
.topbar__actions > *,
.promo{
  will-change: transform, opacity;
  backface-visibility: hidden;
}

body.preload .hero-art img{
  animation: none;
  opacity: 0;
}

/* When intro overlay is active (not closed) show the raw background image
   and hide the page UI/hero until user clicks Open. This makes the initial
   screen look like the full cutscene image (see user's reference). */
body:not(.intro-closed) .page-shell__bg{
  filter: none !important;
  transform: none !important;
}

body:not(.intro-closed) .page-shell__overlay{
  background: transparent !important;
}

body:not(.intro-closed) .hero-card{
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.998);
}

/* When overlay is closed, reveal the UI with a smooth fade/slide */
body.intro-closed .hero-card{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity 820ms var(--anim-ease), transform 820ms var(--anim-ease);
}

/* Restore background veil/blur after opening for the panel look */
body.intro-closed .page-shell__bg{
  filter: blur(8px) saturate(1.15) brightness(0.78);
  transform: scale(1.08);
  transition: filter 820ms var(--anim-ease), transform 820ms var(--anim-ease);
}

body.loaded .hero-art img{
  transform-origin: 50% 20%;
  will-change: transform, opacity;
  animation: heroDrop var(--anim-hero-dur) var(--anim-ease) both;
  animation-delay: 160ms;
}

/* UI elements rise with staggered delays */
body.preload .side-nav__item,
body.preload .topbar__actions > *,
body.preload .promo{
  animation: none;
  opacity: 0;
}

body.loaded .side-nav__item{
  animation: uiRise var(--anim-ui-dur) var(--anim-ease) both;
}
body.loaded .topbar__actions > *{
  animation: uiRise var(--anim-ui-dur) var(--anim-ease) both;
}
body.loaded .promo{
  animation: uiRise calc(var(--anim-ui-dur) + 120ms) var(--anim-ease) both;
}

/* stagger helpers */
.side-nav__item:nth-child(1){ animation-delay: calc(var(--anim-stagger) * 2 + 220ms); }
.side-nav__item:nth-child(2){ animation-delay: calc(var(--anim-stagger) * 3 + 220ms); }
.side-nav__item:nth-child(3){ animation-delay: calc(var(--anim-stagger) * 4 + 220ms); }
.side-nav__item:nth-child(4){ animation-delay: calc(var(--anim-stagger) * 5 + 220ms); }
.topbar__actions > *:nth-child(1){ animation-delay: calc(var(--anim-stagger) * 1 + 200ms); }
.topbar__actions > *:nth-child(2){ animation-delay: calc(var(--anim-stagger) * 2 + 200ms); }
.topbar__actions > *:nth-child(3){ animation-delay: calc(var(--anim-stagger) * 3 + 200ms); }
.promo--left{ animation-delay: calc(var(--anim-stagger) * 6 + 240ms); }
.promo--right{ animation-delay: calc(var(--anim-stagger) * 7 + 260ms); }

@media (prefers-reduced-motion: reduce){
  .hero-art img,
  .side-nav__item,
  .topbar__actions > *,
  .promo{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Typing caret styling */
.typing-caret{
  display: inline-block;
  width: 0;
  height: 1.04em;
  margin-left: .12rem;
  vertical-align: -0.12em;
  border-right: .12em solid rgba(38,34,29,0.9);
  opacity: 1;
  transform-origin: 50% 50%;
  animation: caretBlink 1000ms steps(1,end) infinite;
}

@keyframes caretBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce){
  .typing-caret { animation: none; opacity: 0; }
}
/* typing effect removed per user request */

.hero-card {
  position: relative;
  width: min(1360px, 100%);
  min-height: min(900px, calc(100vh - 40px));
  border-radius: 34px;
  padding: 26px 30px 24px;
  display: grid;
  grid-template-columns: 110px minmax(300px, 1.15fr) minmax(260px, 0.8fr) minmax(300px, 1.15fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 14px;
  background: var(--panel);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.36);
  overflow: hidden;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(235, 180, 62, 0.16), transparent 18%),
    radial-gradient(circle at 80% 28%, rgba(255, 214, 95, 0.15), transparent 20%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 40%);
  pointer-events: none;
}

.hero-card__glow {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.35;
  pointer-events: none;
}

.hero-card__glow--left {
  left: -150px;
  top: 40px;
  background: rgba(250, 218, 121, 0.55);
}

.hero-card__glow--right {
  right: -140px;
  bottom: -120px;
  background: rgba(255, 214, 155, 0.42);
}

.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #d99206;
  font-size: clamp(1.45rem, 1.8vw, 2.15rem);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search {
  width: min(280px, 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.search__icon {
  font-size: 1rem;
  color: var(--text-soft);
}

.search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.search input::placeholder {
  color: rgba(38, 34, 29, 0.8);
}

.icon-btn,
.profile {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: var(--text);
}

.icon-btn {
  width: 40px;
  height: 40px;
}

.profile {
  gap: 10px;
  padding: 6px 9px 6px 14px;
  font-weight: 700;
}

.profile__avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7d06a, #d9981b);
  color: #2a1e10;
  font-size: 0.9rem;
  font-weight: 800;
}

.side-nav {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
  justify-self: start;
  padding-top: 14px;
}

.side-nav__item {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  color: rgba(38, 34, 29, 0.78);
  text-decoration: none;
  text-align: center;
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.side-nav__item:hover,
.side-nav__item.is-active {
  background: rgba(255, 255, 255, 0.96);
  color: #231d14;
  transform: scale(1.05);
}

.hero-copy {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 2;
  width: min(380px, 100%);
  align-self: start;
  margin-top: 36px;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: clamp(1.05rem, 1.25vw, 1.4rem);
  color: #291f12;
}

.hero-copy h1,
.promo h2 {
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #2f2617;
}

.title-jp{
  margin-top: 6px;
  font-family: "Noto Sans JP", serif;
  font-size: clamp(18px, 2.4vw, 28px);
  color: rgba(46,34,22,0.74);
  letter-spacing: .06em;
}

.hero-copy h1 {
  font-family: "Bebas Neue", "Paytone One", "Manrope", sans-serif;
  font-size: clamp(3.4rem, 5.8vw, 6rem);
  line-height: 0.9;
  text-transform: none;
  letter-spacing: -0.01em;
  text-shadow: 0 8px 26px rgba(255, 255, 255, 0.22);
}

.hero-art {
  grid-column: 1 / -1;
  grid-row: 2 / 4;
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -46%);
  width: min(92%, 1040px);
  height: min(72vh, 720px);
}

.hero-art img {
  width: min(100%, 1040px);
  height: auto;
  max-height: 720px;
  object-fit: contain;
  filter: drop-shadow(0 28px 40px rgba(56, 37, 11, 0.26));
}

.decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.decor--bars {
  left: 24%;
  top: 31%;
  width: 160px;
  height: 120px;
  border-radius: 36px;
  background:
    linear-gradient(135deg, transparent 32%, rgba(248, 188, 39, 0.96) 32%, rgba(248, 188, 39, 0.96) 44%, transparent 44%),
    linear-gradient(135deg, transparent 56%, rgba(248, 188, 39, 0.96) 56%, rgba(248, 188, 39, 0.96) 68%, transparent 68%),
    linear-gradient(135deg, transparent 80%, rgba(248, 188, 39, 0.96) 80%, rgba(248, 188, 39, 0.96) 92%, transparent 92%);
  opacity: 0.84;
  transform: rotate(-1deg);
}

.decor--circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(248, 188, 39, 0.92);
  box-shadow: 0 0 0 12px rgba(248, 188, 39, 0.08);
}

.decor--left {
  left: 30%;
  top: 310px;
}

.decor--right {
  right: 18%;
  top: 160px;
}

/* Kanji decorative accents */
.kanji-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.deco-kanji {
  position: absolute;
  font-family: "Noto Sans JP", serif;
  color: rgba(46, 34, 22, 0.95);
  opacity: 0.08;
  mix-blend-mode: soft-light;
  -webkit-font-smoothing: antialiased;
  transform-origin: center;
  filter: blur(0.2px);
}

.deco-1 { left: 8%; top: 18%; font-size: clamp(72px, 9vw, 140px); transform: rotate(-8deg); animation: floatSmall 9000ms ease-in-out infinite; }
.deco-2 { left: 28%; top: 44%; font-size: clamp(56px, 6.6vw, 110px); transform: rotate(6deg); opacity: 0.06; animation: floatSmall 10000ms ease-in-out infinite reverse; }
.deco-3 { right: 18%; top: 28%; font-size: clamp(44px, 5.2vw, 90px); transform: rotate(-12deg); opacity: 0.05; animation: floatSmall 12000ms ease-in-out infinite; }
.deco-4 { right: 6%; bottom: 18%; font-size: clamp(48px, 5.8vw, 100px); transform: rotate(10deg); opacity: 0.055; animation: floatSmall 9500ms ease-in-out infinite reverse; }

@keyframes floatSmall {
  0% { transform: translateY(0) rotate(var(--rotate, 0deg)); }
  50% { transform: translateY(6px) rotate(calc(var(--rotate, 0deg) + 0.6deg)); }
  100% { transform: translateY(0) rotate(var(--rotate, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .deco-kanji { animation: none !important; }
}

/* Idle marquee (slow scrolling text) */
.idle-marquee{
  position: absolute;
  left: 6%;
  bottom: 8%;
  width: 56%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
}
.idle-marquee__inner{
  display: inline-block;
  white-space: nowrap;
  font-family: "Noto Sans JP", serif;
  font-size: clamp(14px, 1.6vw, 20px);
  color: rgba(46,34,22,0.95);
  transform: translateX(0);
  animation: marqueeSlow 50s linear infinite;
}

@keyframes marqueeSlow{
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Vertical strip on right with Japanese phrasing */
.vertical-strip{
  position: absolute;
  right: 22px;
  top: 38%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.08;
}
.vertical-strip span{
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Noto Sans JP", serif;
  font-size: clamp(18px, 2.4vw, 36px);
  color: rgba(46,34,22,0.95);
  transform: translateY(0);
  animation: verticalFloat 12s ease-in-out infinite;
}

@keyframes verticalFloat{
  0% { transform: translateY(0); }
  50% { transform: translateY(8px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .idle-marquee__inner, .vertical-strip span { animation: none !important; transform: none !important; }
}

/* Brush stroke and hanko (red seal) */
.brush-stroke{
  position: absolute;
  top: 22px;
  right: 64px;
  width: 360px;
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  mix-blend-mode: multiply;
  transform: rotate(-6deg) translateZ(0);
}

.hanko{
  position: absolute;
  right: 40px; /* moved to top-right area */
  top: 120px;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 999; /* ensure it's above hero and other decor */
  opacity: 0.92;
  mix-blend-mode: multiply;
  transform-origin: center;
  will-change: transform, opacity;
  animation: hankoPulse 5200ms ease-in-out infinite;
}

@keyframes hankoPulse {
  0% { transform: scale(0.98); opacity: 0.86; }
  50% { transform: scale(1.02); opacity: 0.94; }
  100% { transform: scale(0.98); opacity: 0.86; }
}

@media (prefers-reduced-motion: reduce){
  .brush-stroke, .hanko { animation: none !important; transform: none !important; }
}

.ink-spill{
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 160px;
  height: auto;
  pointer-events: none;
  z-index: 998; /* just under the hanko */
  opacity: 0.18;
  mix-blend-mode: multiply;
  transform: rotate(-6deg) translateZ(0);
  filter: blur(0.6px);
  animation: inkDrift 6200ms ease-in-out infinite;
}

@keyframes inkDrift{
  0% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(4px) rotate(-4deg); }
  100% { transform: translateY(0) rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce){
  .ink-spill { animation: none !important; transform: none !important; }
}

.promo,
.stats {
  position: relative;
  z-index: 3;
}

.promo {
  width: 100%;
  min-height: 196px;
  padding: 20px 18px 18px;
  border-radius: 28px;
  background: rgba(245, 241, 235, 0.48);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.promo--left {
  grid-column: 1 / 3;
  grid-row: 3;
}

.promo--right {
  grid-column: 3 / 5;
  grid-row: 3;
}

.promo__copy p {
  margin: 0;
  font-size: 1.25rem;
  color: #2b251a;
  font-family: "Manrope", system-ui, sans-serif;
}

.promo__copy h2 {
  font-family: "Bebas Neue", "Manrope", sans-serif;
  font-size: clamp(3.8rem, 5.4vw, 5.8rem);
  line-height: 0.88;
  margin-top: 6px;
}

.promo__copy--right {
  text-align: right;
}

.cta {
  align-self: flex-start;
  margin-top: 14px;
  min-width: 72%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px 14px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #2a241a;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(77, 58, 17, 0.1);
}

/* --- Responsive Layout --- */
@media (max-width: 1100px) {
  .hero-card {
    min-height: auto;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .topbar {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .topbar__actions {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
  }

  .brand {
    text-align: center;
    width: 100%;
  }

  .search {
    width: 100%;
    order: 3;
    margin-top: 12px;
  }

  .side-nav {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    padding-top: 0;
    margin: 0;
  }

  .hero-copy {
    width: 100%;
    margin-top: 0;
    text-align: center;
  }

  .hero-copy h1 {
    font-size: clamp(4rem, 8vw, 6rem);
  }

  .hero-art {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .hero-art img {
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
  }

  .promo {
    width: 100%;
    margin-top: 0;
  }

  .promo__copy--right {
    text-align: left;
  }

  /* Adjust decorative elements so they don't block content */
  .vertical-strip {
    display: none;
  }
  
  .idle-marquee {
    bottom: 12px;
    left: 0;
    width: 100%;
  }

  .hanko {
    top: 24px;
    right: 24px;
    transform: scale(0.8);
  }

  .brush-stroke {
    display: none;
  }
}

@media (max-width: 720px) {
  .page-shell {
    padding: 12px;
  }

  .hero-card {
    border-radius: 24px;
    padding: 24px 16px;
    gap: 24px;
  }

  .hero-copy h1 {
    font-size: clamp(3.2rem, 12vw, 4.5rem);
  }

  .hero-art img {
    max-height: 40vh;
  }

  .promo__copy h2 {
    font-size: clamp(3rem, 12vw, 4rem);
  }

  .cta {
    min-width: 100%;
    justify-content: center;
  }
  
  .side-nav__item {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
  
  .hanko {
    display: none;
  }
}