/* ══════════════════════════════════════════════════════════════════════════
   dianrc.com — Coming Soon (from the Claude Design "Organic" mockup).
   ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Caprasimo:wght@400&family=Figtree:wght@400;600;700&display=swap');

:root {
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font-body); }

.scene {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(to bottom, #229ED6 0%, #57BBE6 30%, #9AD7EE 58%, #D7EFF7 82%, #EFF9FC 100%);
}

/* — clouds — */
.cloud { position: absolute; filter: drop-shadow(0 12px 20px rgba(20, 60, 90, 0.12)); z-index: 1; }
.cloud span { position: absolute; border-radius: 50%; background: #ffffff; }
.cloud span:first-child { background: #CFE6F2; }

.cloud-1, .cloud-2 { width: clamp(190px, 24vw, 320px); aspect-ratio: 340 / 180; }
.cloud-1 { top: 8%; left: -3%; }
.cloud-2 { top: 4%; right: -4%; }
.cloud--xl:nth-child(1) { left: 7.6%; top: 43.3%; width: 82.4%; height: 44.4%; }
.cloud--xl:nth-child(2) { left: 0; top: 25.6%; width: 32.4%; height: 61.1%; }
.cloud--xl:nth-child(3) { left: 20.6%; top: 5.6%; width: 44.1%; height: 83.3%; }
.cloud--xl:nth-child(4) { left: 47.1%; top: 0; width: 47.1%; height: 88.9%; }
.cloud--xl:nth-child(5) { left: 73.5%; top: 20%; width: 32.4%; height: 61.1%; }
.cloud--xl:nth-child(6) { left: 11.8%; top: 46.7%; width: 26.5%; height: 50%; }

.cloud-3, .cloud-4 { filter: drop-shadow(0 8px 14px rgba(20, 60, 90, 0.10)); z-index: 1; }
.cloud-3 { width: clamp(130px, 15vw, 200px); aspect-ratio: 200 / 100; top: 37%; left: 2%; }
.cloud-4 { width: clamp(120px, 14vw, 190px); aspect-ratio: 200 / 100; top: 41%; right: 5%; }
.cloud--lg:nth-child(1) { left: 8%; top: 46%; width: 84%; height: 48%; }
.cloud--lg:nth-child(2) { left: 0; top: 26%; width: 33%; height: 66%; }
.cloud--lg:nth-child(3) { left: 22%; top: 4%; width: 44%; height: 88%; }
.cloud--lg:nth-child(4) { left: 55%; top: 14%; width: 38%; height: 76%; }
.cloud--lg:nth-child(5) { left: 75%; top: 30%; width: 28%; height: 56%; }

.cloud-5 { width: clamp(90px, 10vw, 140px); aspect-ratio: 140 / 40; top: 20%; left: 6%; opacity: 0.85; }
.cloud--sm:nth-child(1) { left: 0; top: 25%; width: 64.3%; height: 55%; }
.cloud--sm:nth-child(2) { left: 35.7%; top: 0; width: 64.3%; height: 65%; }

.cloud-6 { width: clamp(70px, 8vw, 110px); aspect-ratio: 110 / 34; top: 15%; right: 24%; opacity: 0.8; }
.cloud--sm2:nth-child(1) { left: 0; top: 23.5%; width: 63.6%; height: 52.9%; }
.cloud--sm2:nth-child(2) { left: 34.5%; top: 0; width: 65.5%; height: 58.8%; }

/* — ground — */
.hill { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; }
.hill-outer { bottom: -170px; width: 170%; height: 220px; background: var(--color-accent-2-300); z-index: 1; }
.hill-inner { bottom: -120px; width: 160%; height: 160px; background: var(--color-accent-2-500); z-index: 2; }

/* — sunflower — */
.flower {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: clamp(190px, 24vw, 300px);
  height: clamp(220px, 54vh, 540px);
  transform: translateX(-50%);
  transform-origin: bottom center;
  animation: sway 5s ease-in-out infinite;
  z-index: 3;
}
@keyframes sway {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
  50% { transform: translateX(-50%) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .flower { animation: none; }
}

.stem { stroke: var(--color-accent-2-700); }
.leaf { fill: var(--color-accent-2-700); }

.flower-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.bud, .petals, .disc { pointer-events: none; }

.bud { transform-origin: 126px 118px; transition: transform 0.45s ease, opacity 0.35s ease; }
.bud ellipse:first-child { fill: var(--color-accent-2-700); }
.bud-shade { fill: var(--color-accent-2-600); opacity: 0.55; }

.petals {
  transform-origin: 126px 110px;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
.petals ellipse { fill: #FFC800; }

.disc {
  transform-origin: 126px 110px;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s, opacity 0.35s ease 0.08s;
}
.disc circle { fill: #7A3B12; }

.flower-hit:hover ~ .bud { transform: scale(0.4); opacity: 0; }
.flower-hit:hover ~ .petals { transform: scale(1); opacity: 1; }
.flower-hit:hover ~ .disc { transform: scale(1); opacity: 1; }

/* — copy — */
.hero {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(56px, 11vh, 110px);
  text-align: center;
  margin: 0;
}

.kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 3px 14px rgba(0, 69, 127, 0.4);
  margin: 0 0 20px;
}

.title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(44px, 8vw, 88px);
  line-height: 1.08;
  color: #ffffff;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 4px 18px rgba(0, 69, 127, 0.4);
}

/* — narrow screens: shrink and tuck the corner clouds so they don't
   creep in behind the centered white text (white-on-white disappears) — */
@media (max-width: 560px) {
  .cloud-1, .cloud-2 { width: clamp(90px, 26vw, 190px); top: 10%; }
  .cloud-1 { left: -8%; }
  .cloud-2 { right: -8%; }
  .cloud-3, .cloud-4 { width: clamp(70px, 16vw, 130px); }
  .cloud-5 { width: clamp(50px, 11vw, 90px); }
  .cloud-6 { width: clamp(42px, 9vw, 70px); }
}