/* ============================================================
   Matin · сезонний декор
   Правила: декор лише на головному екрані та по краях;
   ніколи під текстом і поверх меню; без анімації в меню.
   ============================================================ */

/* ---------- Шари головного екрана ---------- */
.hero__decor {
  position: absolute;
  inset: 0;
  z-index: 1;               /* над фото й тінню, під текстом (z-index: 2) */
  pointer-events: none;
}
/* Частинки летять по всьому сайту: над сторінкою, під навігацією (100), кліки проходять крізь */
.site-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  pointer-events: none;
}
.site-particles[hidden] { display: none; }
.hero__decor { overflow: hidden; }

/* Сезонні фото: головний предмет праворуч — на вузьких екранах тримаємо його в кадрі */
.hero__media img.is-seasonal { object-position: 60% 50%; }
@media (max-width: 760px) {
  /* на вертикальному екрані зсуваємо кадр так, щоб чашка стояла праворуч від тексту */
  [data-theme="winter"] .hero__media img.is-seasonal { object-position: 57% 50%; }
  [data-theme="spring"] .hero__media img.is-seasonal { object-position: 56% 50%; }
  [data-theme="summer"] .hero__media img.is-seasonal { object-position: 67% 50%; }
  [data-theme="autumn"] .hero__media img.is-seasonal { object-position: 59% 50%; }
}

/* Тепле світло — у кожному сезоні свого відтінку (--glow) */
.hero__decor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 82% 62%, rgba(var(--glow, 255, 190, 120), 0.22), transparent 70%);
  mix-blend-mode: screen;
}

/* ---------- Іконка-орнамент наприкінці лінії заголовка секції ---------- */
.shead::before { right: 28px; }
.shead::after {
  content: "";
  position: absolute;
  top: -7px;
  right: 0;
  width: 14px;
  height: 14px;
  background: var(--brass);
  -webkit-mask: var(--tick-icon) center / contain no-repeat;
  mask: var(--tick-icon) center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.9s;
}
.shead.is-visible::after { opacity: 1; }

/* ---------- Блок «Сезонні напої» ---------- */
.menu__cat--seasonal {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  background: var(--paper-2);
  border-radius: 6px;
}
/* Орнамент із трьох сезонних іконок по центру верхнього краю — лише рамка, не під текстом */
.menu__cat--seasonal::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 82px;
  height: 18px;
  margin-left: -41px;
  background: var(--brass);
  -webkit-mask:
    var(--tick-icon) 0 50% / 12px 12px no-repeat,
    var(--tick-icon) 50% 50% / 18px 18px no-repeat,
    var(--tick-icon) 100% 50% / 12px 12px no-repeat;
  mask:
    var(--tick-icon) 0 50% / 12px 12px no-repeat,
    var(--tick-icon) 50% 50% / 18px 18px no-repeat,
    var(--tick-icon) 100% 50% / 12px 12px no-repeat;
}
/* «Розрив» рамки під орнаментом */
.menu__cat--seasonal::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 106px;
  margin-left: -53px;
  height: 2px;
  background: var(--paper);
}
.menu__cat--seasonal .menu__cat-sub {
  background: var(--paper);
}
.menu__cat--seasonal .card__media,
.menu__cat--seasonal .ph { background-color: var(--paper); }

/* ---------- Заглушка замість фото: тон теми + сезонна іконка ---------- */
.ph {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: var(--paper-2);
}
.ph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  background: var(--brass);
  opacity: 0.45;
  -webkit-mask: var(--tick-icon) center / contain no-repeat;
  mask: var(--tick-icon) center / contain no-repeat;
}
.modal__media.ph { min-height: 260px; }

/* ============================================================
   ЗИМА
   ============================================================ */

/* Ледь помітний іній по краях фото */
[data-theme="winter"] .hero__decor::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(232, 240, 238, 0.10) 100%);
}
[data-theme="winter"] .hero__decor::before {
  background:
    radial-gradient(42% 46% at 84% 60%, rgba(var(--glow), 0.26), transparent 70%),
    radial-gradient(70% 60% at 84% 60%, rgba(var(--glow), 0.08), transparent 75%);
}

/* Ялинові гілки — з правого краю, поза зоною тексту */
/* Ялинові гілки — тонка «гравюра» теплим золотом, з правого краю, поза текстом */
.fir {
  position: absolute;
  height: auto;
  overflow: visible;
}
.fir path { stroke: var(--brass-soft); }
.fir__stem path { stroke-width: 1.6; }
.fir__front path { stroke-width: 1.1; opacity: 0.85; }
.fir__front path.b { opacity: 0.6; }

.fir--top {
  top: calc(var(--nav-h) + var(--announce-h, 0px) - 18px);
  right: -7vw;
  width: min(50vw, 640px);
  transform: scaleX(-1) rotate(-3deg);
  transform-origin: 50% 0;
}
.fir--side {
  top: 40%;
  right: -9vw;
  width: min(30vw, 380px);
  transform: scaleX(-1) rotate(14deg);
  transform-origin: 50% 0;
  opacity: 0.55;
}

/* На телефоні — одна гілка, менша, щоб не заходила під текст */
@media (max-width: 760px) {
  .fir--top { width: 78vw; right: -14vw; }
  .fir--side { display: none; }
}

/* Зменшений рух: декор статичний (частинки вимикаються в JS) */
@media (prefers-reduced-motion: reduce) {
  .shead::after { opacity: 1; }
}

/* ============================================================
   ВЕСНА · ЛІТО · ОСІНЬ — лінійна «гравюра» з правого краю
   ============================================================ */
.deco {
  position: absolute;
  height: auto;
  overflow: visible;
}
.deco .ln { stroke: var(--brass-soft); stroke-width: 1.2; opacity: 0.9; }
.deco .ln--stem { opacity: 1; }
.deco .ln--thin { stroke-width: 0.8; opacity: 0.6; }
.deco .ln--fill { fill: var(--brass-soft); }
.deco .ln--dash { stroke-dasharray: 2 7; }

.deco--top {
  top: calc(var(--nav-h) + var(--announce-h, 0px) - 10px);
  right: -6vw;
  width: min(48vw, 600px);
  transform: scaleX(-1) rotate(-3deg);
  transform-origin: 50% 0;
}
.deco--side {
  top: 42%;
  right: -8vw;
  width: min(28vw, 340px);
  transform: scaleX(-1) rotate(12deg);
  transform-origin: 50% 0;
  opacity: 0.55;
}
.deco--sun {
  top: calc(var(--nav-h) + var(--announce-h, 0px) - 8px);
  right: 0;
  width: min(30vw, 380px);
  opacity: 0.7;
}

/* --- «Земля» внизу головного екрана: весна — квіти, осінь — листя (статично) --- */
.ground {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}
/* текст нижнього рядка (години, лінія скролу) — над декором, не на ньому */
[data-theme="spring"] .hero__foot,
[data-theme="autumn"] .hero__foot,
[data-theme="winter"] .hero__foot { padding-bottom: 168px; }
.g-sparkle { fill: #FFFFFF; opacity: 0.9; }
.g-crystal { fill: #F4F8FC; stroke: #EEF4FA; stroke-width: 1.3; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(220, 234, 248, 0.7)); }

.g-grass { stroke: color-mix(in srgb, var(--sage) 85%, black); stroke-width: 1.3; opacity: 0.9; }
.g-stem { stroke: var(--sage); stroke-width: 1.4; }
.g-leaf { fill: var(--sage); opacity: 0.95; }
.g-petal-a { fill: var(--brass-soft); }
.g-petal-b { fill: var(--paper); }
.g-tulip { fill: var(--brass); }
.g-eye { fill: #D9B865; }

.g-l1 { fill: var(--brass); }
.g-l2 { fill: var(--roast); }
.g-l3 { fill: var(--brass-soft); }
.g-l4 { fill: #8A5A2B; }
.g-vein { stroke: rgba(0, 0, 0, 0.22); stroke-width: 0.8; fill: none; }
.g-pk { fill: #C26A2C; stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.8; }
.g-pk-mid { fill: #D07A36; stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.8; }
.g-pk-stem { fill: none; stroke: #5B4128; stroke-width: 2.4; stroke-linecap: round; }

/* Весна: м'яке рожеве світло */
[data-theme="spring"] .hero__decor::before {
  background: radial-gradient(48% 50% at 82% 40%, rgba(var(--glow), 0.18), transparent 70%);
}
/* Літо: сонце в правому верхньому куті */
[data-theme="summer"] .hero__decor::before {
  background:
    radial-gradient(38% 42% at 96% 4%, rgba(var(--glow), 0.38), transparent 70%),
    radial-gradient(70% 70% at 96% 4%, rgba(var(--glow), 0.12), transparent 80%);
}
/* Осінь: тепле призахідне світло */
[data-theme="autumn"] .hero__decor::before {
  background: radial-gradient(50% 55% at 86% 64%, rgba(var(--glow), 0.24), transparent 70%);
}

@media (max-width: 760px) {
  [data-theme="spring"] .hero__foot,
  [data-theme="autumn"] .hero__foot,
  [data-theme="winter"] .hero__foot { padding-bottom: 112px; }
  .deco--top { width: 76vw; right: -14vw; }
  .deco--side { display: none; }
  .deco--sun { width: 48vw; }
}

/* ============================================================
   СВЯТКОВИЙ ДЕКОР · Новий рік
   Лише з data-decor="newyear" — сама зимова тема без нього.
   ============================================================ */

/* --- Ялинкові іграшки: статично висять з верхнього краю розділу меню, праворуч --- */
.menu__festive {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: var(--container);
  height: 0;
  margin: 0 auto;
  z-index: 1;
  pointer-events: none;
}
.hang {
  position: absolute;
  top: 0;
  width: var(--s);
  display: block;
  padding-top: var(--len);
}
/* нитка */
.hang::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: calc(var(--len) + 2px);
  background: color-mix(in srgb, var(--brass) 70%, transparent);
}
.hang svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18)); }
.bauble__cap { fill: #B8954F; }
.bauble__band { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.4; }
.bauble__shine { fill: rgba(255, 255, 255, 0.45); }
.bauble--red .bauble__ball { fill: #7A2E35; }
.bauble--gold .bauble__ball { fill: #B08D4A; }
.bauble--cream .bauble__ball { fill: #E9DEC6; stroke: rgba(0, 0, 0, 0.08); }
.bauble--cream .bauble__shine { fill: rgba(255, 255, 255, 0.85); }

/* --- День закоханих: сердечка --- */
.heart__body { stroke: rgba(0, 0, 0, 0.08); stroke-width: 0.8; }
.heart--red .heart__body { fill: #8E3540; }
.heart--blush .heart__body { fill: #D9A3A6; }
.heart--cream .heart__body { fill: #C9A65E; }
.heart__shine { fill: rgba(255, 255, 255, 0.45); }

/* --- Великдень: писанки на стрічках --- */
.egg__body { stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.8; }
.egg--sage .egg__body { fill: #9DB394; }
.egg--blush .egg__body { fill: #E3B9BC; }
.egg--cream .egg__body { fill: #F1E7D3; }
.egg__line { fill: none; stroke: #7A2E35; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.egg__dots { fill: none; stroke: #7A2E35; stroke-width: 3; stroke-linecap: round; opacity: 0.75; }
.egg__fillc { fill: #B08D4A; }
.egg__bow { fill: none; stroke: var(--brass); stroke-width: 1.4; stroke-linecap: round; }

/* --- Хелловін: павутинка і павучок --- */
/* кут павутини — в самому куті екрана (поза межами контейнера), під смугою з написами */
.cobweb {
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  width: clamp(110px, 10vw, 160px);
  height: auto;
  overflow: visible;
}
.cobweb__silk { fill: none; stroke: color-mix(in srgb, var(--ink) 26%, transparent); stroke-width: 0.8; stroke-linecap: round; }
.cobweb__thread { fill: none; stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 0.7; }
.cobweb__dew { fill: #FFFFFF; stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-width: 0.5; }
.cobweb .spider__legs path { stroke-width: 1.6; }
.spider svg { filter: none; }
.spider__legs path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.spider__body { fill: var(--ink); }
.spider__eye { fill: #E9C46A; }
.hang.spider::before { background: color-mix(in srgb, var(--ink) 45%, transparent); }

/* --- Композиція біля «Соцмереж» (свята, крім Нового року) --- */
.festive-corner {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  width: clamp(120px, 12vw, 170px);
  pointer-events: none;
}
.festive-corner:empty { display: none; }
.corner-art { display: block; width: 100%; height: auto; overflow: visible; }
.c-shadow { fill: var(--paper-2); }
.pk ellipse { fill: #C26A2C; stroke: rgba(0, 0, 0, 0.16); stroke-width: 0.8; }
.pk .pk-mid { fill: #CF7834; }
.pk .pk-mid2 { fill: #D9853C; }
.pk-stem { fill: none; stroke: #5B4128; stroke-width: 4; stroke-linecap: round; }
.pk--small + .pk-stem { stroke-width: 3; }
.pk-face path { fill: #F6D98B; stroke: #7A3A15; stroke-width: 0.8; }
.v-heart { fill: #8E3540; }
.v-heart-line { fill: none; stroke: #C98A8F; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v-steam { fill: none; stroke: color-mix(in srgb, var(--ink) 28%, transparent); stroke-width: 1.4; stroke-linecap: round; }
.v-saucer { fill: var(--paper-2); stroke: color-mix(in srgb, var(--ink) 25%, transparent); stroke-width: 1; }
.v-cup { fill: #FBF7EF; stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 1.2; }
.v-cup--rose { fill: #D9A3A6; }
.v-handle { fill: none; stroke: #E9E0D2; stroke-width: 4; stroke-linecap: round; }
.v-handle--rose { stroke: #C98A8F; }
.v-coffee { fill: #8A5A3B; }
.e-twig { fill: none; stroke: #6E5440; stroke-width: 2; stroke-linecap: round; }
.e-catkin { fill: #E9E6DF; stroke: rgba(0, 0, 0, 0.12); stroke-width: 0.8; }
.e-egg { stroke: rgba(0, 0, 0, 0.1); stroke-width: 0.8; }
.e-egg--sage { fill: #9DB394; }
.e-egg--blush { fill: #E3B9BC; }
.e-egg--cream { fill: #F1E7D3; }
.e-nest { fill: #A47C55; stroke: #7A5A3A; stroke-width: 1.2; }
.e-nest-lines { fill: none; stroke: #7A5A3A; stroke-width: 1.2; stroke-linecap: round; opacity: 0.8; }

/* --- Ялинка біля «Соцмереж», над підвалом --- */
.contact { position: relative; }
.xmas {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  width: clamp(110px, 12vw, 160px);
  pointer-events: none;
}
[data-decor="newyear"] .xmas { display: block; }
.xmas__tree { display: block; width: 100%; height: auto; overflow: visible; }

.xmas__t1 { fill: color-mix(in srgb, var(--night) 82%, white); }
.xmas__t2 { fill: color-mix(in srgb, var(--night) 90%, white); }
.xmas__t3 { fill: var(--night); }
.xmas__trunk { fill: #5A4130; }
.xmas__snow { fill: var(--paper-2); }
.xmas__wire { fill: none; stroke: #C9A65E; stroke-width: 1; opacity: 0.7; }
.xmas__balls .r { fill: #8E3540; }
.xmas__balls .g { fill: #C9A65E; }
.xmas__balls .c { fill: #F1E8D4; }
.xmas__star { fill: #D9B865; }

/* вогники та зірка — статичні */
.xmas__lights circle { fill: #F6D98B; }
.xmas__lights circle:nth-child(3n) { opacity: 0.55; }
.xmas__halo { opacity: 0.6; }

@media (max-width: 760px) {
  .menu__festive { left: var(--gutter); right: var(--gutter); }
  .xmas { width: 112px; }
  .festive-corner { width: 118px; }
}


/* ---------- Свята в меню: прикраси на лінії заголовків категорій і над першою категорією ----------
   Статично. Хелловін — гарбузи й кажани, Новий рік — подарунки й гірлянда,
   День закоханих — серця й лист, Великдень — писанки й верба.
   Малюнки: images/decor/<свято>-a|b|c|top.svg */
[data-decor="halloween"] { --hd-a: url("../images/decor/halloween-a.svg"); --hd-b: url("../images/decor/halloween-b.svg"); --hd-c: url("../images/decor/halloween-c.svg"); --hd-top: url("../images/decor/halloween-top.svg"); }
[data-decor="newyear"]   { --hd-a: url("../images/decor/newyear-a.svg");   --hd-b: url("../images/decor/newyear-b.svg");   --hd-c: url("../images/decor/newyear-c.svg");   --hd-top: url("../images/decor/newyear-top.svg"); }
[data-decor="valentine"] { --hd-a: url("../images/decor/valentine-a.svg"); --hd-b: url("../images/decor/valentine-b.svg"); --hd-c: url("../images/decor/valentine-c.svg"); --hd-top: url("../images/decor/valentine-top.svg"); }
[data-decor="easter"]    { --hd-a: url("../images/decor/easter-a.svg");    --hd-b: url("../images/decor/easter-b.svg");    --hd-c: url("../images/decor/easter-c.svg");    --hd-top: url("../images/decor/easter-top.svg"); }

:is([data-decor="halloween"], [data-decor="newyear"], [data-decor="valentine"], [data-decor="easter"]) .menu__cat-head { position: relative; }
:is([data-decor="halloween"], [data-decor="newyear"], [data-decor="valentine"], [data-decor="easter"]) .menu__cat-rule { position: relative; }
:is([data-decor="halloween"], [data-decor="newyear"], [data-decor="valentine"], [data-decor="easter"]) .menu__cat-rule::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 150px;
  height: 81px;
  background: var(--hd-a) right bottom / contain no-repeat;
  pointer-events: none;
}
:is([data-decor="halloween"], [data-decor="newyear"], [data-decor="valentine"], [data-decor="easter"]) .menu__cat:nth-child(3n+2) .menu__cat-rule::after {
  width: 94px; height: 72px;
  background-image: var(--hd-b);
}
:is([data-decor="halloween"], [data-decor="newyear"], [data-decor="valentine"], [data-decor="easter"]) .menu__cat:nth-child(3n+3) .menu__cat-rule::after {
  width: 156px; height: 62px;
  background-image: var(--hd-c);
}
:is([data-decor="halloween"], [data-decor="newyear"], [data-decor="valentine"], [data-decor="easter"]) .menu__cat:first-child .menu__cat-head::before {
  content: "";
  position: absolute;
  left: -6px;
  bottom: calc(100% + 2px);
  width: 230px;
  height: 92px;
  background: var(--hd-top) left bottom / contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
/* на телефоні лінії немає — прикраса сідає праворуч від назви категорії */
@media (max-width: 760px) {
  :is([data-decor="halloween"], [data-decor="newyear"], [data-decor="valentine"], [data-decor="easter"]) .menu__cat-head::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 22px;
    width: 92px;
    height: 50px;
    background: var(--hd-a) right bottom / contain no-repeat;
  }
  :is([data-decor="halloween"], [data-decor="newyear"], [data-decor="valentine"], [data-decor="easter"]) .menu__cat:nth-child(3n+2) .menu__cat-head::after { background-image: var(--hd-b); }
  :is([data-decor="halloween"], [data-decor="newyear"], [data-decor="valentine"], [data-decor="easter"]) .menu__cat:nth-child(3n+3) .menu__cat-head::after { background-image: var(--hd-c); }
  :is([data-decor="halloween"], [data-decor="newyear"], [data-decor="valentine"], [data-decor="easter"]) .menu__cat:first-child .menu__cat-head::before { width: 150px; height: 60px; }
}