/*
 * Project-specific overrides for the borano theme.
 * Loaded after borano.css (see layouts/application.html.erb), so equal- or
 * higher-specificity rules here win.
 */

/* Page reveal: animsition hides .animsition (opacity: 0) and used to fade it in
 * from JS on window.load — i.e. only after every slider image finished
 * downloading, which is what tanked FCP/LCP on mobile. The init call now passes
 * onLoadEvent: false (see borano.js) and this rule plays the same fade-in
 * entirely in CSS, as soon as stylesheets are ready. The :not(.fade-out) guard
 * steps aside when animsition runs its out-transition on link clicks, and
 * animsition still replays the in-transition itself on bfcache restores. */
.main-wrapper.animsition:not(.fade-out) {
  -webkit-animation: fade-in 0.8s both;
  animation: fade-in 0.8s both;
}

/* Neutral placeholder behind lazily loaded slider tiles (Swiper applies the
 * background-image from data-background only when a slide nears the viewport). */
.horizontal-slider .swiper-lazy {
  background-color: #f3f0ec;
}

/* Swiper's init reflows the mosaic (loop duplicates get prepended, slides get
 * re-centred) — a ~0.13 CLS hit if it happens in view. Keep the slider
 * invisible until Swiper stamps the container as initialised; opacity isn't a
 * layout shift and the container keeps its box, so nothing else moves. The
 * mosaic is a JS component either way — without JS it would render as a broken
 * static strip, so there is deliberately no no-js fallback here. */
.horizontal-slider {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.horizontal-slider.swiper-container-horizontal {
  opacity: 1;
}

/* The logo <img> carries its natural 843×140 dimensions so the browser
 * reserves the right box before the file loads (no shift, no distortion).
 * borano only caps the height (max-height 50px / 32px mobile), which would
 * leave the attribute width winning — force the width back to the ratio. */
#header .logo img {
  width: auto;
}

/* Blog listing: borano gives every .hero/.container-hero a large top margin
 * (77px / 108px) so the single hero clears the fixed header. The blog index
 * stacks many heroes, so only the first one needs that clearance — collapse the
 * gap on every hero that follows another hero. The sibling combinator only
 * matches when heroes are stacked, which today happens solely on /blog. */
.hero ~ .hero,
.hero ~ .container-hero,
.container-hero ~ .hero,
.container-hero ~ .container-hero {
  margin-top: 30px;
}