/* ═══════════════════════════════════════
   Art Society — Style
   ═══════════════════════════════════════ */

/* --- Custom Properties --- */
:root {
	--bg: #F8F7F4 ;
	--bg-dark: #1D1D1D ;
	--text: #1D1D1D ;
	--text-light: #999 ;
	--text-inv: #F8F7F4 ;
	--border: #E0DFDB ;
	--font-display: 'Cormorant Garamond', Georgia, serif ;
	--font-body: 'DM Sans', system-ui, sans-serif ;
	--ease: cubic-bezier(0.16, 1, 0.3, 1) ;
	--ease-out: cubic-bezier(0.33, 1, 0.68, 1) ;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0 ; padding: 0 ; box-sizing: border-box ; }

html {
	font-size: 16px ;
	-webkit-font-smoothing: antialiased ;
	-moz-osx-font-smoothing: grayscale ;
}

html.lenis, html.lenis body { height: auto ; }
.lenis.lenis-smooth { scroll-behavior: auto !important ; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain ; }
.lenis.lenis-stopped { overflow: hidden ; }

body {
	font-family: var(--font-body) ;
	font-weight: 400 ;
	color: var(--text) ;
	background: var(--bg) ;
	overflow-x: hidden ;
	cursor: none ;
}

a { color: inherit ; text-decoration: none ; cursor: none ; }
button { cursor: none ; border: none ; background: none ; font: inherit ; color: inherit ; }
img { display: block ; max-width: 100% ; }
ul, ol { list-style: none ; }

::selection {
	background: var(--text) ;
	color: var(--bg) ;
}

/* --- Background blobs --- */
.bg-blobs {
	position: fixed ;
	inset: 0 ;
	z-index: -1 ;
	pointer-events: none ;
	overflow: hidden ;
}

.bg-blob {
	position: absolute ;
	border-radius: 50% ;
	filter: blur(80px) ;
	will-change: transform ;
}

.bg-blob--1 {
	width: 550px ;
	height: 550px ;
	background: #DACBB0 ;
	opacity: 0.5 ;
	top: -10% ;
	left: 10% ;
	animation: blobDrift1 10s ease-in-out infinite alternate ;
}

.bg-blob--2 {
	width: 450px ;
	height: 450px ;
	background: #B0C5DA ;
	opacity: 0.4 ;
	top: 40% ;
	right: -5% ;
	animation: blobDrift2 12s ease-in-out infinite alternate ;
}

.bg-blob--3 {
	width: 500px ;
	height: 500px ;
	background: #CCB0D0 ;
	opacity: 0.35 ;
	bottom: -10% ;
	left: 30% ;
	animation: blobDrift3 9s ease-in-out infinite alternate ;
}

.bg-blob--4 {
	width: 400px ;
	height: 400px ;
	background: #B0D0B8 ;
	opacity: 0.3 ;
	top: 20% ;
	left: -5% ;
	animation: blobDrift4 11s ease-in-out infinite alternate ;
}

@keyframes blobDrift1 {
	0% { transform: translate(0, 0) scale(1) ; }
	100% { transform: translate(15vw, 20vh) scale(1.15) ; }
}
@keyframes blobDrift2 {
	0% { transform: translate(0, 0) scale(1) ; }
	100% { transform: translate(-10vw, -15vh) scale(1.2) ; }
}
@keyframes blobDrift3 {
	0% { transform: translate(0, 0) scale(1) ; }
	100% { transform: translate(-20vw, -10vh) scale(0.9) ; }
}
@keyframes blobDrift4 {
	0% { transform: translate(0, 0) scale(1) ; }
	100% { transform: translate(10vw, 15vh) scale(1.1) ; }
}

/* --- Preloader --- */
.preloader {
	position: fixed ;
	inset: 0 ;
	z-index: 9999 ;
	background: var(--bg) ;
	display: flex ;
	flex-direction: column ;
	align-items: center ;
	justify-content: center ;
	pointer-events: none ;
}

.preloader__title {
	font-family: var(--font-display) ;
	font-size: clamp(2rem, 5vw, 4rem) ;
	font-weight: 300 ;
	letter-spacing: 0.15em ;
	text-transform: uppercase ;
	overflow: hidden ;
	padding-bottom: 0.15em ;
}

.preloader__title span {
	display: inline-block ;
	transform: translateY(100%) ;
}

.preloader__line {
	width: 60px ;
	height: 1px ;
	background: var(--text) ;
	margin-top: 1.5rem ;
	transform: scaleX(0) ;
	transform-origin: left ;
}

.preloader__counter {
	font-family: var(--font-body) ;
	font-size: 0.75rem ;
	letter-spacing: 0.1em ;
	margin-top: 1rem ;
	opacity: 0 ;
}

/* --- Cursor --- */
.cursor {
	position: fixed ;
	top: 0 ;
	left: 0 ;
	z-index: 9998 ;
	pointer-events: none ;
	mix-blend-mode: difference ;
}

.cursor__dot {
	width: 8px ;
	height: 8px ;
	background: #fff ;
	border-radius: 50% ;
	position: absolute ;
	top: -4px ;
	left: -4px ;
}

.cursor__circle {
	width: 40px ;
	height: 40px ;
	border: 1px solid rgba(255, 255, 255, 0.5) ;
	border-radius: 50% ;
	position: absolute ;
	top: -20px ;
	left: -20px ;
}

@media (pointer: coarse) {
	.cursor { display: none ; }
	body, a, button { cursor: auto ; }
}

/* --- Nav --- */
.nav {
	position: fixed ;
	top: 0 ;
	left: 0 ;
	right: 0 ;
	z-index: 100 ;
	padding: 1.5rem 3rem ;
	display: flex ;
	align-items: center ;
	justify-content: space-between ;
	mix-blend-mode: difference ;
	color: #fff ;
}

.nav__logo {
	font-family: var(--font-display) ;
	font-size: 1rem ;
	font-weight: 400 ;
	letter-spacing: 0.15em ;
	text-transform: uppercase ;
}

.nav__right {
	display: flex ;
	align-items: center ;
	gap: 2.5rem ;
}

.nav__links {
	display: flex ;
	gap: 2.5rem ;
}

.nav__link {
	font-size: 0.8rem ;
	font-weight: 500 ;
	letter-spacing: 0.08em ;
	text-transform: uppercase ;
	position: relative ;
	padding-bottom: 2px ;
}

.nav__link::after {
	content: '' ;
	position: absolute ;
	bottom: 0 ;
	left: 0 ;
	width: 100% ;
	height: 1px ;
	background: currentColor ;
	transform: scaleX(0) ;
	transform-origin: right ;
	transition: transform 0.4s var(--ease) ;
}

.nav__link:hover::after {
	transform: scaleX(1) ;
	transform-origin: left ;
}

.nav__sep {
	width: 1px ;
	height: 14px ;
	background: rgba(255, 255, 255, 0.3) ;
}

.nav__langs {
	display: flex ;
	gap: 0.75rem ;
}

.nav__lang {
	font-size: 0.7rem ;
	font-weight: 500 ;
	letter-spacing: 0.05em ;
	text-transform: uppercase ;
	opacity: 0.4 ;
	transition: opacity 0.3s ease ;
	padding: 0 ;
}

.nav__lang:hover { opacity: 0.7 ; }
.nav__lang.is-active { opacity: 1 ; }

/* --- Hero --- */
.hero {
	min-height: 100vh ;
	min-height: 100dvh ;
	display: flex ;
	flex-direction: column ;
	align-items: center ;
	justify-content: center ;
	padding: 6rem 3rem 3rem ;
	text-align: center ;
	position: relative ;
}

.hero__title {
	font-family: var(--font-display) ;
	font-size: clamp(4rem, 12vw, 12rem) ;
	font-weight: 300 ;
	line-height: 1 ;
	letter-spacing: -0.02em ;
	white-space: nowrap ;
}

.hero__title-wrap {
	display: inline-block ;
	overflow: hidden ;
	padding-bottom: 0.1em ;
}

.hero__char {
	display: inline-block ;
	transform: translateY(110%) ;
}

.hero__subtitle {
	font-family: var(--font-body) ;
	font-size: clamp(0.75rem, 1.2vw, 1rem) ;
	font-weight: 400 ;
	letter-spacing: 0.15em ;
	text-transform: uppercase ;
	color: var(--text-light) ;
	margin-top: 2.5rem ;
	opacity: 0 ;
}

.hero__scroll {
	position: absolute ;
	bottom: 2.5rem ;
	display: flex ;
	flex-direction: column ;
	align-items: center ;
	gap: 0.5rem ;
	opacity: 0 ;
}

.hero__scroll-text {
	font-size: 0.65rem ;
	letter-spacing: 0.15em ;
	text-transform: uppercase ;
	color: var(--text-light) ;
}

.hero__scroll-line {
	width: 1px ;
	height: 40px ;
	background: var(--text-light) ;
	transform-origin: top ;
	animation: scrollLine 1.8s var(--ease) infinite ;
}

@keyframes scrollLine {
	0% { transform: scaleY(0) ; transform-origin: top ; }
	40% { transform: scaleY(1) ; transform-origin: top ; }
	40.01% { transform-origin: bottom ; }
	80%, 100% { transform: scaleY(0) ; transform-origin: bottom ; }
}

/* --- Marquee --- */
.marquee {
	padding: 3rem 0 ;
	border-top: 1px solid var(--border) ;
	border-bottom: 1px solid var(--border) ;
	overflow: hidden ;
	position: relative ;
}

.marquee__track {
	display: flex ;
	width: max-content ;
	animation: marqueeScroll 30s linear infinite ;
}

.marquee__item {
	font-family: var(--font-display) ;
	font-size: clamp(1.5rem, 3vw, 2.5rem) ;
	font-weight: 300 ;
	font-style: italic ;
	white-space: nowrap ;
	padding: 0 2rem ;
	display: flex ;
	align-items: center ;
	gap: 2rem ;
}

.marquee__item::after {
	content: '·' ;
	font-style: normal ;
	color: var(--text-light) ;
}

@keyframes marqueeScroll {
	0% { transform: translateX(0) ; }
	100% { transform: translateX(-50%) ; }
}

/* --- Projects --- */
.projects {
	padding: 8rem 3rem ;
}

.projects__header {
	display: flex ;
	align-items: baseline ;
	justify-content: space-between ;
	margin-bottom: 4rem ;
	padding-bottom: 1rem ;
	border-bottom: 1px solid var(--border) ;
}

.projects__label {
	font-size: 0.75rem ;
	font-weight: 500 ;
	letter-spacing: 0.15em ;
	text-transform: uppercase ;
	color: var(--text-light) ;
}

.projects__count {
	font-family: var(--font-display) ;
	font-size: 0.9rem ;
	color: var(--text-light) ;
}

.projects__list {
	position: relative ;
}

.project-item {
	display: grid ;
	grid-template-columns: 60px 1fr auto ;
	align-items: center ;
	gap: 2rem ;
	padding: 2rem 0 ;
	border-bottom: 1px solid var(--border) ;
	transition: opacity 0.4s ease ;
	position: relative ;
	cursor: pointer ;
}

.projects__list:hover .project-item { opacity: 0.3 ; }
.projects__list:hover .project-item:hover { opacity: 1 ; }

.project-item__index {
	font-family: var(--font-body) ;
	font-size: 0.7rem ;
	color: var(--text-light) ;
	letter-spacing: 0.05em ;
}

.project-item__name {
	font-family: var(--font-display) ;
	font-size: clamp(1.8rem, 4vw, 3.5rem) ;
	font-weight: 300 ;
	line-height: 1.1 ;
	transition: transform 0.5s var(--ease) ;
}

.project-item:hover .project-item__name {
	transform: translateX(1rem) ;
}

.project-item__name .char-wrap {
	display: inline-block ;
	position: relative ;
	vertical-align: bottom ;
}

.project-item__name .char {
	display: block ;
	will-change: transform, clip-path ;
}

.project-item__name .char--bottom {
	position: absolute ;
	top: 0 ;
	left: 0 ;
}

.project-item__category {
	font-size: 0.7rem ;
	font-weight: 500 ;
	letter-spacing: 0.12em ;
	text-transform: uppercase ;
	color: var(--text-light) ;
	justify-self: end ;
}

/* Floating image stack on hover */
.projects__image-float {
	position: fixed ;
	pointer-events: none ;
	z-index: 50 ;
	opacity: 0 ;
	transform: scale(0.85) ;
	transition: opacity 0.3s ease, transform 0.3s var(--ease) ;
}

.projects__image-float.is-visible {
	opacity: 1 ;
	transform: scale(1) ;
}


/* --- Contact --- */
.contact {
	padding: 10rem 3rem ;
	text-align: center ;
	position: relative ;
}

.contact__label {
	font-size: 0.75rem ;
	font-weight: 500 ;
	letter-spacing: 0.15em ;
	text-transform: uppercase ;
	color: var(--text-light) ;
	margin-bottom: 2rem ;
}

.contact__title {
	font-family: var(--font-display) ;
	font-size: clamp(3rem, 8vw, 8rem) ;
	font-weight: 300 ;
	line-height: 1 ;
	white-space: nowrap ;
	margin-bottom: 4rem ;
}

.contact__title em {
	font-style: italic ;
}

.contact__info {
	display: flex ;
	justify-content: center ;
	gap: 4rem ;
	flex-wrap: wrap ;
}

.contact__block {
	text-align: center ;
}

.contact__block-label {
	font-size: 0.65rem ;
	font-weight: 500 ;
	letter-spacing: 0.15em ;
	text-transform: uppercase ;
	color: var(--text-light) ;
	margin-bottom: 0.75rem ;
}

.contact__block-value {
	font-family: var(--font-display) ;
	font-size: 1.15rem ;
	font-weight: 400 ;
	line-height: 1.6 ;
}

.contact__block-value a {
	position: relative ;
}

.contact__block-value a::after {
	content: '' ;
	position: absolute ;
	bottom: -1px ;
	left: 0 ;
	width: 100% ;
	height: 1px ;
	background: currentColor ;
	transform: scaleX(0) ;
	transform-origin: right ;
	transition: transform 0.4s var(--ease) ;
}

.contact__block-value a:hover::after {
	transform: scaleX(1) ;
	transform-origin: left ;
}

/* --- Footer --- */
.footer {
	padding: 2rem 3rem ;
	display: flex ;
	align-items: center ;
	justify-content: space-between ;
	border-top: 1px solid var(--border) ;
}

.footer__copy {
	font-size: 0.7rem ;
	color: var(--text-light) ;
	letter-spacing: 0.05em ;
}

.footer__location {
	font-size: 0.7rem ;
	color: var(--text-light) ;
	letter-spacing: 0.05em ;
}

/* --- Grain overlay --- */
.grain {
	position: fixed ;
	inset: 0 ;
	z-index: 9000 ;
	pointer-events: none ;
	opacity: 0.03 ;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") ;
	background-repeat: repeat ;
	background-size: 256px ;
}

/* --- Reveal utility --- */
.reveal-up {
	opacity: 0 ;
	transform: translateY(40px) ;
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.nav { padding: 1rem 1.5rem ; }
	.nav__right { gap: 1.5rem ; }
	.nav__links { gap: 1.5rem ; }
	.hero { padding: 5rem 1.5rem 3rem ; }
	.hero__title { white-space: normal ; }
	.contact__title { white-space: normal ; }
	.projects { padding: 5rem 1.5rem ; }
	.contact { padding: 6rem 1.5rem ; }
	.footer { padding: 1.5rem ; }

	.project-item {
		grid-template-columns: 40px 1fr ;
		gap: 1rem ;
	}

	.project-item__category {
		grid-column: 2 ;
		justify-self: start ;
		margin-top: -0.5rem ;
	}

	.projects__image-float { display: none ; }

	.contact__info { flex-direction: column ; gap: 2rem ; }
}