/*!
 * QMAN PRO - Website design and development
 * Author: Frey Gabor
 * Designer: Frey Gabor
 * Developer: Frey Gabor
 * Official developer website: https://freygabor.com/
 * Copyright (c) 2026 Frey Gabor. All rights reserved.
 * Applies to the custom website implementation and original development assets.
 * Client branding, supplied content/media and third-party assets retain their own rights.
 */
/* QMAN PRO atmospheric layers. All decoration is independent of page content. */
[data-scene] {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  --art-ink:rgba(92,100,108,.13);
  --art-red:rgba(228,25,25,.3);
}
[data-scene]>.container { position:relative; z-index:1; }
.section-art { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; user-select:none; }
.art-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(var(--art-ink) 1px,transparent 1px),linear-gradient(90deg,var(--art-ink) 1px,transparent 1px);
  background-size:78px 78px;
  opacity:.42;
  mask-image:linear-gradient(115deg,transparent 28%,#000 100%);
}
.art-drawing {
  display:block;
  position:absolute;
  width:850px;
  height:auto;
  top:-135px;
  right:-130px;
  stroke-width:1.4;
  stroke:var(--art-ink);
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.art-trace { stroke:var(--art-red); stroke-width:2; stroke-dasharray:18 82; animation:architectural-trace 22s linear infinite; animation-play-state:paused; }
.art-nodes { fill:var(--art-red); stroke:none; }
.art-ribbon { position:absolute; width:240px; height:120%; right:20%; top:-10%; transform:skewX(-24deg); border-inline:1px solid var(--art-ink); background:linear-gradient(180deg,transparent,rgba(255,255,255,.23),transparent); }
.scene-visible .art-trace { animation-play-state:running; }

/* A bright opening with an animated architectural outline. */
[data-scene=hero] { background:#fff; }
.art-hero .art-drawing { width:1100px; right:-250px; top:-210px; opacity:.65; }
.art-hero .art-grid { mask-image:linear-gradient(90deg,transparent 48%,#000); opacity:.33; }
.art-hero .art-ribbon { left:-130px; top:160px; width:430px; height:660px; border-radius:50%; transform:rotate(-20deg); border:1px solid #dfe2e6; background:transparent; }
.hero-visual { box-shadow:0 25px 55px #19191915; }
.specification-strip { background:rgba(255,255,255,.86); backdrop-filter:blur(8px); border-radius:0 0 14px 14px; }

/* Precision rings sit behind the benefits, leaving the cards clean. */
[data-scene=system] { background:linear-gradient(160deg,#fafbfc,#fff 65%); }
.art-system .art-orbit { width:710px; top:-345px; right:-10px; opacity:.7; }
.art-system .art-grid { opacity:.21; mask-image:linear-gradient(0deg,#000,transparent 70%); }
.art-system .art-ribbon { display:none; }
.benefits-grid { background:rgba(255,255,255,.95); box-shadow:0 15px 45px #202e3c05; }
.benefit { transition:background .25s; }
.benefit:hover { background:#f7f8fa; }
.benefit .feature-icon { transition:transform .3s; }
.benefit:hover .feature-icon { transform:translateY(-4px); }

/* Retain the real loft photo; introduce a quiet measured outline around it. */
.art-options .art-drawing { top:auto; bottom:-170px; right:-30px; width:700px; opacity:.45; }
.art-options .art-grid { display:none; }
.art-options .art-ribbon { right:52%; opacity:.45; }

/* A charcoal engineering drawing with a slow travelling red highlight. */
[data-scene=process] { --art-ink:rgba(255,255,255,.13); --art-red:rgba(255,96,91,.65); }
.art-process .art-drawing { width:1050px; right:-160px; top:-270px; opacity:.76; }
.art-process .art-grid { opacity:.24; mask-image:linear-gradient(90deg,transparent 20%,#000); background-size:62px 62px; }
.art-process .art-ribbon { right:25%; width:200px; border-color:#ffffff0b; background:linear-gradient(180deg,#ffffff04,transparent); }
.process-grid li { --step-delay:0ms; }
.process-grid li:nth-child(2) { --step-delay:140ms; }
.process-grid li:nth-child(3) { --step-delay:280ms; }
.process-grid li:nth-child(4) { --step-delay:420ms; }
.process-grid li:after { content:''; position:absolute; top:-1px; left:0; width:100%; height:1px; background:linear-gradient(90deg,#ff7871,transparent); transform-origin:left; opacity:.7; }
.scene-visible .process-grid li:after { animation:step-line 1.2s cubic-bezier(.2,.8,.2,1) var(--step-delay) backwards; }

/* Softer workspace around the checker and founder story. */
[data-scene=checker] { background:linear-gradient(125deg,#f7f8fa,#f3f5f7 60%,#edf0f2); }
.art-checker .art-drawing { right:auto; left:-280px; top:auto; bottom:-270px; width:780px; opacity:.6; }
.art-checker .art-grid { opacity:.18; }
.art-checker .art-ribbon { display:none; }
.checker-panel { box-shadow:0 20px 65px #4244510b,0 1px 3px #00000003; }
[data-scene=story] { background:#fff; }
.art-story .art-orbit { width:870px; right:-480px; top:-150px; opacity:.65; }
.art-story .art-grid { display:none; }
.art-story .art-ribbon { width:340px; right:5%; border-color:#dfe2e6; }
.founder-visual { transition:box-shadow .4s; }
.founder-visual:hover { box-shadow:0 28px 75px #19191924; }

[data-scene=watch] { background:linear-gradient(130deg,#f5f7f8,#f0f1f2); }
.art-watch .art-drawing { width:770px; right:-210px; top:-310px; opacity:.6; }
.art-watch .art-grid { opacity:.17; mask-image:linear-gradient(180deg,#000,transparent 600px); }
.art-watch .art-ribbon { display:none; }
.gallery-invitation { margin-top:15px; padding:35px 40px; border:1px solid #dfe2e6; border-radius:12px; background:#fff; }

/* A quieter FAQ followed by a bolder architectural closing panel. */
[data-scene=faq] { background:#fff; }
.art-faq .art-drawing { width:670px; right:auto; left:-390px; top:auto; bottom:-350px; opacity:.45; }
.art-faq .art-grid,.art-faq .art-ribbon { display:none; }
.faq-list details { background:#ffffffc9; transition:background .2s; }
.faq-list details[open] { background:#fff; }
[data-scene=contact] { background:var(--red); --art-ink:rgba(255,255,255,.18); --art-red:rgba(255,220,202,.55); }
.art-contact .art-drawing { width:900px; right:-100px; top:-165px; opacity:.56; }
.art-contact .art-grid { opacity:.19; }
.art-contact .art-ribbon { right:42%; border-color:#ffffff0b; background:#ffffff03; }

/* Gallery introduction carries the same visual identity. */
[data-scene=gallery] { background:#fff; }
.art-gallery .art-drawing { width:740px; right:-270px; top:-390px; opacity:.65; }
.art-gallery .art-grid { opacity:.17; }
.art-gallery .art-ribbon { right:45%; opacity:.45; }

/* Small wayfinding and an explicit pause control, including the footer. */
.reading-progress { position:absolute; bottom:-1px; left:0; width:100%; height:2px; background:var(--red); transform:scaleX(var(--reading-progress,0)); transform-origin:left; pointer-events:none; }
.announcement-inner { align-items:center; padding-block:5px; }
.announcement-tools { display:flex; align-items:center; gap:25px; }
.motion-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:32px; background:transparent; border:0; padding:4px 0 4px 15px; border-left:1px solid #cfd0d3; color:#5b5b60; font:inherit; font-size:.7rem; letter-spacing:0; cursor:pointer; white-space:nowrap; }
.motion-toggle:hover { color:var(--red); }
.motion-toggle-icon { width:13px; height:13px; display:inline-block; position:relative; }
.motion-toggle-icon:before,.motion-toggle-icon:after { content:''; position:absolute; width:2px; height:9px; top:2px; background:currentColor; }
.motion-toggle-icon:before { left:3px; }
.motion-toggle-icon:after { right:3px; }
.motion-toggle[aria-pressed=false] .motion-toggle-icon:before { width:0; height:0; top:2px; left:4px; background:transparent; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:7px solid currentColor; }
.motion-toggle[aria-pressed=false] .motion-toggle-icon:after { display:none; }
.footer-bottom .motion-toggle { font-size:.75rem; }
.reveal-arrived { animation:section-arrival .7s cubic-bezier(.18,.75,.3,1) var(--arrival-delay,0ms) backwards; }

@keyframes architectural-trace { from { stroke-dashoffset:110; } to { stroke-dashoffset:10; } }
@keyframes step-line { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes section-arrival { from { opacity:.2; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

.motion-off .art-trace,.motion-off .process-grid li:after,
.motion-suspended .art-trace { animation-play-state:paused!important; }
.motion-off .reveal-arrived { animation:none!important; }
@media(max-width:960px) {
  .announcement-tools>span { display:none; }
  .announcement-inner { justify-content:space-between; }
  .art-drawing { opacity:.45; }
  .art-hero .art-drawing { width:770px; top:-175px; right:-390px; }
  .art-process .art-drawing { width:800px; right:-350px; top:-180px; opacity:.5; }
  .art-story .art-drawing { right:-520px; top:25%; }
  .art-ribbon { opacity:.3; }
  .gallery-invitation { padding:30px; }
}
@media(max-width:600px) {
  .announcement-inner { font-size:.65rem; }
  .motion-toggle { min-height:34px; font-size:.64rem; padding-left:10px; }
  .art-grid { background-size:56px 56px; }
  .art-hero .art-ribbon { width:320px; top:270px; left:-190px; }
  .art-system .art-drawing { width:500px; right:-270px; top:-200px; }
  .art-process .art-drawing { right:-470px; opacity:.45; }
  .art-story .art-drawing { width:640px; right:-390px; top:45%; opacity:.4; }
  .art-gallery .art-drawing { width:540px; right:-370px; top:-250px; }
  .art-contact .art-drawing { right:-520px; top:-40px; opacity:.4; }
  .gallery-invitation { padding:26px; }
}
@media(prefers-reduced-motion:reduce) {
  .art-trace,.process-grid li:after,.reveal-arrived { animation:none!important; }
  .motion-toggle { display:none!important; }
}
@media print { .section-art,.motion-toggle,.reading-progress { display:none!important; } [data-scene] { overflow:visible; } }

/* Click-to-play cover retains the supplied photographic treatment. */
.video-player { width:100%; height:100%; min-height:200px; }
.video-player iframe { width:100%; height:100%; min-height:200px; }
.video-cover .video-status { font-size:.85rem; line-height:1.5; max-width:440px; margin:18px 0 0; color:#f5c6c2; }