/* ==========================================================================
   portraits.css — five "redrawn animated Fred" treatments for Fred Fights for You.

   Each treatment is applied to the REAL headshot (shared/img/fred-yadegar-square.webp)
   in the browser with SVG filters + CSS: no fabricated imagery, and the photo swaps
   in the moment tools/import_headshot.py has run. The SVG <filter> defs are emitted
   once per page by the generator (chrome.portrait_defs) and the theme (footer.php).

   t1 Render      hyper-real "3D render" grade: posterized tones, lifted contrast,
                  specular sweep, slow float
   t2 Halftone    comic cel-shade: 4-tone posterize + halftone dots + ink ring, tilt
   t3 Neon Lines  edge-detected line art glowing in the brand violet/lime, pulse
   t4 Duotone     two-color sticker cut-out with thick border, bob
   t5 Cinematic   teal/orange grade in a widescreen frame, Ken Burns + light scan
   ========================================================================== */
.fy-portrait { position: relative; display: inline-block; width: min(100%, 420px); aspect-ratio: 1; overflow: hidden; isolation: isolate; }
.fy-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fy-portrait--missing { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #fff6d6 0 12px, #ffe9a8 12px 24px); color: #5b4300; font-weight: 700; text-align: center; padding: 24px; border-radius: 24px; }

/* plain — the real photo, untreated (used on the live Meet Fred bands until a redraw is chosen) */
.fy-portrait--plain { border-radius: 28px; box-shadow: var(--fy-shadow-lg); }
.fy-portrait--plain img { filter: none; }

/* t1 — Render */
.fy-portrait--t1 { border-radius: 28px; box-shadow: 0 30px 70px rgba(37,99,235,.28); animation: fyp-float 7s ease-in-out infinite; }
.fy-portrait--t1 img { filter: url(#fyp-posterize6) contrast(1.12) saturate(1.25) brightness(1.03); }
.fy-portrait--t1::after { content: ''; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%); transform: translateX(-60%); animation: fyp-sweep 5.5s ease-in-out infinite; mix-blend-mode: screen; pointer-events: none; }
.fy-portrait--t1::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(10,10,20,.35); z-index: 1; pointer-events: none; }

/* t2 — Halftone comic */
.fy-portrait--t2 { border-radius: 50% 50% 46% 54% / 56% 48% 52% 44%; border: 8px solid #0a0a0f; box-shadow: 12px 12px 0 var(--fy-accent, #ff5a5f); transition: transform .5s ease; animation: fyp-tilt 6s ease-in-out infinite; }
.fy-portrait--t2 img { filter: url(#fyp-posterize4) contrast(1.25) saturate(1.1); }
.fy-portrait--t2::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 25% 25%, rgba(10,10,15,.55) 1.1px, transparent 1.6px) 0 0 / 7px 7px; mix-blend-mode: multiply; pointer-events: none; }

/* t3 — Neon line art */
.fy-portrait--t3 { border-radius: 24px; background: #070711; box-shadow: 0 0 60px rgba(168,85,247,.35), inset 0 0 0 1px rgba(255,255,255,.12); }
.fy-portrait--t3 img { filter: url(#fyp-edges) brightness(1.4) contrast(1.4); mix-blend-mode: screen; animation: fyp-pulse 3.2s ease-in-out infinite; }
.fy-portrait--t3::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(168,85,247,.55), rgba(163,230,53,.45)); mix-blend-mode: multiply; pointer-events: none; }

/* t4 — Duotone sticker */
.fy-portrait--t4 { border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; border: 10px solid #fff; box-shadow: 0 24px 50px rgba(20,20,26,.22); background: var(--fy-primary, #14141a); animation: fyp-bob 5s ease-in-out infinite; }
.fy-portrait--t4 img { filter: url(#fyp-duotone) contrast(1.15); }

/* t5 — Cinematic */
.fy-portrait--t5 { aspect-ratio: 16 / 10; width: min(100%, 560px); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.fy-portrait--t5 img { object-position: 50% 18%; filter: url(#fyp-tealorange) contrast(1.18) saturate(1.1); animation: fyp-kenburns 12s ease-in-out infinite alternate; transform-origin: 50% 25%; }
.fy-portrait--t5::before, .fy-portrait--t5::after { content: ''; position: absolute; left: 0; right: 0; height: 9%; background: #0b1010; z-index: 2; }
.fy-portrait--t5::before { top: 0; } .fy-portrait--t5::after { bottom: 0; }
.fy-portrait--t5 .fyp-scan { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(249,115,22,.35) 50%, transparent 100%); background-size: 100% 30%; background-repeat: no-repeat; animation: fyp-scan 6s linear infinite; mix-blend-mode: screen; pointer-events: none; z-index: 1; }

/* the hidden filter defs block */
.fyp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

@keyframes fyp-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(-.6deg); } }
@keyframes fyp-sweep { 0%, 35% { transform: translateX(-70%); } 65%, 100% { transform: translateX(70%); } }
@keyframes fyp-tilt { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes fyp-pulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes fyp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fyp-kenburns { from { transform: scale(1); } to { transform: scale(1.14) translate(-2%, -1%); } }
@keyframes fyp-scan { from { background-position: 0 -40%; } to { background-position: 0 140%; } }
@media (prefers-reduced-motion: reduce) { .fy-portrait, .fy-portrait img, .fy-portrait::after, .fy-portrait .fyp-scan { animation: none !important; } }

/* "Meet Fred" band used on the b-variant home pages */
.fy-meet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.fy-meet .fy-portrait { margin: 0 auto; }
.fy-meet__copy h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
.fy-meet__copy .fy-badges { margin: 16px 0 22px; }
@media (max-width: 900px) { .fy-meet { grid-template-columns: 1fr; } }

/* ---- round 2: original animated vector redraws (tools/redraw_fred.py -> shared/img/fred-redraw-r1..r5.svg) ----
   Not filters: each is a new SVG drawing computed from the photo, inlined by sections.portrait() / fy_portrait().
   r1 flat vector · r2 low poly · r3 ink draw-on (currentColor) · r4 dot matrix (currentColor) · r5 cell mosaic */
.fy-portrait--redraw { aspect-ratio: 2 / 3; width: min(100%, 360px); overflow: visible; border-radius: 0; isolation: auto; }
.fy-portrait--redraw svg { width: 100%; height: 100%; display: block; overflow: hidden; } /* hidden: an edge stroke half outside the viewBox was 1px of document overflow on phones */
.fy-portrait--redraw .fig { will-change: transform; }
.fy-portrait--r1, .fy-portrait--r2, .fy-portrait--r5 { filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .22)); }
.fy-portrait--r3 { color: var(--fy-ink, currentColor); --fy-ink-accent: var(--fy-accent); }
.fy-portrait--r4 { color: var(--fy-primary, #14141a); }
.fy-portrait--r5 { --fy-lead: rgba(8, 8, 14, .9); }
.fy-dark .fy-portrait--r5, .fy-var-b5 .fy-portrait--r5 { --fy-lead: rgba(255, 255, 255, .28); }
.fy-var-b3 .fy-portrait--r2 polygon { stroke: var(--fy-accent); stroke-width: .35; }
.fy-meet-sec .fy-portrait--redraw { margin: 0 auto; }
@media (max-width: 900px) { .fy-portrait--redraw { width: min(100%, 300px); } }

/* ---- round 4: the chosen illustration (OpenArt O1 flat vector, background keyed out) ----
   Floats on the variant color with a soft ground shadow and a slow drift; an optional blink frame
   (fred-art-blink) crossfades for 140ms every 5.5s so the portrait feels alive without a filter. */
.fy-portrait--art { position: relative; aspect-ratio: 2 / 3; width: min(100%, 380px); overflow: visible; border-radius: 0; isolation: auto; filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .28)); animation: fyp-drift 8s ease-in-out infinite; }
.fy-portrait--art img { width: 100%; height: auto; display: block; object-fit: contain; }
.fy-portrait--art .fy-portrait__blink { position: absolute; inset: 0; opacity: 0; animation: fyp-blink 5.5s steps(1, end) infinite; }
.fy-meet-sec .fy-portrait--art { margin: 0 auto; }
@keyframes fyp-drift { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-.4deg); } }
@keyframes fyp-blink { 0%, 96.5% { opacity: 0; } 97% { opacity: 1; } 99.5% { opacity: 0; } }
@media (max-width: 900px) { .fy-portrait--art { width: min(100%, 300px); } }
@media (prefers-reduced-motion: reduce) { .fy-portrait--art, .fy-portrait--art .fy-portrait__blink { animation: none !important; } }