/* =====================================================================
   promotion-v2.html – #9AniDeBunȘiBine (6–7 Nov 2026), loaded after promo.css.
   The hero is the marketing key visual rebuilt from its layers and animated:
     phone / tablet  -> portrait artboard 1080 x 1350  (9 ani anniversary.png)
     >= 1000px       -> landscape artboard 1600 x 497  (102026_Cover promo.png)
   Every hero size is in artboard pixels: calc(N * var(--u)), so it scales like the image.
   Layers: individual `translate` = mouse parallax, `rotate` = static tilt,
           `transform` = idle float, `opacity`/`scale` = entrance.
   ===================================================================== */
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("../fonts/poppins-latin-800.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("../fonts/poppins-latin-ext-800.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

.v2 { --pink: #ff4b76; --pink-dark: #e0305c; --mint: #c3f2e7; --mint-2: #b5e9dc; --poppins: "Poppins", "Roboto", system-ui, sans-serif; }

/* ---------------------------------------------------------------- hero */
.kv {
  position: relative; overflow: hidden;            /* clips the hot-air balloon's cut top edge */
  background: linear-gradient(180deg, #a5c6e8 0%, #b3cdea 42%, rgba(200, 200, 230, 0) 72%), #f2b9b4 url("../img/promo-v2/sky-m.webp") center bottom / cover no-repeat;
}
.kv-stage {
  position: relative; margin: 0 auto; width: min(100%, 640px); aspect-ratio: 1080 / 1350;
  container-type: inline-size; --u: calc(100cqw / 1080); --H: 1350;
  --mx: 0; --my: 0;
}
.kv-sky { position: absolute; inset: 0; background: radial-gradient(50% 32% at 50% 26%, rgba(255, 255, 255, .22), transparent 70%); }
.kv-el { position: absolute; display: block; pointer-events: none; user-select: none;
  translate: calc(var(--mx) * var(--d, 0) * -3 * var(--u)) calc(var(--my) * var(--d, 0) * -1.5 * var(--u));
  transition: translate .9s cubic-bezier(.2, .7, .3, 1); }
.kv-el img { display: block; width: 100%; height: auto; }
.hang img { max-width: none; }
.p { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }

/* hot-air balloon – the envelope is cut flat at the top of the asset (Element_-02).
   Its top MUST stay < 0 in every layout (and nothing animates it downwards), so the cut never shows. */
.hot-air { --x: 52; --y: -150; --w: 952; transform-origin: 50% 0; animation: hot-sway 9s ease-in-out infinite; }
.hot-air img { animation: hot-rise 2.4s cubic-bezier(.2, .8, .25, 1) both; }

.confetti { opacity: .4; animation: twinkle 7s ease-in-out infinite, fade-in 1.6s ease .6s both; }
.c1 { --x: 560; --y: -60; --w: 520; }
.c2 { --x: -60; --y: 720; --w: 420; opacity: .45; animation-delay: -3s, .9s; }
.bl-extra { --x: -150; --y: 30; --w: 330; rotate: 14deg; animation: float 7s ease-in-out infinite, pop-in 1s ease .3s both; }
.gift { display: none; animation: float 6.5s ease-in-out infinite, pop-in 1s cubic-bezier(.2, 1.4, .4, 1) both; }

/* balloons with a product hanging under them: .hang sits on the knot */
.hang { width: 0; height: 0; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); animation: hang-float 6s ease-in-out infinite; transform-origin: 0 0; }
.hang .hang-balloons { position: absolute; bottom: 0; width: calc(var(--bw) * var(--u)); left: calc(var(--bw) * -.43 * var(--u)); transform-origin: 43% 100%; rotate: var(--lean); animation: pop-in 1s cubic-bezier(.2, 1.4, .4, 1) .5s both; }
.hang .hang-item { position: absolute; top: calc(-4 * var(--u)); width: calc(var(--iw) * var(--u)); left: calc(var(--iw) * -.47 * var(--u)); transform-origin: 47% 0; animation: swing 4.5s ease-in-out infinite, drop-in 1.3s cubic-bezier(.2, 1.3, .4, 1) .9s both; filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(120, 50, 70, .22)); }
.hang-l { --x: 205; --y: 1022; --bw: 400; --iw: 265; --lean: -8deg; }
.hang-r { --x: 962; --y: 402; --bw: 230; --iw: 165; --lean: 5deg; animation-delay: -2.5s; }
.hang-r .hang-item { animation-delay: -1.8s, 1.1s; }

.mascot { --x: 745; --y: 625; --w: 250; transform-origin: 62% 100%; animation: mascot-sway 3.2s ease-in-out infinite; }
.mascot img { animation: pop-in 1s cubic-bezier(.2, 1.5, .4, 1) 1.2s both; }

/* falling confetti (generated in js/promo-v2.js) */
.kv-fall { position: absolute; inset: 0; overflow: hidden; }
.kv-fall i { position: absolute; z-index: 0; top: -4%; left: var(--l); width: calc(var(--s) * var(--u)); height: calc(var(--s) * .45 * var(--u)); background: var(--c); border-radius: 2px; opacity: .85; animation: fall var(--t) linear var(--dl) infinite; }
.kv-fall i:nth-child(3n) { height: calc(var(--s) * var(--u)); border-radius: 50%; }

/* text */
.kv-text { position: absolute; text-align: center; color: #fff; font-family: var(--poppins); font-weight: 500; }
.kv-text p, .kv-text h1 { margin: 0; }
.kv-line { display: block; text-shadow: 0 .06em .4em rgba(150, 45, 80, .38); animation: rise-in .8s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--s, .2s); }
.ta { left: calc(90 * var(--u)); top: calc(98 * var(--u)); width: calc(900 * var(--u)); }
.tb { left: calc(225 * var(--u)); top: calc(1100 * var(--u)); width: calc(700 * var(--u)); }
.l1 { font-size: calc(40 * var(--u)); line-height: calc(64 * var(--u)); --s: .3s; }
.kv-tag img { height: auto; width: calc(565 * var(--u)); margin: calc(14 * var(--u)) auto calc(6 * var(--u)); filter: brightness(0) invert(1) drop-shadow(0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(90, 30, 50, .45)); animation: tag-in 1s cubic-bezier(.2, 1.5, .4, 1) .7s both; }
.kv-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--u)); }
.r1 .kv-line { font-size: calc(40 * var(--u)); line-height: 1.2; --s: 1s; }
.l2 { font-size: calc(38 * var(--u)); line-height: calc(44 * var(--u)); margin-top: calc(16 * var(--u)) !important; --s: 1.5s; }
.r2 { flex-direction: row; }
.r2 .kv-line { font-size: calc(40 * var(--u)); --s: 1.8s; }
.l3 { font-size: calc(38 * var(--u)); margin-top: calc(4 * var(--u)) !important; --s: 2s; }

.pill { position: relative; display: inline-block; overflow: hidden; pointer-events: auto; text-decoration: none; color: var(--pink); font-family: var(--poppins); font-weight: 800; letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--mint-2), var(--mint) 70%, #d3f8ef); border-radius: 999px; box-shadow: 0 .08em .3em rgba(80, 40, 60, .16), inset 0 -.05em 0 rgba(255, 255, 255, .6);
  font-size: calc(92 * var(--u)); line-height: 1.12; padding: 0 .52em; animation: pill-in .9s cubic-bezier(.2, 1.6, .4, 1) 1.2s both, pulse 3.2s ease-in-out 2.6s infinite; }
.pill span { position: relative; z-index: 1; }
.pill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); translate: -120% 0; animation: shine 3.2s ease-in-out 2.6s infinite; }
.pill:hover { color: var(--pink-dark); }
.pill-15 { font-size: calc(72 * var(--u)); padding: 0 .36em; animation-delay: 1.9s, 3.4s; }
.pill-15::after { animation-delay: 3.4s; }

/* landscape artboard */
@media (min-width: 1000px) {
  .kv { background: #f6c6a8 url("../img/promo-v2/sky.webp") center / cover no-repeat; }
  .kv-stage { width: min(100%, 1920px); aspect-ratio: 1600 / 497; --u: calc(100cqw / 1600); --H: 497; }
  .kv-sky { background: radial-gradient(28% 50% at 50% 50%, rgba(255, 235, 225, .35), transparent 75%); }
  .hot-air { --x: 100; --y: -132; --w: 480; }             /* top stays < 0 */
  .c1 { --x: 420; --y: 10; --w: 360; opacity: .55; }
  .c2 { --x: 1090; --y: -40; --w: 520; opacity: .55; }
  .bl-extra { --x: -95; --y: -125; --w: 200; rotate: 12deg; }
  .gift { display: block; }
  .g1 { --x: 452; --y: 182; --w: 112; animation-delay: -1s, .8s; }
  .g2 { --x: 1180; --y: 192; --w: 112; animation-delay: -3.4s, 1.3s; }
  .hang-l { --x: 112; --y: 300; --bw: 175; --iw: 118; --lean: -10deg; }
  .hang-r { --x: 1458; --y: 292; --bw: 185; --iw: 125; --lean: 6deg; }
  .mascot { --x: 1012; --y: 42; --w: 115; }
  .ta { left: calc(520 * var(--u)); top: calc(80 * var(--u)); width: calc(560 * var(--u)); }
  .tb { left: calc(520 * var(--u)); top: calc(348 * var(--u)); width: calc(560 * var(--u)); }
  .l1 { font-size: calc(24 * var(--u)); line-height: calc(33 * var(--u)); }
  .kv-tag img { width: calc(376 * var(--u)); margin: calc(8 * var(--u)) auto calc(6 * var(--u)); filter: drop-shadow(0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(255, 255, 255, .5)); }
  .kv-row { flex-direction: row; gap: calc(12 * var(--u)); }
  .r1 .kv-line, .r2 .kv-line { font-size: calc(24 * var(--u)); }
  .l2 { font-size: calc(24 * var(--u)); line-height: calc(33 * var(--u)); margin-top: calc(6 * var(--u)) !important; }
  .l3 { font-size: calc(24 * var(--u)); margin-top: calc(6 * var(--u)) !important; }
  .pill, .pill-15 { font-size: calc(38 * var(--u)); padding: 0 .45em; }
}

/* hero texts from marketing (2026-11-05): kicker + hashtag + two bubbles + two CTAs, in the same slots */
.bubbles { display: flex; justify-content: center; align-items: center; gap: calc(34 * var(--u)); margin-top: calc(22 * var(--u)); }
.bubble { --bs: 200; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; text-align: center;
  width: calc(var(--bs) * var(--u)); height: calc(var(--bs) * var(--u)); border-radius: 50%; pointer-events: auto;
  background: radial-gradient(circle at 34% 28%, #f2fffb 0 12%, var(--mint) 45%, var(--mint-2) 100%);
  box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(120, 40, 70, .22), inset 0 calc(-6 * var(--u)) calc(14 * var(--u)) rgba(60, 150, 130, .18);
  animation: pill-in .9s cubic-bezier(.2, 1.6, .4, 1) var(--in, 1.2s) both, bob 4.5s ease-in-out var(--bob, 0s) infinite; }
.bubble strong { position: relative; z-index: 1; color: var(--pink); font-weight: 800; font-size: calc(var(--bs) * .3 * var(--u)); line-height: 1; letter-spacing: -.02em; }
.bubble span { position: relative; z-index: 1; color: #b72a55; font-weight: 600; font-size: max(11px, calc(var(--bs) * .09 * var(--u))); line-height: 1.2; margin-top: calc(var(--bs) * .03 * var(--u)); max-width: 80%; }
.bubble::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%); translate: -120% 0; animation: shine 3.6s ease-in-out var(--shine, 2.6s) infinite; }
.bubble:hover strong { color: var(--pink-dark); }
.b15 { --bs: 200; --in: 1.2s; --bob: -1.5s; --shine: 3.4s; }
.b30 { --bs: 270; --in: 1.5s; --shine: 2.6s; }
.kv-cta { display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--u)); left: calc(325 * var(--u)); width: calc(440 * var(--u)); top: calc(1130 * var(--u)); }   /* phone: stacked between the hummus and the mascot */
.kv-btn { pointer-events: auto; text-decoration: none; font-family: var(--poppins); font-weight: 600; font-size: calc(31 * var(--u)); line-height: 1; padding: .72em 1.15em; border-radius: 999px;
  background: var(--pink); color: #fff; box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(160, 30, 70, .3); transition: transform .2s, background .2s;
  animation: rise-in .8s cubic-bezier(.2, .8, .3, 1) 1.9s both; }
.kv-btn:hover { background: var(--pink-dark); transform: rotate(-2deg) scale(1.03); }
.kv-btn-alt { background: #fff; color: var(--pink); animation-delay: 2.05s; }
.kv-btn-alt:hover { background: #fff; color: var(--pink-dark); }
@media (min-width: 1000px) {
  .bubbles { gap: calc(22 * var(--u)); margin-top: calc(10 * var(--u)); }
  .b15 { --bs: 128; }
  .b30 { --bs: 168; }
  .kv-cta { flex-direction: row; justify-content: center; gap: calc(16 * var(--u)); left: calc(450 * var(--u)); width: calc(700 * var(--u)); top: calc(388 * var(--u)); }
  .kv-btn { font-size: calc(20 * var(--u)); }
}

@keyframes hot-rise { from { transform: translateY(12%); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
@keyframes hot-sway { 0%, 100% { transform: translateY(0) rotate(-.8deg); } 50% { transform: translateY(-1.2%) rotate(.8deg); } }   /* only upwards */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes hang-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(calc(-14 * var(--u))) rotate(1.5deg); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-10 * var(--u)); } }
@keyframes swing { 0%, 100% { rotate: 3deg; } 50% { rotate: -3deg; } }
@keyframes mascot-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-1.5%); } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.04) rotate(1.5deg); } }
@keyframes fall { from { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(calc(var(--sw) * var(--u)), calc(var(--H) * .55 * var(--u)), 0) rotate(240deg); } to { transform: translate3d(0, calc(var(--H) * 1.1 * var(--u)), 0) rotate(520deg); } }
@keyframes pop-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes drop-in { from { opacity: 0; translate: 0 -40%; } to { opacity: 1; translate: 0 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
@keyframes tag-in { from { opacity: 0; scale: .5; rotate: -6deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes pill-in { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes pulse { 0%, 80%, 100% { scale: 1; } 88% { scale: 1.08; } }
@keyframes shine { 0%, 70% { translate: -120% 0; } 100% { translate: 120% 0; } }

/* ---------------------------------------------------------------- page accents */
.v2 .offer-head h2 .hl-orange { color: var(--ink); }
.rest { padding: 54px 0 40px; }
.rest-inner { display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap; text-align: left; }
.rest h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.rest p { color: var(--ink-soft); margin: 6px 0 18px; max-width: 520px; }
.pill-big { font-size: clamp(3.4rem, 9vw, 6rem); padding: 0 .4em; rotate: -4deg; animation: pulse 3.2s ease-in-out infinite; }
.pill-big::after { animation: shine 3.2s ease-in-out infinite; }
.btn-pink { background: var(--pink); }
.btn-pink:hover { background: var(--pink-dark); }

@media (max-width: 620px) {
  .rest-inner { text-align: center; }
  .rest .closing-links { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-fall { display: none; }
  .kv-el { transition: none; }
}
.topbar .tb-txt { display: inline; }

/* header logos (option B): BERT is as tall as the RAWCKERS letters and sits on that text band;
   the Rawckers leaf rises above it as an accent. Everything scales from --lh (Rawckers height). */
/* logo group on the left, CTA on the right; logos vertically centred between the green wave and the hero
   (the topbar wave hangs 17px into the header, hence the larger top padding) */
.v2 .site-header { padding: calc(17px + 16px) 0 16px; }
.v2 .header-inner { display: flex; align-items: center; --lh: 52px; }
.v2 .logos { display: flex; align-items: flex-start; gap: 22px; }
.v2 .logo-rawckers { height: var(--lh); width: auto; }
.v2 .logo-bert { height: calc(var(--lh) * .54); width: auto; margin-top: calc(var(--lh) * .46); }
@media (max-width: 620px) { .v2 .site-header { padding: calc(17px + 12px) 0 12px; } .v2 .header-inner { --lh: 38px; gap: 12px; } .v2 .logos { gap: 16px; } }

/* promotion date right under the hero (marketing request) */
.v2 .offer .validity { margin: 0 0 22px; }

/* closing: "9 motive să ne alegi!" (marketing copy) */
.v2 .closing-inner { max-width: 820px; }
.v2 .reasons { list-style: none; margin: 22px 0 30px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px 26px; }
.v2 .reasons li { display: flex; align-items: center; gap: 14px;
  font-weight: 700; font-size: 1.02rem; line-height: 1.25; letter-spacing: .01em; }
.v2 .reasons .ri { flex: none; width: 52px; height: 52px; padding: 11px; border-radius: 50%;
  background: #fff; color: var(--green-ink); transform: rotate(-5deg); box-shadow: 0 3px 0 rgba(0,0,0,.08); }
.v2 .reasons li:nth-child(even) .ri { transform: rotate(4deg); }