/* Premium layer: glass cards, gold light and soft glows over the base menu styles. Loaded after main.css. */

/* Film grain over the chocolate page, very faint */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { scrollbar-color: #4A3A2C var(--cream); }

/* Gold type */
.eyebrow { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; }
html[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; }
.hero__w2, .hero__w3, .tea-card__price b, .set-card__price b {
  background: linear-gradient(110deg, #9C7A3C 0%, #F1D79A 30%, #C9A45C 50%, #F1D79A 70%, #9C7A3C 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead strong { color: var(--ink); }

/* Buttons: gold pills with a passing sheen */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.4s var(--ease), transform 0.3s var(--ease); }
.btn--primary, .btn--dark {
  background: var(--gold-grad);
  color: var(--on-clay);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgb(241 215 154 / 0.25) inset, 0 14px 32px -16px rgb(201 164 92 / 0.65);
}
.btn--primary:hover, .btn--dark:hover {
  background: var(--gold-grad);
  box-shadow: 0 0 0 1px rgb(241 215 154 / 0.45) inset, 0 18px 44px -14px rgb(221 187 116 / 0.8);
}
.btn--primary::after, .btn--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgb(255 248 230 / 0.55) 50%, transparent 65%);
  translate: -110% 0;
  transition: translate 0.9s var(--ease);
}
.btn--primary:hover::after, .btn--dark:hover::after { translate: 110% 0; }
.btn--line, .btn--paper, .btn--ghost {
  background: rgb(255 236 200 / 0.05);
  color: var(--ink);
  border-color: rgb(201 164 92 / 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--line:hover, .btn--paper:hover, .btn--ghost:hover {
  background: rgb(201 164 92 / 0.12);
  color: var(--ink);
  border-color: var(--clay);
  box-shadow: 0 0 24px -6px rgb(201 164 92 / 0.45);
}
.set-card__add[aria-pressed="true"] { background: var(--gold-grad); color: var(--on-clay); }
.badge--leaf { background: rgb(95 111 62 / 0.85); }
.badge--honey { color: var(--on-clay); }
.badge--dark { background: rgb(12 9 7 / 0.7); color: var(--ink); border: 1px solid rgb(201 164 92 / 0.3); }

/* Header: glass over the page */
.header { background: color-mix(in srgb, var(--cream) 55%, transparent); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom-color: transparent; }
.header::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(201 164 92 / 0.5), transparent); opacity: 0; transition: opacity 0.4s var(--ease); }
.header.is-stuck::after { opacity: 1; }
.header.is-stuck { background: color-mix(in srgb, var(--cream) 62%, transparent); border-bottom-color: transparent; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.nav a { transition: color 0.25s; }
.nav a:hover { color: var(--clay-hover); }
.langs a[aria-current] { background: var(--gold-grad); color: var(--on-clay); }
.hero__where { background: rgb(20 16 13 / 0.55); border-color: rgb(201 164 92 / 0.3); }

/* Glass surfaces: one look for every card on the page */
.tea-card, .steps li, .review, .faq details, .quiz__root, .order, .visit__card, .partner__link, .quiz__option {
  background: var(--glass), var(--card);
  border: 1px solid rgb(201 164 92 / 0.14);
  box-shadow: 0 1px 0 rgb(255 236 200 / 0.05) inset, var(--shadow-card);
}
.tea-card, .steps li, .review, .visit__card, .partner__link, .set-card { position: relative; isolation: isolate; }

/* Spotlight that follows the pointer (fx.js writes --mx / --my) */
:is(.tea-card, .steps li, .review, .visit__card, .partner__link, .set-card)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), rgb(221 187 116 / 0.13), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
:is(.tea-card, .steps li, .review, .visit__card, .partner__link, .set-card):hover::after { opacity: 1; }
.tea-card > *, .steps li > *, .review > *, .partner__link > * { position: relative; z-index: 1; }

.tea-card { transition: box-shadow 0.5s var(--ease), translate 0.5s var(--ease), border-color 0.5s var(--ease); }
.tea-card__photo { transition: scale 1.1s var(--ease), filter 0.8s var(--ease); filter: saturate(0.95) brightness(0.94); }
.tea-card:hover .tea-card__photo { scale: 1.06; filter: saturate(1.05) brightness(1); }
.tea-card.is-chosen { border-color: var(--clay); box-shadow: var(--glow); }
.tea-card__add {
  background: var(--gold-grad);
  color: var(--on-clay);
  box-shadow: 0 0 0 1px rgb(241 215 154 / 0.3) inset, 0 8px 22px -8px rgb(201 164 92 / 0.7);
  transition: box-shadow 0.3s var(--ease), scale 0.3s var(--ease), rotate 0.4s var(--ease);
}
.tea-card__add:hover { background: var(--gold-grad); scale: 1.08; box-shadow: 0 0 0 1px rgb(241 215 154 / 0.5) inset, 0 0 26px -2px rgb(221 187 116 / 0.75); }
.tea-card__add[aria-pressed="true"] { background: var(--gold-grad); }
.tea-filters button { transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.tea-filters button:hover { border-color: var(--clay); }
.tea-filters button[aria-pressed="true"] { background: var(--gold-grad); border-color: transparent; color: var(--on-clay); box-shadow: 0 8px 22px -10px rgb(201 164 92 / 0.7); }

/* Kinds bento */
.kind__link { box-shadow: 0 0 0 1px rgb(201 164 92 / 0.12) inset; transition: box-shadow 0.5s var(--ease); }
.kind__link:hover { box-shadow: 0 0 0 1px rgb(201 164 92 / 0.5) inset, 0 20px 50px -24px rgb(201 164 92 / 0.5); }
.kind__photo { transition: scale 1.2s var(--ease); }
.kind__icon { background: rgb(20 16 13 / 0.45); border: 1px solid rgb(241 215 154 / 0.3); }
.kind--big .kind__more { background: var(--gold-grad); color: var(--on-clay); }

/* Tasting sets */
.set-card { box-shadow: 0 0 0 1px rgb(201 164 92 / 0.18) inset; }
.set-card.is-chosen { box-shadow: inset 0 0 0 2px var(--clay), var(--glow); }
.set-card__list img { box-shadow: 0 0 0 2px rgb(201 164 92 / 0.35); }
.slider__arrow { border-color: rgb(201 164 92 / 0.4); background: rgb(20 16 13 / 0.45); color: var(--ink); transition: background-color 0.3s, box-shadow 0.3s, scale 0.2s; }
.slider__arrow:hover { background: rgb(201 164 92 / 0.2); box-shadow: 0 0 22px -4px rgb(201 164 92 / 0.6); }
.slider__dots button[aria-current="true"] { background: var(--clay); }

/* Steps, reviews, FAQ */
.steps li::before { background: var(--gold-grad); box-shadow: 0 0 0 6px rgb(201 164 92 / 0.08), 0 10px 26px -10px rgb(201 164 92 / 0.7); }
.steps li, .review, .faq details { transition: border-color 0.4s var(--ease), translate 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.steps li:hover, .review:hover, .faq details:hover { border-color: rgb(201 164 92 / 0.4); }
.faq details[open] { border-color: rgb(201 164 92 / 0.35); }
.quiz__option:hover, .quiz__option[aria-pressed="true"] { border-color: var(--clay); box-shadow: 0 0 22px -8px rgb(201 164 92 / 0.6); }

/* «Приходите за чаем» and partners: glass with gold edges, a halo under the globe */
.visit__card { border-color: rgb(201 164 92 / 0.22); }
.visit__pin { background: rgb(20 16 13 / 0.6); color: var(--ink); border: 1px solid rgb(201 164 92 / 0.35); }
.visit__icon { position: relative; background: rgb(201 164 92 / 0.08); border-color: rgb(201 164 92 / 0.35); color: var(--clay); }
.globe { transition: filter 0.4s var(--ease); }
:is(a, button, .visit__pin, .visit__facts div):hover .globe { filter: drop-shadow(0 0 6px rgb(241 215 154 / 0.85)); }
.partner__link { transition: border-color 0.4s var(--ease), box-shadow 0.5s var(--ease), translate 0.5s var(--ease); }
.partner__link:hover { border-color: rgb(201 164 92 / 0.55); box-shadow: 0 0 0 1px rgb(201 164 92 / 0.15) inset, 0 18px 40px -22px rgb(201 164 92 / 0.55); }

/* Form */
.field input, .field select, .field textarea { background: rgb(12 9 7 / 0.45); color: var(--ink); border-color: var(--line); transition: border-color 0.3s, box-shadow 0.3s; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--clay); box-shadow: 0 0 0 4px rgb(201 164 92 / 0.15); }
.field input::placeholder, .field textarea::placeholder { color: #7D6C5D; }
.lead-form__error { background: rgb(229 115 95 / 0.1); }

/* Footer, floating order button, cookie */
.footer { border-top: 1px solid rgb(201 164 92 / 0.16); }
.cart-fab { box-shadow: 0 14px 34px -10px rgb(201 164 92 / 0.7); }
.cart-fab__count { background: var(--btn-dark); color: var(--clay-hover); }
.tg-fab { border: 1px solid rgb(201 164 92 / 0.35); box-shadow: 0 14px 34px -12px rgb(201 164 92 / 0.55); }
.tg-fab:hover { box-shadow: 0 18px 40px -10px rgb(201 164 92 / 0.8); }
.tg-fab:hover .tg-fab__icon { background: var(--clay-hover); }
.cookie { border: 1px solid rgb(201 164 92 / 0.25); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgb(14 11 9 / 0.85); }

@media (prefers-reduced-motion: no-preference) {
  .hero__w2, .hero__w3 { animation: gold-shimmer 9s ease-in-out infinite alternate; }
  .visit__icon::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgb(201 164 92 / 0.6); animation: halo 2.8s var(--ease) infinite; }
  .partner__link:hover, .steps li:hover, .review:hover { translate: 0 -3px; }
  .tea-card:hover { translate: 0 -5px; border-color: rgb(201 164 92 / 0.45); box-shadow: 0 0 0 1px rgb(201 164 92 / 0.12) inset, 0 28px 50px -28px rgb(201 164 92 / 0.55); }
  .tea-card__add[aria-pressed="true"] { rotate: 360deg; }

  /* Sections drift in from a soft blur (fx.js adds the classes). No scroll anchoring on them: the moving translate would
     nudge the page and break the language switch that keeps the reader in place. */
  .js .fx-reveal { opacity: 0; translate: 0 18px; filter: blur(6px); overflow-anchor: none; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease), filter 0.9s var(--ease); transition-delay: calc(var(--fx-i, 0) * 70ms); }
  .js .fx-reveal.is-in { opacity: 1; translate: none; filter: none; }

  /* Warm light that trails the pointer across the hero */
  .hero::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(28rem circle at var(--hx, 30%) var(--hy, 40%), rgb(201 164 92 / 0.12), transparent 65%); transition: background-position 0.2s; }
}
@keyframes gold-shimmer { to { background-position: 100% 0; } }
@keyframes halo { 0% { scale: 1; opacity: 0.8; } 100% { scale: 1.7; opacity: 0; } }