.groovy-home .groovy-nfc-demo{position:relative;isolation:isolate}
.groovy-home .groovy-nfc-waves{display:none}
.nfc-flow{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.nfc-flow-track{fill:none;stroke:url(#nfc-flow-gold);stroke-width:3;stroke-linecap:round;opacity:.65}
.nfc-flow-pulse{fill:none;stroke:#fff0ad;stroke-width:4;stroke-linecap:round;stroke-dasharray:10 90;animation:nfc-transmit 2.8s linear infinite;filter:drop-shadow(0 0 4px #ffbe39)}
.nfc-flow-pulse:nth-of-type(2){animation-delay:-.9s}.nfc-flow-pulse:nth-of-type(3){animation-delay:-1.8s}
@keyframes nfc-transmit{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.nfc-flow-arrival{fill:#ffcd5a;stroke:#fff4d7;stroke-width:2;animation:nfc-arrive 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes nfc-arrive{0%,100%{opacity:.4;scale:.8}50%{opacity:1;scale:1.2}}
.groovy-home .groovy-nfc-steps{gap:18px;margin-top:20px;align-items:stretch}
.groovy-home .groovy-nfc-steps li{position:relative;display:grid;grid-template-columns:42px 1fr;gap:12px;background:linear-gradient(135deg,#fffaf0c7,#ffedc570),url('/assets/groovy/cream-paper-v1.webp') center/500px;border:1px solid #d7b480;border-radius:22px;padding:24px 20px;box-shadow:0 4px 0 #d7b48066,0 10px 18px #321b1010;align-items:start}
.groovy-home .groovy-nfc-steps li>.nfc-step-number{width:38px;height:38px;border:1px solid #321b10;background:linear-gradient(120deg,#ffe28d,#ffc23a);box-shadow:0 3px 0 #321b10;color:#321b10;rotate:-6deg;font:900 25px/1 'Fraunces',Georgia,serif;display:grid;place-items:center;border-radius:12px}
.nfc-step-content svg{width:44px;height:44px;display:block;margin-bottom:10px;stroke:#28767a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nfc-step-content h3{font:700 24px/1.1 'Barlow Condensed',Arial,sans-serif;letter-spacing:0;margin:0 0 8px;color:#321b10}
.nfc-step-content p{font:500 20px/1.4 'Barlow Condensed',Arial,sans-serif;margin:0;color:#68503e}
.groovy-home .groovy-nfc-note{margin-top:22px;font-size:17px;line-height:1.5;color:#68503e}
.groovy-home .groovy-nfc:after{background-image:url('/assets/groovy/waves-texture-v4.svg');height:105px}
.brand-offscreen .nfc-flow *,.brand-paused .nfc-flow *{animation-play-state:paused}
@media(max-width:650px){.groovy-home .groovy-nfc-steps{gap:14px;margin-top:12px}.groovy-home .groovy-nfc-steps li{padding:20px 18px}.nfc-step-content svg{float:right;width:38px;height:38px;margin:0 0 5px 8px}.nfc-step-content h3{font-size:23px}.nfc-step-content p{font-size:19px}.groovy-home .groovy-nfc:after{height:75px}.nfc-flow-track{stroke-width:2}.nfc-flow-pulse{stroke-width:3}}
@media(prefers-reduced-motion:reduce){.nfc-flow-pulse{display:none}.nfc-flow-arrival{animation:none}}

/* V02 : découpe généreuse, sélectionnée dans l’atelier. */
.groovy-home .groovy-nfc:after{height:135px;filter:drop-shadow(0 -4px 0 #fff7df) drop-shadow(0 -5px 5px #321b1028)}
@media(max-width:650px){.groovy-home .groovy-nfc:after{height:90px}}

/* Le texte reste au-dessus de toute la découpe V02, même dans les creux. */
.groovy-home .groovy-nfc{padding-bottom:180px}
.groovy-home .groovy-nfc-note{margin:4px 0 0;position:relative;z-index:1}
@media(max-width:650px){.groovy-home .groovy-nfc{padding-bottom:130px}.groovy-home .groovy-nfc-note{margin-top:4px}}

/* Même image, même échelle et même origine : la texture rejoint la vague. */
.groovy-home #collection{--collection-wave-height:135px;position:relative;background-size:100% var(--collection-texture-height,100%);background-position:center bottom}
.groovy-home #collection:before{content:'';position:absolute;left:0;top:calc(1px - var(--collection-wave-height));width:100%;height:var(--collection-wave-height);background:url('/assets/groovy/collection-paper-v1.webp') center top/100% var(--collection-texture-height,100%) no-repeat;mask:url('/assets/groovy/waves-texture-mask.svg') center/100% 100% no-repeat;-webkit-mask:url('/assets/groovy/waves-texture-mask.svg') center/100% 100% no-repeat;pointer-events:none}
@media(max-width:650px){.groovy-home #collection{--collection-wave-height:90px;background-size:auto var(--collection-texture-height,100%)}.groovy-home #collection:before{background-size:auto var(--collection-texture-height,100%)}}

/* Ondes NFC translucides : volume diffus, sans traits de trajet. */
.nfc-radio-wave{transform-origin:0 0;animation:nfc-radio-expand 3.6s cubic-bezier(.2,.55,.35,1) infinite;opacity:0}
.nfc-radio-halo{opacity:.65}.nfc-radio-surface{opacity:1}
@keyframes nfc-radio-expand{0%{transform:scale(.22);opacity:0}18%{opacity:.9}62%{opacity:.65}100%{transform:scale(1.12);opacity:0}}
.nfc-wave-reception{animation:nfc-radio-receive 3.6s ease-in-out infinite}
@keyframes nfc-radio-receive{0%,35%,100%{opacity:.06}65%{opacity:.5}}
.brand-offscreen .nfc-radio-wave,.brand-paused .nfc-radio-wave,.brand-offscreen .nfc-wave-reception,.brand-paused .nfc-wave-reception{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.nfc-radio-wave{animation:none;opacity:0}.nfc-radio-wave:first-child{opacity:.35;transform:scale(.7)}.nfc-wave-reception{animation:none;opacity:.12}}