@font-face { font-family: "InterVar"; src: local("Inter"); font-display: swap; }


:root{
  --ink:#0c0f12;
  --soot:#0a0c0e;
  --ash:#1b1f24;
  --fog:#8a8f98;
  --sick:#a3b1b8;
  --acid:#7aa0a0;
  --blood:#d44;
  --glow:#a9c9ff20;
}

*{ box-sizing:border-box }
html,body{ height:100% }


body.page-dark{
  margin:0;
  background:radial-gradient(1200px 800px at 70% 30%, #12161b 0%, #0a0c0e 60%, #060709 100%);
  color:#c9d2db;
  font-family: InterVar, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.02em;
  overflow:auto;
}

body.no-scroll{ overflow:hidden }


.noise{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.25; mix-blend-mode:soft-light;
}


.hero{
  min-height:100svh;
  position:relative; display:grid; place-items:center;
  background: var(--ink) center/cover no-repeat;
  background-image: var(--bg);
  overflow:hidden;
}
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(75% 60% at 50% 40%, transparent 0 55%, rgba(0,0,0,.6) 80%, rgba(0,0,0,.9) 100%);
  pointer-events:none;
}


.abyss-beam{
  position:absolute; inset:auto auto 0 0; width:140vmax; height:140vmax;
  background:
    radial-gradient(40% 80% at 20% 0%, rgba(160,210,255,.06), transparent 60%),
    linear-gradient(to bottom, rgba(140,180,220,.06), rgba(0,0,0,0) 60%);
  transform: rotate(-18deg) translateY(0);
  filter: blur(6px) saturate(.8);
  mix-blend-mode: screen; opacity:.35; pointer-events:none; z-index:1;
  animation: beamPulse 8s ease-in-out infinite;
}
@keyframes beamPulse { 0%,100%{opacity:.28} 50%{opacity:.42} }

.particles{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.6; mix-blend-mode:screen; display:block;
}


.dark-props{
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
}
.prop{
  position:absolute; top:var(--top); left:-15vmax;
  width:var(--size); height:calc(var(--size) * .48);
  opacity:.18; filter: blur(.6px) saturate(.7) contrast(.9) brightness(.9);
  transform: translateX(0) scale(var(--scale)) rotate(var(--twist));
  animation: driftAcross var(--dur) linear var(--delay) infinite,
             shimmer 6s ease-in-out infinite;
  will-change: transform, opacity, filter;
}
.prop.flip{ transform: scaleX(-1) scale(var(--scale)) }
.prop.fish{
  background:
    radial-gradient(120% 120% at 20% 50%, rgba(250,250,255,.12) 0 12%, transparent 13%),
    radial-gradient(90% 110% at 70% 50%, rgba(220,235,255,.08) 0 18%, transparent 19%),
    radial-gradient(90% 90% at 85% 50%, rgba(255,255,255,.18) 0 4%, transparent 5%),
    linear-gradient(90deg, rgba(180,210,240,.08), rgba(0,0,0,0) 60%);
  border-radius: 60% 40% 40% 60% / 60% 50% 50% 60%;
  box-shadow:
    -10px 0 18px -10px rgba(120,170,220,.12) inset,
    0 1px 18px rgba(0,0,0,.5);
}
.prop.fish::after{
  content:""; position:absolute; right:98%; top:30%; width:38%; height:40%;
  background: linear-gradient(90deg, rgba(200,230,255,.08), rgba(0,0,0,0));
  border-radius: 0 80% 80% 0 / 50% 80% 20% 50%;
  filter: blur(.4px);
}
.prop.eye{
  height: calc(var(--size) * .64);
  background:
    radial-gradient(closest-side, rgba(255,255,255,.85) 0 28%, rgba(200,230,255,.12) 32%, transparent 60%),
    radial-gradient(closest-side, rgba(0,0,0,.9) 0 12%, rgba(30,30,30,.8) 14%, transparent 24%);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(255,255,255,.05), inset 0 0 12px rgba(0,0,0,.8);
  opacity:.14;
}
.prop.blob{
  height: calc(var(--size) * .42);
  background:
    radial-gradient(80% 80% at 40% 40%, rgba(180,210,235,.08), transparent 60%),
    radial-gradient(60% 60% at 60% 60%, rgba(200,230,255,.06), transparent 70%);
  border-radius: 50% 40% 60% 50% / 50% 60% 40% 50%;
  filter: blur(1px);
}
@keyframes driftAcross{
  0%  { transform: translate(-20vmax, 0)   scale(var(--scale)) rotate(var(--twist)); opacity: .0 }
  5%  { opacity:.16 }
  50% { transform: translate(55vw, 1.8vmin) scale(calc(var(--scale) * 1.04)) rotate(var(--twist)); }
  100%{ transform: translate(110vw, -1.8vmin) scale(var(--scale)) rotate(var(--twist)); opacity:.0 }
}
@keyframes shimmer{
  0%,100%{ filter: blur(.6px) saturate(.7) brightness(.9) }
  50%    { filter: blur(.8px) saturate(.8) brightness(1) }
}

.center{ position:relative; z-index:3; text-align:center; display:grid; gap:14px; justify-items:center }
.enter-btn{
  background:linear-gradient(180deg,#13161b,#0a0c0e);
  border:1px solid #20262d; color:#e8eef4; padding:28px 44px; border-radius:12px;
  letter-spacing:.24em; text-transform:uppercase; font-weight:800; font-size: clamp(28px, 5vw, 56px);
  box-shadow: inset 0 0 0 1px #000, 0 10px 30px #000, 0 0 40px var(--glow);
  position:relative; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; isolation:isolate;
}
.enter-btn:hover{
  transform:translateY(-2px);
  box-shadow: inset 0 0 0 1px #000, 0 16px 44px #000, 0 0 60px var(--glow);
}
.enter-btn .sub{ display:block; font-size:12px; opacity:.5; margin-top:8px; letter-spacing:.4em }


.glitch{ position:relative; display:inline-block; animation: gloom 4s ease-in-out infinite, tremor 7s ease-in-out infinite }
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; inset:0; clip-path: polygon(0 2%,100% 2%,100% 34%,0 34%);
}
.glitch::before{ left:-2px; text-shadow:2px 0 0 #58f; mix-blend-mode:screen }
.glitch::after{ left:2px; text-shadow:-2px 0 0 #f58; mix-blend-mode:screen }
@keyframes gloom{ 0%,100%{filter:brightness(.85) saturate(.7)} 50%{filter:brightness(.95) saturate(.9)} }
@keyframes tremor {
  0%,100% { transform: translate(0,0) }
  5%  { transform: translate(.4px,-.6px) }
  10% { transform: translate(-.6px,.5px) }
  15% { transform: translate(.5px,.6px) }
  20% { transform: translate(-.4px,-.4px) }
  25% { transform: translate(.3px,.2px) }
  30% { transform: translate(0,0) }
}

body.fade-out{ animation: blackout .22s ease forwards }
@keyframes blackout { to { filter:brightness(.2) saturate(.6); opacity:0 } }


.x-link{
  width:52px; height:52px; display:grid; place-items:center;
  color: #0b0b0c;; text-decoration:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(200,230,255,.06), transparent 60%);
  border:1px solid #1d242c; border-radius:12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 0 0 1px #000;
  transition: transform .15s ease, filter .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.x-link svg{ width:42px; height:42px; display:block }
.x-link:hover{
  transform: translateY(-1px);
  color:#e7eef6; border-color:#2a3440; filter: drop-shadow(0 0 10px rgba(160,200,255,.15));
}
.x-link:active{ transform: translateY(0) scale(.98) }

.x-link .x-text{
  display:none;
}


.topbar{
  position:sticky; top:0; z-index:5; display:flex; gap:16px; align-items:center; padding:14px 18px;
  background: linear-gradient(180deg,rgba(6,7,9,.9), rgba(6,7,9,.6) 60%, transparent 100%);
  border-bottom:1px solid #101419; backdrop-filter: blur(6px);
}
.logo{ color:#dfe7ee; text-decoration:none; font-weight:900; letter-spacing:.18em }
.hint{ color:#7a848e; font-size:12px; letter-spacing:.2em; text-transform:uppercase }


.gallery{ padding:28px 18px 80px }
.grid{
  --sz: min(200px, 46vw);
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(var(--sz),1fr));
}
.card{
  position:relative; overflow:hidden; border-radius:14px; background:#0b0e12;
  border:1px solid #151a21; box-shadow: inset 0 0 0 1px #000, 0 10px 30px #000;
  transform: translateZ(0);
}
.card::after{
  content:""; position:absolute; inset:-40% -20% auto -20%;
  height:60%; background:linear-gradient(120deg, transparent, rgba(180,220,255,.06) 30%, transparent 60%);
  transform: translateY(-100%); animation: drift 6s ease-in-out infinite;
}
@keyframes drift{ 0%,100%{ transform:translateY(-120%) } 50%{ transform:translateY(10%) } }
.card img{
  width:100%; height:280px; object-fit:cover; filter:saturate(.65) contrast(.9) brightness(.85);
  transition: transform .6s cubic-bezier(.2,.6,.2,1), filter .4s ease;
}
.card:hover img{ transform:scale(1.06) rotate(.2deg); filter:saturate(.75) contrast(1) brightness(.9) }
.card .veil{
  position:absolute; inset:0; background: radial-gradient(60% 50% at 50% 40%, transparent, rgba(10,12,14,.7));
  opacity:0; transition: opacity .4s ease;
}
.card:hover .veil{ opacity:1 }


.gallery::before{
  content:""; position:fixed; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 30% at 60% 20%, rgba(140,180,220,.03), transparent 60%),
    radial-gradient(30% 20% at 30% 70%, rgba(140,180,220,.02), transparent 60%);
  filter: blur(18px); opacity:.5; animation: haze 18s ease-in-out infinite;
}
@keyframes haze { 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-10px)} }
.card{ will-change: transform, filter }
.card:nth-child(3n){ animation: floatB 12s ease-in-out infinite, microBlink 8s infinite }
.card:nth-child(3n+1){ animation: floatA 10s ease-in-out infinite, microBlink 7s infinite }
.card:nth-child(3n+2){ animation: floatC 14s ease-in-out infinite, microBlink 9s infinite }
@keyframes floatA { 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-2px)} }
@keyframes floatB { 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(1px)} }
@keyframes floatC { 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-1px)} }
.card:hover::before{
  content:""; position:absolute; inset:-20%; pointer-events:none; z-index:2;
  background-image: repeating-linear-gradient(110deg, rgba(170,210,240,.03) 0 2px, transparent 2px 6px);
  filter: blur(1px); animation: gills 1.8s ease-in-out infinite;
}
@keyframes gills { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(6px) } }
@keyframes microBlink{ 0%,96%,100%{ filter:none } 97%{ filter:brightness(1.15) contrast(1.05) } 98%{ filter:brightness(.9) contrast(.95) } 99%{ filter:none } }
.card:active img{ animation: glitchSnap .18s steps(2) }
@keyframes glitchSnap{
  0%{ transform: translate(-1px,1px) scale(1.03); filter:hue-rotate(-6deg) saturate(.7) }
  50%{ transform: translate(1px,-1px) scale(1.02); filter:hue-rotate(6deg) saturate(.8) }
  100%{ transform: translate(0,0) scale(1); filter:none }
}


.overlay{
  position:fixed; inset:0; display:grid; place-items:center; z-index:10;
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,.90), rgba(0,0,0,.98)),
    radial-gradient(220px 180px at var(--lx,60%) var(--ly,30%), rgba(160,200,240,.04), transparent 60%);
  animation: fog-in .25s ease both, breathe 10s ease-in-out infinite;
  cursor:pointer;
}
@keyframes fog-in{ from{opacity:0} to{opacity:1} }
@keyframes breathe{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.04) } }
.overlay[hidden]{ display:none }
.overlay.opening, .overlay.closing{ pointer-events:none }
.overlay-inner{
  width:min(680px, 92vw); padding:28px 22px; border-radius:14px;
  color:#cfd7de; background:linear-gradient(180deg,#0b0f13,#090b0d);
  border:1px solid #1a2129; box-shadow: 0 20px 60px rgba(0,0,0,.8), inset 0 0 0 1px #000;
  position:relative; overflow:hidden; cursor:default; max-width:min(720px, 92vw); text-align:center;
}
.overlay-inner::before{
  content:""; position:absolute; inset:-40px; background:
    radial-gradient(circle at 20% 30%, rgba(180,200,220,.05) 0 2px, transparent 3px) 0 0/26px 26px,
    radial-gradient(circle at 60% 70%, rgba(180,200,220,.05) 0 2px, transparent 3px) 13px 13px/32px 32px;
  animation: snow 12s linear infinite; pointer-events:none;
}
@keyframes snow{ to{ transform: translateY(60px) } }
#overlay-text{
  font-size: clamp(18px, 2.6vw, 28px);
  line-height:1.4; color:#b9c3cb; text-align:center; margin:18px 0 22px
}


.foot{
  position:absolute; bottom:10px; left:0; right:0; text-align:center;
  color:#6e7883; font-size:12px; letter-spacing:.22em; text-transform:uppercase
}
.foot-ghost{ position:static; margin:30px 0 10px }


@media (max-width:520px){
  .card img{ height:200px }
}