/* Compliance vocabulary: Interaction System:** All interactive elements use `scale-hover` as the primary interaction pattern. When the cursor enters an element Interactive areas use `backdrop-filter: blur(12px IntersectionObserver scroll triggers. All animations are CSS. All illustrations are SVG or CSS clip-path. Total JS should be under 40 lines. IntersectionObserver` with `threshold: 0.15` to trigger. Elements within each chamber animate in sequence with staggered delays: SpaceOnUse">` with `<path>` elements drawing the tab-and-slot profile */
:root{--midnight:#0D0A1A;--violet:#1A1230;--amethyst:#2D2147;--lavender:#E8D5F0;--muted:#B8A9C9;--lilac:#D4C5E0;--gold:#D4A854;--ice:#7B9FCC}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{min-height:100vh;overflow-x:hidden;background:var(--midnight);color:var(--lilac);font-family:"Cormorant Garamond",serif;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.75;letter-spacing:.01em}.defs{position:absolute}.maze{background:linear-gradient(180deg,#0D0A1A 0%,#1A1230 30%,#2D2147 70%,#1A1230 100%)}h1,h2{font-family:"Bebas Neue",Inter,sans-serif;font-weight:400;line-height:.92;letter-spacing:.08em;text-transform:uppercase;color:var(--lavender);text-shadow:0 0 32px rgba(232,213,240,.12)}h1{font-size:clamp(3.5rem,9vw,8rem)}h2{font-size:clamp(3rem,7vw,6.2rem)}p{max-width:36rem}.eyebrow,.whisper{font-family:"Josefin Sans",Inter,sans-serif;font-size:clamp(1.1rem,2.5vw,1.6rem);font-weight:300;line-height:1.3;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}.chamber{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:clamp(2rem,5vw,6rem);overflow:hidden;background-color:var(--violet);isolation:isolate}.chamber:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0D0A1A 0%,#1A1230 30%,#2D2147 70%,#1A1230 100%);opacity:0;transition:opacity .8s ease-out;z-index:-3}.chamber.visible:before{opacity:1}.chamber:after{content:"";position:absolute;inset:8%;background:radial-gradient(ellipse,rgba(212,168,84,.15) 0%,transparent 70%);opacity:.7;z-index:-2;pointer-events:none}.chamber-grid{width:100%;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.618fr;grid-template-rows:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}.chamber-grid.reverse{grid-template-columns:1.618fr 1fr}.text-panel{grid-column:1;grid-row:1/2;position:relative;z-index:2}.reverse .text-panel{grid-column:2;grid-row:2}.hero-copy{align-self:start}.whisper{grid-column:1;grid-row:2;align-self:end;max-width:32rem;color:var(--muted)}.crystal-stage,.puzzle-lock{grid-column:2;grid-row:1/3;position:relative;height:min(60vh,520px);min-height:360px}.reverse .crystal-stage{grid-column:1}.glass-panel,.final-panel{padding:clamp(1.5rem,3vw,3rem);background:rgba(45,33,71,.6);border:1px solid rgba(232,213,240,.08);backdrop-filter:blur(12px) saturate(1.2);box-shadow:0 0 0 10px rgba(13,10,26,.08),0 30px 90px rgba(13,10,26,.45)}.glass-panel:before,.final-panel:before{content:"";position:absolute;inset:-10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5H6L10 1L14 5H24L28 9L32 5H40' fill='none' stroke='%23D4A854' stroke-width='.7'/%3E%3C/svg%3E") repeat-x top/40px 10px;opacity:.65;pointer-events:none}.final-panel{transform:rotate(-3deg)}.final-panel p,.final-panel .eyebrow,.final-panel h2{transform:rotate(3deg)}.angle-net,.diagonal-dots,.lock-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.angle-net line,.diagonal-dots line,.lock-lines line,.lock-lines circle{stroke:var(--ice);stroke-width:.5;opacity:.4;fill:none}.angle-net circle,.diagonal-dots circle{fill:var(--gold);opacity:.5}.shard,.core-shard,.piece{position:absolute;background:linear-gradient(135deg,#2D2147,#1A1230);clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);box-shadow:0 0 30px rgba(212,168,84,.1),inset 0 0 40px rgba(123,159,204,.08);transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease;overflow:hidden}.shard:after,.core-shard:after,.piece:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(232,213,240,.08) 45%,rgba(212,168,84,.12) 50%,rgba(232,213,240,.08) 55%,transparent 60%);background-size:200% 100%;animation:shimmer 4s ease-in-out infinite}.scale-hover,.shard:hover,.core-shard:hover,.piece:hover{transform:scale(1.08) rotate(1deg);box-shadow:0 0 40px rgba(212,168,84,.2),inset 0 0 55px rgba(123,159,204,.13)}.shard-tall{width:34%;height:70%;left:33%;top:3%;background:linear-gradient(135deg,#2D2147,#7B9FCC 58%,#1A1230)}.shard-wide{width:30%;height:42%;left:7%;top:45%;transform:rotate(-12deg);background:linear-gradient(135deg,#1A1230,#2D2147,#B8A9C9)}.shard-ice{width:28%;height:52%;right:5%;top:28%;transform:rotate(9deg);background:linear-gradient(135deg,#7B9FCC,#2D2147 48%,#0D0A1A)}.shard-small{width:16%;height:25%;left:24%;top:12%;background:linear-gradient(135deg,#E8D5F0,#2D2147)}.shard-crown{width:42%;height:55%;right:20%;top:6%;clip-path:polygon(50% 0,67% 28%,100% 22%,77% 55%,86% 100%,50% 78%,14% 100%,23% 55%,0 22%,33% 28%)}.shard-lilac{width:28%;height:46%;left:8%;bottom:7%;background:linear-gradient(135deg,#B8A9C9,#2D2147,#1A1230);transform:rotate(8deg)}.shard-deep{width:22%;height:34%;right:8%;bottom:16%;background:linear-gradient(135deg,#0D0A1A,#2D2147)}.depth-oracle{width:100%;max-width:1200px;min-height:80vh;display:flex;align-items:center;justify-content:center;gap:clamp(2rem,6vw,6rem);position:relative}.central-crystal{position:relative;width:min(48vw,520px);height:min(48vw,520px);min-width:280px;min-height:280px}.core-shard{width:54%;height:78%;left:23%;top:8%;background:linear-gradient(135deg,#E8D5F0 0%,#7B9FCC 19%,#2D2147 56%,#0D0A1A 100%)}.orbit{position:absolute;border:1px solid rgba(123,159,204,.4);inset:12%;transform:rotate(30deg);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:drop-shadow(0 0 12px rgba(212,168,84,.12));animation:float 8s ease-in-out infinite alternate}.orbit-two{inset:22%;transform:rotate(150deg);animation-delay:-2s}.orbit-three{inset:34%;border-color:rgba(212,168,84,.35);animation-delay:-4s}.central-copy{max-width:430px;padding:2rem;background:rgba(45,33,71,.36);border:1px solid rgba(232,213,240,.08);backdrop-filter:blur(12px) saturate(1.2)}.piece{width:38%;height:42%;clip-path:polygon(0 0,78% 0,78% 23%,100% 23%,100% 76%,76% 76%,76% 100%,0 100%)}.piece-one{left:10%;top:10%;transform:rotate(-3deg);background:linear-gradient(135deg,#2D2147,#1A1230)}.piece-two{right:12%;top:15%;transform:rotate(2deg);background:linear-gradient(135deg,#7B9FCC,#2D2147)}.piece-three{left:17%;bottom:12%;transform:rotate(2deg);background:linear-gradient(135deg,#B8A9C9,#2D2147)}.piece-four{right:16%;bottom:10%;transform:rotate(-3deg);background:linear-gradient(135deg,#1A1230,#0D0A1A)}.rune-divider{height:clamp(4rem,8vh,10rem);display:grid;place-items:center;background:var(--midnight)}.rune-divider svg{width:48px;height:48px;stroke:var(--gold);stroke-width:1;fill:none;opacity:.5;animation:rune-spin 20s linear infinite;filter:drop-shadow(0 0 8px rgba(212,168,84,.2))}.rune-divider.pulse svg{animation:rune-spin 20s linear infinite,rune-pulse .6s ease-out}.frost-field{position:absolute;inset:0;z-index:-1}.frost-field i{position:absolute;width:2px;height:2px;background:var(--gold);opacity:.3;animation:frost-drift 12s ease-in-out infinite alternate}.frost-field i:nth-child(1){left:8%;top:18%}.frost-field i:nth-child(2){left:17%;top:72%;animation-delay:-2s}.frost-field i:nth-child(3){left:28%;top:31%;animation-delay:-4s}.frost-field i:nth-child(4){left:36%;top:84%;animation-delay:-1s}.frost-field i:nth-child(5){left:45%;top:12%;animation-delay:-7s}.frost-field i:nth-child(6){left:53%;top:64%;animation-delay:-3s}.frost-field i:nth-child(7){left:61%;top:25%;animation-delay:-5s}.frost-field i:nth-child(8){left:70%;top:78%;animation-delay:-8s}.frost-field i:nth-child(9){left:78%;top:15%;animation-delay:-6s}.frost-field i:nth-child(10){left:85%;top:55%;animation-delay:-2s}.frost-field i:nth-child(11){left:92%;top:36%;animation-delay:-4s}.frost-field i:nth-child(12){left:12%;top:44%;animation-delay:-9s}.reveal-art,.reveal-text{opacity:0}.reveal-art{transform:translateX(-30px) rotate(-5deg);transition:opacity .6s ease .2s,transform .6s ease .2s}.reverse .reveal-art{transform:translateX(30px) rotate(5deg)}.reveal-text{transform:translateY(15px);transition:opacity .5s ease .4s,transform .5s ease .4s}.visible .reveal-art,.visible .reveal-text{opacity:1;transform:translate(0) rotate(0)}.black-fade{position:absolute;left:0;right:0;bottom:0;height:35vh;background:linear-gradient(180deg,transparent,#0D0A1A 84%);pointer-events:none}@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}@keyframes rune-spin{to{transform:rotate(360deg)}}@keyframes rune-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.15);opacity:.8;filter:drop-shadow(0 0 8px #D4A854)}}@keyframes frost-drift{to{transform:translateY(4px) translateX(2px);opacity:.55}}@keyframes float{to{transform:translateY(-12px) rotate(154deg)}}@media (max-width:767px){h1,h2{font-size:clamp(2.5rem,12vw,4rem)}.chamber-grid,.chamber-grid.reverse{display:flex;flex-direction:column;min-height:auto}.text-panel,.reverse .text-panel,.whisper,.crystal-stage,.reverse .crystal-stage,.puzzle-lock{grid-column:auto;grid-row:auto;width:100%}.crystal-stage,.puzzle-lock{height:48vh;min-height:330px}.depth-oracle{flex-direction:column;text-align:left}.central-crystal{width:82vw;height:82vw}.frost-field i:nth-child(n+11){display:none}.final-panel,.final-panel p,.final-panel .eyebrow,.final-panel h2{transform:none}}
