:root{
  --bg:#F7F3EE;
  --card:#FFFFFF;
  --text:#2B2B2B;
  --muted:rgba(43,43,43,.70);
  --line:rgba(0,0,0,.10);

  --wax:#E6B65C;
  --wood:#5C4A2E;
  --radius:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{ color:inherit; }
.container{ max-width:980px; margin:0 auto; padding:0 18px; }

/* Header */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header-inner{
  padding:18px 0 16px;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.brandbox{ display:flex; gap:14px; align-items:center; }
.bee{
  font-size:44px;
  line-height:1;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));
  transform:translateY(1px);
}
.brandtext .name{
  font-weight:900;
  letter-spacing:.4px;
  font-size:22px;
}
.brandtext .slogan{
  margin-top:3px;
  color:var(--muted);
  font-size:14px;
}

/* Nav */
.nav{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  opacity:.92;
}
.nav a:hover{ opacity:1; }

/* Main */
main{ padding:22px 0 40px; }
.h1{ margin:0; font-size:34px; letter-spacing:.2px; }
.lead{ margin:10px 0 0; color:var(--muted); font-size:16px; }

/* Cards */
.cards{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.card h3{ margin:0 0 8px; }
.card p{ margin:0; color:var(--muted); }
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  text-decoration:none;
  background:linear-gradient(180deg,#fff,rgba(230,182,92,.10));
}
.btn:hover{ border-color:rgba(0,0,0,.18); }
.badge{
  display:inline-block;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(230,182,92,.18);
  border:1px solid rgba(230,182,92,.35);
  color:rgba(43,43,43,.85);
}

/* ===== Scene with side meadow ===== */
.scene{ position:relative; min-height:100vh; }
.page{ position:relative; z-index:2; }

/* Side panels */
.side{
  position:fixed;
  top:0; bottom:0;
  width:clamp(140px,16vw,260px);
  pointer-events:none;
  opacity:.95;
  overflow:hidden;
  z-index:1;

  /* background images */
  background: url("/assets/img/meadow-left.webp") center top / cover no-repeat;
}
.side-left{ left:0; }
.side-right{
  right:0;
  background: url("/assets/img/meadow-right.webp") center top / cover no-repeat;
}

/* Responsive paddings */
@media (min-width:900px){
  .page .container{ padding-left:18px; padding-right:18px; }
  main.container{ max-width:980px; }
}
@media (min-width:1100px){
  .page{
    padding-left:clamp(0px,16vw,260px);
    padding-right:clamp(0px,16vw,260px);
  }
}
@media (max-width:900px){
  .side{ display:none; }
  .page{ padding-left:0; padding-right:0; }
}
/* ===== Flower coordinates as CSS variables ===== */
/* LEFT (4 точки) */
.side-left{
  --f1x: 17%; --f1y: 38%;
  --f2x: 42%; --f2y: 51%;
  --f3x: 11%; --f3y: 76%;
  --f4x: 48%; --f4y: 91%;
}
/* RIGHT (3 точки) */
.side-right{
  --f1x: 74%; --f1y: 53%;
  --f2x: 51%; --f2y: 80%;
  --f3x: 73%; --f3y: 92%;
}

/* ===== Flower points (debug; сейчас скрыто) ===== */
.flower{
  position:absolute;
  width:18px; height:18px;
  border-radius:999px;
  background:#000 !important;
  opacity:0 !important;
  outline:3px solid #fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.35);
  z-index:6;
  pointer-events:none;
}

/* точки берут координаты из переменных */
.side .f1{ left:var(--f1x); top:var(--f1y); }
.side .f2{ left:var(--f2x); top:var(--f2y); }
.side .f3{ left:var(--f3x); top:var(--f3y); }
.side-left .f4{ left:var(--f4x); top:var(--f4y); }

/* ===== Bees ===== */
.bee-fly{
  position:absolute;
  z-index:7;
  font-size:28px;
  opacity:.95;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
  will-change: transform, left, top;
}

/* “крыло/блик”, включается только при посадке */
.bee-fly::after{
  content:"";
  position:absolute;
  left: 11px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  filter: blur(0.2px);
  opacity: 0; /* в полёте скрыто */
  transform-origin: left center;
  animation: wing-buzz .18s linear infinite;
}

/* ---------------- LEFT (4 flower points) ---------------- */

/* Bee 1 — маршрут f1 → f2 → f3 → f4 → f1 */
.side-left .bee1{
  left:var(--f1x); top:var(--f1y);
  animation: bee-left-a 16s linear infinite;
  animation-delay: -4s;
}

/* Bee 2 — другой маршрут f2 → f4 → f1 → f3 → f2 */
.side-left .bee2{
  left:var(--f2x); top:var(--f2y);
  animation: bee-left-b 22s linear infinite;
  animation-delay: -13s;
  font-size:24px;
  opacity:.85;
}

/* ---------------- RIGHT (3 flower points) ---------------- */
/* ОДНА пчела справа: bee3 */
.side-right .bee3{
  left:var(--f1x); top:var(--f1y);
  animation: bee-right-a 19s linear infinite;
  animation-delay: -9s;
}

/* ===== LEFT animations ===== */
/* Важно: при посадке ставим scale(.9) и “включаем крылья” через custom property --wing */

/* f1 → f2 → f3 → f4 → f1 */
@keyframes bee-left-a{
  0%   { left:var(--f1x); top:var(--f1y); transform:rotate(-8deg) scale(1);   --wing:0; }

  18%  { left:var(--f2x); top:var(--f2y); transform:rotate(10deg) scale(1);   --wing:0; }
  22%  { left:var(--f2x); top:var(--f2y); transform:rotate(2deg)  scale(.9);  --wing:1; }
  30%  { left:var(--f2x); top:var(--f2y); transform:rotate(2deg)  scale(.9);  --wing:1; }

  48%  { left:var(--f3x); top:var(--f3y); transform:rotate(-10deg) scale(1);  --wing:0; }
  52%  { left:var(--f3x); top:var(--f3y); transform:rotate(-2deg)  scale(.9); --wing:1; }
  60%  { left:var(--f3x); top:var(--f3y); transform:rotate(-2deg)  scale(.9); --wing:1; }

  78%  { left:var(--f4x); top:var(--f4y); transform:rotate(12deg) scale(1);   --wing:0; }
  82%  { left:var(--f4x); top:var(--f4y); transform:rotate(2deg)  scale(.9);  --wing:1; }
  90%  { left:var(--f4x); top:var(--f4y); transform:rotate(2deg)  scale(.9);  --wing:1; }

  100% { left:var(--f1x); top:var(--f1y); transform:rotate(-8deg) scale(1);   --wing:0; }
}

/* f2 → f4 → f1 → f3 → f2 */
@keyframes bee-left-b{
  0%   { left:var(--f2x); top:var(--f2y); transform:rotate(8deg)  scale(1);   --wing:0; }

  20%  { left:var(--f4x); top:var(--f4y); transform:rotate(12deg) scale(1);   --wing:0; }
  24%  { left:var(--f4x); top:var(--f4y); transform:rotate(2deg)  scale(.9);  --wing:1; }
  32%  { left:var(--f4x); top:var(--f4y); transform:rotate(2deg)  scale(.9);  --wing:1; }

  52%  { left:var(--f1x); top:var(--f1y); transform:rotate(-12deg) scale(1);  --wing:0; }
  56%  { left:var(--f1x); top:var(--f1y); transform:rotate(-2deg)  scale(.9); --wing:1; }
  64%  { left:var(--f1x); top:var(--f1y); transform:rotate(-2deg)  scale(.9); --wing:1; }

  82%  { left:var(--f3x); top:var(--f3y); transform:rotate(10deg) scale(1);   --wing:0; }
  86%  { left:var(--f3x); top:var(--f3y); transform:rotate(2deg)  scale(.9);  --wing:1; }
  94%  { left:var(--f3x); top:var(--f3y); transform:rotate(2deg)  scale(.9);  --wing:1; }

  100% { left:var(--f2x); top:var(--f2y); transform:rotate(8deg)  scale(1);   --wing:0; }
}

/* ===== RIGHT animation (3 points) ===== */
/* f1 → f2 → f3 → f1 */
@keyframes bee-right-a{
  0%   { left:var(--f1x); top:var(--f1y); transform:rotate(-8deg) scale(1);   --wing:0; }

  28%  { left:var(--f2x); top:var(--f2y); transform:rotate(10deg) scale(1);   --wing:0; }
  32%  { left:var(--f2x); top:var(--f2y); transform:rotate(2deg)  scale(.9);  --wing:1; }
  42%  { left:var(--f2x); top:var(--f2y); transform:rotate(2deg)  scale(.9);  --wing:1; }

  68%  { left:var(--f3x); top:var(--f3y); transform:rotate(-10deg) scale(1);  --wing:0; }
  72%  { left:var(--f3x); top:var(--f3y); transform:rotate(-2deg)  scale(.9); --wing:1; }
  82%  { left:var(--f3x); top:var(--f3y); transform:rotate(-2deg)  scale(.9); --wing:1; }

  100% { left:var(--f1x); top:var(--f1y); transform:rotate(-8deg) scale(1);   --wing:0; }
}

/* Включаем/выключаем крылья по переменной --wing */
.bee-fly::after{
  opacity: calc(var(--wing, 0) * 0.9);
}

/* микро-вибрация крыльев */
@keyframes wing-buzz{
  0%   { transform: rotate(25deg) scale(1); }
  50%  { transform: rotate(-25deg) scale(1); }
  100% { transform: rotate(25deg) scale(1); }
}


/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .bee-fly{ animation:none !important; }
}

/* ===== Soft fade + blur on meadow edges (premium look) ===== */
.side{
  filter:saturate(.95);
}

/* fade overlay */
.side::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(
    to right,
    rgba(247,243,238,0.00) 0%,
    rgba(247,243,238,0.20) 55%,
    rgba(247,243,238,0.55) 75%,
    rgba(247,243,238,0.85) 90%,
    rgba(247,243,238,1.00) 100%
  );
}
.side-right::after{
  background:linear-gradient(
    to left,
    rgba(247,243,238,0.00) 0%,
    rgba(247,243,238,0.20) 55%,
    rgba(247,243,238,0.55) 75%,
    rgba(247,243,238,0.85) 90%,
    rgba(247,243,238,1.00) 100%
  );
}

/* blur overlay (supported browsers) */
@supports (backdrop-filter: blur(6px)){
  .side::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:2;
    backdrop-filter: blur(6px);
    mask-image: linear-gradient(
      to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 50%,
      rgba(0,0,0,.4) 75%,
      rgba(0,0,0,1) 100%
    );
  }
  .side-right::before{
    mask-image: linear-gradient(
      to left,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 50%,
      rgba(0,0,0,.4) 75%,
      rgba(0,0,0,1) 100%
    );
  }
}