/* Aesthetic layers over the hero portrait — used by the site (.card-front) and the admin preview (.be-stage).
   Sizes use container units (cqi) so they scale with the card. */
.ov { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }

/* ---------- Editorial: magazine-cover name ---------- */
.ov-word { position: absolute; left: 5%; bottom: 21%; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 22cqi; line-height: .8; letter-spacing: -.02em; white-space: nowrap; color: rgba(250, 246, 238, .94);
  transform: rotate(-7deg); transform-origin: left bottom; mix-blend-mode: difference; }
.ov-word::after { content: attr(data-text); position: absolute; left: 1.4cqi; top: 1.4cqi; color: transparent;
  -webkit-text-stroke: max(1px, .35cqi) #C6FF3D; mix-blend-mode: normal; opacity: .9; }
.ov-vert { position: absolute; left: 3%; top: 24%; transform: rotate(180deg); writing-mode: vertical-rl;
  font-family: "JetBrains Mono", Consolas, monospace; font-size: 1.9cqi; letter-spacing: .26em; color: rgba(250, 246, 238, .6); }

/* ---------- Film: grain + light leaks + vignette ---------- */
.ov-film { mix-blend-mode: normal; }
.ov-film::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(0, 0, 0, .38) 100%); }
.ov-leak { position: absolute; inset: 0; mix-blend-mode: screen; }
.ov-leak.a { background: radial-gradient(circle at 104% -4%, rgba(255, 90, 31, .55), rgba(255, 160, 60, .18) 26%, transparent 46%); animation: leak 9s ease-in-out infinite alternate; }
.ov-leak.b { background: radial-gradient(circle at -6% 108%, rgba(31, 59, 255, .6), rgba(124, 140, 255, .16) 30%, transparent 50%); animation: leak 11s ease-in-out infinite alternate-reverse; }
@keyframes leak { to { opacity: .55; transform: scale(1.06); } }
.ov-grain { position: absolute; inset: -40%; opacity: .2; mix-blend-mode: overlay; animation: grain 1.1s steps(6) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(4%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(-5%, -4%); } }

/* ---------- Camera HUD: viewfinder ---------- */
.ov-corner { position: absolute; width: 7cqi; height: 7cqi; border: max(1.5px, .45cqi) solid rgba(250, 246, 238, .85); }
.ov-corner.tl { top: 4%; left: 4%; border-right: 0; border-bottom: 0; }
.ov-corner.tr { top: 4%; right: 4%; border-left: 0; border-bottom: 0; }
.ov-corner.bl { bottom: 4%; left: 4%; border-right: 0; border-top: 0; }
.ov-corner.br { bottom: 4%; right: 4%; border-left: 0; border-top: 0; }
.ov-rec { position: absolute; top: 6.5%; left: 9%; font-family: "JetBrains Mono", Consolas, monospace; font-size: 2.8cqi; font-weight: 600; letter-spacing: .12em; color: #fff; display: flex; align-items: center; gap: 1.4cqi; }
.ov-rec::before { content: ""; width: 2.4cqi; height: 2.4cqi; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 8px #FF3B30; animation: recblink 1.2s steps(1) infinite; }
@keyframes recblink { 50% { opacity: .15; } }
.ov-exp { position: absolute; right: 9%; bottom: 6.5%; font-family: "JetBrains Mono", Consolas, monospace; font-size: 2.4cqi; letter-spacing: .08em; color: rgba(250, 246, 238, .8); }
.ov-cross { position: absolute; left: 50%; top: 28%; width: 6cqi; height: 6cqi; transform: translate(-50%, -50%); opacity: .55; }
.ov-cross::before, .ov-cross::after { content: ""; position: absolute; background: #fff; }
.ov-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ov-cross::after { top: 50%; left: 0; right: 0; height: 1px; }

@media (prefers-reduced-motion: reduce) { .ov-grain, .ov-leak, .ov-rec::before { animation: none; } }

/* ---------- Handwritten notes ---------- */
.ov-notes { overflow: visible; z-index: 4; }
.ov-note { position: absolute; display: flex; align-items: center; gap: .6cqi; color: #FAF6EE; transform: rotate(var(--r, -4deg));
  font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 700; font-size: 6.2cqi; line-height: 1; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.45); }
.ov-note-text { padding-bottom: .4cqi; background: linear-gradient(transparent 82%, rgba(198,255,61,.9) 82%, rgba(198,255,61,.9) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; }
.ov-arrow { display: inline-flex; color: #C6FF3D; }
.ov-arrow svg { width: 11cqi; height: 5cqi; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.ov-note.arrow-left { flex-direction: row-reverse; }
.ov-note.arrow-left .ov-arrow svg { transform: scaleX(-1); }
.ov-note.arrow-up, .ov-note.arrow-down { flex-direction: column; align-items: flex-start; }
.ov-note.arrow-up { flex-direction: column-reverse; }
.ov-note.arrow-up .ov-arrow svg { transform: rotate(-70deg); }
.ov-note.arrow-down .ov-arrow svg { transform: rotate(70deg); margin: 1cqi 0 0 2cqi; }

/* ---------- Halftone print texture ---------- */
.ov-halftone { mix-blend-mode: normal; }
.ov-dots { position: absolute; inset: 0; }
.ov-dots.ink { background: radial-gradient(circle, rgba(10, 10, 20, .7) 34%, transparent 36%) 0 0 / 1.6cqi 1.6cqi;
  mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 22%, transparent 55%); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 22%, transparent 55%); }
.ov-dots.accent { background: radial-gradient(circle, rgba(255, 90, 31, .85) 30%, transparent 33%) .8cqi .8cqi / 2.2cqi 2.2cqi;
  mix-blend-mode: screen; opacity: .55; -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 42%); mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 42%); }

/* ---------- Ticket stub (right edge) ---------- */
.ov-ticket { overflow: visible; }
.tk-line { position: absolute; top: 0; bottom: 0; right: 13%; border-right: max(1.5px, .45cqi) dashed rgba(250, 246, 238, .55); }
.tk-notch { position: absolute; right: calc(13% - 3.2cqi); width: 6.4cqi; height: 6.4cqi; border-radius: 50%; background: var(--bg, #FAF6EE); }
.tk-notch.top { top: -3.2cqi; } .tk-notch.bottom { bottom: -3.2cqi; }
.tk-stub { position: absolute; top: 14%; bottom: 6%; right: 0; width: 13%; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(14, 15, 28, .55), rgba(14, 15, 28, .8)); }
.tk-admit { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 4cqi; color: #C6FF3D; letter-spacing: .04em; margin-top: 2.5cqi; }
.tk-name { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "JetBrains Mono", Consolas, monospace; font-size: 1.8cqi; letter-spacing: .2em; color: rgba(250, 246, 238, .8); }
.tk-code { width: 55%; height: 22%; margin-bottom: 2cqi; background: repeating-linear-gradient(0deg, #FAF6EE 0 2px, transparent 2px 4px, #FAF6EE 4px 5px, transparent 5px 8px, #FAF6EE 8px 11px, transparent 11px 13px); opacity: .85; }

/* ---------- Glitch on hover (class on the card) ---------- */
.glitch-on.glitching .avatar-photo { animation: glitch .55s steps(1) both; }
@keyframes glitch {
  0%   { transform: translate(0); clip-path: inset(0 0 0 0); filter: none; }
  10%  { transform: translate(-2%, 0); clip-path: inset(12% 0 64% 0); filter: drop-shadow(5px 0 rgba(255, 0, 90, .8)) drop-shadow(-5px 0 rgba(0, 229, 255, .8)); }
  22%  { transform: translate(2.5%, 0); clip-path: inset(48% 0 30% 0); filter: drop-shadow(-6px 0 rgba(255, 0, 90, .8)) drop-shadow(6px 0 rgba(0, 229, 255, .8)); }
  34%  { transform: translate(-1%, 1%); clip-path: inset(70% 0 8% 0); filter: hue-rotate(40deg) saturate(1.6); }
  46%  { transform: translate(1.5%, -1%); clip-path: inset(30% 0 52% 0); filter: drop-shadow(4px 0 rgba(198, 255, 61, .9)); }
  58%  { transform: translate(0); clip-path: inset(0 0 0 0); filter: drop-shadow(3px 0 rgba(255, 0, 90, .6)) drop-shadow(-3px 0 rgba(0, 229, 255, .6)); }
  70%  { transform: translate(-.6%, 0); clip-path: inset(0 0 0 0); filter: none; }
  100% { transform: none; clip-path: none; filter: none; }
}
.glitch-on.glitching .avatar::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: overlay; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px); animation: scanflash .55s steps(2) both; }
@keyframes scanflash { 0%, 100% { opacity: 0; } 20%, 60% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .glitch-on.glitching .avatar-photo, .glitch-on.glitching .avatar::after { animation: none; } }