@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap');

:root {
  color-scheme: light;
  --cream: #fffaf0;
  --ink: #2f402f;
  --leaf: #65795c;
  --glass: rgba(249, 245, 224, .72);
  --line: rgba(255, 255, 255, .52);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
button, input { font: inherit; }
button { color: inherit; }

body {
  background: #6d8464;
  color: var(--cream);
  font-family: "DM Sans", system-ui, sans-serif;
  overflow: hidden;
}

.world {
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: url("/assets/meadow.png") center 52% / cover no-repeat;
  transition: filter 1.6s ease;
}

.wash {
  position: absolute; inset: 0; z-index: -4;
  background:
    linear-gradient(90deg, rgba(24, 45, 27, .37) 0%, rgba(31, 48, 28, .08) 52%, rgba(42, 46, 24, .07)),
    linear-gradient(0deg, rgba(21, 35, 18, .24), transparent 45%),
    linear-gradient(180deg, rgba(36, 49, 31, .10), transparent 40%);
}

.grain {
  position: absolute; inset: -50%; z-index: 8; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  animation: grain .25s steps(2) infinite;
}

.topbar {
  height: 88px;
  padding: 24px clamp(24px, 4vw, 64px);
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 20;
}

.brand {
  color: #fffdf3; text-decoration: none; text-transform: uppercase;
  letter-spacing: .19em; font-size: 12px; font-weight: 600;
  display: flex; gap: 11px; align-items: center;
}
.brand-mark { font-size: 18px; }
.controls { display: flex; gap: 10px; }
.round-button, .weather-button {
  border: 1px solid var(--line); background: rgba(45, 68, 44, .34);
  box-shadow: 0 7px 30px rgba(31, 48, 26, .14);
  color: white; height: 40px; backdrop-filter: blur(12px);
  cursor: pointer; transition: background .2s, transform .2s;
}
.round-button:hover, .weather-button:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.round-button { width: 40px; border-radius: 50%; display: grid; place-items: center; }
.round-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.round-button[aria-pressed="false"] svg path:last-child { opacity: .35; }
.weather-button { border-radius: 20px; padding: 0 16px; display: flex; gap: 8px; align-items: center; font-size: 12px; letter-spacing: .04em; }
.weather-icon { font-size: 15px; }

.welcome {
  position: absolute; z-index: 10; top: 24%; left: clamp(26px, 8vw, 130px);
  text-shadow: 0 2px 24px rgba(34, 43, 26, .26);
  animation: arrive 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  margin: 0 0 18px; opacity: .9;
}
h1 {
  font-family: "Libre Caslon Display", Georgia, serif; font-size: clamp(52px, 5.5vw, 84px);
  line-height: .98; font-weight: 400; letter-spacing: -.035em; margin: 0 0 24px;
}
.intro { font-family: Georgia, serif; font-size: 17px; line-height: 1.65; opacity: .91; margin: 0 0 28px; }
.breathe-button {
  height: 52px; padding: 0 10px 0 18px; border: 1px solid rgba(255,255,255,.65);
  border-radius: 28px; background: rgba(255, 253, 242, .85); color: #485c43;
  box-shadow: 0 12px 35px rgba(33, 53, 30, .2); backdrop-filter: blur(14px);
  cursor: pointer; display: flex; gap: 11px; align-items: center; font-size: 13px; font-weight: 600;
  transition: transform .25s, background .25s;
}
.breathe-button:hover { transform: translateY(-2px); background: #fffdf5; }
.breathe-button .leaf { font-family: Georgia; font-size: 25px; font-weight: 400; transform: rotate(-15deg); }
.duration { margin-left: 8px; padding: 8px 11px; background: rgba(99,120,87,.12); border-radius: 18px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.worry-card {
  position: absolute; z-index: 10; right: clamp(24px, 5vw, 76px); bottom: clamp(50px, 8vh, 92px);
  width: min(365px, calc(100vw - 48px)); padding: 24px;
  color: #344834; background: var(--glass); border: 1px solid rgba(255,255,255,.62);
  border-radius: 24px; backdrop-filter: blur(17px) saturate(1.12);
  box-shadow: 0 18px 54px rgba(39, 57, 31, .22);
  animation: arrive 1.2s .25s cubic-bezier(.2,.7,.2,1) both;
}
.tiny-label { font-size: 9px; letter-spacing: .2em; font-weight: 600; color: #71806b; margin: 0 0 8px; }
.worry-card h2 { font-family: "Libre Caslon Display", Georgia, serif; font-size: 25px; font-weight: 400; margin: 0 0 18px; }
.worry-card form { display: flex; background: rgba(255,255,255,.58); border: 1px solid rgba(83,103,75,.17); border-radius: 13px; padding: 4px; }
.worry-card input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #3c4e39; padding: 9px 10px; font-family: Georgia, serif; font-size: 13px; }
.worry-card input::placeholder { color: #7e8d78; }
.worry-card form button { border: 0; width: 38px; height: 38px; border-radius: 10px; background: #6d8063; color: white; display: grid; place-items: center; cursor: pointer; }
.worry-card form button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.released { display: none; margin: 13px 2px -2px; font-family: Georgia, serif; font-style: italic; color: #667760; font-size: 13px; }
.worry-card.sent form { animation: floatAway .9s ease both; pointer-events: none; }
.worry-card.sent .released { display: block; animation: arrive .7s .35s both; }

.footer-note { position: absolute; z-index: 10; left: clamp(24px,4vw,64px); bottom: 28px; font-size: 10px; letter-spacing: .08em; opacity: .78; }
.footer-note span { margin: 0 5px; }
.footer-note button { border: 0; background: transparent; padding: 0; color: inherit; font-size: inherit; letter-spacing: inherit; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.45); }

.clouds { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; opacity: .25; mix-blend-mode: screen; }
.clouds i { position: absolute; width: 280px; height: 70px; border-radius: 50%; background: rgba(255,255,240,.4); filter: blur(20px); animation: drift 42s linear infinite; }
.clouds i:nth-child(1) { top: 13%; left: -25%; }
.clouds i:nth-child(2) { top: 29%; left: -35%; animation-delay: -19s; width: 390px; }
.clouds i:nth-child(3) { top: 5%; left: -30%; animation-delay: -32s; width: 200px; }
.rain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 1.2s; background-image: repeating-linear-gradient(101deg, transparent 0 18px, rgba(235,245,235,.33) 19px, transparent 20px 31px); background-size: 100% 38px; animation: rain .5s linear infinite; }
.world.rainy { filter: saturate(.82) brightness(.82) contrast(.95); }
.world.rainy .rain { opacity: .72; }
.world.dusk { filter: sepia(.05) saturate(.78) brightness(.56) hue-rotate(12deg); }
.world.dusk .wash { background: linear-gradient(180deg, rgba(40,40,83,.25), rgba(17,30,43,.45)); }
.fireflies { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 1s; }
.dusk .fireflies { opacity: 1; }
.fireflies i { position: absolute; width: 4px; height: 4px; background: #fff0a1; border-radius: 50%; box-shadow: 0 0 12px 4px #e5d878; animation: firefly 4s ease-in-out infinite; }

.breathing-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(35, 56, 41, .78);
  backdrop-filter: blur(20px); color: #fffced; display: grid; place-content: center; justify-items: center;
  text-align: center;
}
.breathing-overlay[hidden] { display: none; }
.close-button { position: absolute; top: 25px; right: 30px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: white; width: 42px; height: 42px; border-radius: 50%; font-size: 25px; cursor: pointer; }
.breath-orbit { width: 220px; height: 220px; display: grid; place-items: center; }
.breath-circle {
  width: 105px; height: 105px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(248, 240, 176, .29); box-shadow: 0 0 60px rgba(255,237,157,.28), inset 0 0 35px rgba(255,255,225,.18);
  border: 1px solid rgba(255,255,220,.6); animation: inhale 8s ease-in-out infinite;
}
.breath-circle span { text-transform: uppercase; font-size: 10px; letter-spacing: .24em; }
.breathing-overlay h2 { font-family: "Libre Caslon Display", Georgia, serif; font-size: 34px; font-weight: 400; margin: 30px 0 8px; }
.breathing-overlay p { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; opacity: .65; }

dialog { width: min(410px, calc(100vw - 40px)); border: 1px solid rgba(255,255,255,.8); border-radius: 24px; padding: 38px; color: #3d513b; background: rgba(255,252,237,.92); box-shadow: 0 30px 100px rgba(26,40,24,.3); backdrop-filter: blur(20px); }
dialog::backdrop { background: rgba(36,51,34,.5); backdrop-filter: blur(8px); }
.dialog-close { position: absolute; right: 14px; top: 12px; border: 0; background: transparent; color: #6b7a66; font-size: 25px; cursor: pointer; }
.dialog-sprig { display: block; font-family: Georgia; font-size: 35px; transform: rotate(-12deg); }
dialog h2 { font-family: "Libre Caslon Display", Georgia, serif; font-size: 31px; font-weight: 400; margin: 10px 0 14px; }
dialog p { font-family: Georgia, serif; line-height: 1.7; margin: 0; color: #647260; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes drift { to { transform: translateX(calc(100vw + 600px)); } }
@keyframes rain { to { background-position: 10px 38px; } }
@keyframes grain { 0% { transform: translate(1%, -1%); } 50% { transform: translate(-1%, 1%); } }
@keyframes floatAway { to { opacity: 0; transform: translate(80px, -35px) scale(.7) rotate(-5deg); } }
@keyframes inhale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.75); } }
@keyframes firefly { 0%,100% { opacity: .15; transform: translate(0,0); } 50% { opacity: 1; transform: translate(18px,-25px); } }

@media (max-width: 720px) {
  .world { background-position: 59% center; overflow-y: auto; }
  .topbar { height: 72px; padding: 18px 20px; }
  .brand { letter-spacing: .14em; font-size: 10px; }
  .weather-button { width: 40px; padding: 0; justify-content: center; }
  .weather-button span:last-child { display: none; }
  .welcome { top: 16%; left: 24px; right: 20px; }
  h1 { font-size: clamp(48px, 15vw, 65px); }
  .intro { font-size: 15px; line-height: 1.55; }
  .desktop-break { display: none; }
  .worry-card { position: absolute; right: 20px; left: 20px; bottom: 52px; width: auto; padding: 20px; }
  .footer-note { display: none; }
}

@media (max-height: 720px) and (min-width: 721px) {
  .welcome { top: 18%; }
  .worry-card { bottom: 28px; }
  .footer-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}