/*
Stylesheet: Feature cards — full-width, brand-matched work cards with animated backdrops
Purpose: MMRY, SensAffect, SensCheck, SUPPLY, SendApply.pro. Follows the .ai-container template
         (logo + url + caption left, hero art right) with a full-bleed backdrop behind the logo.
Last Modified: 2026-10-02
*/

.ai-showcase > .ai-feature {
    max-width: none;
    height: 480px;
    --ai-zone-square: 480px;
    --brand-mark-size: 190px;
    --brand-wordmark-width: 340px;
    margin-top: var(--space-6);
    isolation: isolate;
    color: #fff;
}
.ai-showcase > .ai-feature:first-of-type { margin-top: 0; }

.ai-feature .product-logos,
.ai-feature .ai-head { position: relative; z-index: 2; }
.ai-feature .product-logos--brand .product-logo-lockup { max-width: min(100%, 380px); }
.ai-feature .product-brand-url { font-size: 0.8rem; letter-spacing: 0.12em; opacity: .85; }
.ai-feature .product-description--brand p { font-size: 1.05rem; line-height: 1.45; max-width: 30em; }

/* backdrop layer (sits behind everything, full bleed) */
.ai-feature__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ai-feature__bg > * { position: absolute; display: block; }
.ai-feature__art { align-items: center; justify-content: center; }

/* pause looping animation off-screen */
.ai-feature.fc-ready:not(.is-visible) *,
.ai-feature.fc-ready:not(.is-visible) *::before { animation-play-state: paused !important; }

/* ───────── MMRY — amber/plum memory field (loop) ───────── */
.ai-feature--mmry { background: #17151b; }
.ai-feature--mmry .ai-feature__bg {
    background: linear-gradient(90deg, rgba(23,21,27,.15) 0%, rgba(23,21,27,.85) 100%), url("../img/recentwork/mmry-hero.jpg") center / cover;
    animation: mmry-drift 36s ease-in-out infinite alternate;
    transform-origin: 30% 50%;
}
.ai-feature__orb { border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; }
.ai-feature__orb--a { width: 380px; height: 380px; left: 4%; top: 8%; background: rgba(245,184,107,.35); animation: orb-a 14s ease-in-out infinite alternate; }
.ai-feature__orb--b { width: 320px; height: 320px; left: 36%; bottom: -10%; background: rgba(244,140,201,.28); animation: orb-b 18s ease-in-out infinite alternate; }
@keyframes mmry-drift { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.14) translateX(-2.5%); } }
@keyframes orb-a { to { transform: translate(120px, 50px) scale(1.2); } }
@keyframes orb-b { to { transform: translate(-100px, -60px) scale(1.15); } }
.ai-feature--mmry .product-logo-img { filter: none; max-width: 320px; max-height: 120px; }
.mmry-net { width: min(100%, 440px); overflow: visible; }
.mmry-net__nodes circle { transform-box: fill-box; transform-origin: center; animation: node-pulse 3.6s ease-in-out infinite; filter: drop-shadow(0 0 8px currentColor); }
.mmry-net__nodes circle:nth-child(2n) { animation-delay: -1.2s; }
.mmry-net__nodes circle:nth-child(3n) { animation-delay: -2.4s; }
.mmry-net__links path { stroke-dasharray: 6 8; animation: dash-flow 6s linear infinite; }
@keyframes node-pulse { 50% { transform: scale(1.6); opacity: .65; } }
@keyframes dash-flow { to { stroke-dashoffset: -56; } }

/* ───────── SensAffect — periwinkle ripples + flowing signal (loop) ───────── */
.ai-feature--sensaffect { background: radial-gradient(120% 140% at 20% 50%, #1b2650 0%, #0b1020 62%); }
.ai-feature__ring {
    left: 20%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px;
    border-radius: 50%; border: 1.5px solid #8fa8ff; opacity: 0;
    animation: ring-out 7.5s cubic-bezier(.2,.6,.3,1) infinite;
}
.ai-feature__ring:nth-child(2) { animation-delay: 2.5s; }
.ai-feature__ring:nth-child(3) { animation-delay: 5s; }
@keyframes ring-out { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(9); opacity: 0; } }
.ai-feature__wordmark { width: min(100%, 340px); height: auto; }
.sa-wave { width: 100%; height: 240px; overflow: visible; }
.sa-wave__l { fill: none; stroke: #8fa8ff; stroke-width: 2; vector-effect: non-scaling-stroke; animation: wave-slide 14s linear infinite; }
.sa-wave__l--2 { stroke: #c9d4ff; opacity: .55; animation-duration: 20s; animation-direction: reverse; }
.sa-wave__l--3 { stroke: #5b78e6; opacity: .45; animation-duration: 26s; }
@keyframes wave-slide { to { transform: translateX(-300px); } }

/* ───────── SensCheck — navy shield, scan once then settle ───────── */
.ai-feature--senscheck { background: linear-gradient(135deg, #0B3D5C 0%, #082b42 70%, #061e2f 100%); }
.ai-feature__grid {
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 85%); mask-image: linear-gradient(90deg, #000, transparent 85%);
}
.ai-feature__scan {
    top: 0; bottom: 0; left: 0; width: 140px;
    background: linear-gradient(90deg, transparent, rgba(120,200,255,.28), transparent);
    transform: translateX(-160px); opacity: 0;
}
.ai-feature--senscheck.is-in .ai-feature__scan { animation: scan-pass 2.4s ease-in-out .3s 1 forwards; }
@keyframes scan-pass { 0% { opacity: 1; transform: translateX(-160px); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(110vw); } }
.senscheck-lockup { display: flex; align-items: center; gap: 18px; }
.senscheck-lockup__mark { width: 84px; height: 84px; filter: none !important; max-height: none; max-width: none; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.senscheck-lockup__name { font-size: 2.6rem; font-weight: 300; letter-spacing: -0.02em; text-transform: none; }
.senscheck-lockup__name b { font-weight: 700; }
.sc-shield { width: min(100%, 300px); }
.sc-shield path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sc-shield__outline { stroke-width: 3.5; }
.sc-shield__check { stroke-width: 5; stroke: #7fe0b0 !important; }
.ai-feature--senscheck.is-in .sc-shield__outline { animation: draw 1.6s ease-out .2s forwards; }
.ai-feature--senscheck.is-in .sc-shield__check { animation: draw .7s ease-out 1.5s forwards; }
.ai-feature--senscheck.is-in .sc-shield { animation: shield-glow 1s ease-out 2.1s 1 forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shield-glow { from { filter: drop-shadow(0 0 0 rgba(127,224,176,0)); } 40% { filter: drop-shadow(0 0 22px rgba(127,224,176,.7)); } to { filter: drop-shadow(0 0 8px rgba(127,224,176,.35)); } }

/* ───────── SUPPLY — concrete vault, amber light (settle + faint pulse) ───────── */
.ai-feature--supply { background: #0d0c0a; }
.ai-feature--supply .ai-feature__bg {
    background: linear-gradient(90deg, rgba(10,9,7,.92) 0%, rgba(10,9,7,.55) 45%, rgba(10,9,7,.15) 100%), url("../img/recentwork/supply-hero.jpg") 70% center / cover;
    transform: scale(1.12);
}
.ai-feature--supply.is-in .ai-feature__bg { animation: supply-settle 5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes supply-settle { to { transform: scale(1); } }
.ai-feature__shaft { top: -10%; left: 54%; width: 22%; height: 120%; background: linear-gradient(180deg, rgba(255,214,150,.22), transparent 70%); transform: skewX(-8deg); filter: blur(18px); animation: shaft 9s ease-in-out infinite alternate; }
@keyframes shaft { from { opacity: .35; } to { opacity: 1; } }
.ai-feature__beacon { width: 4px; height: 56px; background: #ff4a3a; box-shadow: 0 0 14px #ff4a3a; border-radius: 2px; right: 8%; top: 22%; animation: beacon 3.2s ease-in-out infinite; }
.ai-feature__beacon--b { right: 3%; top: 48%; animation-delay: -1.6s; height: 40px; }
@keyframes beacon { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.supply-lockup { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.supply-lockup__name { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 300; letter-spacing: .42em; padding-left: .42em; color: #e9dcc4; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.supply-lockup__by { font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: #c9a45e; border-top: 1px solid rgba(201,164,94,.55); padding-top: 10px; }

/* ───────── SendApply.pro — black / grey / white, drifting paper ───────── */
.ai-feature--sendapply { background: linear-gradient(135deg, #000 0%, #0c0c0c 55%, #1b1b1b 100%); color: #fff; }
.ai-feature--sendapply .product-description p { color: #d0d0d0; }
.ai-feature--sendapply .product-brand-url { color: #a8a8a8; }
.ai-feature__sheet { width: 340px; height: 210px; border-radius: 6px; background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.07); left: 6%; top: 16%; transform: rotate(-9deg); animation: sheet-float 16s ease-in-out infinite alternate; }
.ai-feature__sheet--2 { left: 14%; top: 28%; background: linear-gradient(135deg, rgba(160,160,160,.1), rgba(160,160,160,.02)); transform: rotate(-3deg); animation-duration: 21s; animation-delay: -6s; }
.ai-feature__sheet--3 { left: 22%; top: 40%; transform: rotate(4deg); animation-duration: 25s; animation-delay: -12s; }
@keyframes sheet-float { to { transform: translate(60px, -26px) rotate(2deg); } }
.sendapply-lockup { display: flex; align-items: center; gap: 14px; }
.sendapply-lockup__name { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; text-transform: none; }
.sendapply-lockup__name i { font-style: normal; font-weight: 300; color: #a8a8a8; }
.sendapply-lockup__plane { width: 46px; height: auto; }
.sendapply-path { width: min(100%, 440px); overflow: visible; }
.sendapply-path__trail { fill: none; stroke: #6a6a6a; stroke-width: 1.5; stroke-dasharray: 3 9; animation: dash-flow 8s linear infinite; }
.sendapply-path__plane { offset-path: path("M20 220 C120 240 140 80 230 120 S340 40 380 30"); offset-rotate: auto; animation: fly 7s ease-in-out infinite; }
@keyframes fly { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ───────── responsive ───────── */
@media (max-width: 768px) {
    .ai-showcase > .ai-feature { height: auto; min-height: 460px; --ai-zone-square: min(320px, 88vw); --brand-wordmark-width: 280px; }
    .ai-feature__art { height: 220px; min-height: 220px; grid-row: auto; grid-column: 1; }
    .ai-feature__art svg { max-height: 200px; width: auto; max-width: 100%; }
    .ai-feature__art .sa-wave { width: 100%; height: 140px; }
    .ai-feature__ring { left: 50%; top: 28%; }
    .ai-feature--mmry .product-logo-img { max-width: 240px; }
    .sa-wave { height: 140px; }
    .ai-feature .product-logos--brand .product-logo-lockup { max-width: 100%; }
    .senscheck-lockup { gap: 10px; }
    .senscheck-lockup__mark { width: 56px; height: 56px; border-radius: 12px; }
    .senscheck-lockup__name { font-size: 1.9rem; }
    .sendapply-lockup__name { font-size: 2rem; }
    .supply-lockup__name { font-size: 2.2rem; letter-spacing: .3em; }
}

/* ───────── reduced motion: settle everything in its final state ───────── */
@media (prefers-reduced-motion: reduce) {
    .ai-feature *, .ai-feature *::before { animation: none !important; }
    .sc-shield path { stroke-dashoffset: 0; }
    .ai-feature--supply .ai-feature__bg { transform: none; }
    .ai-feature__ring { opacity: .25; transform: scale(3); }
    .sendapply-path__plane { offset-distance: 100%; }
}