/* ══════════════════════════════════════════════════════════════════════════
   COOKIE CONSENT — «Печенье в дорогу?» (19 Oct 2026, founder: «design a more
   fun cookies banner, to increase the likeness of them clicking agree»).
   A paper postcard with a cookie in a gold postmark; the brand's little plane
   loops round it once when it arrives. «Принять» stamps «Спасибо!» on it and
   the card flies off; «Только необходимые» lets it slide quietly away.
   Same file on both sites (build/academy/site, build/landing/site): 🔴 change both.

   🔴 EXTERNAL FILE, AND THAT IS NOT A STYLE PREFERENCE.
   The sites send `style-src 'self'` with no 'unsafe-inline'. An inline <style>
   block or a style="" attribute is silently BLOCKED. The script only toggles
   CLASSES; it never writes element.style.

   🔴 AND THE TWO BUTTONS STAY EQUAL.
   Everything fun here is aimed at making agreeing feel friendly and worth it:
   the picture, the words, the arrival, the thank-you. Nothing is aimed at
   making REFUSING harder: same size, same shape, same type, same place, only
   the colour differs, and refusing gets no sad face. Consent pushed out of
   people is not consent (EDPB, Spain's AEPD) and data gathered on it is a
   liability, not an asset. Do not «optimise» that.
   ══════════════════════════════════════════════════════════════════════════ */

.cc {
  /* own colours, so the card looks the same on the document pages */
  --cc-ink: #3A1E2F;
  --cc-ink-soft: #6E4B55;
  --cc-paper: #FEF3EA;
  --cc-gold: #F0B760;
  --cc-gold-lt: #F1D087;
  --cc-gold-ink: #9A630F;
  --cc-plum: #4C1F3C;
  --cc-plum-d: #371536;
  --cc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --cc-sans: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* 29 Oct 2026 (founder: «Legal, more accepts»): a pop-in in the middle of the screen
     instead of the bottom corner. Pop-ins with both buttons get more answers than corner
     cards (Didomi 2025: 52.4 % vs 46.2 %, build/landing/02-conversion-research.md row 922).
     The page waits behind a soft veil until one of the two EQUAL buttons is pressed;
     refusing opens the page just as fast as agreeing, so this is not a cookie wall. */
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: none;
  place-items: center;
  padding: 24px 16px;
  font-family: var(--cc-sans);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cc.is-open { display: grid; }
.cc::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(24, 8, 20, .46);
}
.cc__card { width: min(468px, 100%); box-sizing: border-box; }

/* the page behind stays still while the question is open (class set by consent.js) */
html.cc-lock, html.cc-lock body { overflow: hidden; }

/* ── the card: a postcard on ivory paper ─────────────────────────────────── */
.cc__card {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0 16px;
  padding: 22px 22px 18px 18px;
  border-radius: 18px;
  color: var(--cc-ink);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%),
    url(../assets/img/tex-paper-ivory.webp) 0 0 / 220px 220px,
    var(--cc-paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 0 0 1px rgba(154, 99, 15, .18),
    0 3px 8px rgba(35, 12, 28, .18),
    0 26px 60px rgba(35, 12, 28, .38);
  transform-origin: 50% 100%;
}

/* the card itself takes focus when it opens (screen readers hear it), never a button */
.cc:focus, .cc__card:focus { outline: none; }

/* the postcard's line between picture and words: the words' own left edge */
.cc__words {
  min-width: 0;
  padding-left: 16px;
  border-left: 1.5px dashed rgba(154, 99, 15, .32);
}

/* ── the picture: a cookie in a gold postmark ────────────────────────────── */
.cc__pic {
  position: relative;
  width: 92px;
  height: 92px;
  align-self: start;
}

.cc__ring {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--cc-gold-ink);
}
.cc__ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cc__ring text {
  font-family: var(--cc-sans);
  font-size: 9.6px;
  font-weight: 700;
  letter-spacing: 2.4px;
  fill: currentColor;
}

/* the cookie: a golden biscuit with chocolate chips and one bite gone */
.cc__cookie {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 34%, #4A2516 0 3.4px, transparent 3.9px),
    radial-gradient(circle at 60% 24%, #4A2516 0 2.6px, transparent 3.1px),
    radial-gradient(circle at 72% 58%, #4A2516 0 3.6px, transparent 4.1px),
    radial-gradient(circle at 42% 72%, #4A2516 0 3px, transparent 3.5px),
    radial-gradient(circle at 22% 58%, #5B3020 0 2.2px, transparent 2.7px),
    radial-gradient(circle at 52% 48%, #5B3020 0 1.8px, transparent 2.3px),
    radial-gradient(circle at 36% 30%, #F8D79A 0%, #E2A659 58%, #BE7C34 100%);
  box-shadow:
    inset 0 -3px 6px rgba(110, 55, 15, .38),
    inset 0 2px 3px rgba(255, 244, 214, .7),
    0 5px 10px rgba(70, 30, 10, .28);
  -webkit-mask: radial-gradient(circle at 92% 12%, transparent 0 10px, #000 10.5px);
          mask: radial-gradient(circle at 92% 12%, transparent 0 10px, #000 10.5px);
}

/* the brand's little plane, waiting at the top of the postmark */
.cc__plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  color: var(--cc-plum);
  transform: rotate(0deg) translateY(-56px) rotate(45deg);
  opacity: 0;
}
.cc__plane svg { display: block; width: 100%; height: 100%; }

/* «Спасибо!» — the postmark that lands on «Принять» */
.cc__thanks {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 46px;
  margin: -23px 0 0 -48px;
  display: grid;
  place-items: center;
  border: 2.5px solid currentColor;
  border-radius: 10px;
  color: #B5482F;
  font-family: var(--cc-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(254, 243, 234, .55);
  opacity: 0;
  transform: rotate(-14deg) scale(1.9);
  pointer-events: none;
}

/* crumbs that pop out on «Принять» */
.cc__crumbs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.cc__crumbs i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #D99A4E;
  opacity: 0;
}
.cc__crumbs i:nth-child(2n) { background: #F0B760; width: 5px; height: 5px; border-radius: 50%; }
.cc__crumbs i:nth-child(3n) { background: #6B3A22; width: 4px; height: 4px; }
.cc__crumbs i:nth-child(1) { --cx: -46px; --cy: -38px; --cr: 160deg; }
.cc__crumbs i:nth-child(2) { --cx: 44px;  --cy: -42px; --cr: -120deg; }
.cc__crumbs i:nth-child(3) { --cx: -54px; --cy: 6px;   --cr: 220deg; }
.cc__crumbs i:nth-child(4) { --cx: 56px;  --cy: 10px;  --cr: -200deg; }
.cc__crumbs i:nth-child(5) { --cx: -24px; --cy: -58px; --cr: 90deg; }
.cc__crumbs i:nth-child(6) { --cx: 22px;  --cy: -60px; --cr: -80deg; }
.cc__crumbs i:nth-child(7) { --cx: -36px; --cy: 40px;  --cr: 140deg; }
.cc__crumbs i:nth-child(8) { --cx: 38px;  --cy: 44px;  --cr: -150deg; }

/* ── the words ───────────────────────────────────────────────────────────── */
.cc__ttl {
  font-family: var(--cc-serif);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--cc-ink);
  margin: 2px 0 6px;
}

.cc__txt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--cc-ink-soft);
  margin: 0;
}
.cc__txt a {
  color: var(--cc-gold-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc__txt a:hover { color: var(--cc-ink); }

.cc__btns {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* 🔴 Same flex basis, same height, same font, same radius. Only the colour differs. */
.cc__btn {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 0;
  min-width: 0;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--cc-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition:
    transform .18s cubic-bezier(.32, .72, 0, 1),
    box-shadow .28s cubic-bezier(.32, .72, 0, 1),
    background-color .28s cubic-bezier(.32, .72, 0, 1);
}
.cc__btn--yes {
  background: var(--cc-gold);
  border-color: rgba(154, 99, 15, .35);
  color: var(--cc-plum-d);
  box-shadow: 0 6px 16px rgba(190, 124, 52, .28);
}
.cc__btn--yes:hover { background: var(--cc-gold-lt); box-shadow: 0 10px 22px rgba(190, 124, 52, .34); }
.cc__btn--no {
  background: #FFFDF9;
  border-color: rgba(76, 31, 60, .38);
  color: var(--cc-plum-d);
  box-shadow: 0 6px 16px rgba(35, 12, 28, .12);
}
.cc__btn--no:hover { background: #fff; box-shadow: 0 10px 22px rgba(35, 12, 28, .18); }
.cc__btn:hover  { transform: translateY(-1px); }
.cc__btn:active { transform: translateY(0) scale(.985); }

/* «Принять» in the gold «event» ring (the site's own .event, css/styles.css), drawn by a
   wrapper so the button keeps the same size as the other one. 19 Oct 2026, founder:
   «i need them to press allow». The ring sits OUTSIDE the button: «Только необходимые»
   stays the same size, as readable, in the same place. */
.cc__yes,
.cc__no {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 999px;
}
/* both buttons sit in the same kind of wrapper, so their widths come out equal (a button's own
   padding would otherwise count on one side only) */
.cc__yes .cc__btn,
.cc__no .cc__btn { flex: 1 1 auto; width: 100%; }
.cc__yes .cc__btn { position: relative; overflow: hidden; }
.cc__yes::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 999px;
  background: linear-gradient(135deg, #8D6496 0%, #E3878A 52%, #F0B760 100%);
  opacity: .95;
}
.cc__yes::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -2;
  border-radius: 999px;
  background: linear-gradient(135deg, #8D6496 0%, #E3878A 52%, #F0B760 100%);
  opacity: .32;
  filter: blur(18px);
  transition: opacity .45s cubic-bezier(.32, .72, 0, 1);
}
.cc__yes:hover::after { opacity: .55; }
/* one soft shine across «Принять» after the plane has landed: the eye goes there once */
.cc__yes .cc__btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cc.is-open .cc__yes .cc__btn::after { animation: ccShine 1.1s cubic-bezier(.4, 0, .2, 1) 2.2s both; }
}
@keyframes ccShine {
  0%   { opacity: 0; transform: translateX(-130%) skewX(-18deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(330%) skewX(-18deg); }
}
.cc__btn:focus-visible { outline: 3px solid var(--cc-plum); outline-offset: 3px; }

.cc__note {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cc-ink-soft);
  margin: 10px 0 0;
  text-align: center;
}

/* ── the light version of the site ────────────────────────────────────────
   The same ivory postcard (team pick, 9 Oct: no purple as wallpaper in the light
   version), on whiter paper so it stands off the cream page, with the light
   theme's sunset line along the top. */
html[data-theme="light"] .cc__card {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 60%),
    url(../assets/img/tex-paper-ivory.webp) 0 0 / 220px 220px,
    #FFFBF6;
  box-shadow:
    0 0 0 1px rgba(76, 31, 60, .14),
    0 3px 8px rgba(76, 31, 60, .10),
    0 26px 60px rgba(76, 31, 60, .22);
}
html[data-theme="light"] .cc__card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #8D6496, #E3878A 52%, #F3C27B);
  pointer-events: none;
}

/* ── motion: each part says one thing ──────────────────────────────────────
   arrival: the card rises like a postcard set on the table, the plane loops
   once round the postmark (so the eye finds the card, then the plane rests);
   «Принять»: the thank-you stamp lands, crumbs pop, the card flies off;
   «Только необходимые»: it slides down, nothing else. */
@media (prefers-reduced-motion: no-preference) {
  .cc.is-open .cc__card { animation: ccIn .62s cubic-bezier(.22, 1, .36, 1) both; }
  .cc.is-open .cc__cookie { animation: ccBob 5.6s ease-in-out .9s infinite; }
  .cc.is-open .cc__plane { animation: ccLoop 1.5s cubic-bezier(.45, .05, .25, 1) .55s both; }

  .cc.is-yes .cc__thanks { animation: ccStamp .42s cubic-bezier(.2, 1.4, .4, 1) both; }
  .cc.is-yes .cc__crumbs i { animation: ccCrumb .9s cubic-bezier(.2, .8, .3, 1) .12s both; }
  .cc.is-yes .cc__card { animation: ccAway .62s cubic-bezier(.5, 0, .75, .3) .78s both; }
  .cc.is-no .cc__card { animation: ccDown .34s cubic-bezier(.4, 0, 1, 1) both; }

  /* the veil comes in with the card and lifts when the card leaves */
  .cc.is-open::before { animation: ccVeil .4s ease-out both; }
  .cc.is-yes::before { animation: ccVeilOut .5s ease-in .9s both; }
  .cc.is-no::before { animation: ccVeilOut .34s ease-in both; }
}
@keyframes ccVeil { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccVeilOut { from { opacity: 1; } to { opacity: 0; } }
/* the page is usable again the moment an answer is given, whichever answer */
.cc.is-yes, .cc.is-no { pointer-events: none; }
@keyframes ccIn {
  0%   { opacity: 0; transform: translateY(26px) rotate(-2.2deg) scale(.97); }
  60%  { opacity: 1; transform: translateY(-3px) rotate(.4deg) scale(1.005); }
  100% { opacity: 1; transform: none; }
}
@keyframes ccBob { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-6deg) translateY(-2px); } }
@keyframes ccLoop {
  0%   { opacity: 0; transform: rotate(-360deg) translateY(-56px) rotate(45deg) scale(.6); }
  12%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(0deg) translateY(-56px) rotate(45deg) scale(1); }
}
@keyframes ccStamp {
  0%   { opacity: 0; transform: rotate(-14deg) scale(1.9); }
  100% { opacity: .92; transform: rotate(-14deg) scale(1); }
}
@keyframes ccCrumb {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0) scale(.6); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(1); }
}
@keyframes ccAway {
  0%   { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(70px, -150px) rotate(9deg) scale(.82); }
}
@keyframes ccDown {
  0%   { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(30px); }
}
/* no motion asked for: the plane simply rests on the postmark, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .cc__plane { opacity: 1; transform: rotate(0deg) translateY(-56px) rotate(45deg); }
  .cc.is-yes .cc__thanks { opacity: .92; transform: rotate(-14deg); }
  .cc__btn { transition: background-color .2s linear; }
  .cc__btn:hover, .cc__btn:active { transform: none; }
}

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  /* phones: the card sits low, where the thumb is */
  .cc {
    place-items: end center;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .cc__card {
    grid-template-columns: 70px 1fr;
    gap: 0 12px;
    padding: 16px 16px 14px 12px;
    border-radius: 16px;
  }
  .cc__words { padding-left: 12px; }
  .cc__pic { width: 70px; height: 70px; }
  .cc__cookie { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .cc__plane { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  .cc__thanks { width: 78px; height: 38px; margin: -19px 0 0 -39px; font-size: 14px; }
  .cc__ttl  { font-size: 19px; margin-bottom: 4px; }
  .cc__txt  { font-size: 14.5px; }
  @media (prefers-reduced-motion: no-preference) {
    .cc.is-open .cc__plane { animation-name: ccLoopS; }
  }
  .cc__btns { flex-direction: column; gap: 8px; margin-top: 14px; }
  .cc__btn  { min-height: 50px; font-size: 15px; }
  .cc__note { margin-top: 8px; }
}
@keyframes ccLoopS {
  0%   { opacity: 0; transform: rotate(-360deg) translateY(-43px) rotate(45deg) scale(.6); }
  12%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(0deg) translateY(-43px) rotate(45deg) scale(1); }
}
@media (max-width: 620px) and (prefers-reduced-motion: reduce) {
  .cc__plane { transform: rotate(0deg) translateY(-43px) rotate(45deg); }
}

/* ── the "change your choice" control on the document pages ─────────────── */
.cc-reopen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cc-reopen:focus-visible { outline: 2px solid #F1D087; outline-offset: 2px; }