/* tawaraya.jp — 仮のトップページ（新緑の春・古都華の苺をすこし） */

:root {
  --ink: #2f5238;
  --ink-soft: #5d7d62;
  --berry: #e2465f;
  --berry-soft: rgba(226, 70, 95, 0.35);
  --card: rgba(252, 255, 246, 0.64);
  --card-edge: rgba(255, 255, 255, 0.82);
  --shadow: 0 18px 50px rgba(88, 140, 60, 0.26);
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", Georgia, "Times New Roman", serif;
  --sans: "Hiragino Sans", "Yu Gothic UI", "Segoe UI", "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 56px;
  color: var(--ink);
  background: #e6f2d8;
  font-family: var(--sans);
  overflow-x: hidden;
}

/* --- 背景の写真と、明るく柔らかくするベール --- */

.backdrop,
.backdrop img,
.veil,
.drift {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.backdrop { z-index: -3; }

.backdrop img {
  object-fit: cover;
  object-position: 35% 30%;
  filter: saturate(0.92) brightness(1.05);
}

.veil {
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(252, 255, 244, 0.6), rgba(252, 255, 244, 0) 65%),
    linear-gradient(180deg, rgba(250, 255, 238, 0.28), rgba(226, 242, 210, 0.42));
}

.drift {
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* --- 中央のカード --- */

.card {
  width: min(100%, 440px);
  padding: 38px 28px 30px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 28px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  animation: rise 1.4s ease-out both;
}

.berry {
  display: block;
  width: 46px;
  height: 50px;
  margin: 0 auto;
  animation: bob 4s ease-in-out infinite;
  transform-origin: 50% 10%;
}

h1 {
  margin: 10px 0 26px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 8vw, 2.6rem);
  letter-spacing: 0.06em;
  color: var(--ink);
}

.counter-label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.counter-value {
  display: inline-block;
  margin: 0;
  padding: 8px 20px;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 7vw, 2rem);
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  color: var(--berry);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--berry-soft);
  border-radius: 999px;
}

.message {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(108, 170, 80, 0.35);
  font-family: var(--serif);
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.7;
  text-align: left;
  color: var(--ink-soft);
}

.rabbit {
  flex: none;
  width: 26px;
  height: 22px;
  margin-top: 3px;
  color: #c9a88a;
}

.credit {
  position: fixed;
  right: 12px;
  bottom: 8px;
  font-size: 0.66rem;
  color: rgba(47, 82, 56, 0.75);
}

.credit a { color: inherit; }

/* --- 舞う若葉と苺の花（js/site.js が生成する） --- */

.flake {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  opacity: var(--alpha);
  animation: fall var(--fall) linear var(--delay) infinite;
}

.flake img {
  display: block;
  width: 100%;
  height: 100%;
  animation: sway var(--sway) ease-in-out var(--delay) infinite alternate;
}

@keyframes fall {
  to { transform: translate3d(var(--drift), calc(100vh + 80px), 0); }
}

@keyframes sway {
  from { transform: translateX(-14px) rotate(-30deg); }
  to   { transform: translateX(14px) rotate(40deg); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes bob {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

@media (max-width: 480px) {
  .card { padding: 32px 20px 26px; border-radius: 24px; }
  .message { font-size: 0.76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .berry { animation: none; }
  .drift { display: none; }
}