:root {
  color-scheme: light;
  --paper: #fffaf5;
  --ink: #93483d;
  --quiet-ink: #795c53;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
.first-view {
  position: relative;
  isolation: isolate;
  min-height: 40rem;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse at 64% 48%, #fffefb 0, var(--paper) 70%);
}
.brand {
  position: absolute;
  z-index: 2;
  left: 8.5%;
  top: 43%;
  transform: translateY(-50%);
}
.brand-caption {
  margin: 0 0 1.7rem .35em;
  color: var(--quiet-ink);
  font-size: clamp(.875rem, 1.1vw, 1.125rem);
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1.8;
}
h1 { margin: 0; font-size: clamp(3.85rem, 6.9vw, 7.7rem); line-height: 1.4; font-weight: 600; }
h1 > span {
  display: flex;
  gap: .075em;
}
h1 > span > span {
  display: inline-block;
  animation: name-arrives 4.2s cubic-bezier(.2,.65,.3,1) both;
  animation-delay: calc(.6s + var(--letter, 0) * .52s);
}
h1 > span > span:nth-child(2) { --letter: 1; }
h1 > span > span:nth-child(3) { --letter: 2; }
h1 > span > span:nth-child(4) { --letter: 3; }
h1 > span > span:nth-child(5) { --letter: 4; }
.scene {
  position: absolute;
  width: min(86vw, 100rem);
  aspect-ratio: 16 / 9;
  left: 25%;
  top: 50%;
  transform: translateY(-43%);
  pointer-events: none;
}
.girl, .petals, .petal, .petal-drift, .petal img { position: absolute; inset: 0; width: 100%; height: 100%; }
.girl, .petal img { object-fit: contain; }
.petal {
  transform: translate(var(--offset-x), var(--offset-y));
  animation: petal-arrives 2.8s ease-out var(--delay) both;
}
.petal-drift { animation: petal-drift var(--duration) ease-in-out var(--phase) infinite alternate; }
.petal img {
  transform-origin: var(--origin);
  animation: petal-turn calc(var(--duration) * 1.15) ease-in-out infinite alternate;
  animation-delay: var(--phase);
}
.corner-companions {
  position: absolute;
  z-index: 1;
  left: calc(8.5% + clamp(3.85rem, 6.9vw, 7.7rem) * .75);
  bottom: .4rem;
  width: 282px;
  height: 162px;
  pointer-events: none;
  filter: saturate(.9) contrast(.96);
}
.companion { position: absolute; bottom: 0; aspect-ratio: 1; }
.companion--yuu { left: 0; width: 162px; z-index: 1; }
/* Haru's PNG has a few transparent pixels below the body; align the visible feet. */
.companion--haru { left: 162px; bottom: -4px; width: 120px; }
.companion img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Closed-mouth source files contain heads only. Keep the base/body fixed,
   and reveal just the eye area in the identical 1254 × 1254 coordinate frame. */
.companion-eyes { visibility: hidden; }
.companion--yuu .companion-eyes { clip-path: inset(46% 28% 43.5% 35%); }
.companion--haru .companion-eyes {
  clip-path: polygon(23.5% 32%, 75% 32%, 75% 55.5%, 60% 55.5%, 60% 54.8%, 44% 54.8%, 44% 55.5%, 23.5% 55.5%);
}
.companion.is-blinking .companion-eyes { visibility: visible; }
@keyframes name-arrives {
  from { opacity: 0; transform: translateY(.19em); }
  75% { opacity: 1; transform: translateY(.025em); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes petal-arrives { from { opacity: 0; } to { opacity: var(--opacity, .8); } }
@keyframes petal-drift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(var(--dx-mid), var(--dy-mid)); }
  100% { transform: translate(var(--dx), var(--dy)); }
}
@keyframes petal-turn {
  from { transform: rotate(var(--turn-start)) scale(var(--scale)); }
  to { transform: rotate(var(--turn-end)) scale(var(--scale)); }
}
@media (min-width: 1800px) {
  .brand { left: calc(50% - 46rem); }
  .scene { left: calc(50% - 28rem); }
  .corner-companions { left: calc(50% - 46rem + 7.7rem * .75); }
}
/* Keep the larger pair clear of the girl on narrower desktop screens. */
@media (min-width: 701px) and (max-width: 1100px) {
  .corner-companions { left: calc(8.5% + clamp(3.85rem, 6.9vw, 7.7rem) * .15); }
}
@media (max-width: 700px) {
  .first-view { min-height: 40rem; }
  .brand { top: 13%; left: 0; width: 100%; text-align: center; transform: none; }
  .brand-caption { font-size: .875rem; letter-spacing: .15em; margin: 0 0 1rem; }
  h1 { font-size: clamp(2.85rem, 12.2vw, 5.2rem); }
  h1 > span { justify-content: center; gap: .05em; }
  .scene { width: 155%; left: -27%; top: auto; bottom: 13%; transform: none; }
  .petal { animation-delay: var(--mobile-delay); }
  .petal[data-mobile="false"] { display: none; }
  .petal-drift { animation-name: petal-drift-mobile; }
  .corner-companions { display: none; }
}
@media (max-width: 700px) and (min-height: 900px) { .scene { bottom: 19%; } }
@keyframes petal-drift-mobile {
  from { transform: translate(0, 0); }
  50% { transform: translate(var(--mobile-dx-mid), var(--mobile-dy-mid)); }
  to { transform: translate(var(--mobile-dx), var(--mobile-dy)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  h1 > span > span { opacity: 1; transform: none; }
  .petal { opacity: var(--opacity, .8); }
  .petal img { transform: rotate(var(--angle)) scale(var(--scale)); }
  .companion.is-blinking .companion-eyes { visibility: hidden; }
}