@charset "UTF-8";

/* A small, self-contained spring window: one tree, two people, falling petals. */
.sakura-section { padding-top: 108px; padding-bottom: 25px; }
.sakura-layout { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 58px; }
.sakura-copy .section-english { font-size: 31px; }
.sakura-copy h2 { margin: 0 0 22px; color: #7c5a8c; font-size: 37px; font-weight: 550; line-height: 1.65; letter-spacing: -1px; }
.sakura-copy > p:not(.section-english) { margin: 0; color: #806b8e; font-size: 16px; line-height: 2.1; }
.sakura-note { display: inline-block; margin-top: 27px; padding-top: 16px; border-top: 1px solid #b9a2c62b; color: #9b7ca9; font-family: var(--serif); font-size: 11px; font-style: italic; letter-spacing: 1.3px; }
.sakura-visual { position: relative; min-width: 0; aspect-ratio: 1.36; margin: 0; overflow: hidden; border: 1px solid #ffffffe8; border-radius: 34px; background: linear-gradient(155deg, #fffafd 0%, #f4eafb 47%, #e9f0fb 100%); box-shadow: var(--shadow), inset 0 1px 0 #fff; isolation: isolate; }
.sakura-visual:before { content: ""; position: absolute; z-index: 0; width: 62%; aspect-ratio: 1; top: -23%; right: -16%; border-radius: 50%; background: radial-gradient(circle, #f6c9dcb8, transparent 69%); filter: blur(20px); pointer-events: none; }
.sakura-visual:after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, #ffffff1f 40%, #f3e7f51c 68%, #ffffff42); }
#sakura-canvas { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; cursor: grab; touch-action: pan-y; transition: opacity 1.2s ease; }
.sakura-ready #sakura-canvas { opacity: 1; }
#sakura-canvas:active { cursor: grabbing; }
.sakura-wind { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.sakura-wind i { position: absolute; left: -42%; width: 62%; height: 18%; border-top: 2px solid #b892cba8; border-radius: 50%; filter: blur(.55px) drop-shadow(0 0 5px #ffffffb8); opacity: 0; transform: rotate(-7deg); animation: sakura-wind 13s linear infinite; }
.sakura-wind i:nth-child(1) { top: 28%; animation-delay: -2s; }
.sakura-wind i:nth-child(2) { top: 49%; width: 42%; border-color: #a884c08a; animation-duration: 17s; animation-delay: -9s; }
.sakura-wind i:nth-child(3) { top: 70%; width: 51%; border-color: #c29fcea1; animation-duration: 15s; animation-delay: -6s; }
@keyframes sakura-wind {
  0% { transform: translate3d(-18%, 12px, 0) rotate(-9deg); opacity: 0; }
  16% { opacity: .6; }
  55% { opacity: .36; }
  100% { transform: translate3d(174%, -24px, 0) rotate(-3deg); opacity: 0; }
}
.sakura-visual figcaption { position: absolute; z-index: 3; left: 0; right: 0; bottom: 17px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #8c748f; font-size: 11px; line-height: 1.7; letter-spacing: .4px; pointer-events: none; }
.sakura-visual figcaption .scene-status-dot { background: #d593b0; box-shadow: 0 0 10px #d9a0ba70; }
.sakura-fallback { position: absolute; z-index: 2; inset: 0; display: none; place-items: center; padding: 30px; text-align: center; color: #91739f; font-size: 14px; line-height: 2; }
.sakura-fallback-tree { position: absolute; left: 50%; bottom: 24%; width: 128px; height: 150px; transform: translateX(-50%); border-radius: 52% 48% 47% 53%; background: radial-gradient(circle at 38% 26%, #fff0f7, #f2b9d2 43%, #d99cbe 72%, transparent 74%); filter: blur(.2px); opacity: .82; }
.sakura-fallback-tree:after { content: ""; position: absolute; left: 55px; bottom: -57px; width: 9px; height: 62px; border-radius: 8px; background: #9a7281; }
.sakura-fallback-couple { position: absolute; left: 50%; bottom: 24%; width: 58px; height: 35px; transform: translateX(-7%); border-radius: 50% 50% 15% 15%; background: #b9c7e0; box-shadow: 19px 0 0 -4px #e2b8c9; opacity: .82; }
.sakura-fallback p { position: relative; z-index: 1; margin: 235px 0 0; }
.sakura-unavailable #sakura-canvas { display: none; }
.sakura-unavailable .sakura-fallback { display: grid; }

@media (max-width: 1200px) {
  .sakura-layout { gap: 38px; }
  .sakura-copy h2 { font-size: 34px; }
  .sakura-copy .section-english { font-size: 28px; }
}
@media (max-width: 960px) {
  .sakura-section { padding-top: 86px; }
  .sakura-layout { grid-template-columns: 1fr; gap: 27px; }
  .sakura-copy h2 { font-size: 33px; margin-bottom: 17px; }
  .sakura-copy > p:not(.section-english) { max-width: 620px; }
  .sakura-visual { width: 100%; max-width: 760px; aspect-ratio: 1.55; margin-inline: auto; border-radius: 29px; }
}
@media (max-width: 700px) {
  .sakura-section { padding-top: 68px; padding-bottom: 12px; }
  .sakura-layout { gap: 24px; }
  .sakura-copy .section-english { font-size: 28px; }
  .sakura-copy h2 { font-size: 29px; line-height: 1.65; letter-spacing: -.7px; }
  .sakura-copy > p:not(.section-english) { font-size: 15px; line-height: 2; }
  .sakura-note { margin-top: 20px; padding-top: 13px; font-size: 10px; }
  .sakura-visual { aspect-ratio: 1.08; border-radius: 25px; }
  .sakura-visual figcaption { bottom: 13px; font-size: 10px; }
  .sakura-fallback p { margin-top: 185px; font-size: 13px; }
  .sakura-fallback-tree { width: 100px; height: 120px; }
  .sakura-fallback-tree:after { left: 44px; bottom: -45px; height: 50px; }
}
@media (max-width: 370px) {
  .sakura-copy h2 { font-size: 26px; }
  .sakura-copy > p:not(.section-english) { font-size: 14px; }
  .sakura-visual { aspect-ratio: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #sakura-canvas { transition: none; }
  .sakura-wind { display: none; }
}