/* Electric Spring 27 — landing (RO + RU)
   Built from Figma "ES27 — Desktop 1440" (node 18:167) and "ES27 — Mobile 390" (node 19:222).
   All sizes are Figma px multiplied by --u, so the layout scales with the viewport:
   desktop: 1u = 0.88px at 1440 wide (never larger), mobile: 1u = 1px at 390 wide.

   Both pages draw their copy as outlined SVGs. The Russian page (/ru/) uses the -ru SVGs
   (ticket cards, buttons, sticker, "why now", "stay tuned"); the copy that has no -ru SVG yet
   (tickets lead line, footer label, privacy link) is live text in Exo 2 — see "Russian page" below. */

/* Montserrat (SIL OFL, self-hosted: no requests to Google) — footer link and privacy page */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat/Montserrat-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Syncopate";
  src: url("../assets/fonts/Syncopate/Syncopate-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Syncopate";
  src: url("../assets/fonts/Syncopate/Syncopate-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
/* Exo 2 (SIL OFL, self-hosted) is defined in fonts-ru.css, linked only from the Russian page */

:root {
  --red: #ff0000;
  --black: #000;
  --white: #fff;
  --font: "Syncopate", "Arial Black", sans-serif;
  --font-ru: "Exo 2", "Arial Narrow", Arial, sans-serif;
  /* dark text on the red ticket cards (Figma: #870000 → #000, top to bottom) */
  --ink: linear-gradient(180deg, #870000 0%, #000 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-weight: 700;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: none; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; font-weight: 700; }
a { color: inherit; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.page {
  container-type: inline-size;
  overflow: hidden;
}
/* desktop unit: drawn at 88% of the Figma artboard (1u = 0.88px at 1440 wide) */
.page > *, .page main > * { --u: calc(.88 * min(1px, 100cqw / 1440)); }

/* ---------- Ticker ---------- */
.ticker {
  --h: 24;
  --gap: 56;
  --speed: 38s;
  display: flex;
  align-items: center;
  height: calc(62 * var(--u));
  overflow: hidden;
  background: var(--red);
}
/* the bird sits on top of the strip, so let it overflow upwards (still clipped left/right) */
.ticker--bird {
  --h: 17.913;
  --gap: 64;
  --speed: 32s;
  position: relative;
  z-index: 2;
  overflow: visible;
  overflow-x: clip;
}
.ticker__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--gap) * var(--u));
  padding-right: calc(var(--gap) * var(--u));
  animation: ticker var(--speed) linear infinite;
  will-change: transform;
}
.ticker__track--reverse { animation-direction: reverse; }
.ticker__track > img { height: calc(var(--h) * var(--u)); width: auto; flex: none; }
/* item that carries the bird (Figma "Frame 36": bird 150×150 at x 43.51, 5.52 above the 341.77×17.91 text) */
.ticker__item { position: relative; flex: none; }
.ticker__item > img:first-child { height: calc(var(--h) * var(--u)); width: auto; }
.ticker__bird {
  position: absolute;
  left: calc(43.51 / 341.77 * 100%);
  bottom: calc(100% + 5.52 / 17.913 * 100%);
  width: calc(150 / 341.77 * 100%);
  cursor: pointer;
  transform-origin: 50% 100%;
}
.ticker__bird img { display: block; width: 100%; height: auto; transition: opacity .3s ease; }
/* hover "flinch": sprite layer over the static bird (js/main.js plays it) */
.ticker__bird-anim {
  position: absolute;
  inset: 0;
  background: var(--flinch-sprite, none) 0 0 / 1000% 800% no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.ticker__bird.is-flinching img { opacity: 0; transition: none; }
.ticker__bird.is-flinching .ticker__bird-anim { opacity: 1; transition: none; }
/* hand-back: bird.webp appears fully opaque UNDER the last frame, then only the sprite fades out
   (fading both at once made the bird half-transparent for a moment — a visible flicker) */
.ticker__bird.is-flinching.is-settling img { opacity: 1; transition: none; }
.ticker__bird.is-flinching.is-settling .ticker__bird-anim { opacity: 0; transition: opacity .35s ease; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Hero ---------- */
/* Desktop: the first screen (top strip + hero + "early bird" strip, 872.37 Figma px)
   fills exactly the browser height. On a short window the unit shrinks so it all fits;
   on a tall one the hero grows and its content stays centred. */
@media (min-width: 768px) {
  .page > .ticker, .page > .hero {
    --u: min(calc(.88 * min(1px, 100cqw / 1440)), 100vh / 872.37);
    --u: min(calc(.88 * min(1px, 100cqw / 1440)), 100svh / 872.37);
  }
  .hero {
    height: calc(100vh - 124 * var(--u));
    height: calc(100svh - 124 * var(--u));
    justify-content: center;
  }
}
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(57 * var(--u));
  padding: calc(83 * var(--u)) 0;
}
.hero__partners { width: calc(300 * var(--u)); height: auto; }
.hero__logo { position: relative; z-index: 0; }
.hero__logo img { width: calc(1160 * var(--u)); height: auto; }
.hero__partners, .hero__btn { position: relative; z-index: 1; }
/* glow behind the logo (Figma "grad": red + white radial, centred on the logo) */
.hero__logo .hero__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: calc(1306.24 * var(--u));
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .74;
  pointer-events: none;
}
/* "cumpără bilet" under the logo: smooth-scrolls to the tickets (js/main.js) */
.hero__btn {
  display: block;
  width: calc(257.32 * var(--u));
  border-radius: 999px;
  transition: transform .25s ease, filter .25s ease;
}
.hero__btn img { width: 100%; height: auto; }
.hero__btn:hover, .hero__btn:focus-visible {
  transform: scale(1.04);
  filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(255, 255, 255, .55));
}
.hero__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.hero__btn:active { transform: scale(.97); }

/* language switch (top right of the first screen) */
.lang {
  position: absolute;
  top: calc(22 * var(--u));
  right: calc(32 * var(--u));
  z-index: 3;
  display: flex;
  gap: 4px;
  font: 400 max(12px, calc(15 * var(--u))) / 1 "Montserrat", Arial, sans-serif;
  letter-spacing: .08em;
}
.lang a {
  display: block;
  padding: .55em .8em;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.lang a:hover { border-color: var(--white); }
.lang a[aria-current="page"] { background: var(--red); border-color: var(--red); }
.lang a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ---------- Title ---------- */
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(88 * var(--u));
  padding: calc(112 * var(--u)) 0;
}
.title__fyh { width: calc(786 * var(--u)); height: auto; }
.title__date { width: calc(790.8 * var(--u)); height: auto; }

/* ---------- Tickets ---------- */
.tickets {
  position: relative;
  height: calc(1252.14 * var(--u));
  overflow: hidden;
}
.tickets:focus { outline: none; }   /* focused by the scroll links, not a control */
.tickets__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(1440 * var(--u));
  height: 100%;
  margin-left: calc(-720 * var(--u));
}
.tickets__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* softens the dark vignette of the key visual: a faint red glow, screen-blended over it */
.tickets__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 54% at 52% 52%,
    rgba(150, 0, 0, .42) 0%, rgba(120, 0, 0, .3) 45%, rgba(70, 0, 0, .14) 75%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Card — the Figma ticket component is drawn at 3130 px wide and placed scaled down.
   Inner sizes are those component px, scaled by --k (card width / component card width). */
.card {
  container-type: inline-size;
  position: absolute;
}
.card > * { position: absolute; }
.card--main {
  --k: calc(100cqw / 889);
  left: calc(324.99 * var(--u));
  top: calc(455.24 * var(--u));
  width: calc(363.83 * var(--u));
  aspect-ratio: 889 / 1456;
}
.card--backstage {
  --k: calc(100cqw / 873);
  left: calc(756.37 * var(--u));
  top: calc(271.08 * var(--u));
  width: calc(357.28 * var(--u));
  aspect-ratio: 873 / 1907;
}
.card__frame {
  left: calc(.03 * var(--k));
  top: calc(.92 * var(--k));
  width: calc(888.52 * var(--k));
  height: auto;
  pointer-events: none;
}
.card--backstage .card__frame {
  left: calc(.85 * var(--k));
  top: calc(.29 * var(--k));
  width: calc(871.81 * var(--k));
}
.card__body {
  left: calc(50% - .32 * var(--k));
  top: calc(136.03 * var(--k));
  width: calc(573.57 * var(--k));
  translate: -50% 0;
  margin: 0;
}
.card--backstage .card__body {
  left: calc(50% + 8.32 * var(--k));
  top: calc(586.03 * var(--k));
  width: calc(565.81 * var(--k));
}
.card__body img { width: 100%; height: auto; }

.card__btn {
  left: calc(50% - .32 * var(--k));
  top: calc(1152.94 * var(--k));
  width: calc(636.36 * var(--k));
  translate: -50% 0;
  border-radius: 999px;
  transition: transform .25s ease, filter .25s ease;
}
.card--backstage .card__btn {
  left: calc(50% + 8.32 * var(--k));
  top: calc(1602.94 * var(--k));
}
.card__btn img { width: 100%; height: auto; }
.card__btn:hover, .card__btn:focus-visible {
  transform: scale(1.04);
  filter: drop-shadow(0 0 calc(30 * var(--k)) rgba(255, 255, 255, .55));
}
.card__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.card__btn:active { transform: scale(.97); }

.card__sticker {
  left: calc(709.26 * var(--k));
  top: calc(284.85 * var(--k));
  width: calc(331.27 * var(--k));
  height: auto;
  animation: sticker 6s ease-in-out infinite;
}
@keyframes sticker {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg) scale(1.04); }
}

.tickets__cta {
  position: absolute;
  left: calc(325.35 * var(--u));
  top: calc(54.22 * var(--u));
  width: calc(789.55 * var(--u));
  height: auto;
}

/* ---------- Why now ---------- */
/* Figma desktop "Frame 34": 1258 × 576, centred; photo 1256.7 × 575.87 (cover), text block centred vertically, 282.77 left of centre */
.why {
  position: relative;
  height: calc(576 * var(--u));
  overflow: hidden;
}
.why__card { position: absolute; inset: 0; margin: 0; }
.why__card picture { display: contents; }
.why__img {
  position: absolute;
  left: 50%;
  top: calc(.13 * var(--u));
  width: calc(1256.7 * var(--u));
  height: calc(575.87 * var(--u));
  object-fit: cover;
  translate: -50% 0;
}
.why__txt {
  position: absolute;
  left: calc(50% - 282.77 * var(--u));
  top: 50%;
  width: calc(403.53 * var(--u));
  height: auto;
  translate: -50% -50%;
}

/* ---------- Stay tuned ---------- */
/* Figma "Frame 43": 1440 × 735 (with the social icons), "Group 1" (stay-tuned.svg) at x 308.79 / y 137.58 */
.tuned {
  width: calc(790.8 * var(--u));
  margin-left: calc(50% - 395.4 * var(--u));
  padding: calc(138.12 * var(--u)) 0 calc(20.27 * var(--u));
}
.tuned picture { display: block; }
.tuned__img { width: 100%; height: auto; }
/* social icons under "stai cu ochii pe noi" (Figma: 85 px, 71 apart, 99.4 below the text, 20.3 above the footer) */
.social {
  display: flex;
  align-items: center;
  gap: calc(71 * var(--u));
  margin: calc(99.4 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.social a {
  display: block;
  width: calc(68 * var(--u));   /* Figma 85, −20% on request */
  transition: transform .25s ease, filter .25s ease;
}
.social li + li a { width: calc(68.8 * var(--u)); }
.social img { display: block; width: 100%; height: auto; }
.social a:hover, .social a:focus-visible {
  transform: scale(1.08);
  filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(255, 0, 0, .6));
}
.social a:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 22%; }

/* ---------- Footer ---------- */
/* Figma desktop: 1440 × 451.27; logos 790.8 wide at top 210; "Privacy & Policy" (Montserrat 19.28) at x 324.6 / y 395.97 */
.footer {
  position: relative;
  height: calc(451.27 * var(--u));
  background: linear-gradient(180deg, #000 0%, var(--red) 100%);
}
.footer__logos {
  position: absolute;
  left: 50%;
  top: calc(210 * var(--u));
  width: calc(790.8 * var(--u));
  height: auto;
  translate: -50% 0;
}
.footer__privacy {
  --fs: 19.283;
  position: absolute;
  left: calc(50% - 395.4 * var(--u));
  top: calc((395.97 - .1585 * var(--fs)) * var(--u));   /* Figma trims the text box to the cap height */
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 400;
  font-size: calc(var(--fs) * var(--u));
  line-height: 1;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.footer__privacy:hover, .footer__privacy:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* ===================================================================
   Russian page (/ru/) — -ru SVGs where they exist, the rest as live text in Exo 2
   =================================================================== */
.lang-ru .footer__privacy { font-family: var(--font-ru); font-weight: 400; }

/* tickets lead line (in place of TakeYourTicket.svg, 789.55 × 72) */
.tickets__lead {
  position: absolute;
  left: calc(325.35 * var(--u));
  top: calc(40 * var(--u));
  width: calc(789.55 * var(--u));
  font-family: var(--font-ru);
  font-size: calc(33 * var(--u));
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

/* why now: infoblok-ru.svg is 352 × 286 (the RO one is 404 × 362), same scale, same position */
.why__txt--ru { width: calc(352 * var(--u)); }

/* footer: "Организаторы" above the partner logos */
.footer__label {
  position: absolute;
  left: 50%;
  top: calc(158 * var(--u));
  translate: -50% 0;
  font: 400 calc(17 * var(--u)) / 1 var(--font-ru);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}

/* ---------- Reveal ---------- */
.reveal-enabled .reveal { opacity: 0; translate: 0 32px; transition: opacity .8s ease, translate .8s cubic-bezier(.2,.7,.2,1); }
.reveal-enabled .reveal.is-in { opacity: 1; translate: 0 0; }
.reveal-enabled .card--backstage.reveal { transition-delay: .12s; }

/* ================= Mobile (Figma 390) ================= */
@media (max-width: 767px) {
  .page > *, .page main > * { --u: min(100cqw / 390, 1.6px); }

  /* Figma mobile: strips 72 tall; faster than desktop — about 5 s per label */
  /* Figma mobile: "vine vine primăvara" 244.42 × 15.37, 28 apart — same letter height (≈10.8) as "early bird is here" */
  .ticker { --h: 15.365; --gap: 28; --speed: 15s; height: calc(72 * var(--u)); }
  .ticker--bird { --h: 11.066; --gap: 32; --speed: 15s; height: calc(72 * var(--u)); }
  /* Figma mobile: bird 123.79 × 123.79 at x −36.44; its bottom is 16.5 above the label, i.e. a little inside the 72-tall strip */
  .ticker__bird { width: calc(123.79 / 211.14 * 100%); left: calc(-36.44 / 211.14 * 100%); bottom: calc(100% + 16.5 / 11.066 * 100%); }

  /* First screen = strip + hero + strip (Figma 72 + 612 + 72 = 756) fills the phone's
     visible height. Logo is 863 wide and bleeds off both edges ("лого навылет").
     Short screens shrink the unit; tall ones keep the content centred. */
  .page > .ticker, .page > .hero {
    --u: min(100cqw / 390, 1.6px, 100vh / 756);
    --u: min(100cqw / 390, 1.6px, 100svh / 756);
  }
  .hero {
    height: calc(100vh - 144 * var(--u));
    height: calc(100svh - 144 * var(--u));
    justify-content: center;
    gap: calc(36 * var(--u));
    padding: 0 0 calc(40 * var(--u));   /* Figma: 83.5 above, 123.5 below the content */
    overflow-x: clip;
  }
  .hero__btn { width: calc(249.21 * var(--u)); }
  .hero__partners { width: calc(193.92 * var(--u)); }
  .hero__logo img { width: calc(783.27 * var(--u)); }
  .hero__logo .hero__glow { width: calc(782.62 * var(--u)); }
  .lang { top: calc(14 * var(--u)); right: calc(14 * var(--u)); font-size: 12px; }

  /* Figma mobile "Title": 390 × 421, 105.31 above and below */
  .title { gap: calc(39 * var(--u)); padding: calc(105.31 * var(--u)) 0; }
  .title__fyh { width: calc(323.83 * var(--u)); }
  .title__date { width: calc(327.47 * var(--u)); }

  /* Tickets — Figma "Frame 38": 390 × 1481, same absolute layout idea as desktop */
  .tickets { height: calc(1481 * var(--u)); }
  .tickets__stage {
    width: calc(390 * var(--u));
    margin-left: calc(-195 * var(--u));
  }
  /* Figma mobile "image 24": background_monster-mob, 390 × 1200.79 from the top of the block */
  .tickets__bg {
    inset: auto;
    left: 0;
    top: 0;
    width: calc(390 * var(--u));
    height: calc(1200.79 * var(--u));
  }
  .tickets__glow { display: none; }
  .tickets__cta {
    left: 0;
    top: 0;
    width: calc(390 * var(--u));
  }
  .tickets__lead {
    left: calc(33.6 * var(--u));     /* side padding 24 → 33.6 (+40%) */
    top: calc(28 * var(--u));
    width: calc(322.8 * var(--u));   /* 390 − 2 × 33.6 */
    font-size: calc(19 * var(--u));
  }
  .card--main {
    left: calc(47.54 * var(--u));
    top: calc(319.72 * var(--u));
    width: calc(294.01 * var(--u));
  }
  .card--backstage {
    left: calc(46.48 * var(--u));
    top: calc(805.57 * var(--u));
    width: calc(296.14 * var(--u));
  }
  .card__sticker {
    left: calc(683.5 * var(--k));
    top: calc(295.3 * var(--k));
    width: calc(260.8 * var(--k));
  }

  /* Why now — Figma mobile "Frame 34": 390 × 695; photo 395.1 × 597.9 (cover) at 47.46; text block at 95.77, 1.38 left of centre */
  .why { height: calc(695 * var(--u)); }
  .why__img { top: calc(47.46 * var(--u)); width: calc(395.1 * var(--u)); height: calc(597.9 * var(--u)); }
  .why__txt { left: calc(50% - 1.38 * var(--u)); top: calc(95.77 * var(--u)); width: calc(256.63 * var(--u)); translate: -50% 0; }
  .why__txt--ru { width: calc(256 * var(--u)); }   /* infoblok-mob-ru.svg: 256 × 227 */

  /* Stay tuned — Figma mobile "Frame 44": 390 × 297 (with the social icons), stay-tuned-mob.svg 324 × 165.5, centred */
  .tuned {
    width: calc(324 * var(--u));
    margin-left: calc(50% - 162 * var(--u));
    padding: calc(12.68 * var(--u)) 0 calc(29.93 * var(--u));
  }
  /* Figma mobile: icons ≈35 px (row 99 wide), 29 apart, 54.2 below the text */
  .social { gap: calc(29.05 * var(--u)); margin-top: calc(54.19 * var(--u)); }
  .social a { width: calc(34.77 * var(--u)); }
  .social li + li a { width: calc(35.18 * var(--u)); }

  /* Figma mobile footer: 390 × 301; logos 330 wide at top 90; link (14.85) at x 30 / y 192.44 */
  .footer { height: calc(301 * var(--u)); }
  .footer__logos { top: calc(90 * var(--u)); width: calc(330 * var(--u)); }
  .footer__label { top: calc(62 * var(--u)); font-size: calc(11 * var(--u)); }
  .footer__privacy { --fs: 14.847; left: calc(50% - 165 * var(--u)); top: calc((192.44 - .1585 * var(--fs)) * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track, .card__sticker { animation: none; }
  .reveal-enabled .reveal { opacity: 1; translate: none; transition: none; }
  html { scroll-behavior: auto; }
}