/* BRELYON Product page. Shared header/footer/CTA/buttons come from site.css. */

/* The header stays shown on this page: the banner and use-case stages are pinned under it, so hiding it on scroll-down
   left an empty strip above them (KKK.png and the PDF show the header above the picture). */
.page-product .site-header.is-hidden { transform: none; }

/* ---------- hero: brelyon.com/ultra-reality scroll zoom ---------- */
.ur-hero { position: relative; height: 450vh; background: #fff; }
.ur-stage { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); overflow: hidden; background: #000; }
.ur-main { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.ur-video { position: absolute; left: 5%; top: 4.2%; width: 90%; height: 80%; object-fit: cover; }
.ur-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ur-lines { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; opacity: 0; pointer-events: none; }
.ur-txt { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; text-align: center; color: #fff; opacity: 0; pointer-events: none; padding: 0 12%; }
.ur-t1 { opacity: 1; }
.ur-t1 p { font: 300 clamp(30px, 3.4vw, 50px)/1.1 var(--head); text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.ur-t2 p { font: 400 clamp(15px, 1.35vw, 21px)/1.6 var(--body); max-width: 760px; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.ur-t3 p { font: 300 clamp(24px, 2.2vw, 34px)/1.2 var(--head); text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.ur-product { position: absolute; inset: 0; z-index: 4; background: url(../img/p2/hero-product.webp) center 58% / cover no-repeat; will-change: transform, opacity; transform-origin: 50% 46%; }
.ur-intro { position: absolute; left: 0; bottom: clamp(32px, 6vh, 72px); z-index: 5; color: #fff; padding-left: var(--inset); } /* client video 21 Oct: "a little to the right" = the Main page hero inset */
/* The intro text keeps 16px clear of the display. The product picture covers the stage (1.64:1, centred), so on wide
   screens the display's left bezel / leg / foot tip sit at 27.7% / 33% / 26.5% of the width, and on taller screens
   at 50vw minus 0.366 / 0.279 / 0.385 of the stage height. Title width is about 7.6x its font size. */
.ur-intro > * { max-width: min(440px, 26vw, 50vw - (100vh - var(--hh)) * .279 - var(--inset) - 16px); }
.ur-intro > .hero-lead, .ur-intro > .hero-text { max-width: min(440px, 21vw, 50vw - (100vh - var(--hh)) * .385 - var(--inset) - 16px); } /* one even column, clear of the foot */
.ur-intro .hero-title { color: #4b525c; text-shadow: none; font-size: clamp(22px, min(2.65vw, (min(27.7vw, 50vw - (100vh - var(--hh)) * .366) - var(--inset) - 16px) / 7.6), 42px); } /* grey on the light rays, as in the PDF */
.ur-intro .hero-lead, .ur-intro .hero-text { color: #1b1f26; text-shadow: none; }
.ur-hint { position: absolute; z-index: 5; left: 50%; bottom: 18px; transform: translateX(-50%); font: 600 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #1b1f26; opacity: .55; }
.ur-hint::after { content: ""; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: currentColor; animation: hint 1.8s infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- use case (client feedback 20 + 21 Oct): the picture, shown whole with black around it, reaches the top,
   zooms out a little and goes 50% dark; its value block rises over it as a band and stops in the middle; further
   blocks slide in sideways. Scroll length per use case = --len screens (see build_product.py). ---------- */
.uc { position: relative; height: calc((100vh - var(--hh)) * (1 + var(--len))); background: #000; }
.uc-stage { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); overflow: hidden; background: #000; }
.uc-scene { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.uc-pic { position: absolute; inset: 0; }
.uc-pic img { width: 100%; height: 100%; object-fit: cover; }
.uc-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.05) 55%); }
.uc-caption { position: relative; z-index: 1; padding-bottom: clamp(36px, 7vh, 80px); }
.uc-title { font: 300 clamp(30px, 3.4vw, 48px)/1.1 var(--head); color: #fff; }
.uc-sub { color: var(--cyan); font-size: clamp(15px, 1.2vw, 18px); margin-top: 6px; }
.uc-box { margin-top: 26px; max-width: 470px; border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.35); backdrop-filter: blur(4px); padding: 22px 26px; }
.uc-box h3 { color: var(--cyan); font: 500 15px/1.4 var(--body); }
.uc-box p { color: #c9d0d8; font-size: 13.5px; margin-top: 10px; }
.uc-dim { position: absolute; inset: 0; z-index: 2; background: #040507; opacity: 0; pointer-events: none; }
.uc-band { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; transform: translateY(-50%); overflow: hidden; background: linear-gradient(180deg, #101318 0%, #000 26%, #000 100%); border-block: 1px solid #ffffff14; box-shadow: 0 -36px 80px rgba(0,0,0,.6), 0 36px 80px rgba(0,0,0,.6); will-change: transform; }
/* light background colour chosen in the panel: dark text in the box under the picture */
.uc-light .uc-box { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.18); }
.uc-light .uc-box p { color: #2b3038; }
.uc-light .uc-box h3 { color: #0b7f8c; }
/* the panel can set a background picture / colour behind the picture and behind the black blocks (client: "it's a picture background") */
.uc-stage, .uc-band { background-position: center; background-size: cover; background-repeat: no-repeat; }
.uc-track { display: flex; width: calc(var(--n) * 100%); will-change: transform; }
.uc[data-dir="ltr"] .uc-track { flex-direction: row-reverse; }
.vs { flex: 0 0 calc(100% / var(--n)); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(22px, 3.6vh, 38px) clamp(16px, 5vw, 80px) clamp(32px, 4.6vh, 46px); }
.vs-copy h3 { font: 300 clamp(24px, 2.3vw, 34px)/1.25 var(--head); color: var(--cyan); }
.vs-copy ul { margin: 18px 0 0; padding-left: 18px; color: #c4cbd3; font-size: clamp(13.5px, .9vw, 15.5px); line-height: 1.55; }
.vs-copy li { margin-bottom: 9px; }
.vs-copy li b { color: var(--cyan); font-weight: 600; }
.vs-copy .btn { margin-top: 14px; background: none; cursor: pointer; font-family: inherit; }
.vs-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; }
.vs-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease); }
.vs.is-in .vs-media img { transform: scale(1); }
/* client 30 Oct (P1 Visual Engine): a YouTube video in place of the picture, and a small line under it */
.vs-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vs-side { min-width: 0; }
.vs-side .vs-media { width: 100%; }
.vs-cap { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #9aa3ad; text-align: center; }
.uc-dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 8px; }
.uc-dots i { width: 26px; height: 2px; background: #ffffff33; transition: background .3s; }
.uc-dots i.on { background: var(--cyan); }
.uc-band:has(.vs:only-child) .uc-dots { display: none; }
/* desktop sizes and positions from the client's KKK.png, PPP.png and PRODUCT page.pdf (21 Oct) */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /* the picture is always shown whole with black around it, as on brelyon.com/use-cases: product.js sizes it from its
     own proportions (90% of the width, at most 85% of the height, when it reaches the top) and zooms it */
  .uc-pic { inset: auto; left: var(--pic-x, 5%); top: var(--pic-y, 3%); width: var(--pic-w, 90%); height: var(--pic-h, 80%); transform-origin: 50% 50%; will-change: transform; }
  .uc-pic::after { background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 45%); }
  .uc-pic img { clip-path: inset(2px 0 0); } /* uc-med.webp has a 1px grey line on its top edge */
  /* KKK.png: title about 6% in from the picture's left edge, the text box below it hanging over the picture's
     bottom edge (product.js keeps the box on screen) */
  .uc-caption { position: absolute; left: var(--cap-x, 10%); top: var(--box-y, 70%); width: var(--box-w, 33.8vw); padding: 0; }
  .uc-head { position: absolute; left: 0; bottom: calc(100% + var(--head-gap, 60px)); white-space: nowrap; }
  /* caption text scales with the picture (KKK: the title spans about 24% of the picture's width); a soft shadow keeps
     it readable over bright skies and picture details */
  .uc-title { font-size: max(22px, var(--pic-w, 90vw) * .0229); text-shadow: 0 1px 14px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.45); }
  .uc-sub { font-size: max(13px, var(--pic-w, 90vw) * .0111); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
  .uc-box { width: 100%; max-width: none; margin-top: 0; padding: max(18px, var(--pic-w, 90vw) * .0266) max(18px, var(--pic-w, 90vw) * .0244); background: rgba(0,0,0,.18); backdrop-filter: none; }
  .uc-box h3 { font-size: max(14px, var(--pic-w, 90vw) * .0102); color: #a6e8ee; text-wrap: balance; }
  .uc-box p { font-size: max(13px, var(--pic-w, 90vw) * .0088); line-height: 1.6; }
  /* PPP.png (2400x740) + PDF frame 2: the block keeps the PPP proportion (width / 3.24, at most 66% of the screen) and
     stops near the middle; text 9.2% in from the left, a 16:9 picture 45.4% of the width ending 5.9% from the right.
     Its bottom shadow softens the edge where it crosses the dimmed text box */
  .uc-band { min-height: min(calc(100vw / 3.24), calc((100vh - var(--hh)) * .66)); display: flex; flex-direction: column; justify-content: center; box-shadow: 0 -36px 80px rgba(0,0,0,.6), 0 26px 34px 6px rgba(0,0,0,.85); }
  .vs { grid-template-columns: minmax(0, 1fr) 45.4vw; column-gap: clamp(40px, 27.26vw - 302px, 11.5vw); padding: clamp(20px, 3.4vh, 40px) 5.9vw clamp(26px, 3.8vh, 44px) 9.2vw; }
  .vs-copy h3 { font-size: clamp(22px, 1.68vw, 40px); }
  .vs-copy ul { margin-top: 14px; font-size: clamp(13px, .75vw, 16px); line-height: 1.5; }
  .vs-copy li { margin-bottom: 7px; }
  /* PPP.png details: pale light heading, square points, 'Watch Video' in plain letters lined up with the points,
     pictures shown whole (letterboxed on black) */
  .vs-copy h3 { color: #8fdde6; text-wrap: balance; }
  .vs-copy ul { list-style: square; }
  .vs-copy .btn { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; margin-left: 18px; }
  .vs-media { background: #000; }
  .vs-media img { object-fit: contain; }
}
/* very wide screens: the 16:9 picture may not push the block past 66% of the screen height */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .vs-media { width: min(100%, ((100vh - var(--hh)) * .66 - 84px) * 16 / 9); justify-self: end; }
  .vs-side { width: min(100%, ((100vh - var(--hh)) * .66 - 110px) * 16 / 9); justify-self: end; } /* leaves room for the line under it */
}
/* laptop screens: a little tighter so the longest blocks (Medical) keep close to the PPP proportion */
@media (min-width: 901px) and (max-height: 800px) and (prefers-reduced-motion: no-preference) {
  .vs { padding-top: 16px; padding-bottom: 22px; }
  .vs-copy ul { line-height: 1.42; }
  .vs-copy li { margin-bottom: 5px; }
}
/* small desktops: more room for the text so the block stays short; the banner's taller text block lifts the lead to
   the display's bottom edge, so it also keeps clear of the bezel */
@media (min-width: 901px) and (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
  .vs { grid-template-columns: minmax(0, 1fr) 40vw; column-gap: 32px; padding-left: 5vw; padding-right: 4vw; }
  .ur-intro > .hero-lead { max-width: min(440px, 22.3vw - 16px, 50vw - (100vh - var(--hh)) * .366 - var(--inset) - 16px); }
}
@media (min-width: 901px) and (max-height: 600px) { .vs-copy li:nth-child(n+4) { display: none; } }

/* ---------- FAQ (vuzix.com style accordion) ---------- */
.s-faq { background: #e9e9e6; color: #111; padding: clamp(40px, 5vw, 68px) 0; } /* client 'Reduce Hight' PDF: a little less space above and below */
.faq-kicker { color: #2d6fe0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.faq-h { font: 600 clamp(22px, 2vw, 30px)/1.2 var(--head); margin: 6px 0 26px; }
.faq-item { border-top: 1px solid #c9c9c4; }
.faq-item:last-child { border-bottom: 1px solid #c9c9c4; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 15px; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { position: relative; width: 14px; height: 14px; flex: none; }
.faq-item summary span::before, .faq-item summary span::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: #111; transition: transform .3s var(--ease); }
.faq-item summary span::after { transform: rotate(90deg); }
.faq-item[open] summary span::after { transform: rotate(0); }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 0 20px; color: #444; font-size: 14px; max-width: 820px; }
.faq-item summary:focus-visible { outline: 2px solid #2d6fe0; outline-offset: 4px; }

/* ---------- pop-up ---------- */
.popup { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.popup.open { opacity: 1; }
.popup[hidden] { display: none; }
.popup-card { position: relative; display: grid; grid-template-columns: auto 1fr; max-width: 880px; max-height: 86vh; background: #0d1015; border: 1px solid #ffffff22; transform: translateY(18px) scale(.98); transition: transform .4s var(--ease); }
.popup.open .popup-card { transform: none; }
.popup-media img { height: min(78vh, 560px); width: auto; object-fit: cover; }
.popup-copy { padding: 34px 32px; align-self: center; }
.popup-copy h3 { font: 400 26px/1.2 var(--head); margin-bottom: 12px; }
.popup-copy p:not(.kicker) { color: #c4cbd3; font-size: 14px; }
.popup-x { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: none; color: #fff; font-size: 30px; cursor: pointer; line-height: 1; }

/* ---------- hero, scroll film (client 30 Oct: the brelyon.com/ultra-reality-extend banner) ----------
   The film fills the screen and follows the scroll (about 3 screens, as there); each line fades in and out in turn at
   the top, as there; the title / texts / button come over the last, dark frames. */
.ur-film { height: 400vh; background: #000; }
.urf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.urf-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 32%), linear-gradient(0deg, rgba(0,0,0,.55), transparent 45%); pointer-events: none; }
.urf-line { position: absolute; z-index: 3; left: 50%; top: 12%; transform: translateX(-50%); width: min(90%, 14.5em); margin: 0; text-align: center; color: #c9c6ff; font: 300 clamp(24px, 2.3vw, 40px)/1.2 var(--head); text-shadow: 0 2px 18px rgba(0,0,0,.6); opacity: 0; pointer-events: none; }
.urf-intro { opacity: 0; visibility: hidden; }
.urf-intro .hero-title { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.urf-intro .hero-lead, .urf-intro .hero-text { color: #d8dce2; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.ur-film .ur-hint { color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ur-hero { height: 320vh; }
  .ur-intro { display: none; }
  .ur-product { background-size: 170% auto; }
  .vs { grid-template-columns: 1fr; padding: 44px var(--gutter); }
  .vs-media, .vs-side { order: -1; }
  .popup-card { grid-template-columns: 1fr; overflow: auto; }
  .popup-media img { width: 100%; height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .ur-hero { height: auto; }
  .ur-stage { position: relative; top: 0; }
}
/* phones and reduced motion: the film plays by itself on repeat, with its first line and the texts over it */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .ur-film { height: auto; }
  .ur-film .ur-stage { position: relative; top: 0; height: max(560px, calc(100svh - var(--hh))); }
  .ur-film .urf-intro { display: block; opacity: 1; visibility: visible; padding-right: var(--inset); }
  .ur-film .urf-intro > * { max-width: none; }
  .ur-film .ur-hint { display: none; }
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .uc { height: auto; }
  .uc-stage { position: relative; top: 0; height: auto; overflow: visible; }
  .uc-scene { position: relative; min-height: min(78vh, 640px); }
  .uc-pic { transform: none !important; }
  .uc-caption { transform: none !important; }
  .uc-dim { display: none; }
  .uc-band { position: relative; top: 0; transform: none !important; box-shadow: none; }
  .uc-track, .uc[data-dir="ltr"] .uc-track { flex-direction: column; width: 100%; transform: none !important; }
  .vs { flex-basis: auto; }
  .uc-dots { display: none; }
}

/* ---------- video pop-ups (client video 21 Oct, 9 PM: the "Watch Video" pop-up plays a video) ---------- */
.popup-video .popup-card { display: block; width: min(1100px, 100%); background: #000; padding: 0; }
.popup-vid { display: block; width: 100%; height: auto; max-height: calc(100vh - 140px); background: #000; }
.popup-vtitle { color: #fff; font: 400 15px/1.4 var(--body); padding: 12px 18px 14px; }
.popup-video .popup-x { z-index: 2; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.popup-has-video .popup-card { grid-template-columns: 1fr; width: min(1000px, 100%); max-height: 92vh; overflow: auto; }
.popup-has-video .popup-media .popup-vid { max-height: 60vh; }

/* client 26 Oct (P1.pdf): a block can show a looping video in place of its picture; a button can open a picture */
.vs-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.popup-picture .popup-card img { display: block; width: 100%; height: auto; max-height: 84vh; object-fit: contain; background: #000; }