@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Crimson+Pro:wght@200;300;400;500&display=swap');
:root{--gold:#D4AF37;--navy:#0A192F;--cream:#FFFBF2;--bg:#050d1e}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--cream);font-family:'Crimson Pro',serif;overflow:hidden}
body{background:radial-gradient(1200px at 30% -10%, #1a2a4a 0%, #0A192F 35%, #050d1e 100%)}
#goldCanvas{position:fixed;inset:0;pointer-events:none;z-index:1}
.topbar{position:relative;z-index:20;display:flex;justify-content:space-between;padding:22px 40px;font-family:'Cormorant Garamond';font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:rgba(212,175,55,.8)}
.wrap{position:relative;z-index:20;width:100%;max-width:1280px;margin:0 auto;min-height:calc(100vh - 96px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 32px 40px}
.envelope{width:min(480px,90vw);aspect-ratio:1.25/0.85;background:linear-gradient(180deg,#fffdf8,#f5efe2);border-radius:3px;box-shadow:0 20px 80px rgba(0,0,0,.6),0 0 0 1px rgba(212,175,55,.15),0 0 40px rgba(212,175,55,.12);position:relative;cursor:pointer;transition:all .9s cubic-bezier(.77,0,.175,1);animation:envelopeGlow 4s infinite}
@keyframes envelopeGlow{0%,100%{box-shadow:0 20px 80px rgba(0,0,0,.6),0 0 0 1px rgba(212,175,55,.15),0 0 40px rgba(212,175,55,.12)}50%{box-shadow:0 25px 90px rgba(0,0,0,.7),0 0 0 1px rgba(212,175,55,.25),0 0 60px rgba(212,175,55,.18)}}
.flap{position:absolute;top:0;left:0;right:0;height:58%;background:linear-gradient(180deg,#fff 0%,#efe7d3 100%);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .9s cubic-bezier(.77,0,.175,1);z-index:3}
.envelope.open .flap, .envelope.opening .flap{transform:rotateX(-180deg)}
.envelope.opening{transform:translateY(20px) scale(.94)}
.seal{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1d27a 0%,#D4AF37 55%,#9c7d2e 100%);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 4px 18px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.3) inset;z-index:4;animation:sealFloat 3s infinite ease-in-out;transition:.6s}
@keyframes sealFloat{0%,100%{transform:translate(-50%,-50%) rotate(0) scale(1)}50%{transform:translate(-50%,-53%) rotate(1deg) scale(1.02)}}
.envelope.open .seal, .envelope.opening .seal{transform:translate(-50%,-50%) scale(0);opacity:0}
.env-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);text-align:center;z-index:5}
.env-hint small{font-family:'Cormorant Garamond';font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:rgba(10,25,47,.45);display:block}
.env-hint em{font-family:'Cormorant Garamond';font-style:italic;font-size:12px;color:rgba(10,25,47,.65);display:block;margin-top:4px}
.card-stage{width:100%;max-width:1040px;display:none;opacity:0;transform:translateY(90%) scale(.92);transition:all .8s cubic-bezier(.22,1,.36,1)}
.card-stage.show{display:block;opacity:1;transform:translateY(0) scale(1);animation:cardEntrance .8s cubic-bezier(.22,1,.36,1)}
@keyframes cardEntrance{from{transform:translateY(90%) scale(.92);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.card{display:grid;grid-template-columns:1.05fr 0.95fr;background:#FFFBF2;border-radius:10px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(212,175,55,.18) inset;min-height:640px}
.card-img{position:relative;overflow:hidden;background:#0A192F}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.card:hover .card-img img{transform:scale(1.05)}
.star{position:absolute;top:11%;left:50%;transform:translateX(-50%);width:46px;height:46px;background:radial-gradient(circle,#fff8d0 0%,#ffe27a 40%,#D4AF37 70%,transparent 75%);border-radius:50%;box-shadow:0 0 30px #ffe27a,0 0 60px rgba(212,175,55,.6);animation:starPulse 3s infinite ease-in-out}
@keyframes starPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(1.25);opacity:1}}
.overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,25,47,.55) 0%,transparent 55%,rgba(10,25,47,.15) 100%)}
.card-content{padding:52px 44px 36px;display:flex;flex-direction:column;justify-content:space-between;position:relative;color:#0A192F}
.card-content::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#D4AF37,transparent)}
.label{font-family:'Cormorant Garamond';font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#D4AF37;margin-bottom:18px}
.card-content h1{font-family:'Cormorant Garamond';font-weight:300;font-size:54px;line-height:.9;letter-spacing:-.02em}
.card-content h1 span{font-weight:500;font-style:italic;color:#1d355e}
.gold-line{width:36px;height:1px;background:#D4AF37;margin:14px 0 18px}
.text{font-family:'Cormorant Garamond';color:#2b3a55;font-size:18px;line-height:1.65;margin-top:18px}
.text p{margin-bottom:14px}
.highlight{font-size:21px;color:#0A192F;font-weight:500}
.divider{height:1px;background:linear-gradient(90deg,rgba(10,25,47,.12),rgba(212,175,55,.3),rgba(10,25,47,.08));margin:24px 0}
.signature{font-family:'Cormorant Garamond';font-style:italic;color:rgba(10,25,47,.6)}
.inst{margin-top:28px;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px dashed rgba(212,175,55,.5);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(245,239,226,.7))}
.inst-logo{width:56px;height:56px;background:#fff;border-radius:8px;border:1px solid rgba(212,175,55,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.inst-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.inst-name{font-family:'Cormorant Garamond';font-weight:600;font-size:16px;color:#0A192F}
.inst-sub{font-family:'Crimson Pro';font-size:12px;color:rgba(10,25,47,.55);margin-top:2px}
.meta{display:flex;justify-content:space-between;margin-top:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(10,25,47,.35)}
.close-hint{margin-top:26px;display:flex;justify-content:center}
.close-btn{background:none;border:none;font-family:'Cormorant Garamond';font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,251,242,.6);cursor:pointer;padding:10px 20px;border:1px solid rgba(212,175,55,.2);border-radius:20px}
.close-btn:hover{color:#D4AF37;border-color:rgba(212,175,55,.5)}
.bottom-deco{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;padding-bottom:24px;opacity:.3;pointer-events:none}
@media(max-width:860px){.card{grid-template-columns:1fr;min-height:auto}.card-img{height:360px}.card-content{padding:32px 24px}.card-content h1{font-size:42px}.topbar{padding:14px 20px}.wrap{padding:10px 16px}}