/* GENEROITU — älä muokkaa. Lähde: docs/tenants/nox-visual/etusivu-3d-2026-09/prototype/svc-valokuvaus.css. Aja: node scripts/nv3/port-css.mjs (ADR 0010). */
/* Valokuvaus-palvelusivu (1.10.2026): page.css-pohjan päälle. Etuliite f- (foto), työpinnan palaset lv- (valaisu).
   Pintarytmi paperi · navy · paperi · sävy · paperi · navy · paperi, jokainen osio eri muotoa. */

/* ── Herotaso: valaisukaavio ylhäältä (parts-valaisu.js). Sama sininen viivakieli kuin muiden palvelujen työpinnoissa. ── */
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] > i { color: var(--blue-600); }
/* Lattia: 5 yksikön ruudukko (kehys 32 × 20 ruutua, neliöt) */
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] > i:first-child { background:
  linear-gradient(color-mix(in srgb, var(--blue-600) 10%, transparent) 1px, transparent 1px) 0 0 / calc(100% / 32) calc(100% / 20),
  linear-gradient(90deg, color-mix(in srgb, var(--blue-600) 10%, transparent) 1px, transparent 1px) 0 0 / calc(100% / 32) calc(100% / 20),
  color-mix(in srgb, var(--blue-600) 4%, transparent); }
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] > i:not(:first-child) { border: 0; border-radius: 0; background: none; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-opacity: 0.46; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] svg * { vector-effect: non-scaling-stroke; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] .lv-thin { stroke-width: 1px; stroke-opacity: 0.32; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] .lv-bold { stroke-width: 2.6px; stroke-opacity: 0.55; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] .lv-dash { stroke-width: 1px; stroke-opacity: 0.4; stroke-dasharray: 3 4; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] .lv-center { stroke-width: 1px; stroke-opacity: 0.34; stroke-dasharray: 12 4 2 4; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] .lv-solid { fill: currentColor; fill-opacity: 0.32; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] .lv-fill { fill: currentColor; fill-opacity: 0.08; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] text { fill: currentColor; fill-opacity: 0.66; stroke: none; font: 600 2.3px 'General Sans', sans-serif; letter-spacing: 0.32px; }
html.theme-nox-visual-v3 .p-wire-frame[data-parts='valaisu'] .lv-dim text { font-weight: 500; font-size: 2.7px; letter-spacing: 0; fill-opacity: 0.78; }
/* Valokeilat hengittävät hitaasti eri tahdissa; palasen oma opacity on moottorin käytössä → animointi polygonissa */
html.theme-nox-visual-v3 .lv-glow { animation: lv-pulse 5.2s ease-in-out infinite alternate; }
html.theme-nox-visual-v3 .lv-beam-rim .lv-glow { animation-duration: 4.4s; animation-delay: -1.8s; }
html.theme-nox-visual-v3 .lv-beam-fill .lv-glow { animation-duration: 6.6s; animation-delay: -3.2s; }
@keyframes lv-pulse { from { opacity: 0.5; } to { opacity: 1; } }

/* ── 2 · Työnäytteet: kaksi kuvariviä liukuu vastakkain, kuvat kehittyvät valkoisesta ── */
html.theme-nox-visual-v3 .sub main > section.f-gal { overflow: clip; }
html.theme-nox-visual-v3 .f-gal-head { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(48px, 5vw, 72px); }
html.theme-nox-visual-v3 .f-gal-head .p-head { margin-bottom: 0; }
html.theme-nox-visual-v3 .f-gal-aside { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: flex-end; }
html.theme-nox-visual-v3 .f-gal-aside .link-arrow { color: var(--white); }
html.theme-nox-visual-v3 .f-gal-aside .btn:focus-visible, html.theme-nox-visual-v3 .f-gal-aside .link-arrow:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }
/* Sarake ei saa levetä rivien max-content-leveyteen (aiheet siirtyisivät keskeltä sivun ulkopuolelle) */
html.theme-nox-visual-v3 .f-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); }
html.theme-nox-visual-v3 .f-row { display: flex; gap: clamp(14px, 1.4vw, 22px); width: max-content; margin: 0; padding: 0 var(--gutter); list-style: none; will-change: transform; }
html.theme-nox-visual-v3 .f-row li { flex: none; width: clamp(260px, 25vw, 560px); }
html.theme-nox-visual-v3 .f-row button { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: zoom-in; }
html.theme-nox-visual-v3 .f-row button:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 5px; border-radius: 12px; }
html.theme-nox-visual-v3 .f-print { --dev: 0s; display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--navy-990); }
html.theme-nox-visual-v3 .f-print img { width: 100%; height: 100%; object-fit: cover; scale: 1.04; transition: filter 1.9s var(--ease-out) var(--dev), scale 1.2s var(--ease-out); }
html.theme-nox-visual-v3 .f-row button:hover .f-print img { scale: 1; }
/* Ennen kehitystä vedos on vaalea ja litteä kuin valottunut paperi (JS lisää luokan vain liikkeen kanssa) */
html.theme-nox-visual-v3 .f-sheet.is-latent .f-print img { filter: brightness(1.9) contrast(0.42) saturate(0) blur(3px); }
html.theme-nox-visual-v3 .f-sheet.is-latent .f-print.is-dev img { filter: none; }
html.theme-nox-visual-v3 .f-cap { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; font-size: 14px; color: var(--grey-300); }
html.theme-nox-visual-v3 .f-cap .p-num { font-size: 11.5px; }
html.theme-nox-visual-v3 .f-topics { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: baseline; margin-top: clamp(20px, 2.4vw, 36px); }
html.theme-nox-visual-v3 .f-topics ul { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .f-topics button { padding: 8px 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--grey-300); cursor: zoom-in; transition: color 0.3s; }
html.theme-nox-visual-v3 .f-topics button:hover { color: var(--white); }
html.theme-nox-visual-v3 .f-topics button:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; border-radius: 4px; }

/* ── 3 · Kuvauspalvelut: kaksi pystykuvaa porrastettuna ── */
html.theme-nox-visual-v3 .f-duo-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 110px); align-items: start; }
html.theme-nox-visual-v3 .f-duo-grid .p-head { grid-column: 1; grid-row: 1; }
html.theme-nox-visual-v3 .f-svc { display: block; width: min(100%, 500px); }
html.theme-nox-visual-v3 .f-svc:nth-of-type(1) { grid-column: 1; grid-row: 2; }
html.theme-nox-visual-v3 .f-svc:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; margin-top: clamp(24px, 3vw, 48px); }
html.theme-nox-visual-v3 .f-svc-img { display: block; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-frame); }
html.theme-nox-visual-v3 .f-svc-img img { width: 100%; height: 112%; object-fit: cover; will-change: transform; transition: scale 1.2s var(--ease-out); }
html.theme-nox-visual-v3 .f-svc:hover .f-svc-img img { scale: 1.03; }
html.theme-nox-visual-v3 .f-svc-copy { display: grid; grid-template-columns: 44px 1fr; margin-top: 26px; }
html.theme-nox-visual-v3 .f-svc-copy .p-num { padding-top: 0.6em; }
html.theme-nox-visual-v3 .f-svc h3 { font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: 1.1; letter-spacing: -0.035em; }
html.theme-nox-visual-v3 .f-svc h3 span { display: inline-block; margin-left: 6px; color: var(--blue-600); transition: transform 0.4s var(--ease-out); }
html.theme-nox-visual-v3 .f-svc:hover h3 span { transform: translateX(5px); }
html.theme-nox-visual-v3 .f-svc p { margin-top: 12px; max-width: 28rem; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
html.theme-nox-visual-v3 .f-svc:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 6px; border-radius: 20px; }

/* ── 4 · Mitä kuvaamme: etsin + suljin ── */
html.theme-nox-visual-v3 .f-vf-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(56px, 6vw, 88px); }
html.theme-nox-visual-v3 .f-vf-head .p-head { margin-bottom: 0; }
html.theme-nox-visual-v3 .f-vf-head .p-body { margin-top: 0; }
html.theme-nox-visual-v3 .f-vf-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(48px, 6vw, 110px); }
html.theme-nox-visual-v3 .f-vf-list { margin: 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .f-vf-list li { display: grid; grid-template-columns: 56px 1fr; padding: 6.5vh 0; border-top: 1px solid var(--line-strong); opacity: 0.38; transition: opacity 0.6s var(--ease-out); }
html.theme-nox-visual-v3 .f-vf-list li:last-child { border-bottom: 1px solid var(--line-strong); }
html.theme-nox-visual-v3 .f-vf-list li.is-active { opacity: 1; }
html.theme-nox-visual-v3 .f-vf-list .p-num { padding-top: 0.5em; }
html.theme-nox-visual-v3 .f-vf-list h3 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.1; letter-spacing: -0.035em; }
html.theme-nox-visual-v3 .f-vf-list p { margin-top: 14px; max-width: 30rem; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
html.theme-nox-visual-v3 .f-vf-inline { display: none; }
html.theme-nox-visual-v3 .f-vf-stage { position: sticky; top: 18vh; align-self: start; }
/* Rajausmerkit kuvan kulmissa, kuvan ulkopuolella */
html.theme-nox-visual-v3 .f-vf-view { --m: color-mix(in srgb, var(--blue-600) 55%, transparent); position: relative; }
html.theme-nox-visual-v3 .f-vf-view::before { content: ''; position: absolute; inset: -16px; pointer-events: none; background:
  linear-gradient(var(--m), var(--m)) left top / 26px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) left top / 1.5px 26px no-repeat,
  linear-gradient(var(--m), var(--m)) right top / 26px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) right top / 1.5px 26px no-repeat,
  linear-gradient(var(--m), var(--m)) left bottom / 26px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) left bottom / 1.5px 26px no-repeat,
  linear-gradient(var(--m), var(--m)) right bottom / 26px 1.5px no-repeat, linear-gradient(var(--m), var(--m)) right bottom / 1.5px 26px no-repeat; }
html.theme-nox-visual-v3 .f-vf-frame { position: relative; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: var(--navy); box-shadow: var(--shadow-frame); }
html.theme-nox-visual-v3 .f-vf-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: transform, filter; }
html.theme-nox-visual-v3 .f-vf-frame img.is-active { opacity: 1; }
/* Verhosuljin: säleet pyyhkäisevät ylhäältä alas kuvan vaihtuessa */
html.theme-nox-visual-v3 .f-vf-shutter { position: absolute; inset: 0; z-index: 1; transform: scaleY(0); transform-origin: 50% 0; background: repeating-linear-gradient(180deg, var(--navy) 0 calc(25% - 1px), var(--navy-900) calc(25% - 1px) 25%); }
html.theme-nox-visual-v3 .f-vf-cap { display: flex; gap: 18px; align-items: baseline; margin-top: 30px; font-size: 14.5px; color: var(--ink-2); }
html.theme-nox-visual-v3 .f-vf-cap .p-num { color: var(--grey-400); }
html.theme-nox-visual-v3 .f-vf-cap .p-num b { color: var(--navy); }

/* ── 5 · Näin kuvauspäivä etenee: kuvalista, rasti piirtyy ── */
html.theme-nox-visual-v3 .f-shot-img img { will-change: transform; }
html.theme-nox-visual-v3 .f-shot-list { margin: 44px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
html.theme-nox-visual-v3 .f-shot-list li { display: grid; grid-template-columns: 44px 44px 1fr; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line-strong); }
html.theme-nox-visual-v3 .f-shot-list .p-num { padding-top: 0.35em; }
html.theme-nox-visual-v3 .f-shot-list h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; }
html.theme-nox-visual-v3 .f-shot-list p { margin-top: 8px; max-width: 34rem; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
html.theme-nox-visual-v3 .f-check svg { display: block; width: 26px; height: 26px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
html.theme-nox-visual-v3 .f-check rect { stroke: var(--line-strong); stroke-width: 1.5; fill: var(--white); transition: stroke 0.5s, fill 0.5s; }
html.theme-nox-visual-v3 .f-check path { stroke: var(--white); stroke-width: 2; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 0.55s var(--ease-out) 0.12s; }
html.theme-nox-visual-v3 .f-shot-list li.is-done rect { stroke: var(--blue-600); fill: var(--blue-600); }
html.theme-nox-visual-v3 .f-shot-list li.is-done path { stroke-dashoffset: 0; }

/* ── Kapeat ruudut ── */
@media (max-width: 1100px) {
  html.theme-nox-visual-v3 .f-gal-head, html.theme-nox-visual-v3 .f-vf-head { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .f-gal-aside { justify-content: flex-start; }
}
@media (max-width: 900px) {
  html.theme-nox-visual-v3 .f-row li { width: 72vw; }
  html.theme-nox-visual-v3 .f-cap { font-size: 13.5px; }
  html.theme-nox-visual-v3 .f-topics button { font-size: 15px; }
  html.theme-nox-visual-v3 .f-duo-grid { grid-template-columns: 1fr; row-gap: 56px; }
  html.theme-nox-visual-v3 .f-duo-grid .p-head { margin-bottom: 0; }
  html.theme-nox-visual-v3 .f-svc:nth-of-type(1), html.theme-nox-visual-v3 .f-svc:nth-of-type(2) { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0; }
  html.theme-nox-visual-v3 .f-svc-img { aspect-ratio: 4 / 5; }
  html.theme-nox-visual-v3 .f-vf-grid { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .f-vf-stage { display: none; }
  html.theme-nox-visual-v3 .f-vf-list li { opacity: 1; padding: 36px 0; }
  html.theme-nox-visual-v3 .f-vf-inline { display: block; margin-top: 20px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
  html.theme-nox-visual-v3 .f-shot-list li { grid-template-columns: 40px 36px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-nox-visual-v3 .lv-glow { animation: none; }
  /* Ei liukumista → rivit selataan itse */
  html.theme-nox-visual-v3 .f-row { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  html.theme-nox-visual-v3 .f-row::-webkit-scrollbar { display: none; }
  html.theme-nox-visual-v3 .f-row li { scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  html.theme-nox-visual-v3 .f-print img, html.theme-nox-visual-v3 .f-svc-img img, html.theme-nox-visual-v3 .f-vf-list li, html.theme-nox-visual-v3 .f-check rect, html.theme-nox-visual-v3 .f-check path { transition: none; }
}