/* ==========================================================
   x99 15kasim - hero extension (.myvide): white hero, two red stripes, crescent & star between them.
   Same idea as x99-gta6-myvide.css: the header is transparent at the top
   and becomes the themed (white) header on scroll.
   Load after x99-15kasim.css (and after 08-homepage.css / 88-tmp.css).
   ========================================================== */
:root { --x99-hdr-h: 88px; }   /* keep equal to the header height */

body.homepage #contentskip .myvide {
  isolation: isolate;
  /* flag: white, a red stripe near the top (below the header) and one near the bottom */
  background:
    linear-gradient(180deg,
      #ffffff 0, #ffffff calc(var(--x99-hdr-h) + 10px),
      #e30a17 calc(var(--x99-hdr-h) + 10px), #e30a17 calc(var(--x99-hdr-h) + 46px),
      #ffffff calc(var(--x99-hdr-h) + 46px), #ffffff calc(100% - 46px),
      #e30a17 calc(100% - 46px), #e30a17 calc(100% - 10px),
      #ffffff calc(100% - 10px), #ffffff 100%) !important;
  border-bottom: 0;
  box-shadow: 0 4px 24px rgba(227, 10, 23, .18);
}

/* Replace the faint ring/dots with the crescent & star, close to the left (centered on phones), between the stripes (faint, so the text on top stays readable) */
body.homepage #contentskip .myvide::before { display: none; }
body.homepage #contentskip .myvide::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: auto; height: auto;
  border: 0; border-radius: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='25 22 75 56'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect x='0' y='0' width='120' height='100' fill='%23fff'/%3E%3Ccircle cx='59.375' cy='50' r='20' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Cg fill='%23e30a17' opacity='.14'%3E%3Ccircle cx='53.125' cy='50' r='25' mask='url(%23m)'/%3E%3Cpolygon points='72.917,50 95.529,57.347 81.554,38.112 81.554,61.888 95.529,42.653'/%3E%3C/g%3E%3C/svg%3E") 8% calc(50% + 44px) / auto 50% no-repeat;
  opacity: 1;
}

/* Keep the image panel in front of the scenery */
body.homepage #contentskip .myvide > div:first-child { z-index: 1 !important; }

/* Headline + buttons readable on the white background */
body.homepage #contentskip .myvide .videtext h2 {
  background: linear-gradient(90deg, #8f0710 0%, #e30a17 100%) 0 0 / cover text;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.homepage #contentskip .myvide .videtext p { color: #2b2b2b; }
@media (max-width: 768px) {
  body.homepage #contentskip .myvide::after { background-position: 50% calc(50% + 44px); background-size: 72% auto; }
}

/* ==========================================================
   Header: transparent at the very top (hero design shows
   through); the themed header appears once the page scrolls
   (body.hero-scrolled is toggled by the existing page script)
   ========================================================== */
body.homepage:not(.hero-scrolled) header,
body.homepage:not(.hero-scrolled) header.mobile {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-image: none !important;
  border-bottom-color: transparent !important;
}
body.homepage:not(.hero-scrolled) header::after { opacity: 0 !important; }
header::after { transition: opacity .35s ease; }
header { transition: box-shadow .35s ease; }

/* Pull the hero up underneath the sticky header */
body.homepage #contentskip .myvide {
  margin-top: calc(-1 * var(--x99-hdr-h));
  padding-top: calc(clamp(20px, 3vw, 48px) + var(--x99-hdr-h));
  min-height: calc(clamp(480px, -120px + 100svh, 700px) + var(--x99-hdr-h));
}
@media (min-width: 901px) {
  body.homepage #contentskip .myvide > div:first-child {
    top: calc(clamp(24px, 3vw, 48px) + var(--x99-hdr-h)) !important;
  }
}