/* Euro News Agency press card: two faces, lanyard, guilloché, foil. */

.pc { --w: clamp(15.5rem, 24vw, 20rem); --tx: 0deg; --ty: 0deg; --flip: 0deg; --mx: 50%; --my: 50%; --tilt: 0;
      position: relative; justify-self: center; width: var(--w); margin: 7.5rem 0 0; perspective: 1400px; }
.pc-swing { position: relative; transform-origin: 50% -7.5rem; rotate: -3deg; will-change: transform; }
.mhr-js .pc-swing { rotate: 0deg; }

/* Lanyard */
.pc-strap { position: absolute; left: 50%; bottom: 100%; width: 2.3rem; height: 9rem; translate: -50% -.9rem; overflow: hidden;
  background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 18%, transparent 82%, rgba(0,0,0,.25)), linear-gradient(var(--mhr-majorelle-deep), var(--mhr-majorelle));
  border-inline: 2px dashed rgba(242, 196, 107, .7); border-radius: 0 0 .3rem .3rem; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.pc-strap span { position: absolute; left: 50%; top: 0; writing-mode: vertical-rl; translate: -50% 0; white-space: nowrap;
  font: 800 .6rem/1 var(--mhr-sans); letter-spacing: .22em; color: #f2c46b; animation: pc-strap 14s linear infinite; }
@keyframes pc-strap { to { transform: translateY(-50%); } }
.pc-clip { position: absolute; left: 50%; bottom: 100%; width: 2.6rem; height: 1.5rem; translate: -50% .1rem; border-radius: .45rem .45rem .3rem .3rem;
  background: linear-gradient(180deg, #f1f2f6, #9aa0ae 55%, #d9dce4); box-shadow: inset 0 1px 0 #fff, 0 3px 6px rgba(0,0,0,.35); z-index: 2; }
.pc-clip i { position: absolute; left: 50%; top: 100%; width: 1.3rem; height: .55rem; translate: -50% -.15rem; border-radius: 0 0 .4rem .4rem; border: 2px solid #b7bcc8; border-top: 0; }

/* Card */
.pc-card { position: relative; aspect-ratio: 54 / 86; transform-style: preserve-3d; transform: rotateX(var(--tx)) rotateY(calc(var(--ty) + var(--flip))); cursor: grab; touch-action: pan-y; }
.pc-card:active { cursor: grabbing; }
.pc-face { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fff; color: var(--mhr-ink);
  box-shadow: 0 50px 90px -35px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 0 0 1px rgba(15, 20, 48, .25); }
.pc-back { transform: rotateY(180deg); }
.pc-face::before { content: ""; position: absolute; left: 50%; top: .55rem; width: 2.2rem; height: .5rem; translate: -50% 0; border-radius: 99px; background: rgba(15, 20, 48, .7); box-shadow: inset 0 2px 3px rgba(0,0,0,.6); z-index: 5; }
.pc-guil { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 0 0, transparent 0 7px, rgba(35, 65, 181, .14) 7px 7.6px), repeating-radial-gradient(circle at 100% 100%, transparent 0 7px, rgba(212, 149, 42, .12) 7px 7.6px); background-size: 100% 100%; opacity: .55; pointer-events: none; }
.pc-guil--back { opacity: .5; }

/* Header band */
.pc-head { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .55rem; text-align: right; height: 21%; padding: 1.1rem 1rem 0; background: radial-gradient(ellipse at 0 0, #3a5ce6, transparent 70%), var(--mhr-night, #0f1430); color: #fff; z-index: 1; }
.pc-head__guil { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 20% 120%, transparent 0 6px, rgba(255, 255, 255, .5) 6px 6.6px); background-size: 100% 100%; opacity: .16; }
.pc-mark { position: relative; width: 2.2rem; height: 2.2rem; flex: none; fill: none; stroke: #f2c46b; stroke-width: 1.3; }
.pc-mark__e { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.pc-head__brand { position: relative; margin: 0; line-height: 1.1; }
.pc-head__brand b { display: block; font: 700 .98rem/1.1 var(--mhr-serif); letter-spacing: .01em; }
.pc-head__brand span { font: 600 .56rem/1 var(--mhr-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.pc-seal { position: absolute; left: .8rem; top: 1.1rem; width: 2.6rem; height: 2.6rem; background: repeating-radial-gradient(circle, #d4952a 0 .6px, transparent .6px 2.2px) center / contain no-repeat; border-radius: 50%; animation: pc-spin 40s linear infinite; }
@keyframes pc-spin { to { rotate: 360deg; } }

/* Vertical PRESS band */
.pc-press { position: absolute; right: 0; top: 21%; bottom: 0; width: 15%; display: grid; place-items: center; background: linear-gradient(180deg, #d13a2c, #9e2318); z-index: 2; }
.pc-press span { writing-mode: vertical-rl; rotate: 180deg; font: 900 clamp(1.6rem, 2.6vw, 2.15rem)/1 var(--mhr-sans); letter-spacing: .32em; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.25); }

/* Photo: the cutout breaks out of its window into the header */
.pc-photo { position: absolute; left: 6%; top: 24.5%; width: 50%; height: 31%; z-index: 3; border-radius: 10px; overflow: hidden; background: #fff; border: 5px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(212, 149, 42, .9), 0 14px 26px -14px rgba(15, 20, 48, .55); }
.pc-photo__bg { position: absolute; inset: 0; background: #fff !important; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #4a6cf0, transparent 70%), linear-gradient(160deg, var(--mhr-majorelle) 0%, var(--mhr-majorelle-deep) 60%, #0f1430 100%); box-shadow: inset 0 0 0 2px rgba(242, 196, 107, .8), 0 10px 20px -10px rgba(15,20,48,.6); }
.pc-photo__bg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("../img/zellige.svg") 50% 50% / 46px 46px; opacity: .12; }
.pc-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 16%; border-radius: 6px; }

/* Chip and ghost portrait */
.pc-chip { position: absolute; left: 66%; top: 31%; width: 13%; aspect-ratio: 5 / 4; border-radius: 5px; z-index: 3;
  background: linear-gradient(135deg, #f8e3a3, #c99a3b 45%, #f2d27e 70%, #b68526); box-shadow: inset 0 0 0 1px rgba(120, 80, 10, .5); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; }
.pc-chip i { border: 1px solid rgba(120, 80, 10, .45); border-radius: 2px; }
.pc-ghost { position: absolute; left: 65%; top: 41%; width: 15%; height: auto; opacity: .2; filter: grayscale(1) contrast(1.4); mix-blend-mode: multiply; z-index: 2; }

/* Identity block */
.pc-id { position: absolute; left: 7%; right: 19%; top: 58%; z-index: 3; }
.pc-label, .pc-fields dt { margin: 0; font: 700 .52rem/1 var(--mhr-sans); letter-spacing: .16em; text-transform: uppercase; color: #9a6c16; }
.pc-name { margin: .2rem 0 0; font: 700 clamp(1.15rem, 1.9vw, 1.5rem)/1.05 var(--mhr-serif); color: var(--mhr-ink); }
.pc-role { margin: .25rem 0 0; font: 600 .7rem/1.2 var(--mhr-sans); color: var(--mhr-majorelle-deep); }
.pc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .6rem; margin: .7rem 0 0; padding: .6rem 0 0; border-top: 1px solid rgba(15, 20, 48, .15); }
.pc-fields dd { margin: .18rem 0 0; font: 700 .72rem/1.15 var(--mhr-sans); color: var(--mhr-ink); }
.pc-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; letter-spacing: .04em; }
.pc-micro { position: absolute; left: 0; right: 15%; bottom: .55rem; margin: 0; overflow: hidden; white-space: nowrap; font: 600 .38rem/1 var(--mhr-sans); letter-spacing: .12em; color: rgba(35, 65, 181, .55); z-index: 3; padding-left: 7%; }

/* Holographic foil and glare, driven by the pointer */
.pc-holo { position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: color-dodge; opacity: calc(.12 + var(--tilt) * .5);
  background: repeating-linear-gradient(115deg, rgba(255, 0, 132, .35) 0%, rgba(252, 165, 0, .35) 6%, rgba(255, 255, 0, .3) 12%, rgba(0, 255, 138, .3) 18%, rgba(0, 207, 255, .35) 24%, rgba(204, 76, 250, .35) 30%, rgba(255, 0, 132, .35) 36%);
  background-size: 300% 300%; background-position: var(--mx) var(--my);
  -webkit-mask-image: radial-gradient(circle at 78% 14%, #000 0 14%, transparent 15%), linear-gradient(115deg, transparent 30%, #000 45%, transparent 60%);
  mask-image: radial-gradient(circle at 78% 14%, #000 0 14%, transparent 15%), linear-gradient(115deg, transparent 30%, #000 45%, transparent 60%); }
.pc-glare { position: absolute; inset: 0; z-index: 7; pointer-events: none; mix-blend-mode: overlay; opacity: calc(.15 + var(--tilt) * .7);
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .15) 30%, transparent 60%); }

/* Back */
.pc-stripe { position: relative; height: 13%; margin-top: 10%; background: linear-gradient(180deg, #1d1d22, #050507 60%, #26262c); }
.pc-back__body { position: relative; padding: .9rem 1.05rem 0; z-index: 2; }
.pc-back__title { margin: 0; font: 800 .62rem/1 var(--mhr-sans); letter-spacing: .2em; text-transform: uppercase; color: #c0392b; }
.pc-back__text { margin: .45rem 0 0; font: 400 .72rem/1.45 var(--mhr-serif); color: var(--mhr-ink); }
.pc-verify { display: grid; grid-template-columns: 34% 1fr; gap: .8rem; align-items: center; margin-top: .8rem; }
.pc-qr { display: block; padding: .35rem; border-radius: 8px; background: #fff; color: var(--mhr-night, #0f1430); box-shadow: 0 0 0 1px rgba(15, 20, 48, .15); }
.pc-qr svg { display: block; width: 100%; height: auto; }
.pc-fields--back { grid-template-columns: 1fr; margin: 0; padding: 0; border: 0; gap: .35rem; }
.pc-sign { margin-top: .7rem; }
.pc-sign svg { display: block; width: 62%; height: auto; fill: none; stroke: #13226b; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; border-bottom: 1px solid rgba(15, 20, 48, .3); }
.pc-sign p { margin: .25rem 0 0; font: 600 .55rem/1 var(--mhr-sans); letter-spacing: .08em; color: var(--mhr-muted); text-transform: uppercase; }
.pc-return { margin: .65rem 0 0; font: 400 .56rem/1.4 var(--mhr-sans); color: var(--mhr-muted); }
.pc-back__url { margin: .4rem 0 0; font: 800 .7rem/1 var(--mhr-sans); color: var(--mhr-majorelle-deep); }
.pc-seal--back { left: auto; right: .9rem; top: auto; bottom: .9rem; width: 3.4rem; height: 3.4rem; opacity: .9; }

/* Flip button */
.pc-cap { display: flex; justify-content: center; margin-top: 1.4rem; }
.pc-flip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: 700 .8rem/1 var(--mhr-sans); cursor: pointer; transition: background .2s, transform .2s; }
.pc-flip:hover, .pc-flip:focus-visible { background: var(--mhr-saffron); color: var(--mhr-night, #0f1430); transform: translateY(-2px); }
.pc-flip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.pc.is-live { animation: pc-in .6s ease both; }
@keyframes pc-in { from { opacity: 0; transform: translateY(-3rem); } }

@media (max-width: 860px) {
  .pc { --w: min(17.5rem, 78vw); margin-top: 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-strap span, .pc-seal { animation: none; }
  .pc.is-live { animation: none; }
}