/* Homepage only: the shared Ribbon shell and the hub keep their own layout. */
.home {
  background: var(--paper);
  overflow-x: clip;
}
.home [hidden] {
  display: none !important;
}
.home .wrap {
  max-width: 1240px;
}
.home h1,
.home h2,
.home h3 {
  font-family: WalkerDisplay, var(--body);
  letter-spacing: -0.045em;
  line-height: 1.03;
}
.home h2 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  margin: 0;
  max-width: 690px;
}
.home .home-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0 0 20px;
}
.home-hero {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  min-height: min(850px, calc(100svh - 80px));
  background: #101f30;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero-world {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-world video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
.home-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(9, 17, 32, 0.98) 0%,
      rgba(9, 17, 32, 0.84) 27%,
      rgba(9, 17, 32, 0.24) 65%,
      rgba(9, 17, 32, 0.08)
    ),
    linear-gradient(0deg, rgba(9, 17, 32, 0.88), transparent 30%);
}
.hero-content {
  width: 100%;
  padding-top: 90px;
  padding-bottom: 100px;
}
.home h1 {
  font-size: clamp(3.2rem, 6.4vw, 6.4rem);
  max-width: 720px;
  margin: 0 0 28px;
  text-wrap: balance;
}
.home h1 span {
  color: #f45543;
}
.hero-lead {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 600;
  max-width: 420px;
  line-height: 1.5;
}
.hero-description {
  max-width: 390px;
  font-size: 0.93rem;
  line-height: 1.75;
  color: #ccd6e4;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 32px;
}
.home .button {
  border-radius: 6px;
  font-weight: 600;
  padding: 14px 23px;
  box-shadow: 0 4px 0 var(--red-dark);
  min-height: 48px;
}
.home-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 44px;
}
.home-play span {
  display: grid;
  place-items: center;
  border: 1px solid #8a9bae;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.hero-bottom {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hero-scroll {
  color: #d2dfeb;
  text-decoration: none;
  font-size: 0.65rem;
  letter-spacing: 0.13em;
}
.hero-scroll span {
  font-size: 1.2rem;
  margin-left: 18px;
}
.motion-control {
  background: #0c1729d9;
  color: #f3f7ff;
  border: 1px solid #77889e;
  border-radius: 30px;
  padding: 9px 14px;
  min-height: 40px;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.home-encounters {
  padding: 84px 0 100px;
  position: relative;
}
.home-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 36px;
}
.home-section-heading .home-eyebrow {
  color: var(--red);
}
.home-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  padding: 10px 0;
}
.home-event {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  min-height: 380px;
  background: #182840;
  color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 40px #121a2b12;
}
.home-event-art {
  position: relative;
  background: #172d44;
  min-height: 300px;
  overflow: hidden;
}
.home-event-art:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 70%, #182840);
}
.home-event-art img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}
.home-event-copy {
  padding: 42px 44px 42px 26px;
  align-self: center;
}
.home-event-copy .home-eyebrow {
  color: #a8dcfb;
  margin-bottom: 16px;
}
.home-event h3 {
  font-size: clamp(2.4rem, 4.6vw, 4.4rem);
  margin: 0 0 12px;
}
.home-event-name {
  font-size: 1rem;
  color: #d5e4f2;
  margin: 0 0 24px;
}
.home-event-date {
  font-size: 0.88rem;
  line-height: 1.6;
  color: white;
  font-weight: 600;
}
.home-event-detail {
  font-size: 0.78rem;
  color: #b3c7d9;
  line-height: 1.6;
  margin-bottom: 26px;
}
.home-event .button {
  font-size: 0.85rem;
}
.home-calendar-status:empty {
  display: none;
}
.home-experiences {
  background: #fff;
  padding: 90px 0 80px;
  position: relative;
  isolation: isolate;
}
.home-experiences:before {
  content: "";
  height: 26px;
  position: absolute;
  left: 0;
  right: 0;
  top: -25px;
  background: #fff;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.experience-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  min-height: 600px;
}
.experience-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 42px;
}
.experience-tabs button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--muted);
  padding: 16px 12px;
  cursor: pointer;
  flex: 1;
}
.experience-tabs [aria-selected="true"] {
  border-color: var(--red);
  color: var(--red);
}
.experience-number {
  font-size: 0.65rem;
  letter-spacing: 0.17em;
  color: var(--muted);
  font-weight: 600;
}
.experience-copy h3 {
  font-size: clamp(2.4rem, 3.8vw, 3.7rem);
  margin: 24px 0;
}
.experience-copy [role="tabpanel"] > p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 400px;
  margin-bottom: 28px;
}
.experience-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 610px;
  isolation: isolate;
}
.experience-orbit {
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e9eef7;
  z-index: -1;
}
.experience-orbit:before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid #c7d1e4;
  border-radius: 50%;
}
.experience-stage[data-mode="musical"] .experience-orbit {
  background: #f9e7ee;
}
.experience-stage[data-mode="incursiones"] .experience-orbit {
  background: #dfedf3;
}
.experience-stage[data-mode="combates"] .experience-orbit {
  background: #fae9df;
}
.experience-phone {
  height: 560px;
  width: 259px;
  flex-shrink: 0;
  margin: 0;
  border: 7px solid #131e32;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 15px 24px 36px #172b4229;
  background: #131e32;
  transform: rotate(3deg);
}
.experience-phone img,
.experience-phone video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.experience-caption {
  position: absolute;
  left: 0;
  bottom: 32px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.18em;
  font-size: 0.62rem;
  color: var(--muted);
}
.experience-stage .motion-control {
  position: absolute;
  bottom: 0;
  right: 0;
  background: white;
  color: var(--ink);
  border-color: var(--line);
}
.home .download-section {
  padding: 90px 0;
  background: #e5eaf2;
  border-top: 1px solid #d3dce8;
}
.home .download-heading {
  margin-bottom: 36px;
}
.home .download-heading img {
  width: 96px;
  height: 96px;
}
.home .download-platform {
  border-radius: 12px;
  box-shadow: none;
}
.home .download-platform h3 {
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.home .download-channel h4 {
  font-family: var(--body);
}
.home :focus-visible {
  outline: 3px solid #edaa31;
  outline-offset: 5px;
}
.home .credits {
  border-top: 1px solid #344259;
  padding-top: 24px;
}
.home .site-footer {
  margin-top: 0;
}
@media (min-width: 1600px) {
  .hero-world {
    left: 20%;
  }
  .hero-world video {
    object-position: center;
  }
  .home-hero:before {
    background:
      linear-gradient(90deg, #091120 8%, #091120d9 30%, #09112000 70%),
      linear-gradient(0deg, #091120b3, transparent 35%);
  }
}
@media (max-width: 900px) {
  .home .wrap {
    padding-left: 26px;
    padding-right: 26px;
  }
  .home-hero {
    min-height: 780px;
  }
  .hero-world {
    inset: 240px -180px 0 -180px;
  }
  .hero-world video {
    object-position: center;
  }
  .home-hero:before {
    background: linear-gradient(180deg, #091120 1%, #091120f2 20%, #09112020 65%, #091120d9 100%);
  }
  .hero-content {
    padding-top: 50px;
    padding-bottom: 330px;
  }
  .home h1 {
    font-size: 4.4rem;
  }
  .hero-lead {
    max-width: 400px;
  }
  .hero-description {
    max-width: 430px;
  }
  .hero-actions {
    margin-top: 22px;
  }
  .home-section-heading {
    align-items: start;
    flex-direction: column;
    gap: 12px;
  }
  .home-event {
    grid-template-columns: 1.1fr 1fr;
  }
  .home-event-copy {
    padding: 28px 26px;
  }
  .home-event h3 {
    font-size: 3rem;
  }
  .experience-layout {
    gap: 28px;
  }
  .experience-tabs button {
    padding: 14px 6px;
    font-size: 0.72rem;
  }
  .experience-phone {
    height: 500px;
    width: 232px;
  }
  .experience-stage {
    min-height: 560px;
  }
  .experience-copy h3 {
    font-size: 2.8rem;
  }
}
@media (max-width: 600px) {
  .home .wrap {
    padding-left: 22px;
    padding-right: 22px;
  }
  .home-hero {
    min-height: 820px;
    justify-content: start;
  }
  .hero-content {
    padding-top: 42px;
    padding-bottom: 0;
  }
  .home .home-eyebrow {
    font-size: 0.61rem;
    letter-spacing: 0.13em;
    margin-bottom: 18px;
  }
  .home h1 {
    font-size: clamp(2.9rem, 10.5vw, 4rem);
    margin-bottom: 20px;
  }
  .hero-lead {
    font-size: 1.02rem;
    max-width: 300px;
    margin-bottom: 12px;
  }
  .hero-description {
    font-size: 0.8rem;
    line-height: 1.65;
    max-width: 320px;
  }
  .hero-actions {
    gap: 18px;
    margin-top: 24px;
  }
  .home .button {
    padding: 12px 18px;
    font-size: 0.83rem;
  }
  .home-play {
    font-size: 0.8rem;
    gap: 7px;
  }
  .home-play span {
    width: 30px;
    height: 30px;
  }
  .hero-world {
    inset: 345px -230px 20px;
  }
  .home-hero:before {
    background: linear-gradient(
      180deg,
      #091120 0%,
      #091120f5 32%,
      #09112000 64%,
      #09112080 88%,
      #091120 100%
    );
  }
  .hero-bottom {
    bottom: 20px;
    gap: 6px;
  }
  .hero-scroll {
    font-size: 0.52rem;
    letter-spacing: 0.08em;
  }
  .hero-scroll span {
    margin-left: 6px;
  }
  .motion-control {
    font-size: 0.62rem;
    padding: 8px 10px;
  }
  .home-encounters {
    padding: 52px 0 70px;
  }
  .home h2 {
    font-size: 2.1rem;
  }
  .home-section-heading {
    margin-bottom: 26px;
  }
  .home-link {
    font-size: 0.78rem;
  }
  .home-event {
    display: flex;
    flex-direction: column;
  }
  .home-event-art {
    min-height: 210px;
  }
  .home-event-art:after {
    background: linear-gradient(0deg, #182840, transparent 65%);
  }
  .home-event-copy {
    padding: 4px 26px 30px;
  }
  .home-event h3 {
    font-size: 3.2rem;
  }
  .home-event-name {
    font-size: 0.88rem;
    margin-bottom: 16px;
  }
  .home-event-date {
    font-size: 0.78rem;
  }
  .home-event-detail {
    font-size: 0.72rem;
    margin-bottom: 22px;
  }
  .home-experiences {
    padding: 48px 0 52px;
  }
  .experience-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .experience-tabs {
    margin-bottom: 24px;
    gap: 0;
  }
  .experience-tabs button {
    font-size: 0.72rem;
    padding: 15px 5px;
  }
  .experience-copy h3 {
    font-size: 2.6rem;
    margin: 20px 0 16px;
  }
  .experience-copy [role="tabpanel"] > p {
    font-size: 0.88rem;
    line-height: 1.75;
    margin-bottom: 16px;
  }
  .experience-number {
    font-size: 0.6rem;
  }
  .experience-stage {
    min-height: 550px;
    max-width: 380px;
    width: 100%;
    margin: auto;
  }
  .experience-phone {
    height: 500px;
    width: 232px;
  }
  .experience-caption {
    left: 3px;
  }
  .experience-stage .motion-control {
    bottom: 5px;
  }
  .home .download-section {
    padding: 54px 0;
  }
  .home .download-heading {
    gap: 8px;
    align-items: start;
  }
  .home .download-heading img {
    width: 64px;
    height: 64px;
  }
  .home .download-heading h2 {
    font-size: 2rem;
  }
  .home .download-heading p {
    font-size: 0.85rem;
  }
  .home .download-heading .product-context {
    font-size: 0.57rem;
  }
  .home .download-platform {
    padding: 24px;
  }
  .home .download-privacy {
    font-size: 0.7rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
  .experience-phone {
    transform: none;
  }
}

.home .hero-lead {
  color: #f1f5fb;
}
.home .hero-description {
  color: #ccd6e4;
}
.home .experience-tabs button {
  box-shadow: none;
  border-radius: 0;
  transform: none;
  background: transparent;
}
.home .experience-tabs [aria-selected="true"] {
  background: transparent;
  color: var(--red);
}
@media (min-width: 901px) {
  .hero-world {
    left: 22%;
    right: -18%;
  }
  .home-hero:before {
    background:
      linear-gradient(90deg, #091120 0%, #091120eb 22%, #09112080 43%, #09112000 65%),
      linear-gradient(0deg, #091120c9, transparent 30%);
  }
}

/* A single cinematic viewer keeps the homepage short while exposing more play. */
button.home-play {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.experience-video-actions {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.experience-video-actions .home-link {
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  min-height: 44px;
}
.experience-video-actions .motion-control {
  position: static;
  min-height: 44px;
}
.walker-cinema {
  width: min(1040px, calc(100% - 40px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid #62718b;
  border-radius: 16px;
  background: #101c30;
  color: #fff;
  box-shadow: 0 24px 100px #0008;
  overflow: auto;
}
.walker-cinema::backdrop {
  background: #050d1ce8;
  backdrop-filter: blur(8px);
}
.cinema-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 26px 30px 22px;
}
.cinema-header .home-eyebrow {
  color: #a7c9ef;
  font-size: 0.65rem;
  margin: 0 0 8px;
}
.cinema-header h2 {
  font-family: WalkerDisplay, var(--body);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin: 0;
  letter-spacing: -0.035em;
}
.cinema-close {
  flex-shrink: 0;
  min-width: 80px;
  min-height: 44px;
  border: 1px solid #8191ab;
  border-radius: 30px;
  background: transparent;
  color: white;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.cinema-close span {
  margin-left: 8px;
  font-size: 1.2rem;
}
.cinema-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.cinema-screen {
  background: #040914;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.cinema-screen video {
  display: block;
  width: 100%;
  height: min(65dvh, 650px);
  object-fit: contain;
}
.cinema-discover {
  padding: 18px 28px 24px;
}
.cinema-intro {
  margin: 0 0 16px;
  color: #d5e0f0;
  line-height: 1.5;
  font-size: 0.9rem;
}
.cinema-choices {
  display: grid;
  gap: 8px;
}
.cinema-choice {
  width: 100%;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 12px 7px 7px;
  border: 1px solid #4c607c;
  background: #1a2a43;
  color: white;
  text-align: left;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
  transition:
    background 0.16s,
    border-color 0.16s;
}
.cinema-choice:hover {
  background: #283b59;
  border-color: #91b7de;
}
.cinema-choice[aria-pressed="true"] {
  background: #304c6e;
  border-color: #b6ddff;
  box-shadow: inset 3px 0 #a9d8ff;
}
.cinema-choice img {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 6px;
  object-fit: cover;
}
.cinema-choice strong {
  display: block;
  font-size: 0.93rem;
}
.cinema-choice small {
  display: block;
  color: #c3d2e6;
  margin-top: 5px;
  font-size: 0.71rem;
  line-height: 1.4;
}
.cinema-choice-play {
  margin-left: auto;
  font-size: 1.3rem;
  color: #c4e6ff;
}
.cinema-calendar {
  margin: 20px 0 0;
  font-size: 0.78rem;
  color: #c3d2e6;
  line-height: 1.6;
}
.cinema-calendar a {
  color: white;
  text-underline-offset: 3px;
}
.walker-cinema :focus-visible {
  outline: 3px solid #b9e5ff;
  outline-offset: 3px;
}
@media (max-width: 650px) {
  .walker-cinema {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 12px;
  }
  .cinema-header {
    padding: 16px;
    gap: 12px;
  }
  .cinema-header h2 {
    font-size: 1.45rem;
  }
  .cinema-close {
    min-width: 64px;
    font-size: 0.7rem;
  }
  .cinema-close span {
    margin-left: 3px;
  }
  .cinema-layout {
    grid-template-columns: 1fr;
  }
  .cinema-screen {
    min-height: 0;
  }
  .cinema-screen video {
    height: 48dvh;
  }
  .cinema-discover {
    padding: 16px;
  }
  .cinema-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .cinema-choice {
    gap: 8px;
    padding: 8px;
    min-height: 66px;
  }
  .cinema-choice img {
    width: 36px;
    height: 44px;
  }
  .cinema-choice strong {
    font-size: 0.76rem;
  }
  .cinema-choice small {
    display: none;
  }
  .cinema-choice-play {
    font-size: 1rem;
  }
  .cinema-intro {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }
  .cinema-calendar {
    margin-top: 14px;
  }
  .experience-video-actions {
    left: 0;
    justify-content: center;
    right: 0;
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-choice {
    transition: none;
  }
}
.cinema-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #101c30;
}
.cinema-screen {
  position: relative;
}
.cinema-error {
  position: absolute;
  inset: auto 16px 32px;
  padding: 12px;
  background: #101c30ee;
  border: 1px solid #8191ab;
  border-radius: 8px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.5;
}
.walker-cinema {
  --cinema-accent: #b6ddff;
}
.walker-cinema[data-scene="zapdos"] {
  --cinema-accent: #ffe39a;
}
.walker-cinema[data-scene="moltres"] {
  --cinema-accent: #ffc191;
}
.walker-cinema[data-scene="suicune"] {
  --cinema-accent: #93e8da;
}
.walker-cinema[data-scene="deoxys"] {
  --cinema-accent: #d3b9ff;
}
.walker-cinema[data-scene="arceus"] {
  --cinema-accent: #ffe6a8;
}
.cinema-choice[aria-pressed="true"] {
  border-color: var(--cinema-accent);
  box-shadow: inset 3px 0 var(--cinema-accent);
}
.home:has(.walker-cinema[open]) {
  overflow: hidden;
}
@media (min-width: 901px) {
  .hero-world {
    left: 0;
    right: -20%;
  }
}
.home-section-heading .home-eyebrow {
  color: #bd2b24;
}
@media (max-width: 600px) {
  .home-hero {
    min-height: max(700px, min(820px, calc(100svh - 126px)));
  }
  .home h1 {
    font-size: clamp(2.4rem, 10.5vw, 4rem);
  }
  .hero-world {
    mask-image: linear-gradient(180deg, transparent, #000 24%, #000 90%, transparent);
  }
  .home .hero-actions .button {
    padding: 12px 14px;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .hero-actions .home-play {
    white-space: nowrap;
  }
}
.experience-stage[data-mode="incursiones"] {
  padding-bottom: 64px;
}
.home-play,
.motion-control {
  min-height: 44px;
}