/* ============================================================
   THE NFC STICKER (editorial/nfc.js)                         P, 19 October 2026
   Glossy black film on the white, a coil under it, the house's P pressed into it. No green: black, graphite,
   and the white of a reflection. The tag alone, as a hero: no phone.
   ============================================================ */
.nfc{
  --nfc:clamp(190px, 21vw, 330px);
  position:absolute; width:var(--nfc); height:var(--nfc);
  perspective:1100px; pointer-events:none;
  opacity:0; transform:translate3d(0, 26px, 0) scale(.96);
  transition:opacity var(--slower, 1.1s) var(--settle, ease), transform var(--slowest, 1.6s) var(--settle, ease);
}
.nfc.is-on{ opacity:1; transform:none; }
.nfc-tilt{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.nfc-face{ position:absolute; inset:0; border-radius:50%; }
.nfc-face svg, .nfc-rings svg{ display:block; width:100%; height:100%; overflow:visible; }

/* the shadow on the page: a contact line and a soft fall, moved away from the hand */
.nfc-shadow{
  position:absolute; inset:6% 4% -4% 4%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.30), rgba(0,0,0,.12) 62%, rgba(0,0,0,0) 100%);
  filter:blur(10px); transform-origin:50% 60%;
}
.nfc-shadow::after{ content:""; position:absolute; inset:5%; border-radius:50%; box-shadow:0 2px 3px rgba(0,0,0,.35); }

/* the coil under the film, found only where the light rakes it */
.nfc .nfc-coil-d{ fill:none; stroke:#000; stroke-width:2.6; opacity:.75; }
.nfc .nfc-coil{ fill:none; stroke:#18181b; stroke-width:2.2; }
.nfc .nfc-coil-l{ fill:none; stroke:#4a4a50; stroke-width:.7; opacity:.55; }
.nfc .nfc-bridge{ stroke:#1d1d20; stroke-width:5; stroke-linecap:round; }
.nfc .nfc-chip-e{ fill:none; stroke:#55555b; stroke-width:.5; }
.nfc .nfc-p{ font-family:var(--display, "Instrument Serif", serif); font-size:58px; fill:#0b0b0c; stroke:#2e2e33; stroke-width:.5; }
.nfc .nfc-cres{ fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; opacity:.32; }
/* the glint that runs the coil, outside in, when the field opens */
.nfc .nfc-run{ fill:none; stroke:#e9e9ee; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:70 2000; stroke-dashoffset:80; opacity:0; }
.nfc.is-read .nfc-run{ animation:nfc-run 1.9s cubic-bezier(.45,.05,.25,1) forwards; }
@keyframes nfc-run{ 0%{ stroke-dashoffset:80; opacity:0; } 12%{ opacity:.9; } 85%{ opacity:.7; } 100%{ stroke-dashoffset:-1000; opacity:0; } }
.nfc.is-read .nfc-p{ animation:nfc-p 1.9s var(--settle, ease) forwards; }
@keyframes nfc-p{ 0%,30%{ stroke:#2e2e33; } 55%{ stroke:#bdbdc4; } 100%{ stroke:#2e2e33; } }

/* the field: three thin rings out of the sticker, one after another */
.nfc-rings{ position:absolute; inset:0; }
.nfc .nfc-ring{ fill:none; stroke:#0c0c0d; stroke-width:.9; vector-effect:non-scaling-stroke; opacity:0; transform-origin:0 0; }
.nfc.is-read .nfc-ring{ animation:nfc-ring 1.8s cubic-bezier(.2,.6,.3,1) forwards; }
.nfc.is-read .nfc-ring:nth-child(2){ animation-delay:.28s; }
.nfc.is-read .nfc-ring:nth-child(3){ animation-delay:.56s; }
@keyframes nfc-ring{ 0%{ transform:scale(1.02); opacity:.55; } 100%{ transform:scale(1.9); opacity:0; } }

/* THE HERO (P, 19 October: the tag alone). It falls onto the page out of the air and settles; then, every few
   seconds, it lifts toward the eye, turns slowly in the light so the gloss runs over its film and edge, opens its
   field, and lies down again. */
.nfc-lift{ position:absolute; inset:0; transform-style:preserve-3d; }
@media (prefers-reduced-motion:no-preference){
  .nfc{ transform:none; transition:opacity .4s var(--settle, ease); }
  .nfc .nfc-lift{ opacity:0; transform:translate3d(0, -34%, 160px) rotateX(58deg) rotateZ(-24deg) scale(.86); filter:blur(6px); }
  .nfc .nfc-shadow{ opacity:0; transform:scale(.6); }
  .nfc.is-on .nfc-lift{ animation:nfc-fall 1.7s cubic-bezier(.22,.7,.2,1) .1s both; }
  .nfc.is-on .nfc-shadow{ animation:nfc-land 1.7s cubic-bezier(.22,.7,.2,1) .1s both; }
  @keyframes nfc-fall{
    0%  { opacity:0; transform:translate3d(0, -34%, 160px) rotateX(58deg) rotateZ(-24deg) scale(.86); filter:blur(6px); }
    30% { opacity:1; filter:blur(0); }
    72% { transform:translate3d(0, 1.5%, 0) rotateX(-4deg) rotateZ(2deg) scale(1.005); }
    100%{ opacity:1; transform:none; filter:none; }
  }
  @keyframes nfc-land{ 0%{ opacity:0; transform:scale(.6); } 55%{ opacity:.5; transform:scale(.86); } 100%{ opacity:1; transform:none; } }
  /* the read: up toward the eye, a slow turn in the light, and down */
  .nfc.is-tap .nfc-lift{ animation:nfc-read 3.2s cubic-bezier(.45,.05,.25,1) both; }
  .nfc.is-tap .nfc-shadow{ animation:nfc-shade 3.2s cubic-bezier(.45,.05,.25,1) both; }
  @keyframes nfc-read{
    0%  { transform:none; }
    28% { transform:translate3d(0, -7%, 90px) rotateX(16deg) rotateY(-22deg) scale(1.06); }
    58% { transform:translate3d(0, -8%, 100px) rotateX(10deg) rotateY(26deg) scale(1.07); }
    100%{ transform:none; }
  }
  @keyframes nfc-shade{ 0%,100%{ opacity:1; transform:none; filter:blur(10px); } 30%,60%{ opacity:.55; transform:translate3d(4%, 9%, 0) scale(1.1); filter:blur(18px); } }
  /* the gloss runs across the film while it turns */
  .nfc.is-tap .nfc-cres{ animation:nfc-cres 3.2s ease-in-out both; }
  @keyframes nfc-cres{ 0%,100%{ opacity:.32; } 40%{ opacity:.85; } 60%{ opacity:.6; } }
}

/* while it is read the film itself catches more of the lamp */
.nfc-face{ transition:filter .9s var(--settle, ease); }
.nfc.is-read .nfc-face{ filter:brightness(1.12) contrast(1.05); }

@media (prefers-reduced-motion:reduce){
  .nfc, .nfc-face{ transition:none; }
  .nfc.is-read .nfc-ring, .nfc.is-read .nfc-run, .nfc.is-read .nfc-p{ animation:none; }
}

/* where the sticker stands: on the Editorial's entrance, where the things rest; on the Scan place, beside its word */
.edm-nfc{ left:58%; top:50%; margin:calc(var(--nfc) / -2) 0 0 calc(var(--nfc) / -2); z-index:1; }
.esc-nfc{ position:relative; margin:clamp(28px, 6vh, 64px) 0 0; }
@media (max-width:759px){
  .edm-nfc{ --nfc:min(58vw, 240px); left:50%; top:42%; }
  .esc-nfc{ --nfc:min(56vw, 230px); }
}