/* ==========================================================================
   NOOR EYEWEAR: the digital layer ("light lab, digital details")
   The site stays bright and clinical; on top of it, the language of lens
   software: a faint measurement grid, instrument labels in a mono face,
   viewfinder brackets on photos, lines of light on cards, and headings that
   arrive with a scan line. Colour is still light through a lens.
   Motion: transform / opacity / clip-path only; off with reduced motion.
   ========================================================================== */
:root {
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --grid-line: rgba(31, 111, 114, .075);
  --grid-size: 48px;
  --glow: #8FE3C4;
}

/* ---------------------------------------------------------------- the measurement grid (light grounds only) */
.page-body, .lab {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
.col--clinic:not(.col--night) {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), linear-gradient(180deg, #F2F8F7 0%, #E8F2F1 100%);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
}
.col--show {
  background-image: linear-gradient(rgba(168,101,15,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(168,101,15,.06) 1px, transparent 1px), linear-gradient(180deg, #FDF7EE 0%, #FAF0E0 100%);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
}
.split--prices .col--show {
  background-image: linear-gradient(rgba(168,101,15,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(168,101,15,.07) 1px, transparent 1px), linear-gradient(180deg, #FBF1E1 0%, #F7E7CF 100%);
}
.col--night {
  background-image: linear-gradient(rgba(143,227,196,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(143,227,196,.07) 1px, transparent 1px), radial-gradient(120% 90% at 15% 0%, #235A5C 0%, #133A3C 50%, #0D2A2B 100%);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
}

/* ---------------------------------------------------------------- viewfinder brackets on photographs */
.photo, .fxp__photo { position: relative; }
.photo::after, .fxp__photo::after {
  content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: 2; opacity: .9;
  --b: rgba(255,255,255,.9); --l: 22px; --t: 1.5px;
  background:
    linear-gradient(var(--b), var(--b)) top left / var(--l) var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) top right / var(--l) var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) top right / var(--t) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / var(--l) var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / var(--l) var(--t) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / var(--t) var(--l) no-repeat;
}
.fxp__photo::after { --b: rgba(26,26,26,.5); }
.fxp__photo.is-model::after { --b: rgba(255,255,255,.9); }

/* ---------------------------------------------------------------- lines of light on cards (pointer devices) */
@media (hover: hover) and (pointer: fine) {
  .fx-card, .pkg, .service { transition: box-shadow 260ms var(--sc-ease-out, ease), transform 200ms var(--sc-ease-out, ease); }
  .fx-card:hover, .pkg:hover, .service:hover {
    box-shadow: 0 0 0 1px rgba(127,181,154,.65), 0 0 26px -6px rgba(143,227,196,.55), 0 14px 32px -16px rgba(31,111,114,.35);
  }
  .fx-card__img::after {
    content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 2; opacity: 0; transform: scale(1.04);
    transition: opacity 220ms ease, transform 280ms var(--sc-ease-out, ease);
    --b: var(--glow); --l: 18px; --t: 2px;
    background:
      linear-gradient(var(--b), var(--b)) top right / var(--l) var(--t) no-repeat,
      linear-gradient(var(--b), var(--b)) top right / var(--t) var(--l) no-repeat,
      linear-gradient(var(--b), var(--b)) bottom left / var(--l) var(--t) no-repeat,
      linear-gradient(var(--b), var(--b)) bottom left / var(--t) var(--l) no-repeat,
      linear-gradient(var(--b), var(--b)) bottom right / var(--l) var(--t) no-repeat,
      linear-gradient(var(--b), var(--b)) bottom right / var(--t) var(--l) no-repeat;
  }
  .fx-card:hover .fx-card__img::after { opacity: 1; transform: scale(1); }
}
.fx-card__img { position: relative; }

/* ---------------------------------------------------------------- headings arrive with a scan line (stay.js adds the classes) */
/* hidden with opacity, not clip-path: a clipped element never counts as "in view" for IntersectionObserver */
.scan-pre { opacity: 0; transform: translate3d(0, 10px, 0); }
.scan-go { opacity: 1; transform: none; position: relative; transition: opacity 520ms cubic-bezier(.23, 1, .32, 1), transform 620ms cubic-bezier(.23, 1, .32, 1); }
.scan-go::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 0; height: 100%; pointer-events: none;
  background: linear-gradient(180deg, transparent calc(100% - 2px), var(--glow) calc(100% - 2px));
  transform-origin: top; animation: scan-sweep 820ms cubic-bezier(.23, 1, .32, 1) forwards;
}
@keyframes scan-sweep { 0% { transform: scaleY(0); opacity: 1; } 80% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------------------------------------------------------------- home hero: the lens room, in HD */
.hero__stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: linear-gradient(rgba(31,111,114,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(31,111,114,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 85%); mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 85%);
}
.hero__scan {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent calc(100% - 2px), var(--glow) calc(100% - 2px)), linear-gradient(180deg, rgba(143,227,196,0), rgba(143,227,196,.12));
  transform-origin: top;
}
.hero__scan.is-on { animation: hero-scan 1100ms cubic-bezier(.23, 1, .32, 1) forwards; }
@keyframes hero-scan { 0% { opacity: 1; transform: scaleY(0); } 75% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }

/* ---------------------------------------------------------------- magnetic buttons (stay.js moves them a little toward the pointer) */
.is-magnet { transition: transform 260ms cubic-bezier(.23, 1, .32, 1); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .scan-pre { opacity: 1; transform: none; }
  .scan-go, .scan-go::after, .hero__scan, .is-magnet { animation: none !important; transition: none !important; }
  .scan-go::after { display: none; }
}

/* Arwes moving lines behind the home hero (stay.js) */
.hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .9;
  -webkit-mask-image: radial-gradient(85% 75% at 50% 45%, #000 25%, transparent 90%); mask-image: radial-gradient(85% 75% at 50% 45%, #000 25%, transparent 90%); }

/* ---------------------------------------------------------------- Noor's own Lottie animations in page heads */
.page-head { position: relative; }
.head-anim { position: absolute; right: calc(var(--sc-gutter) + 150px); top: 50%; width: clamp(140px, 15vw, 230px); aspect-ratio: 1; translate: 0 -46%;
  pointer-events: none; opacity: 0; transition: opacity 500ms ease; }
.head-anim.is-ready { opacity: 1; }
.head-anim::before { content: ""; position: absolute; inset: -6%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, #FBF8F2 55%, rgba(251,248,242,.85) 70%, rgba(143,227,196,.16) 82%, rgba(143,227,196,0)); }
@media (max-width: 899px) { .head-anim { right: 12px; top: auto; bottom: 8px; width: 96px; translate: 0 0; } }
@media (max-width: 520px) { .head-anim { display: none; } }

/* ---------------------------------------------------------------- Noor icons (noor-icons.js): ink + one colour of light */
:root { --ic: #0B7F7A; --iw: #CDE7E5; --noor-clinic: #0B7F7A; --noor-show: #C98A12; }
.nic { width: 24px; height: 24px; flex: none; overflow: visible; color: var(--ink, #1A1A1A); }
[data-light="amber"] { --ic: var(--noor-show); --iw: #F3E3C3; }
[data-light="coral"] { --ic: var(--noor-show); --iw: #F3E3C3; }
[data-light="violet"] { --ic: var(--noor-clinic); --iw: #CDE7E5; }
[data-light="teal"] { --ic: var(--noor-clinic); --iw: #CDE7E5; }
[data-light="sheen"] { --ic: var(--noor-show); --iw: #F3E3C3; }
/* the icon box: square, hairline, like the site's buttons; instrument corners in the icon's colour */
.nic-tile { position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex: none; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(26,26,26,.16); }
.nic-tile .nic { width: 28px; height: 28px; }
.nic-tile::after { content: ""; position: absolute; inset: -1px; pointer-events: none; transition: inset 220ms cubic-bezier(.23,1,.32,1);
  --b: var(--ic); --l: 8px; --t: 2px;
  background: linear-gradient(var(--b), var(--b)) top left / var(--l) var(--t) no-repeat, linear-gradient(var(--b), var(--b)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / var(--l) var(--t) no-repeat, linear-gradient(var(--b), var(--b)) bottom right / var(--t) var(--l) no-repeat; }
@media (hover: hover) and (pointer: fine) { :hover > .nic-tile::after, .nic-tile:hover::after { inset: -5px; } }

/* ---------------------------------------------------------------- page banner: the chart title + Arwes frame + readouts + illustration */
.page-head[data-readouts] { isolation: isolate; padding-top: calc(var(--chrome-h, 72px) + var(--sc-9, 64px) + 20px); }
.head-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.head-frame { position: absolute; z-index: -1; pointer-events: none;
  top: calc(var(--chrome-h, 72px) + 18px); bottom: 14px; left: max(10px, calc(var(--pad-x) - 30px)); right: max(10px, calc(var(--pad-x) - 30px));
  --arwes-frames-line-color: rgba(31,111,114,.7); --arwes-frames-bg-color: rgba(255,255,255,.35); --arwes-frames-bg-stroke: none;
  --arwes-frames-line-filter: drop-shadow(0 0 3px rgba(143,227,196,.7)); }
.readouts { display: flex; flex-wrap: wrap; gap: 10px 0; margin: calc(-1 * var(--sc-6, 24px)) 0 var(--sc-7, 32px); }
.readout { display: flex; align-items: center; gap: 12px; padding: 4px 22px 4px 0; margin-right: 22px; border-right: 1px solid rgba(26,26,26,.12); }
.readout:last-child { border-right: 0; }
.readout .nic-tile { width: 46px; height: 46px; border-radius: 14px; } .readout .nic-tile .nic { width: 28px; height: 28px; }
.readout small { display: block; font: 700 .68rem/1.2 var(--sc-font-display, Archivo); font-variation-settings: "wdth" 125; letter-spacing: .14em; text-transform: uppercase; color: var(--ic); filter: brightness(.8); }
.readout b { display: block; font: 700 1.02rem/1.3 var(--sc-font-display, Archivo); color: var(--ink, #1A1A1A); }
.page-head[data-readouts] .head-anim { width: clamp(200px, 22vw, 330px); right: calc(var(--pad-x) + 60px); translate: 0 -50%; }
.page-head[data-readouts] .head-anim::before { inset: 4%; background: radial-gradient(closest-side, #FBF8F2 60%, rgba(251,248,242,0)); }
@media (max-width: 899px) {
  .readouts { margin-top: 0; } .readout { border-right: 0; padding-right: 0; margin-right: 18px; }
  .head-frame { display: none; }
}

/* gold + teal everywhere colour carries meaning: clinic (teal) and showroom (gold) */
[data-light="clinic"] { --ic: var(--noor-clinic); --iw: #CDE7E5; }
[data-light="show"] { --ic: var(--noor-show); --iw: #F3E3C3; }
.exam, .exam:has(a[href*="type=55"]), .exam:has(a[href*="type=54"]), .exam:has(a[href*="type=56"]), .exam:has(a[href*="type=285"]) { --exc: var(--noor-clinic); }
.pkg, .pkg[data-pkg="pro"], .pkg[data-pkg="prolux"] { --pkc: var(--noor-show); }
.pkg__tag, .fx-card__tag { background: var(--noor-show); }
.bridge__side--l::before { background: var(--noor-clinic); } .bridge__side--r::before { background: var(--noor-show); }
/* headings just fade up: the sweeping line under every heading was noise (Emil: animate with a purpose) */
.scan-go::after { display: none !important; }