/* Crystal envelope: translucent planes, refractive seams, and a weighted glass flap. */
.envelope { --tilt-x:calc(var(--my, 0) * -8deg); --tilt-y:calc(var(--mx, 0) * 10deg); position:absolute; inset:0; display:block; width:100%; border:0; padding:0; cursor:pointer; border-radius:30px; background:transparent; opacity:0; transform-style:preserve-3d; will-change:transform,filter; animation:envelope-arrive 2.8s var(--ease-out) 2.1s both,envelope-float 9s var(--ease-in-out) 5s infinite,envelope-breathe 7s ease-in-out 5s infinite; transition:transform 1.35s var(--ease-out),filter 1.3s var(--ease-out); }
.crystal-shadow { position:absolute; left:8%; bottom:-15%; width:84%; height:27%; border-radius:50%; opacity:.72; background:radial-gradient(ellipse,rgba(0,0,0,.86),rgba(18,20,47,.25) 47%,transparent 72%); filter:blur(19px); transform:translateZ(-80px) translate(calc(var(--mx,0) * -10px),calc(var(--my,0) * -6px)); transition:transform 1s var(--ease-out),opacity 1s var(--ease-out); }
.crystal-halo { position:absolute; inset:-25%; border-radius:50%; opacity:.34; background:radial-gradient(circle,rgba(166,183,255,.23),rgba(103,99,194,.09) 28%,transparent 66%); filter:blur(19px); transform:translateZ(-48px) scale(.87); transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out); }
.crystal-body,.crystal-flap,.crystal-rim { position:absolute; inset:0; overflow:hidden; border-radius:28px; }
.crystal-body { isolation:isolate; background:linear-gradient(130deg,rgba(218,234,255,.21),rgba(111,124,174,.09) 25%,rgba(255,255,255,.045) 55%,rgba(135,102,195,.13)); border:1px solid rgba(225,240,255,.42); box-shadow:inset 0 1px 1px rgba(255,255,255,.53),inset 0 -10px 28px rgba(13,15,40,.43),0 13px 33px rgba(0,0,0,.35); backdrop-filter:blur(12px) saturate(115%); -webkit-backdrop-filter:blur(12px) saturate(115%); transform:translateZ(8px); }
.glass-back { position:absolute; inset:5px; border:1px solid rgba(212,226,255,.22); border-radius:24px; background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 19% 65%,rgba(228,206,255,.11)); box-shadow:inset 0 0 26px rgba(205,222,255,.08); }
.glass-mist { position:absolute; inset:-12%; opacity:.72; background:radial-gradient(ellipse at calc(42% + var(--mx,0)*12%) calc(25% + var(--my,0)*12%),rgba(232,246,255,.31),transparent 24%),radial-gradient(ellipse at 72% 85%,rgba(144,116,229,.2),transparent 39%),radial-gradient(ellipse at 12% 85%,rgba(95,161,211,.15),transparent 32%); filter:blur(12px); }
.glass-caustic { position:absolute; inset:-20%; opacity:.8; background:conic-gradient(from calc(210deg + var(--mx,0)*28deg) at 51% 74%,transparent 0 10deg,rgba(230,250,255,.28) 14deg,transparent 20deg 58deg,rgba(180,181,255,.17) 63deg,transparent 73deg 155deg,rgba(255,255,255,.18) 161deg,transparent 177deg); filter:blur(5px); mix-blend-mode:screen; transition:transform 1s var(--ease-out); transform:scale(1.14) rotate(calc(var(--my,0) * 4deg)); }
.glass-letter { position:absolute; left:34%; top:31%; width:31%; height:31%; opacity:.23; border-radius:45% 55% 52% 48%; background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.66),rgba(150,157,255,.18) 34%,transparent 65%); filter:blur(9px); }
.glass-pocket { position:absolute; z-index:2; inset:0; clip-path:polygon(0 27%,50% 73%,100% 27%,100% 100%,0 100%); background:linear-gradient(139deg,rgba(230,244,255,.22),rgba(103,120,170,.11) 52%,rgba(213,189,255,.18)); border-top:1px solid rgba(234,247,255,.44); box-shadow:inset 0 1px rgba(255,255,255,.4),inset 0 -11px 22px rgba(18,22,50,.28); }
.glass-pocket::after { content:""; position:absolute; inset:0; background:linear-gradient(133deg,transparent 37%,rgba(230,246,255,.31) 49%,transparent 56%); opacity:.7; }
.glass-refraction { position:absolute; z-index:3; inset:0; opacity:.9; background:linear-gradient(120deg,transparent 14%,rgba(127,233,255,.15) 25%,transparent 28% 69%,rgba(255,118,229,.13) 74%,transparent 79%),linear-gradient(63deg,transparent 44%,rgba(255,255,255,.28) 49%,transparent 53%); mix-blend-mode:screen; transform:translate(calc(var(--mx,0) * 11px),calc(var(--my,0) * 8px)); }
.glass-scratches { position:absolute; z-index:4; inset:0; opacity:.14; background:repeating-linear-gradient(112deg,transparent 0 12px,rgba(255,255,255,.6) 12.5px,transparent 13px 37px); mix-blend-mode:overlay; }
.crystal-flap { z-index:7; clip-path:polygon(0 0,100% 0,50% 72%); transform-origin:50% 0; background:linear-gradient(143deg,rgba(232,247,255,.35),rgba(122,136,190,.11) 54%,rgba(210,180,252,.2)); border-top:1px solid rgba(249,253,255,.72); box-shadow:inset 0 1px rgba(255,255,255,.6),inset 0 -12px 19px rgba(40,44,85,.26); backdrop-filter:blur(17px); -webkit-backdrop-filter:blur(17px); transform:translateZ(25px) rotateX(0); transition:transform 2.15s cubic-bezier(.18,.87,.15,1); backface-visibility:visible; }
.flap-light { position:absolute; left:6%; top:-17%; width:57%; height:120%; transform:rotate(25deg) translateX(calc(var(--mx,0) * 20px)); background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); filter:blur(8px); }
.flap-edge { position:absolute; left:0; top:0; width:100%; height:100%; border-top:1px solid rgba(255,255,255,.72); background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 37%); }
.crystal-seal { position:absolute; z-index:11; left:50%; top:49%; display:grid; width:13%; aspect-ratio:1; place-items:center; color:rgba(234,244,255,.82); border:1px solid rgba(236,247,255,.58); border-radius:50%; background:radial-gradient(circle at 33% 25%,rgba(255,255,255,.86),rgba(144,166,219,.31) 38%,rgba(95,75,157,.32)); box-shadow:0 4px 11px rgba(0,0,0,.42),0 0 19px rgba(181,207,255,.28),inset 0 1px rgba(255,255,255,.73); text-shadow:0 0 9px white; transform:translate(-50%,-50%) translateZ(42px); transition:opacity .65s var(--ease-out),transform 1.2s var(--ease-out); }
.crystal-rim { z-index:13; inset:-1px; border:1px solid rgba(232,247,255,.58); box-shadow:inset 1px 1px 0 rgba(255,255,255,.5),inset -1px -1px 0 rgba(133,126,224,.23),0 0 24px rgba(185,205,255,.12); transform:translateZ(45px); pointer-events:none; }
.envelope:hover { transform:translateY(-12px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.025); filter:brightness(1.13) saturate(1.12); }
.envelope:hover .crystal-halo { opacity:.72; transform:translateZ(-48px) scale(1.05); }
.envelope:hover .crystal-shadow { opacity:.52; transform:translateZ(-80px) translate(calc(var(--mx,0) * -18px),12px) scale(.92); }
.experience.is-opening .envelope { transform:translateY(-8px) rotateX(5deg) rotateY(-8deg) scale(1.03); }
.experience.is-opening .crystal-seal { animation:seal-pulse 2s var(--ease-in-out); }
.experience.is-open .envelope { pointer-events:none; animation:none; transform:translateY(-6px) scale(.97); filter:brightness(.78); }
.experience.is-open .crystal-flap { transform:translateZ(25px) rotateX(-169deg); }
.experience.is-open .crystal-seal { opacity:0; transform:translate(-50%,-50%) translateZ(42px) scale(.65); }
.experience.is-open .crystal-halo { opacity:.68; transform:translateZ(-48px) scale(1.2); }