/* VUZIX V1 page (client's V1.pdf, 24 Oct). Every section is a full screen and the page moves one screen per wheel step,
   exactly like the client's references: ktechlb.vercel.app/d1.html (= the old M400 page, design d1) and the old VUZIX
   page (design m2). Values below are taken from their style.css / d1.css / m2 style.css. Prefix: vz- */

@font-face { font-family: "aileronblack"; src: url("../fonts/aileron-black-webfont.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "aileronsemibold"; src: url("../fonts/aileron-semibold-webfont.woff2") format("woff2"); font-display: swap; }

.page-vuzix { --neon: #d2ff64; --vz-red: #fa1616; --vz-body: "Microsoft YaHei", "Segoe UI", sans-serif; background: #000; padding-top: 0; }
.page-vuzix main { background: #000; overflow-x: clip; }
/* the header stays put on this page (reference: fixed header, never hides) */
.page-vuzix .site-header.is-hidden { transform: none; }

/* one full screen per wheel step; the top padding sits under the fixed header (reference: d1scrollEffect padding-top) */
.vz-snap { padding-top: var(--hh); background: #000; }
.vz-screen { position: relative; height: calc(100vh); overflow: hidden; }

/* ---------- 1. banner (old VUZIX: bannerSectionM2 + m2BannerText) ---------- */
.vz-banner { background: #000; }
.vz-banner-media, .vz-banner-media img, .vz-banner-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vz-banner-text { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 213px; padding: 30px 70px 30px 30px; background: rgba(0, 0, 0, .329); text-align: right; color: var(--vz-ink, #fff); }
.vz-banner-text h1 { margin: 0 0 .5rem; font: 400 35px/1.2 "Square721 BT Roman", var(--vz-body); color: inherit; text-transform: uppercase; }
.vz-banner-text p { margin: 0; font: 400 18px/1.5 "Square721 BT Roman", var(--vz-body); letter-spacing: .5px; color: inherit; opacity: .97; text-transform: uppercase; }

/* ---------- 2. intro (old VUZIX: m2NewsSection) ---------- */
.vz-intro { background: var(--vz-intro-bg, #fff) center / cover no-repeat; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 0 38px; color: var(--vz-intro-ink, #737373); }
.vz-intro-logo { width: 340px; max-width: 80%; height: auto; }
.vz-intro h2 { margin: .5rem 0 0; font: 500 1.25rem/1.2 "Square721 BT Roman", var(--vz-body); text-transform: uppercase; color: var(--vz-intro-title, #212529); }
.vz-intro-text { width: 70%; margin: 1rem auto .25rem; font: 16px/30px "Square721 BT Roman", var(--vz-body); }
.vz-intro-text p { margin: 0; }
.vz-btn-line { display: inline-block; margin-top: 1.5rem; padding: 8px 46px; border: 1px solid #f44336; border-radius: 3px; background: transparent; color: #f44336; font: 400 1rem/1.5 "Humanist 521 BT", var(--vz-body); text-decoration: none; transition: .3s ease; cursor: pointer; }
.vz-btn-line:hover { background: #f44336; color: #fff; }

/* ---------- 3. product blocks (d1: m2CommunicatorOne, greyLeft, d1Right) ---------- */
.vz-prod { background: url("../img/vz/bg-m2.webp") center / cover no-repeat #1a1a1a; box-shadow: 1px 2px 3px 36px #000; display: grid; grid-template-columns: 1fr 1fr; }
.vz-prod.vz-flip .vz-pic { order: 2; }
.vz-pic { padding: 3rem 0 3rem 6vw; display: flex; align-items: center; justify-content: center; perspective: 1000px; }
/* client 24 Oct: pictures a little toward the middle, more space at the screen edge */
.vz-prod.vz-flip .vz-pic { padding: 3rem 6vw 3rem 0; }
/* client: "make the image slightly larger" (reference: 5rem padding, 60vh box) */
.vz-pic-box { width: 100%; height: 72vh; display: flex; align-items: center; justify-content: center; }
.vz-pic-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.vz-copy { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 60px; text-align: left; }
.vz-t1, .vz-t2, .vz-t3, .vz-ul { display: block; margin: 0 0 1rem; color: #f7f7f7; text-transform: uppercase; white-space: normal; transition: color .2s ease; }
.vz-t1, .vz-t2 { font: 800 3rem/1 "aileronblack", sans-serif; }
.vz-t3 { font: 500 2rem/1 "aileronsemibold", sans-serif; }
.vz-ul { font: 500 1.2rem/1 "aileronsemibold", sans-serif; border-bottom: 1px solid var(--neon); }
.vz-ul ul { margin: 0; padding: 0 20px; }
.vz-ul li { margin-bottom: .5rem; }
.vz-green { color: var(--neon); }
.vz-body { display: block; margin: 0; color: #f7f7f7; font: 300 14px/1.5 var(--vz-body); text-align: left; }
.vz-btn-red { display: inline-block; align-self: flex-start; width: 200px; margin-top: 1rem; padding: 5px 10px; border: 1px solid var(--vz-red); border-radius: 3px; background: var(--vz-red); color: #fff; font: 400 1rem/1.5 var(--vz-body); text-align: center; text-decoration: none; transition: .3s ease; cursor: pointer; }
.vz-btn-red:hover { background: #f44336; border-color: #f44336; color: #fff; }
/* measured on the reference: 48 px at every desktop width (its 1440 px rule never applies there) */

/* ---------- 4. feature points (d1 section 4 + client: a second picture slides in from the right on scroll) ---------- */
.vz-tools { background: url("../img/vz/bg-m2.webp") center / cover no-repeat #1a1a1a; box-shadow: 1px 2px 3px 36px #000; display: flex; flex-direction: column; }
.vz-tools-head { padding: 50px; }
.vz-tools-head .vz-t1, .vz-tools-head .vz-t2 { margin-bottom: 0; }
.vz-tools-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.vz-tools-pic { position: absolute; inset: 0 0 calc(4vh + 12.85vh); display: flex; align-items: center; justify-content: center; transition: transform 1s cubic-bezier(.19, 1, .22, 1), opacity 1s ease; }
.vz-tools-pic img { width: 42.9%; max-height: 100%; object-fit: contain; } /* client 24 Oct: 20% smaller (70% -> 56%); 25 Oct: to his green box (x .766, centre 54px higher at 848px tall) */
.vz-tools-pic + .vz-tools-pic { transform: translateX(100%); opacity: 0; }
.vz-tools.vz-step2 .vz-tools-pic:first-child { transform: translateX(-30%); opacity: 0; }
.vz-tools.vz-step2 .vz-tools-pic + .vz-tools-pic { transform: none; opacity: 1; }
.vz-tools .vz-body { width: 60%; margin: 0 auto 4vh; font-size: 17px; line-height: 1.4; text-align: center; }

/* ---------- 5. split with fold-out lines (d1 section 5: bg-black left, picture right switched by the lines) ---------- */
.vz-split { background: url("../img/vz/bg-m2.webp") center / cover no-repeat #1a1a1a; box-shadow: 1px 2px 3px 36px #000; display: grid; grid-template-columns: 1fr 1fr; }
.vz-split-left { background: var(--vz-left-bg, #000) center / cover no-repeat; }
.vz-split-left .vz-t3 { margin-bottom: 0; }
.vz-split-left .vz-body { margin-bottom: 1rem; }
.vz-acc { margin-top: .25rem; }
.vz-divider { position: relative; height: 1px; background-image: linear-gradient(90deg, var(--neon), rgba(210, 255, 100, 0) 40%); }
.vz-fold { width: 80%; max-height: 20vh; overflow: hidden; margin: 5px 0 10px; }
.vz-fold-btn { display: inline-block; margin: 0; padding: 10px 20px 10px 0; border: 0; background: none; color: #f7f7f7; font: 900 26px/1 aileron, Arial, sans-serif; text-align: left; /* reference asks for 'aileron', which is not loaded, so it shows a heavy plain sans */ text-transform: uppercase; cursor: pointer; transition: color .2s cubic-bezier(.215, .61, .355, 1); }
.vz-fold-btn[aria-expanded="true"] { color: var(--neon); }
.vz-fold-btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.vz-fold-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.vz-fold-body > div { overflow: hidden; }
.vz-fold-btn[aria-expanded="true"] + .vz-fold-body { grid-template-rows: 1fr; }
.vz-fold-body .vz-body { margin-bottom: 1rem; }
.vz-split-right { position: relative; }
.vz-panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--vz-panel-bg, transparent) center / cover no-repeat; color: var(--vz-panel-ink, #fff); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.vz-panel.on { opacity: 1; visibility: visible; }
.vz-panel-icon { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: calc(8vh + var(--vz-icon-down, 0px)) 12% 2vh; }
.vz-panel-icon img { max-width: 63%; max-height: 21.42vh; object-fit: contain; } /* client 24 Oct: 30% smaller (was 100% / 34vh); 25 Oct: 10% smaller again */
.vz-panel-info { padding: 0 60px calc(14vh + 35px) calc(10% + 5px); } /* client 25 Oct: text 35px up, 5px right */
@media (min-width: 901px) {
  .vz-split { --vz-icon-down: 115px; } /* client 25 Oct: icon 40px lower (it sits in the middle of the space above the text) */
  .vz-split-left .vz-copy { padding: 60px 57px 92px 63px; } /* client 25 Oct: left text 16px up, 3px right */
  /* client 25 Oct: product texts a tiny bit smaller (x .969, his green box), 3px further from the edge */
  .vz-prod .vz-copy { padding-left: 63px; }
  .vz-prod .vz-copy > * { max-width: 96.9%; }
  .vz-prod .vz-t1, .vz-prod .vz-t2 { font-size: 46.5px; line-height: 46.5px; }
  .vz-prod .vz-t3 { font-size: 31px; }
  .vz-prod .vz-ul { font-size: 18.6px; }
  .vz-prod .vz-body { font-size: 13.6px; }
  .vz-prod .vz-btn-red { width: 194px; font-size: 15.5px; }
  .vz-prod .vz-t1, .vz-prod .vz-t2, .vz-prod .vz-t3, .vz-prod .vz-ul { margin-bottom: .969rem; }
}
.vz-panel-info h3 { margin: 0 0 .45rem; font: 600 20px/1.3 var(--vz-body); color: inherit; }
.vz-panel-info p { margin: 0; font: 300 15px/1.5 var(--vz-body); color: inherit; opacity: .92; }
.vz-panel-info .vz-btn-red { width: auto; padding: 5px 22px; margin-top: 1.3rem; }

/* ---------- 6. full-screen video (old VUZIX main-video: dotted preview, play button, plays with sound) ---------- */
.vz-film { background: #000; }
.vz-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vz-film-preview { position: absolute; inset: 0; }
.vz-film-dots { position: absolute; inset: 0; z-index: 9; background-image: radial-gradient(circle at 1px 1px, hsla(0, 0%, 100%, .5) 1px, transparent 0); background-size: 8px 8px; }
.vz-play { position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.vz-play svg { width: 100px; height: 100px; stroke: #e4ebf2; transition: transform .15s; }
.vz-play:hover svg { transform: scale(1.06); }
.vz-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 50%; }
.vz-film.vz-playing .vz-film-preview, .vz-film.vz-playing .vz-play { display: none; }

/* ---------- 7. News & Blog as a full screen ("same as before but full page") ---------- */
/* client's V1 board: white screen, dark title with the red line, light cards; cards run the full width of the screen */
.vz-news { background: var(--vz-news-bg, #fff); display: flex; align-items: center; }
.vz-news .s-news { width: 100%; padding: 0; background: transparent; }
.vz-news .s-news .h-section { color: var(--vz-news-ink, #333); }
.vz-news .news-slider { width: calc(100vw - 2 * max(var(--gutter), 64px)); margin: 40px calc(50% - 50vw + max(var(--gutter), 64px)) 0; }
.vz-news .news-card { border-color: #d5d8dc; background: #fff; }
.vz-news .news-card:hover { border-color: #9aa0a8; }
.vz-news .news-card p { color: #555; }
.vz-news .news-card time, .vz-news .news-card small { color: #8a9099; }
.vz-news .ns-arrow { color: #8a9099; }

/* ---------- 8. bottom banner + footer move as the last stop ---------- */
.vz-tail .s-cta { margin: 0; }

/* back-to-top arrow (reference: .scrollTo, appears after 1200 px) */
.vz-top { position: fixed; z-index: 60; right: 17px; bottom: 27px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 3px; background: rgba(0, 0, 0, .33); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.vz-top.on { opacity: 1; visibility: visible; }
.vz-top svg { width: 16px; height: 16px; }

/* ---------- phones and small tablets: normal scrolling (the reference turns the full-screen scrolling off on phones) ---------- */
@media (max-width: 900px) {
  .vz-snap { padding-top: 0; }
  .page-vuzix main { padding-top: var(--hh); }
  .vz-screen { height: auto; min-height: 0; }
  .vz-banner { height: 62vh; min-height: 380px; }
  .vz-banner-text { height: auto; padding: 18px 20px 22px; }
  .vz-banner-text h1 { font-size: 24px; }
  .vz-banner-text p { font-size: 14px; }
  .vz-intro { padding: 64px 20px; }
  .vz-intro-text { width: 100%; font-size: 15px; line-height: 26px; }
  .vz-prod, .vz-split { grid-template-columns: 1fr; }
  .vz-prod.vz-flip .vz-pic { order: 0; }
  .vz-pic, .vz-prod.vz-flip .vz-pic { padding: 48px 20px 8px; }
  .vz-pic-box { height: auto; max-height: 46vh; }
  .vz-copy { height: auto; padding: 24px 20px 56px; }
  .vz-t1, .vz-t2 { font-size: 30px; line-height: 1.05; }
  .vz-t3 { font-size: 22px; }
  .vz-ul { font-size: 15px; }
  .vz-tools { min-height: 0; }
  .vz-tools-head { padding: 48px 20px 16px; }
  .vz-tools-stage { height: 46vw; min-height: 220px; flex: none; }
  .vz-tools-pic { inset: 0; }
  .vz-tools-pic img { width: 94%; }
  .vz-tools .vz-body { width: auto; margin: 16px 20px 48px; font-size: 15px; }
  .vz-fold { width: 100%; max-height: none; }
  .vz-fold-btn { font-size: 19px; }
  .vz-split-right { min-height: 520px; }
  .vz-panel-info { padding: 0 20px 48px; }
  .vz-film { height: 56.25vw; min-height: 240px; }
  .vz-play svg { width: 72px; height: 72px; }
  .vz-news { padding: 56px 0; }
  .vz-news .s-news .wrap { width: calc(100% - 2 * var(--gutter)); }
  /* a 100 px slide is a quarter of a phone screen: keep the same slide-in, shorter */
  .page-vuzix [data-aos=fade-right] { transform: translate3d(-30px, 0, 0); }
  .page-vuzix [data-aos=fade-left] { transform: translate3d(30px, 0, 0); }
  .page-vuzix [data-aos=fade-up] { transform: translate3d(0, 30px, 0); }
  .page-vuzix [data-aos].aos-animate { transform: translateZ(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vz-tools-pic, .vz-panel, .vz-fold-body { transition: none; }
}