.lvh{
  --lvh-accent:#00C878;--lvh-fade:1.1s;--lvh-dist:.45em;--lvh-blur:6px;
  --lvh-logo-dur:3s;--lvh-logo-glow:22px;--lvh-brand-glow:22px;--lvh-brand-dur:3.2s;
  --lvh-gap:3;--lvh-lines-fade:45%;
  position:relative;width:100%;height:27vw;min-height:220px;overflow:hidden;direction:ltr;background:#444;
}
.lvh__lines{position:absolute;inset:0 auto 0 0;width:76%;pointer-events:none;opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,#000 var(--lvh-lines-fade),transparent 100%);
          mask-image:linear-gradient(90deg,#000 var(--lvh-lines-fade),transparent 100%)}
.lvh__line{position:absolute;left:0;width:100%;height:auto;max-width:none;
  top:calc((50% - (var(--lvh-n) - 1) * var(--lvh-gap) * .5%) + var(--i) * var(--lvh-gap) * 1%);
  translate:0 -50%;will-change:transform}
.lvh__line.is-flip{scale:1 -1}

.lvh__logo{position:absolute;left:6.8%;top:50%;height:76%;aspect-ratio:1/1;
  transform:translateY(calc(-50% + var(--lvh-logo-y,0px)))}
.lvh__logo img{width:100%;height:100%;object-fit:contain;display:block}
.lvh-logo-glow-yes .lvh__logo img{animation:lvhLogoGlow var(--lvh-logo-dur) ease-in-out infinite}
@keyframes lvhLogoGlow{
  0%,100%{filter:drop-shadow(0 0 0 transparent)}
  50%{filter:drop-shadow(0 0 var(--lvh-logo-glow) var(--lvh-accent)) drop-shadow(0 0 calc(var(--lvh-logo-glow) * .3) var(--lvh-accent))}
}

.lvh__text{position:absolute;right:5.5%;top:50%;transform:translateY(-50%);margin:0;display:flex;align-items:baseline;gap:28px;
  font-size:inherit;line-height:1;text-transform:uppercase}
.lvh__words{display:grid;justify-items:end}
.lvh__word{grid-area:1/1;white-space:nowrap;color:#fff;font-weight:300;font-size:clamp(28px,5.2vw,86px);letter-spacing:.02em;
  opacity:0;transform:translateY(var(--lvh-dist));filter:blur(var(--lvh-blur));
  transition:opacity var(--lvh-fade) cubic-bezier(.22,1,.36,1),transform var(--lvh-fade) cubic-bezier(.22,1,.36,1),filter var(--lvh-fade) cubic-bezier(.22,1,.36,1)}
.lvh__word.is-active{opacity:1;transform:none;filter:none}
.lvh__word.is-leaving{opacity:0;transform:translateY(calc(var(--lvh-dist) * -.8));filter:blur(var(--lvh-blur))}
.lvh__with{position:relative;color:#fff;font-weight:700;font-size:clamp(12px,1.9vw,32px)}
.lvh__brand{color:var(--lvh-accent);font-weight:800;font-size:clamp(30px,5.6vw,92px);letter-spacing:-.01em;
  text-shadow:0 0 calc(var(--lvh-brand-glow) * .6) color-mix(in srgb,var(--lvh-accent) 55%,transparent)}
.lvh-brand-pulse-yes .lvh__brand{animation:lvhBrandGlow var(--lvh-brand-dur) ease-in-out infinite}
@keyframes lvhBrandGlow{
  0%,100%{text-shadow:0 0 calc(var(--lvh-brand-glow) * .45) color-mix(in srgb,var(--lvh-accent) 45%,transparent)}
  50%{text-shadow:0 0 var(--lvh-brand-glow) color-mix(in srgb,var(--lvh-accent) 85%,transparent),0 0 4px color-mix(in srgb,var(--lvh-accent) 60%,transparent)}
}

/* ---------- Mobile: stacked composition ---------- */
@media (max-width:767px){
  .lvh-m-stack-yes .lvh{height:auto!important;min-height:0!important;
    padding-top:var(--lvh-m-zone,58vw);padding-bottom:var(--lvh-m-pad,9vw)}
  .lvh-m-stack-yes .lvh__lines{bottom:auto!important;height:var(--lvh-m-zone,58vw);width:var(--lvh-m-lines-w,165vw)!important;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,#000 32%,transparent 60%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,#000 32%,transparent 60%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    mask-composite:intersect}
  .lvh-m-stack-yes .lvh__logo{top:calc(var(--lvh-m-zone,58vw) / 2)!important;
    height:calc(var(--lvh-m-zone,58vw) * var(--lvh-m-logo,.8))!important;left:var(--lvh-m-x,6vw)!important}
  .lvh-m-stack-yes .lvh__text{position:relative!important;inset:auto!important;transform:none!important;
    flex-wrap:wrap;justify-content:var(--lvh-m-justify,flex-start);align-items:baseline;
    column-gap:3vw!important;row-gap:1.5vw;padding:0 var(--lvh-m-x,6vw)}
  .lvh-m-stack-yes .lvh__words{flex:0 0 100%;justify-items:var(--lvh-m-justify,start)}
  .lvh-m-stack-yes .lvh__word{font-size:var(--lvh-m-word,12vw)!important}
  .lvh-m-stack-yes .lvh__with{font-size:var(--lvh-m-with,4.4vw)!important}
  .lvh-m-stack-yes .lvh__brand{font-size:var(--lvh-m-brand,14vw)!important}
}

@media (prefers-reduced-motion:reduce){
  .lvh__logo img,.lvh__brand{animation:none!important}
  .lvh__word{transition-duration:.01s}
}
