/* Hand-written refinements, loaded AFTER the Webflow stylesheet and the IX2 preload rules.
 *
 * Why a separate file: scripts/theme.py regenerates
 * assets/…/css/avlon.webflow.shared.548caf0bf.css from the pristine mirror on every
 * `npm run theme`, and scripts/build_ix_preload.py regenerates webflow-ix-preload.css.
 * Anything hand-edited in either is destroyed the next time those run. This file is never
 * generated, so it is the only safe place for deliberate deviations from the template.
 *
 * Load order gives every rule here the last word at equal specificity; where the template
 * needs out-specifying that is noted on the rule.
 *
 * Palette (from theme.py): page #0b0908 · section #14100b · card #1b1510 · feature #241b11
 * gold #c9a55c · champagne #e6cd96 · ivory #f3ece1 · warm grey #c8bead
 */

/* ==========================================================================
   1. Hero
   The template shipped a full-bleed stock video with no headline, paragraph or call to
   action — the first screen said nothing. It is now the client's own photograph with the
   opening lines of her brief over it.
   ========================================================================== */

/* 100vh is measured against the *largest* viewport on iOS Safari, so the hero grows taller
 * than the screen and the browser chrome hides the bottom of it. dvh tracks the visible
 * area. The 100vh line stays first as the fallback for browsers without dvh. */
.home-one-banner {
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
}

.home-one-background-vedio-wrapper {
  position: absolute;
  inset: 0;
}

.hero-photo,
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-photo img {
  object-fit: cover;
  /* Keeps the lash line and the eye right of centre, clear of the copy. */
  object-position: 62% 42%;
}

/* Two scrims, not one: a horizontal wash so the copy sits on near-solid brand black however
 * bright the photo is behind it, and a vertical one that darkens under the nav and melts the
 * foot of the section into the page below instead of hard-cutting. */
.home-one-background-vedio-overlay {
  background-image:
    linear-gradient(90deg, #0b0908 0%, rgba(11, 9, 8, .96) 28%, rgba(11, 9, 8, .80) 44%,
      rgba(11, 9, 8, .34) 66%, rgba(11, 9, 8, 0) 92%),
    linear-gradient(180deg, rgba(11, 9, 8, .78) 0%, rgba(11, 9, 8, .10) 22%,
      rgba(11, 9, 8, 0) 44%, rgba(11, 9, 8, .82) 88%, #0b0908 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  /* The nav stays the template's absolute overlay (it is shared with /obucheniya, where
   * making it relative pushed it 1140px down the page), so the copy reserves its height as
   * padding and centres in what is left. Bottom padding does the same for the marquee. */
  padding: 150px 60px 120px;
}

.hero-copy {
  max-width: 36rem;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: #e6cd96;
}

/* The rule the eyebrow sits on, rather than a second element in the markup. */
.hero-eyebrow::after {
  content: "";
  flex: 1 1 auto;
  max-width: 84px;
  height: 1px;
  background-color: rgba(201, 165, 92, .5);
}

/* The stylesheet capitalises every heading, which turns a Bulgarian sentence into Title
 * Case. Out-specified with the element+class pair because `h1` alone would lose. */
h1.hero-title {
  margin: 0;
  text-transform: none;
  font-size: clamp(2.1rem, 3.4vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}

/* The second clause of the brief's line, kept as a voice rather than a second headline. */
.hero-sub {
  margin: 14px 0 0;
  color: #e6cd96;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.4;
}

.hero-lead {
  max-width: 30rem;
  margin: 22px 0 0;
  color: #c8bead;
  font-size: 1.0625rem;
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Two changes in one rule: the template's default button is a dark chip that disappears
 * against the scrim, and its 45px side padding made the pair 559px wide in a 544px column,
 * so they wrapped onto two rows and read as one broken control. */
.hero-actions .button-style {
  padding: 18px 32px 14px;
  color: #1b1510;
  background-color: #c9a55c;
  border: 1px solid #c9a55c;
  transition: background-color .3s cubic-bezier(.16, 1, .3, 1),
              color .3s cubic-bezier(.16, 1, .3, 1),
              transform .3s cubic-bezier(.16, 1, .3, 1);
}

.hero-actions .button-style.button-border {
  color: #e6cd96;
  background-color: rgba(11, 9, 8, .35);
  border-color: rgba(201, 165, 92, .55);
}

.hero-actions .button-style:hover {
  background-color: #e6cd96;
  border-color: #e6cd96;
  color: #1b1510;
}

.hero-actions .button-style:active {
  transform: translateY(1px);
}

/* The marquee was 12.5rem type clipped mid-word at 30% opacity — it read as a rendering
 * fault. Sized down it becomes what it was meant to be: a quiet ticker along the foot. */
.home-one-banner-marquee.change-position {
  inset: auto 0 0;
  z-index: 1;
  padding-bottom: 30px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.home-one-banner .marquee-item {
  animation: hero-marquee 44s linear infinite;
}

.home-one-banner .marquee-text {
  color: rgba(243, 236, 225, .34);
  font-size: 1.5rem;
  line-height: 2.2rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* -100% is one item's width, but .home-one-banner-marquee sets a 30px column gap, so a
 * plain -100% loop leaves a 30px seam and the band visibly jumps once per cycle. */
@keyframes hero-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% - 30px), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .home-one-banner .marquee-item { animation: none; }
}

/* A scroll hint, so the first screen says there is more below it. */
.hero-scroll {
  position: absolute;
  z-index: 2;
  right: 60px;
  bottom: 96px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(200, 190, 173, .8);
  font-family: Catamaran, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}

.hero-scroll::after {
  content: "";
  width: 1px;
  height: 52px;
  background-image: linear-gradient(180deg, rgba(201, 165, 92, .8), rgba(201, 165, 92, 0));
  animation: hero-scroll-pulse 2.6s ease-in-out infinite;
  transform-origin: top;
}

@keyframes hero-scroll-pulse {
  0%, 100% { transform: scaleY(.55); opacity: .45; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll::after { animation: none; }
}

@media (max-width: 991px) {
  .hero-content {
    align-items: flex-end;
    padding: 96px 24px 104px;
  }

  .hero-copy { max-width: 32rem; }

  .hero-scroll { display: none; }

  /* On a portrait screen the copy sits over the photo itself, so the scrim has to come from
   * the bottom rather than the side. */
  .home-one-background-vedio-overlay {
    background-image:
      linear-gradient(180deg, rgba(11, 9, 8, .72) 0%, rgba(11, 9, 8, .18) 26%,
        rgba(11, 9, 8, .58) 52%, rgba(11, 9, 8, .96) 82%, #0b0908 100%);
  }

  .hero-photo img { object-position: 56% 34%; }
}

@media (max-width: 479px) {
  .hero-content { padding: 88px 20px 92px; }
  .hero-lead { font-size: 1rem; line-height: 1.7; }
  .hero-actions { gap: 10px; margin-top: 30px; }
  .hero-actions .button-style { padding: 17px 26px 13px; font-size: .8125rem; }
  .home-one-banner .marquee-text { font-size: 1.125rem; letter-spacing: .12em; }
}

/* ==========================================================================
   2. Decorative watermarks that were painting over the copy
   Both sections carry a large raster centred behind their content. A raster cannot be
   given an opacity from a background shorthand, so a translucent scrim is layered ABOVE
   it — background layers paint first-listed on top — which pushes each one back to the
   watermark it was meant to be.
   ========================================================================== */

/* The ghost word says „Отзиви" and sat at 50% 22%, i.e. exactly behind the real „Отзиви"
 * heading, so the section read „ОтзивиОтзиви". Scrimmed back and lifted clear of it. */
.home-one-testimonial {
  background-image:
    linear-gradient(180deg, rgba(28, 21, 12, .86) 0%, rgba(24, 18, 11, .90) 100%),
    url("/assets/65f2747ff48656f2561833e5/66178a9a5552cc391655adc7_Testimonials.webp"),
    radial-gradient(130% 90% at 50% 0%, #2a1e10 0%, #1c150c 55%, #140f0a 100%);
  background-position: 50% 50%, 50% 6%, 50% 50%;
  background-size: auto, 1037px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  padding-top: 120px;
  padding-bottom: 110px;
}

/* The rose is 440x525 of solid gold at dead centre, and the phone number, the „Запази час"
 * button and both footer links were all sitting on top of it. */
.footer-one-new {
  background-image:
    linear-gradient(180deg, rgba(16, 13, 9, .80) 0%, rgba(23, 17, 10, .74) 55%, rgba(12, 10, 8, .86) 100%),
    url("/assets/65f2747ff48656f2561833e5/65f2869405195163e5fdf82a_Rose%20.webp"),
    linear-gradient(180deg, #100d09 0%, #17110a 55%, #0c0a08 100%);
  background-position: 50% 50%, 50% 62%, 50% 50%;
  background-size: auto, 380px 453px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* The number is the single most useful thing in the footer; give it room to breathe and
 * stop it sharing a line with the artwork's brightest area. */
.footer-heading h2 {
  line-height: 1.24;
}

/* ==========================================================================
   3. The Обучения marquee
   Same fault the hero had: 12.5rem type on a 5rem line-height, so the band showed one
   word cut off at both ends and read as a rendering error rather than a ticker.
   ========================================================================== */

.home-three-merquee-section .home-one-banner-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.home-three-merquee-section .marquee-item {
  animation: hero-marquee 52s linear infinite;
}

.home-three-merquee-section .marquee-text {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.35;
  letter-spacing: .01em;
  white-space: nowrap;
  padding-right: 3rem;
}

.home-three-merquee-section {
  padding-top: 96px;
  padding-bottom: 96px;
}

@media (prefers-reduced-motion: reduce) {
  .home-three-merquee-section .marquee-item { animation: none; }
}

/* ==========================================================================
   4. Content that was on the page but could not be seen
   ========================================================================== */

/* The five course days ship with an inline `height: 0` and open on click through IX2 — so
 * the entire curriculum, which is what the Обучения page is selling, rendered at zero
 * height. Opening them permanently beats a toggle here: there are only five, they are the
 * substance of the page, and a visitor should not have to hunt for them. `!important`
 * because the zero height is an inline style. */
.service-section-item-details-wrapper {
  height: auto !important;
  overflow: visible !important;
}

/* With nothing left to toggle, the chevron should not sit at its "closed" -60deg angle. */
.service-section-item-arrow-wrapper {
  transform: rotate(0deg) !important;
  opacity: .55;
}

/* Three of the six „Какво получаваш" tiles — including Сертификат and Удостоверение от
 * МОН, the two that carry the qualification claim — were display:none below 768px. */
@media (max-width: 767px) {
  .service-product-item.responsive-display-off {
    display: block;
  }
}

/* ==========================================================================
   5. Buttons that were illegible
   ========================================================================== */

/* The nav CTA kept the template's white keyline, which now reads as a stray cool accent
 * next to the gold hero buttons. */
.button-style.changr-color-trasparent {
  color: #e6cd96;
  border-color: rgba(201, 165, 92, .65);
  background-color: rgba(11, 9, 8, .35);
  transition: background-color .3s cubic-bezier(.16, 1, .3, 1),
              color .3s cubic-bezier(.16, 1, .3, 1);
}

.button-style.changr-color-trasparent:hover {
  color: #1b1510;
  background-color: #c9a55c;
  border-color: #c9a55c;
}

/* #120d07 text on a #1b1510 fill is about 1.1:1 — the 404 page's only button had an
 * invisible label. */
.button-style.change-style {
  color: #1b1510;
  background-color: #c9a55c;
  border-color: #c9a55c;
}