:root {
  /* Interaction Pattern at 3% Frequency:** Frequency* Frequency:* The tilt-3d cursor-tracking effect appears in just 3% of batch designs. In chloengine.com */
  --obsidian: #0D0D0D;
  --stone: #3A3A4A;
  --carrara: #F5F0EB;
  --mint: #5DE5B5;
  --rose: #FF6B8A;
  --lemon: #FFE156;
  --peach: #FFB088;
  --serif: "Cormorant Garamond", Georgia, serif;
  --body: "Libre Baskerville", Georgia, serif;
  --sans: "DM Sans", Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--carrara);
  color: var(--stone);
  font-family: var(--body);
  overflow-x: hidden;
}

.gallery-walk { position: relative; overflow: hidden; }
.room, .sculpture-hall, .garden-exit { position: relative; min-height: 100vh; isolation: isolate; }
.section-label, .eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
}

.veins { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.veins path { fill: none; stroke: rgba(58, 58, 74, 0.15); stroke-width: 1; stroke-linecap: round; }
.portico { min-height: 100vh; background: var(--carrara); display: flex; align-items: center; padding: 8vw; }
.portico-copy { position: relative; z-index: 2; margin-left: 4vw; transform: translateX(-6vw); }
.eyebrow { color: var(--stone); margin: 0 0 1.2rem; opacity: 0; animation: fadeIn 700ms ease-out 520ms forwards; }
.hero-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(4.2rem, 12vw, 11rem);
  line-height: 0.82;
  letter-spacing: 0.04em;
  color: var(--rose);
  opacity: 0;
  animation: fadeIn 800ms ease-out 300ms forwards;
}
.typed-tagline { min-height: 1.6rem; margin-top: 2rem; font-family: var(--sans); letter-spacing: 0.18em; text-transform: uppercase; font-size: clamp(0.7rem, 0.9vw, 0.85rem); color: var(--mint); }
.typed-tagline::after { content: ""; display: inline-block; width: 0.65em; height: 1em; margin-left: 0.25em; background: var(--mint); transform: translateY(0.18em); opacity: 0.75; animation: blink 900ms steps(2,end) infinite; }

.column-wrap { position: absolute; right: 12vw; bottom: 10vh; width: min(18vw, 190px); height: 76vh; transform: translateY(100%); animation: columnRise 1000ms cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards; transform-style: preserve-3d; }
.flat-column { position: absolute; left: 34%; bottom: 0; width: 32%; height: 100%; background: var(--carrara); border-left: 1px solid rgba(58,58,74,0.2); border-right: 1px solid rgba(58,58,74,0.2); }
.flat-column::before, .flat-column::after { content: ""; position: absolute; left: -55%; width: 210%; height: 3.5%; background: var(--carrara); border: 1px solid rgba(58,58,74,0.2); }
.flat-column::before { top: -4%; } .flat-column::after { bottom: -3%; }
.capital { position: absolute; top: -9%; left: -42%; width: 184%; height: 6%; border: 1px solid rgba(58,58,74,0.2); }
.capital::before, .capital::after { content: ""; position: absolute; top: 30%; width: 22px; height: 22px; border: 2px solid var(--mint); border-radius: 50%; }
.capital::before { left: -4px; } .capital::after { right: -4px; }
.vein { position: absolute; width: 120%; height: 1px; background: rgba(58,58,74,0.2); transform-origin: left; }
.v1 { top: 20%; left: -10%; transform: rotate(-20deg); } .v2 { top: 46%; left: -3%; transform: rotate(15deg); } .v3 { top: 72%; left: -18%; transform: rotate(-13deg); }

.lens-flare { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, #FF6B8A 0%, #FFE156 30%, transparent 70%); opacity: 0; pointer-events: none; mix-blend-mode: screen; transform: scale(0); }
.lens-flare::before, .lens-flare::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,225,86,0.34); opacity: 0; }
.lens-flare::before { inset: -18%; } .lens-flare::after { inset: 20%; border-color: rgba(255,176,136,0.42); }
.lens-flare i { position: absolute; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--lemon); opacity: 0.65; }
.lens-flare i:nth-child(1){ left: 8%; top: 42%; } .lens-flare i:nth-child(2){ right: 18%; top: 20%; background: var(--peach); } .lens-flare i:nth-child(3){ right: 6%; bottom: 28%; width: 8px; height: 8px; } .lens-flare i:nth-child(4){ left: 28%; bottom: 10%; background: var(--rose); } .lens-flare i:nth-child(5){ left: 46%; top: -10%; }
.flare-portico { right: -100px; top: 18vh; animation: flareBloom 500ms ease-out 600ms forwards; }
.flare-portico::before { animation: ringIn 500ms ease-out 680ms forwards; } .flare-portico::after { animation: ringIn 500ms ease-out 760ms forwards; }

.dot-cluster { position: absolute; width: 150px; height: 110px; }
.dot-cluster span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--lemon); }
.dots-one { left: 9vw; bottom: 9vh; transform: rotate(-8deg); } .dots-one span:nth-child(1){ left:10px;top:28px } .dots-one span:nth-child(2){ left:42px;top:8px;width:6px;height:6px } .dots-one span:nth-child(3){ left:72px;top:48px } .dots-one span:nth-child(4){ left:120px;top:20px;width:10px;height:10px } .dots-one span:nth-child(5){ left:96px;top:84px;width:7px;height:7px }

.marble-orbit { position: fixed; right: 28px; top: 28px; z-index: 20; width: 20px; height: 20px; transform-style: preserve-3d; }
.nav-core { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--carrara); border: 1px solid rgba(58,58,74,0.26); position: relative; }
.nav-core::after { content:""; position:absolute; left:4px; top:9px; width:14px; height:1px; background:rgba(58,58,74,0.25); transform:rotate(-25deg); }
.nav-radial { position: absolute; right: 0; top: 0; width: 190px; height: 190px; opacity: 0; transform: scale(0.45); transform-origin: top right; transition: opacity 300ms ease, transform 300ms ease; pointer-events: none; }
.marble-orbit:hover .nav-radial { opacity: 1; transform: scale(1); pointer-events: auto; }
.nav-radial a { position: absolute; font: 500 0.68rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); text-decoration: none; }
.nav-radial a:nth-child(1){ right:32px; top:6px } .nav-radial a:nth-child(2){ right:82px; top:44px } .nav-radial a:nth-child(3){ right:92px; top:96px } .nav-radial a:nth-child(4){ right:55px; top:140px } .nav-radial a:nth-child(5){ right:0; top:170px }
.nav-radial a:hover { color: var(--rose); }

.frieze-room { min-height: 130vh; padding: 12vh 0; background: var(--obsidian); color: var(--carrara); overflow: hidden; }
.frieze-room .section-label { margin-left: 9vw; }
.frieze-room h2 { width: min(760px, 74vw); margin: 2rem 0 7vh 13vw; font-family: var(--serif); font-size: clamp(3rem, 7vw, 7rem); line-height: 0.92; letter-spacing: 0.04em; color: var(--rose); transform: rotate(-2deg); }
.frieze-viewport { position: sticky; top: 14vh; height: 64vh; overflow: visible; }
.frieze-track { display: flex; align-items: center; gap: 5vw; width: max-content; padding-left: 16vw; will-change: transform; transition: transform 80ms linear; }
.relief-panel { width: 330px; height: 420px; border: 1px solid var(--mint); padding: 2rem; background: var(--obsidian); color: var(--carrara); transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 300ms ease; transform-style: preserve-3d; }
.relief-panel:nth-child(2) { margin-left: -2vw; } .relief-panel:nth-child(3) { margin-left: 7vw; } .relief-panel:nth-child(4) { margin-left: -4vw; } .relief-panel:nth-child(5) { margin-left: 3vw; }
.relief-panel:hover { border-color: var(--rose); }
.relief-panel.tall { height: 500px; } .relief-panel.wide { width: 430px; }
.relief-panel h3, .niche h3 { font-family: var(--serif); color: var(--rose); font-size: clamp(2rem, 3.2vw, 3.3rem); line-height: 0.96; margin: 1.7rem 0 1rem; letter-spacing: 0.04em; }
.relief-panel p, .niche p { font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.7; letter-spacing: 0.01em; }
.relief-icon { position: relative; height: 150px; border-bottom: 1px solid rgba(93,229,181,0.45); }
.orbit-icon span:first-child { position:absolute; width:92px; height:92px; border:2px solid var(--mint); border-radius:50%; left:75px; top:25px; }
.orbit-icon span:nth-child(2) { position:absolute; width:24px; height:24px; border-radius:50%; background:var(--rose); left:108px; top:58px; }
.orbit-icon span:nth-child(3) { position:absolute; width:130px; height:1px; background:var(--lemon); left:45px; top:72px; transform:rotate(-20deg); }
.column-icon span:first-child { position:absolute; width:54px; height:130px; background:var(--carrara); left:95px; top:8px; } .column-icon span:nth-child(2), .column-icon span:nth-child(3){position:absolute;width:110px;height:12px;background:var(--rose);left:67px}.column-icon span:nth-child(2){top:0}.column-icon span:nth-child(3){bottom:0}
.prism-icon span:first-child { position:absolute; left:60px; top:18px; width:0; height:0; border-left:70px solid transparent; border-right:70px solid transparent; border-bottom:112px solid var(--rose); } .prism-icon span:nth-child(2){position:absolute;width:95px;height:95px;border:1px solid var(--mint);left:88px;top:35px;transform:rotate(12deg)} .prism-icon span:nth-child(3){position:absolute;width:160px;height:2px;background:var(--lemon);left:36px;top:92px}
.lyre-icon span { position:absolute; background:var(--mint); } .lyre-icon span:first-child{width:120px;height:120px;border:2px solid var(--rose);border-top:0;border-radius:0 0 70px 70px;background:transparent;left:90px;top:10px}.lyre-icon span:nth-child(2){width:8px;height:128px;left:145px;top:8px}.lyre-icon span:nth-child(3){width:160px;height:2px;left:70px;top:132px;background:var(--lemon)}
.bust-icon span:first-child{position:absolute;width:76px;height:76px;border-radius:50%;background:var(--rose);left:100px;top:18px}.bust-icon span:nth-child(2){position:absolute;width:120px;height:54px;background:var(--carrara);left:78px;top:88px}.bust-icon span:nth-child(3){position:absolute;width:68px;height:12px;background:var(--mint);left:104px;top:130px}

.sculpture-hall { min-height: 150vh; padding: 12vh 8vw 18vh; background: var(--carrara); }
.hall-title { width: min(760px, 70vw); margin-left: 8vw; margin-bottom: 8vh; }
.hall-title h2, .garden-copy h2 { font-family: var(--serif); font-size: clamp(3rem, 7vw, 7rem); line-height: 0.92; letter-spacing: 0.04em; color: var(--obsidian); margin: 1rem 0; }
.connectors { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.connectors path { fill:none; stroke:var(--peach); stroke-width:1.2; stroke-linecap:round; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.niche { position: relative; z-index: 1; width: min(720px, 78vw); min-height: 310px; border: 1px solid var(--mint); background: var(--carrara); padding: 2rem; display: grid; grid-template-columns: 190px 1fr; gap: 2rem; margin: 7vh 0; opacity: 0; transition: opacity 700ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; }
.niche-left { margin-left: 4vw; transform: translateX(-16vw) rotate(-2deg); }
.niche-right { margin-left: auto; margin-right: 4vw; transform: translateX(16vw) rotate(2deg); }
.niche.in-view { opacity: 1; transform: translateX(0) rotate(var(--r, 0deg)); }
.niche-left.in-view { --r: -2deg; } .niche-right.in-view { --r: 2deg; }
.niche-art { position: relative; min-height: 220px; border-right: 1px solid rgba(93,229,181,0.45); }
.muse-head span:first-child{position:absolute;width:96px;height:96px;border-radius:50%;background:var(--rose);left:35px;top:24px}.muse-head span:nth-child(2){position:absolute;width:130px;height:70px;background:var(--obsidian);left:18px;top:115px}.muse-head span:nth-child(3){position:absolute;width:52px;height:140px;background:var(--carrara);border:1px solid rgba(58,58,74,0.25);left:58px;top:68px}.muse-head span:nth-child(4){position:absolute;width:130px;height:1px;background:var(--lemon);left:0;top:92px;transform:rotate(-14deg)}
.hand-arc span:first-child{position:absolute;width:150px;height:150px;border:22px solid var(--rose);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;left:0;top:16px;transform:rotate(30deg)}.hand-arc span:nth-child(2){position:absolute;width:90px;height:34px;background:var(--carrara);border:1px solid var(--stone);left:54px;top:125px}.hand-arc span:nth-child(3){position:absolute;width:11px;height:92px;background:var(--mint);left:112px;top:42px}.hand-arc span:nth-child(4){position:absolute;width:70px;height:70px;border-radius:50%;background:var(--lemon);left:20px;top:14px}
.temple-glyph span:first-child{position:absolute;width:160px;height:16px;background:var(--rose);left:8px;top:42px}.temple-glyph span:nth-child(2){position:absolute;width:128px;height:92px;border-left:18px solid var(--obsidian);border-right:18px solid var(--obsidian);left:24px;top:65px}.temple-glyph span:nth-child(3){position:absolute;width:170px;height:22px;background:var(--mint);left:0;top:158px}.temple-glyph span:nth-child(4){position:absolute;left:48px;top:0;width:0;height:0;border-left:48px solid transparent;border-right:48px solid transparent;border-bottom:38px solid var(--lemon)}

.inscription-wall { min-height: 100vh; display: grid; place-items: center; padding: 10vw; background: var(--carrara); }
.dense-veins path { stroke: rgba(58,58,74,0.22); }
.inscription-text { max-width: 1120px; margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2.9rem, 7.1vw, 7.7rem); line-height: 0.98; letter-spacing: 0.04em; color: var(--stone); }
.inscription-text span { opacity: 0; transform: translateY(0.3em); display: inline-block; transition: opacity 360ms ease, transform 360ms ease; }
.inscription-text span.visible { opacity: 1; transform: translateY(0); }
.inscription-text [data-color="rose"] { color: var(--rose); } .inscription-text [data-color="mint"] { color: var(--mint); } .inscription-text [data-color="lemon"] { color: var(--lemon); } .inscription-text [data-color="peach"] { color: var(--peach); }

.garden-exit { min-height: 80vh; background: var(--obsidian); color: var(--carrara); overflow: hidden; display: flex; align-items: center; padding: 10vw; }
.garden-copy { width: min(760px, 72vw); position: relative; z-index: 2; transform: rotate(-3deg); }
.garden-copy h2 { color: var(--carrara); }
.ellipse { position: absolute; border-radius: 50%; opacity: 0.86; animation: drift 18s ease-in-out infinite alternate; }
.e1 { width: 34vw; height: 15vw; background: var(--rose); right: 8vw; top: 9vh; animation-duration: 22s; } .e2 { width: 22vw; height: 9vw; background: var(--mint); right: 22vw; bottom: 14vh; animation-duration: 18s; } .e3 { width: 14vw; height: 28vw; background: var(--lemon); left: 6vw; bottom: 6vh; animation-duration: 25s; } .e4 { width: 18vw; height: 12vw; background: var(--peach); left: 45vw; top: 18vh; animation-duration: 20s; } .e5 { width: 10vw; height: 10vw; background: var(--carrara); right: 3vw; bottom: 36vh; animation-duration: 16s; }
.flare-garden { width: 520px; height: 520px; right: -150px; bottom: -180px; opacity: 0.55; transform: scale(1); }
.flare-garden::before, .flare-garden::after { opacity: 1; }
footer { position: absolute; left: 10vw; bottom: 2.5rem; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,240,235,0.58); }

@keyframes fadeIn { to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes columnRise { to { transform: translateY(0); } }
@keyframes flareBloom { to { opacity: 0.6; transform: scale(1); } }
@keyframes ringIn { to { opacity: 1; } }
@keyframes drift { from { transform: translateY(8vh) rotate(-6deg); } to { transform: translateY(-8vh) rotate(7deg); } }

@media (max-width: 760px) {
  .portico { padding: 8vw; align-items: flex-start; padding-top: 24vh; }
  .portico-copy { transform: none; margin-left: 0; }
  .column-wrap { right: -2vw; height: 50vh; width: 130px; opacity: 0.9; }
  .frieze-room h2, .hall-title { margin-left: 8vw; }
  .relief-panel { width: 280px; height: 390px; }
  .niche { grid-template-columns: 1fr; width: 88vw; }
  .niche-art { border-right: 0; border-bottom: 1px solid rgba(93,229,181,0.45); }
  .inscription-wall { padding: 8vw; }
}