:root {
  /* typography compliance terms: (Google Intersection Observer. provides submarine-instrument-panel feeling contrasts organic serifs above. */
  --bg-start: #1a0a0f;
  --bg-mid: #120710;
  --bg-end: #0a0307;
  --muted: #6b4a5e;
  --plume: #2d0f1a;
  --copper: #c4a882;
  --white: #e8ddd4;
  --cyan: #3dd8c5;
  --magenta: #8b1a4a;
  --depth: 0;
  --elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: rgb(var(--bg-r, 26), var(--bg-g, 10), var(--bg-b, 15));
  color: var(--white);
  font-family: "Space Grotesk", Inter, sans-serif;
  overflow-x: hidden;
}

.descent-shell {
  background:
    radial-gradient(circle at 20% 120%, rgba(139, 26, 74, 0.16), transparent 34%),
    radial-gradient(circle at 90% 52%, rgba(45, 15, 26, 0.28), transparent 42%),
    rgb(var(--bg-r, 26), var(--bg-g, 10), var(--bg-b, 15));
  transition: background-color 300ms linear;
}

.depth-zone { min-height: 100vh; position: relative; isolation: isolate; }

.hero-zone {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: #1a0a0f;
  overflow: hidden;
}

.hero-lockup { text-align: center; position: relative; z-index: 2; transform: translateY(-1vh); }

h1 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #c4a882;
  text-shadow: 0 0 42px rgba(196, 168, 130, 0.08), 0 0 100px rgba(139, 26, 74, 0.16);
}

.hero-lockup p, .depth-label, .mono-tag, .footer-contact, .footer-copy {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #6b4a5e;
}

.hero-lockup p { margin: 1rem 0 0; font-size: 0.75rem; }

.sonar-pulse {
  position: absolute;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 216, 197, 0.018), rgba(61, 216, 197, 0.006) 42%, transparent 68%);
  animation: sonarPulse 4s linear infinite;
  z-index: 1;
}

@keyframes sonarPulse {
  0% { transform: scale(0.2); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: scale(12.5); opacity: 0; }
}

.particle-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: var(--pc);
  opacity: var(--o);
  clip-path: polygon(50% 0, 90% 22%, 82% 80%, 38% 100%, 0 60%, 14% 16%);
  animation: drift var(--d) linear infinite;
  animation-delay: var(--delay);
}

@keyframes drift {
  0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  30% { transform: translate3d(36px,-62px,0) rotate(98deg) scale(1.2); }
  66% { transform: translate3d(-44px,42px,0) rotate(248deg) scale(0.82); }
  100% { transform: translate3d(0,0,0) rotate(360deg) scale(1); }
}

.p1{--x:4%;--y:12%;--s:5px;--d:83s;--delay:-7s;--pc:#8b1a4a;--o:.58}.p2{--x:12%;--y:42%;--s:8px;--d:112s;--delay:-44s;--pc:#3dd8c5;--o:.26}.p3{--x:22%;--y:19%;--s:6px;--d:71s;--delay:-12s;--pc:#8b1a4a;--o:.44}.p4{--x:31%;--y:74%;--s:4px;--d:96s;--delay:-61s;--pc:#3dd8c5;--o:.22}.p5{--x:46%;--y:9%;--s:7px;--d:118s;--delay:-33s;--pc:#8b1a4a;--o:.52}
.p6{--x:54%;--y:31%;--s:5px;--d:89s;--delay:-19s;--pc:#3dd8c5;--o:.26}.p7{--x:63%;--y:67%;--s:8px;--d:105s;--delay:-74s;--pc:#8b1a4a;--o:.5}.p8{--x:78%;--y:14%;--s:6px;--d:77s;--delay:-29s;--pc:#3dd8c5;--o:.25}.p9{--x:91%;--y:46%;--s:5px;--d:117s;--delay:-8s;--pc:#8b1a4a;--o:.46}.p10{--x:86%;--y:83%;--s:7px;--d:94s;--delay:-52s;--pc:#3dd8c5;--o:.24}
.p11{--x:6%;--y:82%;--s:4px;--d:68s;--delay:-31s;--pc:#8b1a4a;--o:.56}.p12{--x:17%;--y:8%;--s:6px;--d:108s;--delay:-91s;--pc:#3dd8c5;--o:.2}.p13{--x:27%;--y:55%;--s:7px;--d:86s;--delay:-23s;--pc:#8b1a4a;--o:.48}.p14{--x:38%;--y:24%;--s:4px;--d:120s;--delay:-80s;--pc:#3dd8c5;--o:.28}.p15{--x:49%;--y:88%;--s:8px;--d:91s;--delay:-48s;--pc:#8b1a4a;--o:.42}
.p16{--x:57%;--y:5%;--s:5px;--d:74s;--delay:-4s;--pc:#3dd8c5;--o:.21}.p17{--x:68%;--y:38%;--s:6px;--d:109s;--delay:-42s;--pc:#8b1a4a;--o:.55}.p18{--x:72%;--y:72%;--s:4px;--d:79s;--delay:-17s;--pc:#3dd8c5;--o:.29}.p19{--x:83%;--y:27%;--s:8px;--d:116s;--delay:-67s;--pc:#8b1a4a;--o:.41}.p20{--x:95%;--y:7%;--s:5px;--d:88s;--delay:-36s;--pc:#3dd8c5;--o:.23}
.p21{--x:3%;--y:60%;--s:7px;--d:102s;--delay:-13s;--pc:#8b1a4a;--o:.45}.p22{--x:14%;--y:91%;--s:5px;--d:82s;--delay:-55s;--pc:#3dd8c5;--o:.25}.p23{--x:24%;--y:34%;--s:4px;--d:115s;--delay:-26s;--pc:#8b1a4a;--o:.52}.p24{--x:35%;--y:11%;--s:8px;--d:69s;--delay:-63s;--pc:#3dd8c5;--o:.2}.p25{--x:43%;--y:49%;--s:6px;--d:99s;--delay:-40s;--pc:#8b1a4a;--o:.58}
.p26{--x:52%;--y:63%;--s:4px;--d:110s;--delay:-71s;--pc:#3dd8c5;--o:.27}.p27{--x:61%;--y:16%;--s:7px;--d:78s;--delay:-21s;--pc:#8b1a4a;--o:.43}.p28{--x:73%;--y:53%;--s:5px;--d:119s;--delay:-88s;--pc:#3dd8c5;--o:.22}.p29{--x:80%;--y:94%;--s:8px;--d:84s;--delay:-38s;--pc:#8b1a4a;--o:.49}.p30{--x:90%;--y:64%;--s:4px;--d:101s;--delay:-15s;--pc:#3dd8c5;--o:.26}
.p31{--x:9%;--y:27%;--s:8px;--d:92s;--delay:-83s;--pc:#8b1a4a;--o:.51}.p32{--x:19%;--y:67%;--s:4px;--d:107s;--delay:-11s;--pc:#3dd8c5;--o:.24}.p33{--x:29%;--y:6%;--s:5px;--d:73s;--delay:-58s;--pc:#8b1a4a;--o:.47}.p34{--x:41%;--y:78%;--s:6px;--d:113s;--delay:-34s;--pc:#3dd8c5;--o:.21}.p35{--x:48%;--y:36%;--s:4px;--d:87s;--delay:-5s;--pc:#8b1a4a;--o:.55}
.p36{--x:59%;--y:84%;--s:8px;--d:97s;--delay:-69s;--pc:#3dd8c5;--o:.23}.p37{--x:66%;--y:23%;--s:5px;--d:66s;--delay:-27s;--pc:#8b1a4a;--o:.44}.p38{--x:76%;--y:44%;--s:7px;--d:111s;--delay:-46s;--pc:#3dd8c5;--o:.25}.p39{--x:88%;--y:18%;--s:4px;--d:90s;--delay:-76s;--pc:#8b1a4a;--o:.5}.p40{--x:97%;--y:76%;--s:6px;--d:121s;--delay:-24s;--pc:#3dd8c5;--o:.2}
.p41{--x:11%;--y:73%;--s:6px;--d:103s;--delay:-93s;--pc:#8b1a4a;--o:.46}.p42{--x:33%;--y:92%;--s:5px;--d:75s;--delay:-50s;--pc:#3dd8c5;--o:.24}.p43{--x:56%;--y:52%;--s:7px;--d:114s;--delay:-6s;--pc:#8b1a4a;--o:.53}.p44{--x:69%;--y:8%;--s:4px;--d:85s;--delay:-30s;--pc:#3dd8c5;--o:.27}.p45{--x:94%;--y:33%;--s:8px;--d:100s;--delay:-64s;--pc:#8b1a4a;--o:.43}
.p46{--x:2%;--y:35%;--s:5px;--d:117s;--delay:-41s;--pc:#3dd8c5;--o:.22}.p47{--x:37%;--y:59%;--s:8px;--d:80s;--delay:-18s;--pc:#8b1a4a;--o:.57}.p48{--x:64%;--y:92%;--s:4px;--d:106s;--delay:-79s;--pc:#3dd8c5;--o:.26}.p49{--x:84%;--y:56%;--s:6px;--d:72s;--delay:-35s;--pc:#8b1a4a;--o:.48}.p50{--x:99%;--y:12%;--s:5px;--d:95s;--delay:-87s;--pc:#3dd8c5;--o:.21}

.mineral-vein { height: 8vh; min-height: 56px; display: flex; align-items: center; gap: clamp(1rem, 5vw, 5rem); padding: 0 6vw; background: linear-gradient(180deg, transparent, rgba(45, 15, 26, 0.3), transparent); overflow: hidden; }
.mineral-vein span { display: block; width: clamp(48px, 10vw, 150px); height: clamp(12px, 2vw, 28px); background: #2d0f1a; clip-path: polygon(0 50%, 17% 0, 73% 18%, 100% 64%, 54% 100%, 12% 82%); transform: rotate(var(--r, -5deg)); opacity: .9; }
.mineral-vein span:nth-child(even) { background: #6b4a5e; opacity: .38; --r: 7deg; }
.vein-two span { transform: rotate(8deg); } .vein-three span { transform: rotate(-11deg); }

.mesopelagic-zone { padding: 12vh 8vw; background: linear-gradient(180deg, rgba(26,10,15,.7), rgba(18,7,16,.84)); }
.depth-label { font-size: 0.75rem; margin: 0; position: absolute; top: 7vh; left: 8vw; }
.facet-triangle { min-height: 76vh; position: relative; max-width: 1180px; margin: 0 auto; }
.crystal-card {
  width: min(360px, 82vw);
  position: absolute;
  padding: 2rem;
  background: linear-gradient(145deg, rgba(45, 15, 26, .82), rgba(10, 3, 7, .62));
  border: 1px solid rgba(61, 216, 197, .4);
  clip-path: polygon(7% 0, 92% 4%, 100% 28%, 94% 91%, 76% 100%, 5% 95%, 0 18%);
  transition: transform 300ms var(--elastic), filter 300ms var(--elastic), border-color 300ms var(--elastic);
}
.crystal-card:hover { transform: translateY(-6px) scale(1.015); border-color: rgba(61, 216, 197, .78); filter: drop-shadow(0 0 18px rgba(61, 216, 197, .14)); }
.facet-one { left: 3%; top: 13%; } .facet-two { right: 5%; top: 2%; clip-path: polygon(12% 3%, 84% 0, 100% 16%, 91% 96%, 35% 100%, 0 74%, 4% 20%); } .facet-three { left: 34%; bottom: 4%; clip-path: polygon(18% 0, 100% 8%, 94% 82%, 67% 100%, 0 91%, 6% 13%); }
.icon-case { width: 82px; height: 82px; display: grid; place-items: center; margin-bottom: 1.4rem; background: rgba(139, 26, 74, .18); clip-path: polygon(25% 3%, 74% 3%, 100% 50%, 74% 97%, 25% 97%, 0 50%); }
.marine-icon { width: 56px; height: 56px; fill: none; stroke: #3dd8c5; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mono-tag { font-size: .68rem; margin: 0 0 1rem; letter-spacing: .09em; }
.crystal-card h2 { font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 3.2vw, 3.4rem); font-weight: 600; letter-spacing: .05em; color: #c4a882; margin: 0 0 1rem; }
.crystal-card p:not(.mono-tag), .specimen p { font-size: clamp(0.875rem, 1.2vw, 1.1rem); line-height: 1.75; letter-spacing: .02em; margin: 0; color: #e8ddd4; }

.bathypelagic-zone { display: grid; place-items: center; padding: 10vw; background: linear-gradient(180deg, rgba(18,7,16,.9), rgba(10,3,7,.45)); overflow: hidden; }
.statement { max-width: 1200px; font-family: "Libre Baskerville", serif; font-size: clamp(2rem, 6vw, 5rem); line-height: 1.15; color: #e8ddd4; text-align: center; }
.statement span { display: inline-block; margin: 0 .18em; opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--elastic), transform 600ms var(--elastic); transition-delay: calc(var(--i) * 100ms); }
.statement.in-view span { opacity: 1; transform: translateY(0); }
.statement span:nth-child(4) { color: #c4a882; font-style: italic; }
.transition-icon { position: absolute; right: 10vw; bottom: 10vh; width: 80px; height: 80px; fill: rgba(61,216,197,.08); stroke: #3dd8c5; stroke-width: 1.5; opacity: .45; transition: transform 900ms var(--elastic); }
.transition-icon.spin { transform: rotate(360deg); }

.abyssal-zone { padding: 13vh 7vw 10vh; background: rgba(10, 3, 7, .78); }
.specimen-field { min-height: 78vh; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, minmax(58px, 1fr)); gap: 1rem; max-width: 1220px; margin: 0 auto; }
.specimen { padding: 1.2rem; background: rgba(18, 7, 16, .76); border: 1px solid rgba(61, 216, 197, .32); clip-path: polygon(15% 0, 90% 6%, 100% 22%, 95% 92%, 72% 100%, 4% 92%, 0 19%); transition: transform 300ms var(--elastic), filter 300ms var(--elastic), border-color 300ms var(--elastic); }
.specimen:hover { transform: scale(1.035); filter: drop-shadow(0 0 24px rgba(61, 216, 197, .18)); border-color: rgba(61, 216, 197, .72); }
.specimen-a { grid-column: 2 / 6; grid-row: 2 / 5; } .specimen-b { grid-column: 8 / 12; grid-row: 1 / 4; } .specimen-c { grid-column: 5 / 9; grid-row: 4 / 8; } .specimen-d { grid-column: 1 / 4; grid-row: 6 / 9; } .specimen-e { grid-column: 10 / 13; grid-row: 5 / 8; }
.hex-frame { width: 94px; height: 94px; display: grid; place-items: center; margin-bottom: 1rem; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: rgba(139,26,74,.22); animation: hexPulse 5.8s ease-in-out infinite; }
@keyframes hexPulse { 0%,100% { box-shadow: inset 0 0 0 1px rgba(61,216,197,.08); } 50% { box-shadow: inset 0 0 0 3px rgba(61,216,197,.18), 0 0 22px rgba(61,216,197,.08); } }
.specimen h3 { font-family: "Cormorant Garamond", serif; font-size: clamp(1.6rem, 2.4vw, 2.7rem); font-weight: 600; color: #c4a882; margin: 0 0 .6rem; letter-spacing: .045em; }

.hadal-zone { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 1.4rem; background: #0a0307; text-align: center; }
.footer-crystal { width: 112px; height: 112px; fill: none; stroke: #3dd8c5; stroke-width: 1.5; opacity: .58; filter: drop-shadow(0 0 16px rgba(61, 216, 197, .12)); }
.footer-contact { font-size: .75rem; color: #c4a882; margin: 1rem 0 0; }.footer-copy { font-size: .68rem; margin: 0; }

.reveal-scale { opacity: 0; transform: translateY(18px) scale(.9); transition: opacity 400ms var(--elastic), transform 400ms var(--elastic); transition-delay: var(--reveal-delay, 0ms); }
.reveal-scale.in-view { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 820px) {
  .mesopelagic-zone, .abyssal-zone { padding-left: 5vw; padding-right: 5vw; }
  .facet-triangle { display: grid; gap: 1.5rem; padding-top: 10vh; }
  .crystal-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; }
  .specimen-field { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; padding-top: 9vh; }
  .specimen-a, .specimen-b, .specimen-c, .specimen-d, .specimen-e { grid-column: auto; grid-row: auto; }
  .depth-label { left: 5vw; }
  .statement { text-align: left; }
}