/* One composed scene. Native scrolling advances the sunset over 500vh. */
.home {
  --home-ink: #fff7f0;
  --sans: "DM Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --sunset-travel: 500vh;
  --phone-height: clamp(260px, 48svh, 440px);
  --phone-width: calc(var(--phone-height) * 393 / 852);
  color: var(--home-ink);
  background: #c8b3c8 linear-gradient(#9aa0c4, #c8b3c8 42%, #efc6b4 85%, #f4d6c0) fixed;
  text-shadow: none;
}
.home::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(#20263e, #36344f 45%, #7e626e 85%, #504356); opacity: var(--night, 0); }
.home #sky { opacity: 0; transition: opacity 1.2s ease; }
.home.sky-ready #sky { opacity: 1; }
.home a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 5; padding: .5rem 1rem; background: #fff8ee; color: #2b2535; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.sky-story { height: calc(100svh + var(--sunset-travel)); }
.hero { position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate; display: flex; flex-direction: column; padding: 2.25rem 5vw 1.25rem; }
.hero__content { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: min(100%, 80rem); margin-inline: auto; padding-bottom: 1rem; }
.hero__words { position: relative; z-index: 2; width: 100%; text-align: center; }
.hero h1 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.35rem); font-weight: 400; line-height: 1.35; letter-spacing: .025em; }
.hero h1 > span { display: block; overflow-wrap: anywhere; }
.hero h1 > span + span { padding-inline-start: 1.4em; }
.hero__category { font-family: var(--sans); font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.8; letter-spacing: .035em; margin: .65rem 0 0; }
.hero__category, .home-footer .footer__row { font-weight: 500; }
.hero__download { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: .8rem; padding: .5rem 1rem; border: 1px solid #fff9; border-radius: 999px; font-family: var(--sans); font-size: .8125rem; font-weight: 500; line-height: 1.5; }
.hero__download:hover { background: #ffffff1a; }
.hero__mock { position: relative; z-index: 1; flex: none; width: calc(var(--phone-width) * 1.85); height: calc(var(--phone-height) * 1.1); margin: clamp(20px, 3svh, 36px) 0 0; }
.hero__mock::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 132%; aspect-ratio: 1; border: 1px solid #fff4; border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg) scaleY(.8); pointer-events: none; }
.device { --phone-scale: 1; position: absolute; width: calc(var(--phone-width) * var(--phone-scale)); aspect-ratio: 393 / 852; padding: clamp(2px, .3vw, 4px); border-radius: calc(var(--phone-width) * var(--phone-scale) * .15); background: #eee8e5; box-shadow: 0 24px 55px -24px #281d3d60, 0 0 0 1px #fff9; container-type: inline-size; color: #474047; text-shadow: none; }
.device--write { z-index: 3; left: 3%; top: 5%; transform: rotate(-6deg); }
.device--confirm { --phone-scale: .9; z-index: 2; right: 3%; top: 3%; transform: rotate(8deg); }
.hero__app-icon { position: absolute; z-index: 4; left: -3%; bottom: 8%; width: 64px; height: 64px; border-radius: 23%; transform: rotate(-8deg); }
.device__screen { height: 100%; position: relative; overflow: hidden; border-radius: calc(var(--phone-width) * var(--phone-scale) * .13); background: #f1e6e7; }
.device__season { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 40% 27.5% at 50% 28%, var(--glow), transparent 70%), linear-gradient(var(--c0), var(--c1) 28%, var(--c2) 65%, var(--c3)); }
.device__season[data-season="spring"] { --c0: #f9f1f0; --c1: #f1e6e7; --c2: #ebdde0; --c3: #e3d3d7; --glow: #fbf3ef; --lower: .20; --upper: .16; }
.device__season[data-season="summer"] { --c0: #f0f5ed; --c1: #e1e6dc; --c2: #d6dccf; --c3: #c9d1c1; --glow: #f1f5ee; --lower: .18; --upper: .18; opacity: var(--season-summer, 0); }
.device__season[data-season="autumn"] { --c0: #f4f1e9; --c1: #ece4d2; --c2: #e3d8be; --c3: #d6caa9; --glow: #f7f5ec; --lower: .28; --upper: .21; opacity: var(--season-autumn, 0); }
.device__season[data-season="winter"] { --c0: #f4f6f9; --c1: #e1e5ec; --c2: #d6dce6; --c3: #c8d0dc; --glow: #f6f8fa; --lower: .27; --upper: .21; opacity: var(--season-winter, 0); }
.device__shadow { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.device__shadow--lower { opacity: var(--lower); }
.device__shadow--upper { opacity: var(--upper); }
.device__island { position: absolute; top: 2.3%; left: 35%; width: 30%; height: 3.9%; background: #242224; border-radius: 20px; }
.device__status { position: absolute; top: 2.8%; left: 8%; right: 7%; display: flex; justify-content: space-between; font-family: var(--sans); font-size: 3cqw; line-height: 1.2; }
.device__back { position: absolute; top: 7.9%; left: 6.1%; height: 5.2%; display: flex; align-items: center; gap: 1cqw; font-size: 3.3cqw; color: #3e4451; }
.device__back svg { width: 5.1cqw; height: 5.1cqw; }
.device__message { position: absolute; top: 40%; left: 3%; right: 3%; transform: translateY(-50%); text-align: center; font-size: clamp(8px, 6cqw, 13px); font-weight: 400; line-height: 2; letter-spacing: .03em; color: #3e4451; }
.device__orb { position: absolute; top: 79%; left: 50%; width: 50.9%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle closest-side, #e5c88ad9 0, #e5c88a8b 29.7%, #e5c88a2b 63.6%, #e5c88a00 84.86%); }
.device__orb::before, .device__orb::after { content: ""; position: absolute; top: 50%; left: 50%; aspect-ratio: 1; border: 1px solid; border-radius: 50%; transform: translate(-50%, -50%); }
.device__orb::before { width: 30%; border-color: #e5c88ac3; }
.device__orb::after { width: 28%; border-color: #a89f8cb3; box-shadow: 0 3px 8px #3e445114; }
.device__instruction { position: absolute; top: 90.8%; left: 4%; right: 4%; margin: 0; font-size: 3.05cqw; line-height: 1.6667; color: #6a6e78; text-align: center; }
.device__bar { position: absolute; left: 33%; bottom: 1.6%; width: 34%; height: .55%; background: #817b7e; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


.device--confirm .device__status { color: white; }
.device--confirm .device__bar { background: #fff9; }
.device__confirm-sky { position: absolute; inset: 0; background: url("assets/confirmation-sky.svg") center / 100% 100% no-repeat; }
.device__confirmation { position: absolute; top: 23%; left: 5%; right: 5%; display: flex; flex-direction: column; align-items: center; }
.device__signature { width: 31.7%; height: auto; margin-bottom: 10.2cqw; filter: brightness(0) invert(1); }
.device__confirm-number { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 35.6cqw; line-height: 1; color: #f8ebc8f2; }
.device__confirm-caption { margin-top: 6.1cqw; font-family: var(--sans); font-size: 2.8cqw; line-height: 1; letter-spacing: .3em; color: #ffffffa6; }
.device__confirm-message { margin-top: 12.2cqw; font-size: 4.84cqw; line-height: 2.4; letter-spacing: .18em; color: #fffffff2; white-space: nowrap; }
.device__ok { position: absolute; left: 50%; bottom: 7.75%; width: 36.6%; height: 5.63%; display: grid; place-items: center; transform: translateX(-50%); border-radius: 999px; background: #ffffffef; color: #3e4451; font-family: var(--sans); font-size: 3.56cqw; letter-spacing: .12em; }
.home .home-footer { position: absolute; z-index: 3; left: 5vw; bottom: 1.25rem; margin: 0; padding: 0; border: 0; color: var(--home-ink); }
.home-footer .container { padding: 0; max-width: none; }
.home-footer .footer__row { flex-direction: column; align-items: flex-start; justify-content: flex-start; font-family: var(--sans); font-size: .875rem; line-height: 1.8; gap: 0; color: inherit; letter-spacing: 0; }
.home-footer .footer__row a:hover { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.home-footer .footer__copy { text-align: left; font-size: .75rem; line-height: 1.8; margin: .5rem 0 0; color: inherit; }
@media (max-width: 900px) and (min-height: 501px) {
  .home { --phone-height: min(42svh, 82vw, 400px); }
  .hero { padding: 1.5rem 6vw 1rem; }
  .hero h1 { font-size: clamp(1.45rem, 6.8vw, 2.2rem); line-height: 1.4; letter-spacing: .02em; }
  :lang(en) .hero h1 { font-size: clamp(1.35rem, 6.1vw, 2.1rem); line-height: 1.35; }
  .hero h1 > span + span { padding-inline-start: .8em; }
  .hero__category { font-size: .9375rem; margin-top: .8rem; letter-spacing: 0; }
  .hero__app-icon { width: 48px; height: 48px; }
  .home .home-footer { left: 6vw; bottom: 1rem; }
}
@media (max-width: 900px) and (min-height: 501px) and (max-height: 650px) {
  .home { --phone-height: 40svh; }
  .hero__content { justify-content: flex-start; padding-top: 1.25rem; }
  .hero h1 { font-size: 1.45rem; line-height: 1.35; }
  .hero__category { font-size: .8125rem; margin-top: .6rem; }
  .hero__mock { margin-top: 1rem; }
  .hero__app-icon { width: 36px; height: 36px; }
}
@media (max-width: 360px) and (min-height: 501px) {
  .home-footer .footer__row { font-size: .75rem; }
  .home-footer .footer__copy { font-size: .6875rem; }
}
@media (max-height: 500px), (min-aspect-ratio: 4/3) and (max-height: 650px), (min-aspect-ratio: 1/1) and (max-width: 900px) {
  .home { --phone-height: 52svh; }
  .hero { padding-block: 1rem .75rem; }
  .hero__content { justify-content: center; padding-top: 0; padding-bottom: 0; }
  .hero h1 { font-size: clamp(1rem, 3.4vh, 1.75rem); line-height: 1.3; }
  :lang(en) .hero h1 { font-size: clamp(1rem, 3.4vh, 1.75rem); line-height: 1.3; }
  .hero h1 > span { display: inline; }
  .hero h1 > span + span { padding-inline-start: .4em; }
  .hero__category { font-size: .75rem; margin-top: .35rem; line-height: 1.6; }
  .hero__download { margin-top: .35rem; min-height: 36px; padding: .25rem .75rem; font-size: .75rem; }
  .hero__mock { margin-top: .5rem; }
  .hero__app-icon { width: 32px; height: 32px; }
  .home .home-footer { bottom: .75rem; }
  .home-footer .footer__row { font-size: .75rem; line-height: 1.7; }
  .home-footer .footer__copy { margin-top: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home #sky { transition: none; }
}