/* v7 effects: A1 hero light, A2 face scan card, A3 product rooms, section 2 motion N1. */

/* ---------- A1 hero: shader under the skin-texture field; the v6 gradient stays as the fallback ---------- */
.fx-hero{position:absolute;inset:0;z-index:-2;display:block;opacity:0;transition:opacity 1.2s ease}
.hero.fx-on .fx-hero{opacity:1}
.hero.fx-off .fx-hero{display:none}

/* ---------- A2 tech: heading + scan card ---------- */
.tech-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(36px,4.6vw,64px)}
.tech-top .sec-head{margin-bottom:0}
.fx-scan{margin:0;background:rgba(255,255,255,.5);border:1px solid var(--hair);border-radius:var(--r-card);padding:14px 14px 16px}
.fx-scan .shot{position:relative;aspect-ratio:1;border-radius:calc(var(--r-card) - 6px);overflow:hidden;background:#8a8f96}
.fx-scan .shot img,.fx-scan .shot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-scan .shot img{object-fit:cover}
.fx-scan canvas.fx-beam{mix-blend-mode:screen;transition:opacity .4s}
.fx-scan figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;font-size:15px;font-weight:600;color:var(--t-head)}
.fx-scan figcaption small{font-size:13px;font-weight:500;color:var(--t-aux);white-space:nowrap}
.fx-scan .gen-tag{position:static;inset:auto;padding:2px 8px}
@media(max-width:899px){.tech-top{grid-template-columns:1fr}.fx-scan{max-width:420px}}

/* ---------- A3 products: sticky room colour behind the content ---------- */
#products{position:relative;overflow:clip}
.fx-sticky{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;pointer-events:none}
.fx-room{position:absolute;inset:0;background-color:var(--paper);transition:background-color .6s ease}
.fx-sticky canvas{position:absolute;inset:0;display:block;opacity:0;transition:opacity .8s ease}
#products.fx-on .fx-sticky canvas{opacity:1}
#products>.wrap{position:relative;z-index:1}
/* the card of the current room is lifted a little; the others stay readable */
.card{transition:box-shadow .5s ease,transform .5s ease}
#products[data-room="0"] #fonday-brand,#products[data-room="1"] #fonday-pro,#products[data-room="2"] #fonday-me{
  box-shadow:0 18px 40px -26px color-mix(in srgb,var(--c) 70%,transparent);transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){.card{transition:none}#products .card{transform:none}}

/* ---------- Section 2: N1 "light that stays" ---------- */
.m-stage{position:relative;margin-top:clamp(18px,2.4vw,32px);width:100%;height:clamp(260px,46svh,460px);border-radius:24px}
.m-stage>.n1{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate}
/* fine film grain keeps the surfaces from looking digital-flat */
.m-stage>div::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:9;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .44 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* soft peony room; the shader takes over when WebGPU is on */
.n1{background:radial-gradient(120% 100% at 30% 20%,#FFF8F6 0%,#FBEAEE 55%,#F6E1DA 100%)}
.n1 canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.n1 canvas.bg{opacity:0;transition:opacity 1s ease}.n1.fx-on canvas.bg{opacity:1}
.n1 .ci{position:absolute;left:50%;top:50%;width:min(30%,150px);transform:translate(-50%,-50%) scale(calc(.9 + var(--ci,0) * .1));opacity:var(--ci,0);z-index:2}
.n1 .ci img{display:block;width:100%;height:auto}

@media(max-width:899px){.m-stage{height:clamp(220px,32svh,320px)}}
@media(prefers-reduced-motion:reduce){.fx-hero,.fx-sticky canvas,.n1 canvas.bg{transition:none}}