:root {
  --dew-white: #F8FFF6;
  --nanohana-yellow: #F7E84A;
  --pollen-gold: #F9B93E;
  --leaf-glass: #8FD15B;
  --deep-stem: #2F6F52;
  --aero-aqua: #8BE7F0;
  --sky-blue: #B8E9FF;
  --shadow-teal: #4AA99A;
  --glass: rgba(248, 255, 246, .42);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--deep-stem);
  font-family: "M PLUS Rounded 1c", Inter, system-ui, sans-serif;
  background: var(--dew-white);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.95), transparent 16rem),
    radial-gradient(circle at 12% 78%, rgba(143,209,91,.32), transparent 22rem),
    linear-gradient(160deg, var(--sky-blue) 0%, var(--aero-aqua) 24%, var(--dew-white) 54%, rgba(247,232,74,.48) 100%);
}

.spring-lab { width: 100%; }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.micro {
  font-family: "DotGothic16", "M PLUS Rounded 1c", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.scene h1,
.scene h2,
.specimen-label,
.panel-stamp { margin: 0; }

.scene h1,
.scene h2,
.specimen-label { font-family: "Mochiy Pop One", "M PLUS Rounded 1c", system-ui, sans-serif; }

.field-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  opacity: .7;
  transform: translate3d(-50%, -50%, 0);
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.95) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 56%, rgba(139,231,240,.18), rgba(248,255,246,.05) 58%, transparent 70%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 0 0 22px rgba(255,255,255,.8), 0 0 34px rgba(74,169,154,.22);
  backdrop-filter: blur(2px) saturate(1.35);
}

.ambient-bubbles span {
  position: fixed;
  z-index: -1;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.96), rgba(139,231,240,.22) 32%, rgba(255,255,255,.08) 64%, transparent 72%);
  border: 1px solid rgba(255,255,255,.48);
  filter: blur(.15px);
  animation: bubbleRise 18s ease-in-out infinite;
}

.ambient-bubbles span:nth-child(1) { width: 54px; height: 54px; left: 9%; top: 72%; animation-delay: -4s; }
.ambient-bubbles span:nth-child(2) { width: 28px; height: 28px; left: 86%; top: 22%; animation-delay: -8s; }
.ambient-bubbles span:nth-child(3) { width: 84px; height: 84px; left: 76%; top: 82%; animation-delay: -12s; }
.ambient-bubbles span:nth-child(4) { width: 38px; height: 38px; left: 38%; top: 16%; animation-delay: -2s; }
.ambient-bubbles span:nth-child(5) { width: 66px; height: 66px; left: 51%; top: 88%; animation-delay: -15s; }

.sky-gloss {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 56vh;
  background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0)), radial-gradient(ellipse at top, rgba(255,255,255,.9), transparent 72%);
  opacity: .85;
}

.scene-boot {
  background:
    radial-gradient(circle at 63% 31%, rgba(255,255,255,.92), transparent 7rem),
    linear-gradient(180deg, rgba(184,233,255,.95) 0%, rgba(248,255,246,.86) 62%, rgba(143,209,91,.36) 100%);
}

.boot-readout {
  position: absolute;
  right: 7vw;
  top: 9vh;
  padding: .7rem 1rem;
  font-size: .78rem;
  color: rgba(47,111,82,.74);
  border-top: 1px solid rgba(255,255,255,.8);
}

.wordmark-block {
  position: absolute;
  left: clamp(24px, 11vw, 150px);
  bottom: 17vh;
}

.specimen-label {
  color: var(--shadow-teal);
  font-size: clamp(.78rem, 1.1vw, 1rem);
  letter-spacing: .05em;
  margin-bottom: .65rem;
}

h1 {
  font-size: clamp(3.4rem, 9.2vw, 8.8rem);
  line-height: .96;
  color: var(--deep-stem);
  text-shadow: 0 2px 0 rgba(255,255,255,.7), 0 18px 34px rgba(74,169,154,.22);
}

.reflection {
  margin-top: .25rem;
  font-family: "Mochiy Pop One", system-ui;
  font-size: clamp(3.4rem, 9.2vw, 8.8rem);
  line-height: .72;
  color: rgba(74,169,154,.16);
  transform: scaleY(-1) skewX(-8deg);
  filter: blur(3px);
  mask-image: linear-gradient(rgba(0,0,0,.45), transparent 72%);
}

.low-horizon,
.grass-silhouette {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 18vh;
  background: linear-gradient(to top, rgba(47,111,82,.34), rgba(143,209,91,.22) 42%, transparent), repeating-linear-gradient(96deg, transparent 0 23px, rgba(47,111,82,.13) 24px 26px, transparent 27px 46px);
  filter: blur(.2px);
}

.dew-lens {
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 26% 21%, rgba(255,255,255,.97) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 55%, rgba(248,255,246,.48), rgba(139,231,240,.22) 54%, rgba(74,169,154,.08) 75%, transparent 78%);
  box-shadow: inset 10px 12px 26px rgba(255,255,255,.68), inset -18px -24px 34px rgba(74,169,154,.14), 0 24px 70px rgba(74,169,154,.2);
  backdrop-filter: blur(8px) saturate(1.45);
}

.hero-bubble {
  position: absolute;
  right: 19vw;
  top: 22vh;
  width: clamp(118px, 18vw, 220px);
  height: clamp(118px, 18vw, 220px);
  animation: dewWobble 6.8s ease-in-out infinite;
}

.hero-bubble::after,
.large-lens::after,
.seal-bubble::after {
  content: attr(data-ring);
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
}

.petal-loop {
  position: absolute;
  inset: 35%;
  animation: petalSpin 8s linear infinite;
}

.petal-loop i {
  position: absolute;
  width: 44%;
  height: 44%;
  border-radius: 80% 40% 80% 40%;
  background: linear-gradient(145deg, var(--nanohana-yellow), var(--pollen-gold));
  box-shadow: 0 0 12px rgba(249,185,62,.45);
  transform-origin: 100% 100%;
}
.petal-loop i:nth-child(2) { transform: rotate(90deg); }
.petal-loop i:nth-child(3) { transform: rotate(180deg); }
.petal-loop i:nth-child(4) { transform: rotate(270deg); }

.pollen-swarm span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nanohana-yellow);
  box-shadow: 0 0 15px var(--pollen-gold);
  animation: pollenAssemble 7.5s ease-in-out infinite;
}
.pollen-swarm span:nth-child(1) { left: 16%; top: 61%; animation-delay: -.1s; }
.pollen-swarm span:nth-child(2) { left: 20%; top: 54%; animation-delay: -.4s; }
.pollen-swarm span:nth-child(3) { left: 25%; top: 66%; animation-delay: -.7s; }
.pollen-swarm span:nth-child(4) { left: 32%; top: 57%; animation-delay: -1s; }
.pollen-swarm span:nth-child(5) { left: 42%; top: 71%; animation-delay: -1.3s; }
.pollen-swarm span:nth-child(6) { left: 48%; top: 49%; animation-delay: -1.6s; }
.pollen-swarm span:nth-child(7) { left: 56%; top: 64%; animation-delay: -1.9s; }
.pollen-swarm span:nth-child(8) { left: 64%; top: 54%; animation-delay: -2.2s; }
.pollen-swarm span:nth-child(9) { left: 71%; top: 69%; animation-delay: -2.5s; }
.pollen-swarm span:nth-child(10) { left: 80%; top: 42%; animation-delay: -2.8s; }
.pollen-swarm span:nth-child(11) { left: 86%; top: 76%; animation-delay: -3.1s; }
.pollen-swarm span:nth-child(12) { left: 91%; top: 59%; animation-delay: -3.4s; }

.scene-lens {
  background: linear-gradient(175deg, rgba(248,255,246,.97), rgba(184,233,255,.58) 48%, rgba(143,209,91,.2));
}

.corner-label {
  position: absolute;
  left: 7vw;
  top: 8vh;
  color: var(--shadow-teal);
}

.large-lens {
  position: absolute;
  width: min(64vw, 680px);
  height: min(64vw, 680px);
  right: -7vw;
  top: 11vh;
  animation: lensDrift 10s ease-in-out infinite;
}

.lens-rim {
  position: absolute;
  right: 19%;
  top: 15%;
  font-family: "Dela Gothic One", sans-serif;
  font-size: clamp(1.2rem, 3vw, 2.7rem);
  line-height: .9;
  color: transparent;
  background: linear-gradient(180deg, var(--dew-white), var(--aero-aqua) 42%, var(--shadow-teal));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 8px 16px rgba(47,111,82,.08);
}

.lens-caption {
  position: absolute;
  left: 20%;
  bottom: 23%;
  width: 42%;
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
}

.flower-cluster { position: absolute; inset: 22%; }
.flower {
  position: absolute;
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 6px 10px rgba(249,185,62,.28));
}
.flower::before,
.flower::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nanohana-yellow);
  border-radius: 50% 50% 18% 18%;
}
.flower::after { transform: rotate(90deg); background: linear-gradient(var(--nanohana-yellow), var(--pollen-gold)); }
.f1 { left: 8%; top: 28%; animation: bloomPulse 3s ease-in-out infinite; }
.f2 { left: 41%; top: 11%; animation: bloomPulse 3s ease-in-out -.8s infinite; }
.f3 { left: 66%; top: 44%; animation: bloomPulse 3s ease-in-out -1.5s infinite; }
.f4 { left: 26%; top: 64%; animation: bloomPulse 3s ease-in-out -2.2s infinite; }
.f5 { left: 73%; top: 17%; animation: bloomPulse 3s ease-in-out -1s infinite; }
.f6 { left: 51%; top: 72%; animation: bloomPulse 3s ease-in-out -.2s infinite; }

.glass-pill,
.aero-panel {
  background: linear-gradient(145deg, rgba(248,255,246,.62), rgba(139,231,240,.18));
  border: 1px solid rgba(255,255,255,.68);
  box-shadow: inset 0 1px 18px rgba(255,255,255,.72), 0 20px 50px rgba(74,169,154,.15);
  backdrop-filter: blur(14px) saturate(1.35);
}

.rim-note {
  position: absolute;
  left: 8vw;
  bottom: 18vh;
  width: min(310px, 70vw);
  padding: 1rem 1.25rem;
  border-radius: 999px 999px 999px 22px;
}
.rim-note b { display: block; font-family: "Dela Gothic One", sans-serif; font-size: .95rem; color: var(--shadow-teal); }
.rim-note span { display: block; margin-top: .25rem; line-height: 1.45; }

.stem-diagram {
  position: absolute;
  left: 44vw;
  bottom: -4vh;
  width: 150px;
  height: 520px;
}
.stem-line,
.leaf-line {
  fill: none;
  stroke: var(--deep-stem);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .62;
  stroke-dasharray: 620;
  animation: drawStem 6s ease-in-out infinite;
}
.leaf-line { stroke: var(--leaf-glass); stroke-width: 4; animation-delay: -1s; }
.leaf-two { animation-delay: -2s; }

.scene-os {
  background: radial-gradient(circle at 70% 65%, rgba(247,232,74,.3), transparent 18rem), linear-gradient(130deg, rgba(248,255,246,.98), rgba(139,231,240,.32), rgba(143,209,91,.16));
}
.os-title { position: absolute; left: 9vw; top: 13vh; }
.os-title .micro { color: var(--shadow-teal); }
.os-title h2,
.rain-copy h2 {
  margin: .5rem 0 0;
  max-width: 520px;
  font-size: clamp(2.3rem, 5vw, 5rem);
  line-height: 1.03;
}

.aero-panel {
  position: absolute;
  width: min(370px, 75vw);
  min-height: 160px;
  padding: 1.3rem 1.45rem;
  border-radius: 58% 42% 48% 52% / 38% 58% 42% 62%;
}
.panel-one { right: 12vw; top: 17vh; transform: rotate(-5deg); }
.panel-two { left: 15vw; bottom: 16vh; transform: rotate(4deg); }
.panel-three { right: 20vw; bottom: 12vh; transform: rotate(-2deg); }
.panel-stamp {
  display: block;
  font-family: "Dela Gothic One", sans-serif;
  color: var(--shadow-teal);
  letter-spacing: .02em;
}
.aero-panel p { margin: 1.2rem 0 0; font-size: 1.35rem; line-height: 1.45; }
.leaf-glow {
  position: absolute;
  right: -10vw;
  bottom: -12vh;
  width: 54vw;
  height: 46vh;
  border-radius: 80% 0 0 20%;
  background: radial-gradient(ellipse at center, rgba(143,209,91,.45), transparent 68%);
  filter: blur(12px);
}

.scene-rain { background: linear-gradient(180deg, rgba(184,233,255,.78), rgba(248,255,246,.96) 54%, rgba(139,231,240,.28)); }
.blue-chamber {
  position: absolute;
  inset: 10vh 8vw;
  border-radius: 48px;
  background: linear-gradient(145deg, rgba(139,231,240,.2), rgba(248,255,246,.18));
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: inset 0 0 44px rgba(255,255,255,.45);
  z-index: -1;
}
.rain-copy {
  position: absolute;
  left: 8vw;
  top: 15vh;
  width: min(480px, 82vw);
  padding: 1.4rem 1.65rem 1.6rem;
  border-radius: 34px;
}
.rain-copy p { margin: 1rem 0 0; font-size: 1.04rem; line-height: 1.6; }
.droplet-stage { position: absolute; inset: 0; }
.drop {
  position: absolute;
  width: 22px;
  height: 34px;
  border-radius: 50% 50% 55% 55%;
  background: radial-gradient(circle at 32% 22%, white, rgba(139,231,240,.52) 38%, rgba(74,169,154,.22));
  box-shadow: 0 12px 22px rgba(74,169,154,.18);
  animation: rainDrop 4.8s cubic-bezier(.52,.03,.67,.98) infinite;
}
.d1 { left: 54%; animation-delay: -.2s; }
.d2 { left: 67%; animation-delay: -1.3s; }
.d3 { left: 78%; animation-delay: -2.4s; }
.d4 { left: 44%; animation-delay: -3.6s; }
.bending-stem {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 42vh;
  border-radius: 999px;
  background: linear-gradient(var(--leaf-glass), var(--deep-stem));
  transform-origin: bottom center;
  animation: stemBend 4.8s ease-in-out infinite;
}
.bending-stem i {
  position: absolute;
  top: -18px;
  left: -14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--nanohana-yellow), var(--pollen-gold));
}
.s1 { left: 55%; animation-delay: -.1s; }
.s2 { left: 68%; height: 35vh; animation-delay: -1.3s; }
.s3 { left: 80%; height: 48vh; animation-delay: -2.1s; }
.scene-rain.is-bright .blue-chamber { box-shadow: inset 0 0 80px rgba(255,255,255,.75), 0 0 70px rgba(139,231,240,.38); }

.scene-final { background: linear-gradient(180deg, rgba(248,255,246,.96), rgba(247,232,74,.26) 58%, rgba(143,209,91,.42)); }
.final-field { position: absolute; inset: 0; }
.seal-bubble {
  position: absolute;
  right: 13vw;
  top: 19vh;
  width: clamp(240px, 34vw, 430px);
  height: clamp(240px, 34vw, 430px);
  display: grid;
  place-content: center;
  text-align: center;
  animation: dewWobble 7s ease-in-out infinite;
}
.seal-bubble strong { display: block; margin-top: .45rem; font-family: "Mochiy Pop One", system-ui; font-size: clamp(1.45rem, 3vw, 2.8rem); }
.quiet-note {
  position: absolute;
  left: 10vw;
  bottom: 22vh;
  width: min(410px, 76vw);
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  line-height: 1.55;
}

@keyframes bubbleRise { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-34px) scale(1.06); } }
@keyframes dewWobble { 0%,100% { transform: translate3d(0,0,0) scale(1); } 34% { transform: translate3d(14px,-18px,0) scale(1.025,.985); } 68% { transform: translate3d(-10px,11px,0) scale(.99,1.02); } }
@keyframes petalSpin { to { transform: rotate(360deg); } }
@keyframes pollenAssemble { 0%,100% { transform: translate3d(0,0,0) scale(.7); opacity: .36; } 45% { transform: translate3d(-18px,-34px,0) scale(1.15); opacity: .95; } 72% { transform: translate3d(30px,18px,0) scale(.82); opacity: .56; } }
@keyframes lensDrift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-34px, 18px,0); } }
@keyframes bloomPulse { 0%,100% { transform: scale(.75) rotate(0deg); opacity: .72; } 50% { transform: scale(1.16) rotate(12deg); opacity: 1; } }
@keyframes drawStem { 0% { stroke-dashoffset: 620; } 48%,100% { stroke-dashoffset: 0; } }
@keyframes rainDrop { 0% { top: -8%; opacity: 0; } 14% { opacity: .95; } 88% { opacity: .95; } 100% { top: 82%; opacity: 0; } }
@keyframes stemBend { 0%,100% { transform: rotate(0deg); } 45% { transform: rotate(6deg); } 62% { transform: rotate(-3deg); } }

@media (max-width: 760px) {
  .field-cursor { display: none; }
  .hero-bubble { right: 7vw; top: 17vh; }
  .wordmark-block { left: 7vw; bottom: 18vh; }
  .large-lens { width: 112vw; height: 112vw; right: -46vw; top: 19vh; }
  .stem-diagram { left: 4vw; opacity: .45; }
  .panel-one { right: 7vw; top: 30vh; }
  .panel-two { left: 7vw; bottom: 25vh; }
  .panel-three { right: 8vw; bottom: 7vh; }
  .aero-panel p { font-size: 1.08rem; }
  .rain-copy { top: 10vh; }
  .seal-bubble { right: 6vw; top: 16vh; }
}