/* =========================
   ROOT VARIABLES
========================= */

:root {
  /* Night sky: deep midnight fading to a violet horizon */
  --bg:
    radial-gradient(ellipse at 50% 100%, rgba(190, 110, 255, 0.35), transparent 55%),
    linear-gradient(180deg, #040616 0%, #0e0a2e 40%, #261052 75%, #4a2170 100%);

  --glass: rgba(235, 215, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-base: #c98a9e; /* rose-gold plinth */

  --purple-1: #c77dff;
  --purple-2: #b05cf5;
  --purple-3: #9333ea;
  --purple-4: #7523c9;
  --purple-dark: #3f1670;

  --green-1: #3aa655;
  --green-2: #1f7a36;
  --green-light: #2ecc71;

  --glow-strong: rgba(214, 140, 255, 0.95);
  --glow-soft: rgba(190, 110, 255, 0.55);
  --glow-faint: rgba(190, 110, 255, 0.28);

  --blush: #ffd1e6;
}

/* =========================
   BODY
========================= */

body {
  height: 100vh;
  height: 100dvh;
  position: relative; /* centers the scene in the visible viewport on mobile */
  width: 100%;
  background: var(--bg);
  overflow: hidden;
  margin: 0;
}

/* =========================
   NIGHT SKY
========================= */

.sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: transparent;
}

.stars.s1 {
  width: 1px;
  height: 1px;
  box-shadow:
    41vw 19vh #ffe4f1,
    83vw 6vh #fff,
    68vw 12vh #f3e8ff,
    74vw 7vh #fff,
    4vw 11vh #ffe4f1,
    53vw 8vh #fff,
    11vw 70vh #ffe4f1,
    7vw 72vh #fff,
    28vw 80vh #fff,
    73vw 74vh #ffe4f1,
    6vw 28vh #fff,
    71vw 17vh #f3e8ff,
    53vw 18vh #fff,
    73vw 39vh #fff,
    13vw 74vh #fff,
    47vw 12vh #fff,
    72vw 7vh #fff,
    63vw 87vh #ffe4f1,
    99vw 40vh #ffe4f1,
    74vw 58vh #f3e8ff,
    38vw 31vh #fff,
    89vw 99vh #fff,
    10vw 73vh #f3e8ff,
    67vw 63vh #f3e8ff,
    93vw 57vh #f3e8ff,
    77vw 9vh #fff,
    65vw 53vh #fff,
    96vw 43vh #fff,
    62vw 53vh #fff,
    85vw 9vh #f3e8ff,
    43vw 88vh #f3e8ff,
    76vw 63vh #ffe4f1,
    8vw 11vh #f3e8ff,
    60vw 89vh #fff,
    7vw 93vh #f3e8ff,
    82vw 73vh #ffe4f1,
    36vw 91vh #ffe4f1,
    85vw 44vh #fff,
    59vw 45vh #fff,
    78vw 14vh #ffe4f1,
    7vw 27vh #f3e8ff,
    16vw 94vh #fff,
    50vw 50vh #ffe4f1,
    10vw 21vh #ffe4f1,
    51vw 70vh #f3e8ff,
    17vw 55vh #f3e8ff,
    90vw 53vh #f3e8ff,
    87vw 48vh #fff,
    19vw 10vh #fff,
    19vw 29vh #fff,
    1vw 62vh #fff,
    33vw 36vh #fff,
    18vw 53vh #f3e8ff,
    78vw 72vh #f3e8ff,
    16vw 88vh #fff,
    58vw 99vh #ffe4f1,
    50vw 51vh #ffe4f1,
    13vw 61vh #ffe4f1,
    7vw 24vh #fff,
    26vw 56vh #fff,
    14vw 43vh #fff,
    13vw 0vh #fff,
    68vw 12vh #f3e8ff,
    78vw 3vh #fff,
    26vw 78vh #ffe4f1,
    19vw 81vh #f3e8ff,
    44vw 77vh #f3e8ff,
    60vw 15vh #fff,
    62vw 59vh #ffe4f1,
    61vw 39vh #fff;
  animation: twinkleSky 6s ease-in-out infinite;
}

.stars.s2 {
  width: 2px;
  height: 2px;
  box-shadow:
    18vw 13vh #f3e8ff,
    94vw 33vh #ffe4f1,
    88vw 20vh #fff,
    26vw 67vh #f3e8ff,
    18vw 88vh #fff,
    97vw 67vh #f3e8ff,
    82vw 11vh #f3e8ff,
    66vw 46vh #fff,
    45vw 98vh #fff,
    68vw 69vh #f3e8ff,
    81vw 28vh #fff,
    30vw 51vh #fff,
    25vw 66vh #ffe4f1,
    45vw 93vh #fff,
    3vw 35vh #ffe4f1,
    33vw 24vh #f3e8ff,
    57vw 92vh #f3e8ff,
    46vw 10vh #fff,
    13vw 29vh #ffe4f1,
    25vw 43vh #fff,
    61vw 79vh #fff,
    61vw 83vh #f3e8ff,
    82vw 10vh #fff,
    49vw 91vh #fff,
    61vw 22vh #ffe4f1,
    81vw 42vh #fff,
    92vw 50vh #ffe4f1,
    51vw 95vh #fff,
    92vw 20vh #fff,
    16vw 3vh #fff,
    75vw 59vh #fff,
    78vw 76vh #ffe4f1,
    84vw 44vh #fff,
    70vw 70vh #fff,
    2vw 1vh #fff;
  animation: twinkleSky 4.5s 1.5s ease-in-out infinite;
}

.stars.s3 {
  width: 3px;
  height: 3px;
  filter: drop-shadow(0 0 3px rgba(255, 230, 250, 0.9));
  box-shadow:
    67vw 95vh #fff,
    55vw 24vh #fff,
    3vw 32vh #fff,
    37vw 64vh #fff,
    97vw 75vh #f3e8ff,
    33vw 69vh #ffe4f1,
    16vw 7vh #f3e8ff,
    58vw 84vh #ffe4f1,
    64vw 16vh #fff,
    67vw 65vh #fff,
    56vw 99vh #fff,
    77vw 0vh #fff,
    22vw 18vh #ffe4f1,
    79vw 92vh #fff;
  animation: twinkleSky 3.5s 0.8s ease-in-out infinite;
}

/* Moon */

.moon {
  position: absolute;
  top: 9vh;
  right: 10vw;
  width: clamp(70px, 11vw, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, #fffdf5 0%, #f5eaff 45%, #d9c4f2 100%);
  box-shadow:
    0 0 30px 8px rgba(255, 240, 255, 0.55),
    0 0 90px 30px rgba(190, 130, 255, 0.35),
    0 0 180px 70px rgba(150, 90, 220, 0.2);
}

.moon:before,
.moon:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(150, 120, 190, 0.28);
}

.moon:before {
  width: 22%;
  height: 22%;
  top: 22%;
  left: 55%;
}

.moon:after {
  width: 14%;
  height: 14%;
  top: 58%;
  left: 28%;
  box-shadow: 26px -10px 0 -2px rgba(150, 120, 190, 0.22);
}

/* =========================
   CONTAINER
========================= */

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* =========================
   GLASS
========================= */

.glass {
  height: 350px;
  width: 200px;
  background: var(--glass);
  border-radius: 300px 300px 0 0;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-bottom: 0;
  box-sizing: border-box;
  position: relative;
  box-shadow:
    0 0 90px rgba(200, 130, 255, 0.35),
    inset 0 0 40px rgba(255, 255, 255, 0.1);
}

.glass:before {
  content: "";
  height: 10px;
  width: 10px;
  border: 10px solid var(--glass);
  border-radius: 50%;
  position: absolute;
  left: 87px;
  top: -25px;
}

.glass:after {
  content: "";
  position: absolute;
  height: 15px;
  width: 250px;
  background: var(--glass-base);
  top: 100%;
  left: -13%;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 40px rgba(255, 150, 200, 0.45);
}

/* Shine */

.shine {
  width: 12px;
  height: 140px;
  background: white;
  opacity: 0.2;
  position: absolute;
  left: 85%;
  top: 80px;
  border-radius: 100px;
  z-index: 10;
}

.shine:before {
  content: "";
  width: 12px;
  height: 20px;
  position: absolute;
  background: white;
  top: 160px;
  border-radius: 100px;
}

/* =========================
   PETALS
========================= */

.petals > div {
  position: absolute;
  width: 45px;
  height: 80px;
  top: 55px;
  transition: all 0.5s ease-out;
}

/* Center */
.petals > div:nth-child(1) {
  border-radius: 15px;
  box-shadow: 0 0 30px var(--glow-strong);
  left: 80px;
  top: 60px;
  background: var(--purple-1);
}

/* Even petals */
.petals > div:nth-child(2),
.petals > div:nth-child(4),
.petals > div:nth-child(6) {
  left: 60px;
  border-radius: 0 30px 0 30px;
  transform-origin: bottom right;
}

/* Odd petals */
.petals > div:nth-child(3),
.petals > div:nth-child(5),
.petals > div:nth-child(7) {
  left: 100px;
  border-radius: 30px 0 30px 0;
  transform-origin: bottom left;
}

/* Individual petals */

.petals > div:nth-child(2) {
  z-index: 5;
  background: var(--purple-2);
  top: 75px;
  height: 70px;
  box-shadow: 0 0 50px var(--glow-soft);
  animation: bloom2 3s ease-in-out forwards;
}

.petals > div:nth-child(3) {
  z-index: 4;
  background: var(--purple-2);
  top: 75px;
  height: 70px;
  box-shadow: 0 0 50px var(--glow-soft);
  animation: bloom3 3s ease-in-out forwards, glowing 2.5s ease-in-out infinite;
}

.petals > div:nth-child(4) {
  z-index: 3;
  background: var(--purple-3);
  top: 70px;
  height: 75px;
  box-shadow: 0 0 50px var(--glow-soft);
  animation: bloom4 3s ease-in-out forwards, glowing 2.5s ease-in-out infinite;
}

.petals > div:nth-child(5) {
  z-index: 2;
  background: var(--purple-3);
  top: 70px;
  height: 75px;
  box-shadow: 0 0 50px var(--glow-soft);
  animation: bloom5 3s ease-in-out forwards, glowing 2.5s ease-in-out infinite;
}

.petals > div:nth-child(6) {
  z-index: 1;
  background: var(--purple-4);
  top: 65px;
  height: 70px;
  box-shadow: 0 0 50px var(--glow-faint);
  animation: bloom6 3s ease-in-out forwards, glowing 2.5s ease-in-out infinite;
}

.petals > div:nth-child(7) {
  z-index: 0;
  background: var(--purple-4);
  top: 65px;
  height: 70px;
  box-shadow: 0 0 50px var(--glow-faint);
  animation: bloom7 3s ease-in-out forwards, glowing 2.5s ease-in-out infinite;
}

/* =========================
   DEAD PETALS
========================= */

.deadPetals > div {
  position: absolute;
  background: var(--purple-1);
  width: 20px;
  height: 15px;
  top: 120px;
  border-radius: 0 30px 0 30px;
  box-shadow: 0 0 30px var(--glow-soft);
  transform: rotate(-30deg);
}

.deadPetals > div:nth-child(1) { left: 65px; animation: falling 20s 4s infinite; }
.deadPetals > div:nth-child(2) { left: 85px; animation: falling 20s 8s infinite; }
.deadPetals > div:nth-child(3) { left: 100px; animation: falling 20s 12s infinite; }
.deadPetals > div:nth-child(4) { left: 75px; animation: falling 20s 16s infinite; }
.deadPetals > div:nth-child(5) { left: 110px; animation: falling 20s 20s infinite; }

/* =========================
   LEAVES
========================= */

.leaves > div:nth-last-child(1) {
  position: absolute;
  width: 55px;
  height: 30px;
  background: var(--green-1);
  top: 120px;
  left: 75px;
  border-radius: 100px;
}

.leaves > div:nth-child(1) {
  position: absolute;
  width: 6px;
  height: 255px;
  background: var(--green-2);
  top: 95px;
  left: 100px;
  border-radius: 0 0 100px 100px;
}

.leaves > div:nth-child(2) {
  position: absolute;
  width: 30px;
  height: 50px;
  border-radius: 5px 40px 20px 40px;
  background: var(--green-2);
  transform-origin: bottom;
  transform: rotate(-30deg);
  top: 180px;
  left: 80px;
  box-shadow: inset 5px 5px var(--green-light);
}

.leaves > div:nth-child(3) {
  position: absolute;
  width: 30px;
  height: 50px;
  border-radius: 40px 5px 40px 20px;
  background: var(--green-2);
  transform-origin: bottom;
  transform: rotate(30deg);
  top: 150px;
  left: 95px;
  box-shadow: inset -5px 5px var(--green-light);
}

/* =========================
   THORNS
========================= */

.thorns > div {
  position: absolute;
  width: 0;
  height: 0;
}

.thorns > div:nth-child(odd) {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  left: 105px;
}

.thorns > div:nth-child(even) {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid var(--green-2);
  left: 95px;
}

.thorns > div:nth-child(1) { top: 200px; }
.thorns > div:nth-child(2) { top: 170px; }
.thorns > div:nth-child(4) { top: 230px; }

/* =========================
   ROMANTIC EXTRAS
========================= */

/* Floating hearts */

.hearts {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hearts span {
  position: absolute;
  bottom: -40px;
  color: var(--blush);
  opacity: 0;
  text-shadow: 0 0 12px rgba(255, 150, 210, 0.9);
  animation: floatUp 14s linear infinite;
}

.hearts span:nth-child(1) { left: 8%;  font-size: 18px; animation-duration: 15s; animation-delay: 0s; }
.hearts span:nth-child(2) { left: 22%; font-size: 26px; animation-duration: 18s; animation-delay: 3s; }
.hearts span:nth-child(3) { left: 36%; font-size: 14px; animation-duration: 13s; animation-delay: 7s; }
.hearts span:nth-child(4) { left: 52%; font-size: 22px; animation-duration: 17s; animation-delay: 1s; }
.hearts span:nth-child(5) { left: 66%; font-size: 16px; animation-duration: 14s; animation-delay: 5s; }
.hearts span:nth-child(6) { left: 78%; font-size: 28px; animation-duration: 19s; animation-delay: 9s; }
.hearts span:nth-child(7) { left: 90%; font-size: 15px; animation-duration: 16s; animation-delay: 2s; }
.hearts span:nth-child(8) { left: 44%; font-size: 20px; animation-duration: 20s; animation-delay: 11s; }

/* Twinkling sparkles */

.sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.sparkles i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 210, 240, 0.9);
  opacity: 0;
  animation: twinkle 4s ease-in-out infinite;
}

.sparkles i:nth-child(1)  { left: 12%; top: 18%; animation-delay: 0s; }
.sparkles i:nth-child(2)  { left: 28%; top: 62%; animation-delay: 1.2s; }
.sparkles i:nth-child(3)  { left: 40%; top: 12%; animation-delay: 2.4s; }
.sparkles i:nth-child(4)  { left: 58%; top: 80%; animation-delay: 0.6s; }
.sparkles i:nth-child(5)  { left: 70%; top: 22%; animation-delay: 3s; }
.sparkles i:nth-child(6)  { left: 84%; top: 55%; animation-delay: 1.8s; }
.sparkles i:nth-child(7)  { left: 92%; top: 14%; animation-delay: 2.8s; }
.sparkles i:nth-child(8)  { left: 6%;  top: 74%; animation-delay: 0.3s; }
.sparkles i:nth-child(9)  { left: 20%; top: 38%; animation-delay: 3.4s; }
.sparkles i:nth-child(10) { left: 76%; top: 72%; animation-delay: 2s; }

/* Caption: 好きです melts into "I like you!" two seconds after it appears */

.caption {
  position: absolute;
  left: 50%;
  top: calc(50% + 215px); /* sits just under the dome's base, centered on it */
  transform: translateX(-50%);
  margin: 0;
  display: grid;
  place-items: center;
  white-space: nowrap;
  color: var(--blush);
  text-shadow: 0 0 18px rgba(255, 150, 210, 0.8);
}

.caption span {
  grid-area: 1 / 1;
  opacity: 0;
}

.caption .jp {
  font-family: "Klee One", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: 0.12em;
  /* appears once the rose has bloomed (3s), holds ~2s, then dissolves at 5s */
  animation:
    textIn 0.6s 3s ease-out both,
    jpOut 0.9s 5s ease-in forwards;
}

.caption .en {
  font-family: "Parisienne", "Brush Script MT", cursive;
  font-size: 2.5rem;
  letter-spacing: 0.04em;
  animation: enIn 1.4s 5.3s ease-out both;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes bloom2 {
  50% {
    transform: rotate(-90deg);
    top: 200px;
    left: 100px;
  }
  100% {
    transform: rotate(-60deg);
    top: 252px;
    left: 50px;
    background: var(--purple-dark);
    box-shadow: none;
  }
}

@keyframes bloom3 { 100% { transform: rotate(28deg); } }
@keyframes bloom4 { 100% { transform: rotate(-24deg); } }
@keyframes bloom5 { 100% { transform: rotate(20deg); } }
@keyframes bloom6 { 100% { transform: rotate(-5deg); } }
@keyframes bloom7 { 100% { transform: rotate(5deg); } }

@keyframes glowing {
  50% {
    box-shadow: 0 0 60px var(--glow-strong);
  }
}

@keyframes falling {
  20% {
    top: 335px;
    background: var(--purple-dark);
    box-shadow: none;
  }
  100% {
    top: 335px;
    opacity: 0;
  }
}

@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0) rotate(-8deg); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translateY(-55vh) translateX(20px) rotate(8deg); }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-115vh) translateX(-15px) rotate(-8deg); opacity: 0; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50%      { opacity: 0.9; transform: scale(1.2); }
}

@keyframes twinkleSky {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@keyframes textIn {
  from { opacity: 0; filter: blur(8px); transform: translateY(6px); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}

@keyframes jpOut {
  from { opacity: 1; filter: blur(0);    letter-spacing: 0.12em; transform: none; }
  to   { opacity: 0; filter: blur(10px); letter-spacing: 0.4em;  transform: translateY(-8px) scale(1.08); }
}

@keyframes enIn {
  0%   { opacity: 0; filter: blur(10px); transform: translateY(10px) scale(0.9);
         text-shadow: 0 0 40px rgba(255, 150, 210, 1); }
  60%  { opacity: 1; filter: blur(0);    transform: none;
         text-shadow: 0 0 34px rgba(255, 150, 210, 1); }
  100% { opacity: 1; filter: blur(0);    transform: none;
         text-shadow: 0 0 18px rgba(255, 150, 210, 0.8); }
}

/* =========================
   ACCESSIBILITY
========================= */

@media (prefers-reduced-motion: reduce) {
  .hearts,
  .sparkles {
    display: none;
  }

  .stars {
    animation: none;
  }

  /* No blur or movement, just a simple crossfade at the same timing */
  .caption .jp {
    animation:
      fadeOnly 0.6s 3s ease-out both,
      fadeOnlyOut 0.6s 5s ease-in forwards;
  }

  .caption .en {
    animation: fadeOnly 0.6s 5.3s ease-out both;
  }
}

@keyframes fadeOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOnlyOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}