.inv--diploma{--inv-bg: radial-gradient(90% 70% at 50% 40%,#2b3b5c,#1a253d 75%);--inv-ink: #1e2b45;--inv-accent: #b07a3f;--inv-surface: #f8f2e4;--pv-chip: #f8f2e4;--dp-navy: #1e2b45;--dp-copper: #a9733a;--dp-red: #9b2a2a;--inv-hint: #f3e9d2;font-family: var(--font-display)}.dp-scene{display: grid;justify-items: center;gap: 3rem}.dp-kicker{font-size: 1.5rem;color: #f3e9d2;animation: dp-fade 1s both 0.3s}.dp-tube{position: relative;width: min(72vw,18rem);height: 3.6rem;transform: rotate(-16deg);animation: dp-in 1.3s var(--ease-out) both 0.15s}.dp-tube__body{position: absolute;inset: 0;border-radius: 0.4rem;background: linear-gradient(180deg,rgb(255 255 255 / 0.5),transparent 35%,rgb(0 0 0 / 0.12) 70%,rgb(0 0 0 / 0.3)),#f3ead6;box-shadow: 0 20px 30px -14px rgb(0 0 0 / 0.6)}.dp-tube__body::before,.dp-tube__body::after{content: "";position: absolute;top: 0;bottom: 0;width: 0.9rem;border-radius: 50%;background: radial-gradient(ellipse at 40% 50%,#fff9ec 10%,#d9cba9 60%,#b8a67e)}.dp-tube__body::before{right: -0.3rem}.dp-tube__body::after{left: -0.3rem}.dp-ribbon{position: absolute;top: -0.2rem;bottom: -0.2rem;left: 50%;width: 1.1rem;translate: -50% 0;background: linear-gradient(90deg,#7a1d1d,var(--dp-red) 50%,#7a1d1d)}.dp-loop,.dp-tail{position: absolute;display: block;background: var(--dp-red);transition: transform 0.6s var(--ease-out),opacity 0.4s}.dp-loop{top: -1.3rem;width: 1.8rem;height: 1.3rem;border-radius: 50% 50% 10% 50%;box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2)}.dp-loop--a{right: 0.4rem;transform: rotate(-20deg)}.dp-loop--b{left: 0.4rem;transform: scaleX(-1) rotate(-20deg)}.dp-tail{top: 3.2rem;width: 0.6rem;height: 2.4rem;clip-path: polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}.dp-tail--a{right: 0.1rem;transform: rotate(12deg)}.dp-tail--b{left: 0.1rem;transform: rotate(-12deg)}.inv--diploma[data-state="opening"] .dp-loop--a{transform: translate(40px,-50px) rotate(60deg) scale(0.4);opacity: 0}.inv--diploma[data-state="opening"] .dp-loop--b{transform: translate(-40px,-50px) scaleX(-1) rotate(60deg) scale(0.4);opacity: 0}.inv--diploma[data-state="opening"] .dp-tail{transform: translateY(60px);opacity: 0}.inv--diploma[data-state="opening"] .dp-ribbon{opacity: 0;transition: opacity 0.4s 0.3s}.inv--diploma[data-state="opening"] .dp-tube{animation: dp-straight 0.8s var(--ease-in-out) both 0.35s}.inv--diploma[data-state="opening"] .dp-kicker{animation: dp-out 0.3s both}.dp-cert{position: relative;max-width: 34rem;margin-inline: auto;padding: 0.9rem;background: repeating-radial-gradient(circle at 0 0,transparent 0 6px,rgb(169 115 58 / 0.22) 6px 7px),repeating-radial-gradient(circle at 100% 100%,transparent 0 6px,rgb(30 43 69 / 0.12) 6px 7px),#f8f2e4;box-shadow: 0 40px 70px -30px rgb(0 0 0 / 0.7);clip-path: inset(0 50% 0 50%);transition: clip-path 1.1s cubic-bezier(0.65,0,0.25,1) 0.75s}.inv--diploma:is([data-state="opening"],[data-state="open"]) .dp-cert{clip-path: inset(0 -10% -10% -10%)}.inv--diploma[data-state="open"] .dp-cert{clip-path: none}.dp-inner{display: grid;justify-items: center;gap: 1rem;padding: 2.5rem 1.4rem 3.5rem;text-align: center;background: #fbf7ec;outline: 1px solid var(--dp-navy);outline-offset: -0.45rem;box-shadow: inset 0 0 0 0.75rem #fbf7ec,inset 0 0 0 calc(0.75rem + 1px) rgb(169 115 58 / 0.7)}.dp-crest{width: 2.6rem;color: var(--dp-copper)}.dp-overline{font-size: 2rem;font-weight: 700;color: var(--dp-navy);letter-spacing: 0}.dp-pre{font-family: var(--font-body);font-weight: 300;color: #3e4a63}.dp-name{font-size: clamp(2.4rem,10vw,3.5rem);color: var(--dp-navy);line-height: 1.3;padding-bottom: 0.4rem;border-bottom: 1px solid rgb(169 115 58 / 0.6);outline: none}.dp-degree{font-size: 1.3rem;color: var(--dp-copper)}.dp-fields{display: grid;grid-template-columns: 1fr 1fr;gap: 1.4rem;width: 100%;margin-top: 1rem}.dp-fields>div{display: grid;gap: 0.3rem}.dp-field__val{font-size: 1rem;line-height: 1.6;padding-bottom: 0.5rem;border-bottom: 1px solid var(--dp-navy)}.dp-field__label{font-family: var(--font-kufi);font-size: 0.8rem;color: var(--dp-copper)}.dp-after{display: grid;justify-items: center;gap: 0.8rem;font-family: var(--font-body)}.inv--diploma .inv-map{color: var(--dp-navy)}.dp-medal{position: absolute;bottom: -1.2rem;left: 1.6rem;width: 4.4rem;height: 4.4rem}.dp-medal::before,.dp-medal::after{content: "";position: absolute;top: 2.6rem;width: 1.1rem;height: 2.8rem;background: var(--dp-red);clip-path: polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}.dp-medal::before{left: 0.9rem;transform: rotate(14deg)}.dp-medal::after{right: 0.9rem;transform: rotate(-14deg)}.dp-medal span{position: relative;z-index: 1;display: grid;place-items: center;width: 100%;height: 100%;border-radius: 50%;color: #fff3dc;background: radial-gradient(circle at 35% 30%,#e0b071,#a9733a 60%,#7a4f22);box-shadow: 0 0 0 3px #f8f2e4,0 0 0 4px rgb(169 115 58 / 0.6),0 10px 18px -8px rgb(0 0 0 / 0.5)}.dp-medal svg{width: 50%}.inv--diploma:is([data-state="opening"],[data-state="open"]) .dp-inner>*{animation: dp-fade 0.8s ease both calc(1.4s + var(--i) * 0.12s)}.inv--diploma:is([data-state="opening"],[data-state="open"]) .dp-medal{animation: dp-stamp 0.6s cubic-bezier(0.3,1.6,0.5,1) both 2.1s}@keyframes dp-fade{from{opacity: 0}to{opacity: 1}}@keyframes dp-out{to{opacity: 0}}@keyframes dp-in{from{opacity: 0;transform: translateX(40px) rotate(-30deg)}to{opacity: 1;transform: rotate(-16deg)}}@keyframes dp-straight{from{transform: rotate(-16deg)}60%{transform: rotate(0deg) scaleX(1.05);opacity: 1}to{transform: rotate(0deg) scaleX(1.6);opacity: 0}}@keyframes dp-stamp{from{opacity: 0;transform: scale(1.8) rotate(-30deg)}to{opacity: 1;transform: none}}.dp-field__label{word-spacing: 0.18em}