.home-page { overflow: hidden; }
.home-page .section { position: relative; }
.home-hero { padding-top: var(--space-14); }
.home-hero__scene { position: relative; }
.home-hero__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); min-height: 36.25rem; align-items: center; }
.home-hero__layout > * { min-width: 0; }
.home-hero__sign { position: absolute; z-index: 2; top: -1rem; left: 2.25rem; display: inline-flex; min-width: 0; align-items: center; gap: var(--space-2); border: var(--border-soft); border-radius: var(--radius-pill); background: var(--color-panel-000); box-shadow: var(--shadow-card); padding: .5rem .875rem; color: var(--color-violet-900); font-family: var(--font-heading); font-size: var(--text-14); font-weight: 800; transform-origin: center top; }
.home-hero__sign span { width: 1px; height: 1.25rem; background: var(--color-violet-700); }
.home-hero__intro { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.home-hero__intro h1, .home-hero__intro p, .home-hero__feature-copy h2, .home-hero__feature-copy p { margin: 0; }
.home-hero__intro h1 { max-width: 22ch; }
.home-hero__intro .lead { max-width: 38rem; }
.home-hero__diorama { width: 100%; max-width: 35rem; overflow: hidden; border-radius: var(--radius-2xl); background: var(--color-mist-100); box-shadow: var(--shadow-card); }
.home-hero__diorama img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left center; transition: transform var(--transition-fast); }
.home-hero__feature { min-width: 0; padding: var(--space-8); }
.home-hero__feature-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.home-hero__feature-copy h2 { max-width: 22ch; font-size: var(--text-32); line-height: 1.18; }
.home-hero__feature-copy p { max-width: 52ch; }
.home-page .button { min-height: 2.75rem; }
.home-paths__heading, .home-collections__heading, .home-spoilers__heading, .home-scenes__heading, .home-characters__heading, .home-notebook__heading, .home-faq__heading { max-width: 40rem; }
.home-paths__heading .lead, .home-collections__heading .lead, .home-spoilers__heading .lead, .home-scenes__heading .lead, .home-characters__heading .lead, .home-notebook__heading .lead, .home-faq__heading .lead { margin-bottom: 0; }
.home-paths__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.home-paths__grid > * { min-width: 0; }
.home-paths__card { min-height: 100%; text-decoration: none; color: var(--color-violet-900); }
.home-paths__content { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.home-paths__content h3, .home-paths__content p { margin: 0; }
.home-paths__link, .home-collection__link, .home-character__link, .home-article__link { margin-top: auto; color: var(--color-violet-900); font-family: var(--font-heading); font-weight: 800; text-decoration: underline; text-decoration-color: var(--color-coral-600); text-underline-offset: .18em; }
.home-paths__prop { width: 3rem; height: 2.5rem; margin: var(--space-6) var(--space-6) 0; border-radius: var(--radius-md); background: var(--color-mist-100); }
.home-paths__prop--clapper { background: linear-gradient(150deg, var(--color-violet-700) 0 24%, var(--color-coral-100) 24% 42%, var(--color-violet-700) 42% 58%, var(--color-panel-000) 58% 76%, var(--color-violet-700) 76%); }
.home-paths__prop--frame { border: .45rem solid var(--color-teal-600); background: var(--color-panel-000); }
.home-paths__prop--portrait { border-radius: 50% 50% 42% 42%; background: radial-gradient(circle at 50% 32%, var(--color-coral-100) 0 22%, transparent 23%), var(--color-violet-700); }
.home-paths__prop--lamp { border-radius: 50% 50% var(--radius-md) var(--radius-md); background: radial-gradient(circle at 50% 35%, var(--color-panel-000) 0 15%, var(--color-coral-600) 16% 45%, var(--color-violet-700) 46%); }
.home-collections { background: var(--color-mist-100); }
.home-collections__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.home-collections__grid > * { min-width: 0; }
.home-collection { color: var(--color-violet-900); text-decoration: none; }
.home-collection__poster { width: 100%; aspect-ratio: 2 / 3; position: relative; overflow: hidden; background: var(--color-violet-700); }
.home-collection__poster span, .home-collection__poster i { position: absolute; display: block; }
.home-collection__poster--tension { background: linear-gradient(145deg, #503b70, #281a46); }
.home-collection__poster--tension span { width: 68%; height: 42%; left: 16%; top: 28%; border: 1rem solid var(--color-coral-100); border-radius: 50%; box-shadow: 0 0 0 1rem rgb(255 255 255 / 15%); }
.home-collection__poster--tension i { width: 40%; height: 12%; left: 30%; bottom: 16%; border-radius: var(--radius-pill); background: var(--color-panel-000); }
.home-collection__poster--noir { background: linear-gradient(155deg, #281a46, #9a5972); }
.home-collection__poster--noir span { width: 42%; height: 100%; left: 29%; background: rgb(255 224 216 / 82%); transform: skewX(-17deg); }
.home-collection__poster--noir i { width: 72%; height: 22%; left: 14%; top: 38%; border-radius: var(--radius-pill); background: var(--color-violet-900); }
.home-collection__poster--roulette { background: linear-gradient(135deg, #247c7d, #d8efef); }
.home-collection__poster--roulette span { width: 72%; aspect-ratio: 1; left: 14%; top: 20%; border: 1.4rem solid var(--color-panel-000); border-radius: 50%; }
.home-collection__poster--roulette i { width: 1.4rem; aspect-ratio: 1; left: calc(50% - .7rem); top: calc(56% - .7rem); border-radius: 50%; background: var(--color-coral-600); }
.home-collection__content { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.home-collection__content h3, .home-collection__content p { margin: 0; }
.home-collections__cta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-6); padding: var(--space-6) var(--space-8); }
.home-collections__cta > * { min-width: 0; }
.home-collections__cta h3, .home-collections__cta p { margin: 0; }
.home-collections__cta p { max-width: 54ch; }
.home-spoilers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.home-spoilers__grid > * { min-width: 0; }
.home-step__content { display: flex; min-width: 0; min-height: 100%; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.home-step__content h3, .home-step__content p { margin: 0; }
.home-step__number { color: var(--color-coral-600); font-family: var(--font-heading); font-size: var(--text-24); font-weight: 800; }
.home-spoiler-notice { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-3); }
.home-spoiler-notice h4, .home-spoiler-notice p { margin: 0; }
.home-spoiler-details { width: 100%; border-top: 1px solid #f2bcb2; padding-top: var(--space-3); }
.home-spoilers__button { margin-top: var(--space-6); }
.home-scenes { background: var(--color-panel-000); }
.home-scenes__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); margin-top: var(--space-8); }
.home-scenes__grid > * { min-width: 0; }
.home-scenes__poker, .home-scenes__roulette { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-8); }
.home-scenes__poker h3, .home-scenes__poker p, .home-scenes__roulette h3, .home-scenes__roulette p { margin: 0; }
.home-scenes__poker p { max-width: 56ch; }
.home-scenes__roulette { border: var(--border-soft); border-radius: var(--radius-xl); background: var(--color-mist-100); }
.home-scenes__roulette p { max-width: 48ch; }
.home-scenes__cards { position: absolute; right: var(--space-6); bottom: var(--space-6); width: 2.5rem; height: 3.5rem; border-radius: var(--radius-md); background: var(--color-coral-100); box-shadow: -.45rem -.35rem 0 var(--color-panel-000), -.9rem -.7rem 0 var(--color-violet-700); }
.home-scenes__note { margin-top: var(--space-6); }
.home-scenes__note h3, .home-scenes__note p { margin: 0; }
.home-scenes__note { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); }
.home-characters__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.home-characters__grid > * { min-width: 0; }
.home-character { color: var(--color-violet-900); text-decoration: none; }
.home-character__relief { width: 100%; aspect-ratio: 4 / 5; background: var(--color-mist-100); }
.home-character__relief--observer { background: radial-gradient(circle at 50% 32%, var(--color-panel-000) 0 16%, transparent 17%), radial-gradient(ellipse at 50% 76%, var(--color-violet-700) 0 31%, transparent 32%), var(--color-mist-100); }
.home-character__relief--mask { background: radial-gradient(ellipse at 50% 42%, var(--color-coral-100) 0 20%, transparent 21%), linear-gradient(90deg, transparent 44%, var(--color-violet-700) 45% 55%, transparent 56%), var(--color-mist-100); }
.home-character__relief--choice { background: radial-gradient(circle at 62% 32%, var(--color-coral-600) 0 10%, transparent 11%), radial-gradient(ellipse at 50% 72%, var(--color-violet-700) 0 31%, transparent 32%), var(--color-mist-100); }
.home-character__content { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.home-character__content h3, .home-character__content p { margin: 0; }
.home-characters__closing { max-width: 46rem; margin: var(--space-6) 0 0; }
.home-notebook { background: var(--color-mist-100); }
.home-notebook__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.home-notebook__grid > * { min-width: 0; }
.home-notebook__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.home-notebook__side > * { min-width: 0; }
.home-article { min-width: 0; color: var(--color-violet-900); text-decoration: none; }
.home-article__content { display: flex; min-width: 0; height: 100%; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.home-article__content h3, .home-article__content p { margin: 0; }
.home-article--lead .home-article__content { justify-content: center; padding: var(--space-8); }
.home-notebook__more { margin: var(--space-6) 0 0; }
.home-faq { background: var(--color-panel-000); }
.home-faq__container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.home-faq__heading { grid-column: 1 / span 6; }
.home-faq__panel { grid-column: 1 / span 8; display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.home-faq__panel details { width: 100%; margin: 0; }
.home-faq__panel details p { max-width: 68ch; }
.home-final__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; padding: var(--space-8); }
.home-final__panel > * { min-width: 0; }
.home-final__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.home-final__copy h2, .home-final__copy p { margin: 0; }
.home-final__copy h2 { max-width: 24ch; }
.home-final__copy p { max-width: 54ch; }
.home-final__projector { position: relative; width: min(100%, 18rem); aspect-ratio: 4 / 3; justify-self: center; border-radius: var(--radius-2xl); background: var(--color-mist-100); }
.home-final__projector span { position: absolute; left: 22%; bottom: 20%; width: 42%; height: 34%; border-radius: var(--radius-lg); background: var(--color-violet-700); }
.home-final__projector i { position: absolute; left: 10%; top: 20%; width: 27%; aspect-ratio: 1; border: .65rem solid var(--color-panel-000); border-radius: 50%; background: var(--color-coral-600); box-shadow: 3rem .2rem 0 -.65rem var(--color-coral-100); }
.home-final__projector::after { content: ""; position: absolute; right: -10%; top: 28%; width: 42%; height: 28%; background: rgb(255 224 216 / 72%); clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (hover: hover) and (pointer: fine) { .home-hero__diorama:hover img { transform: translate3d(2px, -1px, 0) scale(1.01); } }
@media (min-width: 1024px) { .home-hero__sign { animation: home-sign-sway 5s ease-in-out infinite; } }
@keyframes home-sign-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@media (max-width: 1023px) { .home-hero__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; } .home-paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-collections__grid, .home-characters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-collection:last-child, .home-character:last-child { grid-column: 1 / -1; } }
@media (max-width: 859px) { .home-scenes__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) { .home-hero { padding-top: var(--space-10); } .home-hero__sign { position: static; width: fit-content; margin-bottom: var(--space-4); } .home-hero__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .home-hero__intro { gap: var(--space-4); } .home-hero__intro h1 { max-width: 19ch; } .home-hero__diorama { max-width: none; } .home-hero__feature { padding: var(--space-6); } .home-final__panel { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); } .home-final__projector { justify-self: start; max-width: 11.25rem; } }
@media (max-width: 639px) { .home-paths__grid, .home-collections__grid, .home-spoilers__grid, .home-characters__grid, .home-notebook__grid { grid-template-columns: minmax(0, 1fr); } .home-collection:last-child, .home-character:last-child { grid-column: auto; } .home-collections__cta { flex-direction: column; align-items: flex-start; padding: var(--space-6); } .home-collections__cta .button { width: 100%; } .home-scenes__poker, .home-scenes__roulette { padding: var(--space-6); } .home-scenes__cards { display: none; } .home-notebook__side { grid-template-columns: minmax(0, 1fr); } .home-faq__container { grid-template-columns: minmax(0, 1fr); } .home-faq__heading, .home-faq__panel { grid-column: auto; } .home-faq__panel { padding: var(--space-3); } }
@media (max-width: 479px) { .home-hero__intro h1 { font-size: clamp(2.25rem, 10vw, 2.5rem); } .home-hero__feature-copy h2 { font-size: var(--text-24); } .home-hero__diorama img { aspect-ratio: 16 / 10; } .home-paths__content, .home-collection__content, .home-step__content, .home-character__content, .home-article__content { padding: 1.25rem; } .home-spoiler-notice .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .home-hero__sign { animation: none; } .home-hero__diorama img { transform: none !important; } }