/* Homepage intro: aperture + f-stop ring that opens onto the showreel (built by intro.js),
   then the hero text comes in */

/* ---------- aperture overlay ---------- */

.hm-iris {
  display: none;
}

html.hm-intro .hm-iris {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10001; /* above the theme header (100) and its preloader (10000) */
  background: #0d0d0d; /* until intro.js has drawn the blades */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html.hm-intro .hm-iris.is-ready {
  background: transparent;
}

/* the intro replaces the theme's folding-cube preloader on the homepage */
html.hm-intro .preloader-area,
html.hm-intro-done .preloader-area {
  display: none !important;
}

html.hm-intro body {
  overflow: hidden;
}

.hm-iris__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transition: transform 0.8s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.45s ease 0.3s;
}

/* last step: fly through the open aperture */
.hm-iris.is-through .hm-iris__svg {
  transform: scale(4.5);
  opacity: 0;
}

.hm-iris__blade {
  fill: #121212;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
  stroke-linejoin: round;
}

.hm-iris__blade.is-alt {
  fill: #191919;
}

.hm-iris__ring-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
}

.hm-iris__tick {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
}

.hm-iris__stop {
  fill: rgba(255, 255, 255, 0.75);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-anchor: middle;
  dominant-baseline: central;
}

.hm-iris__stop.is-open {
  fill: #c0202a;
}

.hm-iris__index {
  fill: #c0202a;
}

.hm-iris__dot {
  fill: #c0202a;
}

.hm-iris__brand {
  fill: #fff;
  font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
  font-size: 22px;
  letter-spacing: 6px;
  text-anchor: middle;
}

.hm-iris__brand-sub {
  fill: rgba(255, 255, 255, 0.5);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  letter-spacing: 4px;
  text-anchor: middle;
}

/* ring, labels and brand fade in while the blades are still closed */
.hm-iris__ring,
.hm-iris__brand-group {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hm-iris.is-lit .hm-iris__ring,
.hm-iris.is-lit .hm-iris__brand-group {
  opacity: 1;
}

.hm-iris.is-opening .hm-iris__brand-group {
  opacity: 0;
  transition-duration: 0.3s;
}

/* the Complianz cookie banner (z-index 99999) would cover the aperture and the
   title: on the homepage it waits until the visitor starts scrolling (intro.js
   swaps hm-banner-wait for hm-banner-in) */
html.hm-banner-wait .cmplz-cookiebanner {
  visibility: hidden !important;
  opacity: 0 !important;
}

html.hm-banner-in .cmplz-cookiebanner.cmplz-show {
  animation: hm-banner-in 0.5s ease both;
}

@keyframes hm-banner-in {
  from { opacity: 0; visibility: hidden; }
  to { opacity: 1; visibility: visible; }
}

/* ---------- hero entrance ---------- */

/* the title is the lead: much larger than the theme's 60px */
.banner-area .heading-block h1.h {
  font-size: clamp(64px, 7.4vw, 116px) !important;
  line-height: 0.92 !important;
  letter-spacing: 1px;
}

/* eyebrow with a red dash, like the section headings further down */
.banner-area .heading-block .sub-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
}

.banner-area .heading-block .sub-h::before {
  content: "";
  width: 36px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* the showreel opens on a bright sky: shadows keep the red eyebrow and the
   outlined second line readable */
.banner-area .heading-block .sub-h {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 18px rgba(0, 0, 0, 0.55);
}

.banner-area .heading-block h1.h {
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
  .banner-area .heading-block h1.h {
    font-size: clamp(50px, 17vw, 84px) !important;
  }

  /* phones: title and "Videograf & Cutter" only */
  .banner-area .text {
    display: none !important;
  }
}

/* html.hm-hero-anim is set in <head>, html.hm-hero-in by intro.js once the
   aperture is open (or right away when the intro doesn't play) */
html.hm-hero-anim .banner-area .heading-block .sub-h,
html.hm-hero-anim .banner-area .text {
  opacity: 0;
}

html.hm-hero-anim .banner-area .heading-block .sub-h {
  transform: translateX(-24px);
}

html.hm-hero-anim .banner-area .text {
  transform: translateY(18px);
}

/* the heading stays hidden until intro.js has split it into lines */
html.hm-hero-anim .banner-area h1.h {
  visibility: hidden;
}

html.hm-hero-anim .banner-area h1.h.hm-split,
html.hm-hero-in .banner-area h1.h {
  visibility: visible;
}

.banner-area h1.h .hm-hl,
.banner-area h1.h.hm-split > span {
  display: inline-block;
  font-style: normal;
}

html.hm-hero-anim .banner-area h1.h.hm-split .hm-hl,
html.hm-hero-anim .banner-area h1.h.hm-split > span {
  /* the mask reaches 40px beyond each line so the soft text shadow (28px blur)
     is never cropped while the line wipes in */
  clip-path: inset(-40px -40px calc(100% + 40px) -40px);
  transform: translateY(60%);
}

html.hm-hero-in .banner-area .heading-block .sub-h,
html.hm-hero-in .banner-area .text,
html.hm-hero-in .banner-area h1.h.hm-split .hm-hl,
html.hm-hero-in .banner-area h1.h.hm-split > span {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 1.1s cubic-bezier(0.16, 0.8, 0.2, 1), clip-path 1.1s cubic-bezier(0.16, 0.8, 0.2, 1);
}

html.hm-hero-in .banner-area h1.h.hm-split .hm-hl,
html.hm-hero-in .banner-area h1.h.hm-split > span {
  clip-path: inset(-40px);
}

/* once the lines are in, drop the mask entirely (intro.js sets hm-hero-done) */
html.hm-hero-done .banner-area h1.h.hm-split .hm-hl,
html.hm-hero-done .banner-area h1.h.hm-split > span {
  clip-path: none;
}

/* the title leads, "Videograf & Cutter" and the intro text follow */
html.hm-hero-in .banner-area h1.h.hm-split .hm-hl { transition-delay: 0s; }
html.hm-hero-in .banner-area h1.h.hm-split > span { transition-delay: 0.16s; }
html.hm-hero-in .banner-area .heading-block .sub-h { transition-delay: 0.7s; }
html.hm-hero-in .banner-area .text { transition-delay: 0.9s; }

@media (prefers-reduced-motion: reduce) {
  html.hm-hero-in .banner-area .heading-block .sub-h,
  html.hm-hero-in .banner-area .text,
  html.hm-hero-in .banner-area h1.h.hm-split .hm-hl,
  html.hm-hero-in .banner-area h1.h.hm-split > span {
    transition: none;
  }
}