/* PHORDEINSAYN — pitch black. controlled chaos. */

@font-face { font-family:"Scratch"; src:url("fonts/Scratch-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Comic Neue"; src:url("fonts/comic-neue-latin-300-normal.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"Comic Neue"; src:url("fonts/comic-neue-latin-400-normal.woff2") format("woff2"); font-weight:400; font-display:swap; }

:root {
  --ink: #000;
  --paper: #f5f3ee;
  --ghost: #85827b;
  --lit: #cfccc3;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family:"Comic Neue","Comic Sans MS","Chalkboard SE",cursive;
  font-weight:300;
  overflow-x:hidden;
}
.scratch { font-family:"Scratch",cursive; font-weight:normal; letter-spacing:.06em; }

/* ---------- the dark field: words + his symbols, near-invisible, evolving ---------- */
#field, #fieldLit, #mains {
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  transition: opacity .7s ease;
}
#field.fading, #fieldLit.fading, #mains.fading { opacity:0 !important; }
#field { opacity:.012; }           /* close to invisible */
#fieldLit { opacity:1; }
#mains { opacity:1; }

#field span, #fieldLit span {
  position:absolute; font-family:"Scratch",cursive; white-space:nowrap; user-select:none;
  color: var(--paper);
}
#field img, #fieldLit img { position:absolute; }
#fieldLit span { text-shadow: 0 0 16px rgba(245,243,238,.3); }
#fieldLit {
  -webkit-mask-image: radial-gradient(circle 205px at var(--mx,-500px) var(--my,-500px), rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 45%, transparent 72%);
          mask-image: radial-gradient(circle 205px at var(--mx,-500px) var(--my,-500px), rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 45%, transparent 72%);
}

/* the MAIN symbol: pitch black, breathes light when found */
#mains img {
  position:absolute; pointer-events:auto;
  filter: brightness(0) drop-shadow(0 0 2px rgba(245,243,238,.10));
}
#mains img:hover { animation: symBreathe 2.6s ease-in-out infinite; }
@keyframes symBreathe {
  0%,100% { filter: brightness(0) drop-shadow(0 0 5px rgba(245,243,238,.30)) drop-shadow(0 0 14px rgba(245,243,238,.14)); }
  50%     { filter: brightness(0) drop-shadow(0 0 14px rgba(245,243,238,.75)) drop-shadow(0 0 34px rgba(245,243,238,.32)); }
}

#alive { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; transition:opacity .7s ease; }
#alive.fading { opacity:0 !important; }
#alive img {
  position:absolute;
  animation: aliveHum 5.2s ease-in-out infinite;
}
@keyframes aliveHum {
  0%,100% { opacity:.025; filter: drop-shadow(0 0 0 transparent); }
  50%     { opacity:.055; filter: drop-shadow(0 0 8px rgba(245,243,238,.2)); }
}

#grain {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .028 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- cursor ---------- */
@media (hover:hover) and (pointer:fine) {
  body, a, button { cursor:none; }
  #cursor {
    position:fixed; top:0; left:0; z-index:9999;
    width:38px; height:38px; pointer-events:none;
    transform:translate(-50%,-50%);
    transition: scale .18s;
    color:var(--paper);
    mix-blend-mode:difference;
  }
  #cursor svg { position:absolute; inset:0; width:100%; height:100%; display:none; }
  #cursor svg.on { display:block; }
  #cursor.hovering { scale:1.65; }
}
@media (hover:none), (pointer:coarse) { #cursor { display:none; } }

/* ---------- nav ---------- */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 26px;
  background:linear-gradient(rgba(0,0,0,.92), transparent);
}
.nav-links { display:flex; gap: clamp(22px, 4.5vw, 52px); }
.nav-links a {
  color:var(--paper); text-decoration:none; font-size:1.16rem;
  display:inline-block; transition:transform .15s, text-shadow .15s;
}
.nav-links a:hover { transform:rotate(-3deg) scale(1.18); text-shadow:0 0 12px rgba(245,243,238,.5); }
.nav-links .acba-tab { font-family:"Comic Neue","Comic Sans MS",cursive; font-weight:400; font-size:1rem; align-self:center; }
#navSym { display:block; width:46px; }
#navSym img {
  width:100%; display:block;
  filter: drop-shadow(0 0 3px rgba(245,243,238,.55)) drop-shadow(0 0 10px rgba(245,243,238,.2));
  transition: transform .2s;
}
#navSym:hover img { transform: scale(1.12) rotate(-6deg); animation: symBreathe 2.6s ease-in-out infinite; }

/* ---------- character pop: small, upside down, from the top right ---------- */
#charPop {
  position:fixed; top:0; right:74px; z-index:99;
  width:min(24vw, 150px);
  transform: translateY(-104%);
  transition: transform .45s cubic-bezier(.2,1.4,.4,1);
  pointer-events:none;
}
#charPop.show { transform: translateY(-9%); }
#popInner { position:relative; transform: rotate(180deg); }
#popChar { width:100%; display:block; }
#popPupil {
  position:absolute; left:22.7%; top:25.9%; width:25.7%;
  transform:translate(-50%,-50%); transition:transform .09s linear;
}

/* ---------- titan tab tease ---------- */
#titanTease {
  position:fixed; top:56px; z-index:98;
  width:min(30vw, 170px);
  transform: scale(0) rotate(-30deg);
  transform-origin: top center;
  transition: transform .35s cubic-bezier(.2,1.6,.4,1);
  pointer-events:none;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.8)) drop-shadow(0 0 2px rgba(245,243,238,.4));
}
#titanTease.show { transform: scale(1) rotate(6deg); }

/* ---------- hero ---------- */
.hero {
  min-height:100svh; position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 14px;
}
.diamond {
  position:relative; width:134vw; max-width:none;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(70px,13vw,170px) 0;
}
.diamond svg { position:absolute; inset:0; width:100%; height:100%; }
#title {
  position:relative;
  font-size:clamp(2.6rem, 11.8vw, 10.2rem);
  white-space:nowrap;
  line-height:.95; color:var(--paper);
  text-shadow: 0 0 calc(var(--glow,0)*26px) rgba(245,243,238, calc(var(--glow,0)*.85)),
               0 0 calc(var(--glow,0)*58px) rgba(245,243,238, calc(var(--glow,0)*.4));
  transition:text-shadow .2s;
}
#title.breathe { animation:titleBreathe 2.8s ease-in-out infinite; }
@keyframes titleBreathe {
  0%,100% { text-shadow:0 0 10px rgba(245,243,238,.5), 0 0 26px rgba(245,243,238,.2); }
  50%     { text-shadow:0 0 26px rgba(245,243,238,.95), 0 0 62px rgba(245,243,238,.45); }
}
.hero-greet { margin-top:64px; font-size:1.25rem; }
.hero-sub { font-size:1.05rem; margin-top:14px; color:var(--ghost); }

/* ---------- sections ---------- */
main { position:relative; z-index:2; }
.section { max-width:1080px; margin:0 auto; padding:110px 24px 30px; }
.section h2 {
  font-size:clamp(1.8rem, 5vw, 2.9rem);
  margin-bottom:28px; font-weight:400;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.proj-num { font-size:1.2em; line-height:0; }
.section-note { color:var(--ghost); margin:-16px 0 26px; }

/* ---------- watchers ---------- */
.watcher { position:relative; display:inline-block; width:92px; aspect-ratio:202/88; }
.watcher svg { position:absolute; inset:0; width:100%; height:100%; }
.watcher .w-pup { transition:transform .09s linear; }
.watcher:hover svg { animation: eyeHum 2.4s ease-in-out infinite; }
@keyframes eyeHum {
  0%,100% { filter: drop-shadow(0 0 2px rgba(245,243,238,.3)); }
  50%     { filter: drop-shadow(0 0 9px rgba(245,243,238,.8)); }
}

/* ---------- cards ---------- */
.grid { display:grid; gap:26px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.card {
  border:2.5px solid var(--paper);
  border-radius:58% 42% 55% 45% / 8% 10% 8% 10%;
  padding:14px; background:#000;
  transition:transform .18s;
}
.card:nth-child(odd):hover { transform:rotate(-1.6deg) scale(1.03); }
.card:nth-child(even):hover { transform:rotate(1.6deg) scale(1.03); }
.card img { width:100%; display:block; filter:grayscale(1) contrast(1.08); }
.card .ph {
  aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(37deg, transparent 0 14px, rgba(245,243,238,.05) 14px 15px),
    repeating-linear-gradient(-49deg, transparent 0 22px, rgba(245,243,238,.038) 22px 23px);
  color:var(--ghost); font-size:1rem; text-align:center; padding:10px;
}
.card h3 { font-size:1.15rem; margin-top:12px; font-weight:400; }
.card .meta { color:var(--ghost); font-size:.85rem; margin-top:4px; }
.card .buy {
  display:inline-block; margin-top:12px; padding:8px 16px;
  border:2px solid var(--paper); color:var(--paper);
  text-decoration:none; font-size:.9rem; font-weight:400;
  border-radius:45% 55% 40% 60% / 55% 45% 60% 40%;
  transition:background .15s,color .15s,transform .15s;
}
.card .buy:hover { background:var(--paper); color:var(--ink); transform:rotate(-2deg); }
.card .buy.dead { border-color:var(--ghost); color:var(--ghost); pointer-events:none; }

/* ---------- project ---------- */
#trailerBox .frame {
  position:relative; width:100%; aspect-ratio:16/9;
  border:2.5px solid var(--paper); border-radius:12px; overflow:hidden; background:#000;
}
#trailerBox iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.coming {
  aspect-ratio:16/7; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  border:2.5px dashed var(--ghost); border-radius:12px;
  text-align:center; padding:20px; background:#000;
}
.coming .big { font-family:"Scratch",cursive; font-size:clamp(1.8rem,5vw,3rem); animation:breathe 3.2s ease-in-out infinite; }
.coming .small { color:var(--ghost); }
@keyframes breathe { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ---------- events ---------- */
.event { border-left:4px solid var(--paper); padding:14px 18px; margin-bottom:18px; background:#000; }
.event .name { font-family:"Scratch",cursive; font-size:1.5rem; }
.event .meta { color:var(--ghost); margin-top:4px; }
.no-events { color:var(--ghost); font-size:1.1rem; }

/* ---------- TITAN ---------- */
.titan-section { text-align:center; }
.titan-h { justify-content:center; }
.titan-h .meet { font-size:.55em; color:var(--ghost); }
.titan-name {
  font-size:clamp(2.8rem, 9vw, 5.5rem);
  text-shadow:0 0 22px rgba(245,243,238,.35), 0 0 60px rgba(245,243,238,.15);
}
.titan-wrap { display:flex; flex-direction:column; align-items:center; gap:20px; }
.titan-stage { position:relative; display:inline-block; padding:64px 46px 6px; }
.rays {
  position:absolute; inset:0; margin:auto;
  width:116%; height:116%; left:-8%; top:-4%;
  color:var(--paper); opacity:.5;
  animation:raysPulse 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes raysPulse { 0%,100%{opacity:.26; transform:scale(1)} 50%{opacity:.58; transform:scale(1.03)} }
.crown {
  position:absolute; top:-10px; left:30%;
  width:118px; transform:translateX(-50%) rotate(-7deg);
  color:var(--paper);
  filter:drop-shadow(0 0 8px rgba(245,243,238,.45));
  animation: crownFloat 3.6s ease-in-out infinite;
}
@keyframes crownFloat {
  0%,100% { transform:translateX(-50%) rotate(-7deg) translateY(0); }
  50%     { transform:translateX(-50%) rotate(-4deg) translateY(-11px); }
}
.titan-img {
  display:block; max-width:520px; width:100%;
  filter: drop-shadow(0 0 26px rgba(245,243,238,.16)) drop-shadow(0 10px 30px rgba(0,0,0,.9));
  transition:transform .25s;
  /* full color. as decreed. */
}
.titan-img:hover { transform:scale(1.02) rotate(-1deg); }
.titan-caption { color:var(--ghost); }

/* ---------- contact ---------- */
.contact { text-align:center; padding-bottom:90px; }
.contact h2 { justify-content:center; }
.contact-sub { font-size:1.15rem; margin:10px 0 30px; color:var(--ghost); }
.contact-links { display:flex; flex-direction:column; align-items:center; gap:14px; }
.contact-links a {
  color:var(--paper); text-decoration:none; font-size:1.15rem;
  display:inline-block; transition:transform .15s;
}
.contact-links a:hover { transform:scale(1.1) rotate(-1.5deg); text-decoration:underline wavy; }

footer {
  position:relative; z-index:2;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:22px; border-top:2px solid #161616;
  color:var(--ghost); font-size:.85rem;
}

.reveal { opacity:0; transform:translateY(26px) rotate(.4deg); transition:opacity .6s, transform .6s; }
.reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .coming .big, .rays, .crown, #title.breathe, #mains img:hover, #navSym:hover img { animation:none; }
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
  #charPop, #titanTease { transition:none; }
  #field, #fieldLit, #mains { transition:none; }
}

/* ---------- anyone can be an artist (the poster, inverted) ---------- */
.acba-card {
  position:relative; overflow:hidden;
  background:#000;
  border:2.5px solid var(--paper);
  border-radius: 46% 46% 14px 14px / 26% 26% 14px 14px;
  padding: clamp(40px,7vw,72px) clamp(24px,6vw,64px) clamp(34px,5vw,54px);
  text-align:center;
}
.acba-spiral { position:absolute; width:150px; color:var(--paper); opacity:.22; pointer-events:none; }
.acba-spiral.sp1 { top:-32px; right:-28px; transform:rotate(14deg); }
.acba-spiral.sp2 { bottom:-36px; left:-30px; transform:rotate(-9deg); }
.acba-presents { font-size:1rem; color:var(--ghost); letter-spacing:.14em; }
.acba-title { font-size:clamp(1.9rem, 5.5vw, 3.1rem); font-weight:400; margin-top:10px; }
.acba-sub { font-size:clamp(1.15rem, 3vw, 1.6rem); margin-top:8px; }
.acba-blurb { max-width:520px; margin:26px auto 0; font-size:1.08rem; }
.acba-note { margin-top:22px; font-size:1.05rem; }
.acba-details { margin-top:18px; color:var(--ghost); font-size:.95rem; }


/* the inverted I haunting the poster card */
.acba-iwrap {
  position:absolute; right:-30px; bottom:-46px;
  width:min(42%, 210px); pointer-events:none;
}
.acba-i { display:block; width:100%; filter:invert(1); opacity:.92; }
.acba-presents { font-size:1.25rem !important; }
.section h2.acba-title { display:block; text-align:center; width:100%; }
.acba-pupil {
  position:absolute; left:22.7%; top:25.8%; width:25.7%;
  transform:translate(-50%,-50%);
  filter:invert(1); opacity:.92;
}


/* ---------- memories carousel ---------- */
.car-wrap { position:relative; padding:0 74px; }
@media (max-width:700px){ .car-wrap { padding:0 56px; } }
#gallery.grid {
  display:flex; gap:26px; overflow-x:auto;
  padding:10px 4px 22px; scrollbar-width:none; cursor:grab;
  user-select:none; -webkit-user-select:none; touch-action:pan-y;
}
#gallery.grid::-webkit-scrollbar { display:none; }
#gallery.grid.dragging { cursor:grabbing; scroll-snap-type:none; }
#gallery .card {
  flex:0 0 calc((100% - 52px) / 3);
  min-width:220px;
  transform: rotate(var(--tilt,0deg));
  transition: transform .3s cubic-bezier(.2,1.2,.4,1);
}
#gallery img { pointer-events:none; }
@media (max-width:700px){ #gallery .card { flex-basis: calc((100% - 26px)/1.4); } }
.car-btn {
  position:absolute; top:38%; z-index:5;
  width:54px; height:54px; padding:6px;
  background:rgba(0,0,0,.55); border:2px solid var(--paper);
  border-radius:50% 45% 55% 50%;
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s;
}
.car-btn:hover { transform:scale(1.15) rotate(-4deg); }
.car-btn img { width:100%; filter:none; }
.car-btn.prev { left:4px; } .car-btn.prev img { transform:rotate(90deg); }
.car-btn.next { right:4px; } .car-btn.next img { transform:rotate(-90deg); }

/* ---------- cards are doorways ---------- */
a.cardlink { text-decoration:none; color:var(--paper); display:block; }

/* ---------- piece page ---------- */
.piece-wrap {
  min-height:100svh; display:flex; gap:5vw; align-items:center; justify-content:center;
  padding:90px 5vw 60px; position:relative; z-index:2; flex-wrap:wrap;
}
.piece-stage { position:relative; flex:1 1 480px; max-width:840px; display:flex; justify-content:center; }
.piece-stage > img.main {
  max-height:78vh; max-width:100%;
  border:3px solid var(--paper);
  box-shadow: 0 0 40px rgba(245,243,238,.12), 0 20px 60px rgba(0,0,0,.9);
}
.orbit-ring {
  position:absolute; left:50%; top:50%; width:0; height:0;
  animation: orbitSpin 26s linear infinite;
  pointer-events:none;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.orbit-ring .sat {
  position:absolute; left:0; top:0;
  width:120px; aspect-ratio:4/5;
  transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--rad)) rotate(calc(-1*var(--a)));
  animation: satCounter 26s linear infinite;
  border:2px solid var(--paper); background:#000;
  display:flex; align-items:center; justify-content:center;
  color:var(--ghost); font-size:.8rem; text-align:center; padding:6px;
  background-image:
    repeating-linear-gradient(37deg, transparent 0 12px, rgba(245,243,238,.06) 12px 13px);
}
.orbit-ring .sat img { width:100%; height:100%; object-fit:cover; display:block; }
@keyframes satCounter { to { rotate: -360deg; } }
.piece-info { flex:0 1 380px; }
.piece-info h1 { font-family:"Scratch",cursive; font-weight:normal; font-size:clamp(2rem,4.5vw,3.4rem); }
.piece-info .year { color:var(--ghost); margin-top:6px; }
.piece-info .desc { margin-top:22px; font-size:1.08rem; line-height:1.55; }
.interested {
  display:inline-block; margin-top:30px; padding:13px 26px;
  border:2.5px solid var(--paper); color:var(--paper); text-decoration:none;
  font-size:1.05rem; border-radius:55% 45% 60% 40% / 50% 60% 40% 50%;
  transition: background .15s, color .15s, transform .15s;
}
.interested:hover { background:var(--paper); color:var(--ink); transform:rotate(-2deg) scale(1.05); }
.backlink {
  position:fixed; top:16px; left:20px; z-index:100;
  color:var(--paper); text-decoration:none;
  font-family:"Scratch",cursive; font-size:2.1rem;
  padding:8px 18px; border:2.5px solid var(--paper);
  border-radius:55% 45% 60% 40% / 50% 60% 40% 50%;
  background:rgba(0,0,0,.7);
}
.backlink:hover { text-shadow:0 0 12px rgba(245,243,238,.6); }

/* ---------- titan's domain ---------- */
.domain { position:relative; min-height:100svh; overflow:hidden; z-index:2; }
.domain .chaos-pic {
  position:absolute; border:3px solid var(--paper);
  box-shadow:0 10px 40px rgba(0,0,0,.85);
  transition: transform .25s;
}
.domain .chaos-pic:hover { transform: scale(1.06) rotate(0deg) !important; z-index:9; }
.domain-center {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-46%);
  width:min(64vw, 480px); z-index:5; pointer-events:none;
}
.domain-center img.chooch { width:100%; display:block; filter: drop-shadow(0 0 34px rgba(245,243,238,.2)); }
.domain-center .crown {
  position:absolute; left:50%; top:2%;
  width:34%; transform:translateX(-50%) rotate(-5deg);
  color:var(--paper);
  filter: drop-shadow(0 0 8px rgba(245,243,238,.5));
  animation: crownFloat 3.6s ease-in-out infinite, crownHum 3.6s ease-in-out infinite;
}
@keyframes crownHum {
  0%,100% { filter: drop-shadow(0 0 5px rgba(245,243,238,.35)); }
  50%     { filter: drop-shadow(0 0 14px rgba(245,243,238,.85)); }
}
.domain h1 {
  position:absolute; left:50%; top:34px; transform:translateX(-50%);
  font-family:"Scratch",cursive; font-weight:normal; color:var(--paper);
  font-size:clamp(2rem,7vw,4.5rem); z-index:8;
  text-shadow:0 0 24px rgba(245,243,238,.4);
}
a.titan-door { display:inline-block; }


/* ---------- page haunt: oops + jibhert ---------- */
#pageOops { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#pageOops img { position:absolute; filter: brightness(0) drop-shadow(0 0 3px rgba(245,243,238,.16)); }
.jib-deco { position:fixed; z-index:1; opacity:.14; pointer-events:none; }

/* ---------- titan's domain v2 ---------- */
#ticks { position:fixed; inset:0; z-index:0; pointer-events:none; }
#ticks span { position:absolute; background:var(--paper); opacity:.32; border-radius:2px; }
.ring-scribble {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-48%);
  color:var(--paper); opacity:.5; pointer-events:none;
}
.corner-star { position:fixed; width:64px; color:var(--paper); opacity:.6; z-index:1; }
.domain-center .crownimg {
  position:absolute; left:50%; top:-9%;
  width:42%; transform:translateX(-50%) rotate(-4deg);
  filter: drop-shadow(0 0 8px rgba(245,243,238,.5));
  animation: crownFloat 3.6s ease-in-out infinite, crownHum 3.6s ease-in-out infinite;
}
.titan-stage .crownimg {
  position:absolute; top:26px; left:50%;
  width:130px; transform:translateX(-50%) rotate(-6deg);
  animation: crownFloat 3.6s ease-in-out infinite, crownHum 3.6s ease-in-out infinite;
  z-index:3;
}


/* ---------- royal orbit ---------- */
.dom-ring {
  position:absolute; left:50%; top:50%; width:0; height:0; z-index:3;
  animation: orbitSpin 70s linear infinite;
}
.dom-ring .dom-sat {
  position:absolute; left:0; top:0;
  transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--rad)) rotate(calc(-1*var(--a)));
  animation: satCounter 70s linear infinite;
  border:3px solid var(--paper);
  box-shadow:0 10px 34px rgba(0,0,0,.85);
  background:#000;
}
.dom-ring .dom-sat img { display:block; width:100%; height:100%; object-fit:cover; }


/* ---------- museum rail gallery ---------- */
.gal-shell { position:relative; }
.gal-view { overflow:hidden; padding:16px 0 10px; touch-action:pan-y; cursor:grab; }
.gal-view.dragging { cursor:grabbing; }
.gal-inner { display:flex; gap:26px; will-change:transform; }
.gal-inner .card {
  flex:0 0 calc((100% - 52px) / 3); min-width:220px;
  transition: box-shadow .3s;
  will-change: transform, opacity;
}
@media (max-width:700px){ .gal-inner .card { flex-basis: calc((100% - 26px)/1.35); } }
.gal-inner img { pointer-events:none; }
.gal-inner .card.feat { box-shadow: 0 14px 44px rgba(0,0,0,.85), 0 0 26px rgba(245,243,238,.14); }
.gal-rail { display:flex; align-items:center; gap:18px; margin-top:26px; padding:0 4px; }
.rail {
  position:relative; flex:1; height:12px;
  border:2px solid var(--ghost); border-radius:8px;
  cursor:grab; touch-action:none;
}
.rail-handle {
  position:absolute; top:-2px; bottom:-2px; left:0;
  min-width:44px; background:var(--paper); border-radius:8px;
  will-change: transform, width;
  transition: filter .2s;
}
.rail-btn {
  width:54px; height:54px; flex:0 0 auto; padding:9px;
  background:rgba(0,0,0,.55); border:2px solid var(--paper);
  border-radius:50% 45% 55% 50%;
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s, box-shadow .25s;
}
.rail-btn img { width:100%; }
.rail-btn.prev img { transform: rotate(-135deg); }
.rail-btn.next img { transform: rotate(45deg); }
.rail-btn:hover { transform:scale(1.12) rotate(-3deg); }
.rail-btn.glow { box-shadow:0 0 16px rgba(245,243,238,.6); transform:scale(1.08); }

/* ---------- 3D orbit: titan's court ---------- */
.orb3d-stage { position:fixed; inset:0; z-index:2; }
.dom3d {
  position:absolute; left:50%; top:47%;
  border:3px solid var(--paper); background:#000;
  box-shadow:0 12px 36px rgba(0,0,0,.85);
  will-change: transform, opacity, z-index;
  pointer-events:none;
}
.dom3d img { display:block; width:100%; height:100%; object-fit:cover; }