/* Shared visual refinements. Component styling lives beside its controller. */
/* A dimensional signature, not a cropped wordmark. */
html { overflow-x: clip; }

body { overflow-x: clip; background: #081d23; }

#sculpture-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; }

.intro { background: radial-gradient(ellipse at 17% 50%,rgba(81,126,120,.08),transparent 55%),#0b232a; }

/* Essential content must never depend on an observer to become readable. */
body.motion-ready .reveal { opacity: 1; transform: none; transition: none; }

body.motion-ready .reveal.is-visible { animation: content-arrive .65s ease both; }

@keyframes content-arrive { from { opacity: .35; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.gallery-image { border: 1px solid rgba(225,195,129,.17); box-shadow: 10px 25px 45px rgba(2,16,20,.3); transition: transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .65s; }

.gallery-card:hover .gallery-image { transform: perspective(1200px) translateY(-8px) rotateY(-3deg) rotateX(2deg); box-shadow: 17px 36px 65px rgba(0,10,16,.5); }

.manifesto { background: radial-gradient(ellipse at 82% 30%,rgba(154,125,67,.14),transparent 45%),linear-gradient(120deg,#071c23,#163439); }

.pointer-glow { width: 670px; height: 670px; background: radial-gradient(circle,rgba(239,211,153,.14),rgba(118,183,179,.07) 33%,transparent 65%); }

@media (min-width: 901px) {

  .intro { padding-block: 95px 110px; }

  .collection .section-marker { margin-bottom: 75px; }

  .section-heading { margin-bottom: 60px; }
}

@media (max-width: 700px) {

  .intro { padding-block: 76px 90px; }

  .intro .section-marker { margin-bottom: 50px; }

  .collection .section-marker { margin-bottom: 60px; }
}

@media (prefers-reduced-motion: reduce) {

  .gallery-card:hover .gallery-image { transform: none; }
}