/* Radial canvas reveal, corner crosses and a centered identity/contact composition. */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.pc-card-wrapper { position: relative; min-width: 0; padding: 24px 0 34px; perspective: 1100px; --tilt-x: 0deg; --tilt-y: 0deg; --reveal-wash: #45152573; }
.pc-card-wrapper[data-hat-color='white'] { --reveal-wash: #30263066; }
.pc-card-wrapper[data-hat-color='black'] { --reveal-wash: #1b182066; }
.pc-card-wrapper[data-hat-color='purple'] { --reveal-wash: #39204b66; }
.pc-stage { position: relative; transform-style: preserve-3d; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform 220ms ease; }
.pc-card { position: relative; z-index: 1; height: 470px; border: 1px solid #b0788d42; border-radius: 8px; background: #170e12; box-shadow: 0 20px 45px #0003; transition: border-color 400ms, box-shadow 400ms; }
.pc-card-wrapper.is-open .pc-card { border-color: #d59bad77; box-shadow: 0 28px 55px #0005, 0 0 45px #a33a5515; }
.pc-card-surface { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.pc-corner { position: absolute; z-index: 7; font: 22px/1 var(--font-mono); color: #d7becb; pointer-events: none; text-shadow: 0 0 6px #100b10; }
.pc-corner-tl { top: -12px; left: -8px; }
.pc-corner-tr { top: -12px; right: -8px; }
.pc-corner-bl { bottom: -9px; left: -8px; }
.pc-corner-br { bottom: -9px; right: -8px; }
.pc-avatar-content { position: absolute; inset: 0; overflow: hidden; }
.pc-avatar-content .avatar { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: saturate(.65); transition: opacity 400ms, filter 500ms, transform 700ms cubic-bezier(.2,.7,.2,1); }
.pc-card-wrapper.is-open .avatar { opacity: .62; filter: saturate(.55) brightness(.8) blur(.25px); transform: scale(1.05); }
/* Keep Ali's face closer in frame while retaining the original photo. */
.pc-avatar-content .avatar[src$="/ali.jpg"] { transform: scale(1.28); transform-origin: 50% 60%; }
.pc-card-wrapper.is-open .avatar[src$="/ali.jpg"] { transform: scale(1.344); }
.pc-avatar-content::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#120c1433, transparent 35%, #140b17dd 90%); pointer-events: none; }
.pc-card-topline { position: absolute; z-index: 4; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 20px; font: 9px var(--font-mono); letter-spacing: .13em; color: #eadbe3; text-shadow: 0 2px 8px #000; }
.pc-team-mark { font-family: var(--font-pixel); }
.pc-base-identity { position: absolute; z-index: 2; left: 22px; right: 65px; bottom: 28px; transition: opacity 250ms, transform 350ms, visibility 250ms; }
.pc-card-wrapper.is-open .pc-base-identity { opacity: 0; visibility: hidden; transform: translateY(-10px); }
.pc-handle { color: #d0aabb; font: 10px var(--font-mono); }
.pc-base-identity h3 { font: 23px/1.5 var(--font-pixel); margin-top: 5px; color: #fff2f7; }
.pc-base-identity p, .pc-hover-identity p { color: #cab9c5; font-size: 11px; margin-top: 4px; }
.pc-reveal-layer { position: absolute; z-index: 2; inset: 0; background: radial-gradient(ellipse at 50% 20%, var(--reveal-wash), #130d1873); opacity: 0; pointer-events: none; transition: opacity 400ms; }
.pc-reveal-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: .65; pointer-events: none; }
.pc-reveal-layer::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, #120b1399 0%, #120b1340 43%, transparent 80%), linear-gradient(transparent 60%, #100b1666); }
.pc-card-wrapper.is-open .pc-reveal-layer { opacity: 1; }
.pc-reveal-content { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 35px 16px; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 300ms, transform 450ms cubic-bezier(.16,1,.3,1), visibility 300ms; pointer-events: none; }
.pc-card-wrapper.is-open .pc-reveal-content { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.pc-hover-identity { text-align: center; text-shadow: 0 2px 20px #0008; }
.pc-hover-identity h3 { font: 27px/1.5 var(--font-pixel); margin-top: 7px; color: #fff4fa; }
.pc-contact-panel { width: 100%; display: flex; justify-content: center; gap: 8px; }
.pc-contact-block { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 79px; padding: 13px 4px; color: #f5d8e7; background: linear-gradient(135deg, #592437f5, #2c1520f5); border-radius: 11px; box-shadow: 0 12px 24px #0004, inset 0 1px 0 #efbad344, 3px 4px 0 #160b12; font: 9px var(--font-mono); text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(25px) scale(.86); transition: transform 480ms cubic-bezier(.16,1,.3,1), opacity 300ms, visibility 300ms, background 200ms; transition-delay: calc(100ms + var(--link-index) * 75ms); text-align: center; }
.pc-card-wrapper.is-open .pc-contact-block { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.pc-card-wrapper.is-open .pc-contact-block:hover { transform: translateY(-4px); background: #763046; }
.pc-link-icon { font-size: 19px; font-weight: 600; color: #f2bcd7; }
.pc-link-icon svg { display: block; width: 23px; height: 23px; }
.pc-contact-panel { max-width: 248px; }
.pc-contact-panel > :only-child { flex: 0 1 180px; }
.pc-contact-linkedin { color: #fff; background: linear-gradient(135deg, #0a66c2, #084b91); box-shadow: 0 12px 24px #0004, inset 0 1px 0 #a9d9ff66, 3px 4px 0 #04294d; }
.pc-contact-linkedin .pc-link-icon { color: #fff; }
.pc-card-wrapper.is-open .pc-contact-linkedin:hover { background: #0b73d9; }
.pc-toggle { position: absolute; z-index: 8; right: 18px; bottom: 23px; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #d99ab133; border-radius: 12px; background: #46192dce; color: #edb7cf; cursor: pointer; font: 24px var(--font-mono); transition: transform 350ms, background 350ms; }
.pc-card-wrapper.is-open .pc-toggle { transform: rotate(45deg); background: #61263de6; }
.pc-hat-field { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.pc-hat {
    position: absolute; display: block; width: 64px; height: 64px; object-fit: contain;
    image-rendering: pixelated; pointer-events: none;
    filter: drop-shadow(0 7px 5px #0007);
    opacity: 0; transform: translate3d(0, 35px, -10px) rotate(0deg) scale(.12);
    transition: transform 700ms cubic-bezier(.16,1,.3,1), opacity 350ms ease;
    transition-delay: calc(var(--i) * 65ms);
}
.pc-hat:nth-child(1) { left: -13px; top: 12%; width: 60px; height: 60px; }
.pc-hat:nth-child(2) { right: 3px; top: -34px; width: 82px; height: 82px; }
.pc-hat:nth-child(3) { left: -9px; top: 63%; width: 44px; height: 44px; }
.pc-hat:nth-child(4) { right: -8px; bottom: 1%; width: 53px; height: 53px; }
.pc-card-wrapper[data-hat-color='black'] .pc-hat { filter: drop-shadow(0 0 2px #d4c2ca88) drop-shadow(0 7px 5px #0008); }
.pc-card-wrapper.is-open .pc-hat { opacity: 1; transform: translate3d(var(--fly-x), var(--fly-y), 46px) rotate(var(--hat-angle)) scaleX(var(--hat-flip)) scale(1); }
.pc-card-wrapper.is-open { z-index: 3; }
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; max-width: 740px; margin-inline: auto; } .pc-card { height: 480px; } }
@media (max-width: 540px) { .team-grid { grid-template-columns: minmax(0, 1fr); max-width: 350px; gap: 14px; } .pc-card { height: 470px; } .pc-reveal-content { padding-inline: 24px; } }
@media (prefers-reduced-motion: reduce) { .pc-stage { transform: none; } .pc-stage *, .pc-stage *::before { transition: none !important; } }