/**
 * Atmosphere — continuous luxury journey.
 * Each section is a new scene: light, texture, depth, emotion.
 * Loads after rhythm. Brand rose identity preserved.
 */

/* =========================================================
   SHARED SCENE LANGUAGE
   ========================================================= */
.scene-aura {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.scene-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.55;
	will-change: transform;
}

.scene-orb--gold {
	background: radial-gradient(circle, rgba(242, 140, 159, 0.7), transparent 70%);
}

.scene-orb--rose {
	background: radial-gradient(circle, rgba(168, 95, 114, 0.45), transparent 70%);
}

.scene-orb--cream {
	background: radial-gradient(circle, rgba(255, 252, 250, 0.55), transparent 70%);
}

.scene-grain {
	position: absolute;
	inset: 0;
	opacity: 0.045;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: soft-light;
}

.scene-line {
	position: absolute;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(216, 111, 142, 0.55), transparent);
	pointer-events: none;
}

.lux-grade {
	filter: saturate(1.1) contrast(1.07) brightness(1.02);
}

.hero--atelier,
.story--visual,
.stats--lux,
.services--premium,
.process--champagne,
.cases--lux,
.stories--lux,
.ig--lux,
.concierge--lux,
.site-footer--lux {
	position: relative;
	isolation: isolate;
}

.hero--atelier > *:not(.scene-aura),
.story--visual > *:not(.scene-aura),
.stats--lux > *:not(.scene-aura),
.services--premium > *:not(.scene-aura),
.process--champagne > *:not(.scene-aura),
.cases--lux > *:not(.scene-aura),
.stories--lux > *:not(.scene-aura),
.ig--lux > *:not(.scene-aura),
.concierge--lux > *:not(.scene-aura) {
	position: relative;
	z-index: 1;
}

/* Cinematic photo grading across marketing surfaces */
.hero__stage,
.story__photo,
.svc-card__media,
.ba-compare__after,
.ba-compare__before,
.story-card__media,
.ig__tile,
.concierge__visual,
.process__photo {
	filter: saturate(1.12) contrast(1.08) brightness(1.03);
}

/* =========================================================
   HERO — warm cinematic luxury
   ========================================================= */
.hero--atelier .hero__stage {
	background-color: var(--tolin-mocha);
}

.hero--atelier .hero__veil {
	background:
		radial-gradient(ellipse 70% 55% at 70% 35%, rgba(242, 140, 159, 0.28), transparent 60%),
		radial-gradient(ellipse 50% 40% at 20% 80%, rgba(168, 95, 114, 0.22), transparent 55%),
		linear-gradient(105deg, rgba(45, 40, 48, 0.88) 0%, rgba(45, 40, 48, 0.5) 40%, rgba(45, 40, 48, 0.18) 68%, transparent 100%),
		linear-gradient(0deg, rgba(45, 40, 48, 0.65) 0%, transparent 48%);
}

[dir="rtl"] .hero--atelier .hero__veil {
	background:
		radial-gradient(ellipse 70% 55% at 30% 35%, rgba(242, 140, 159, 0.28), transparent 60%),
		radial-gradient(ellipse 50% 40% at 80% 80%, rgba(168, 95, 114, 0.22), transparent 55%),
		linear-gradient(255deg, rgba(45, 40, 48, 0.88) 0%, rgba(45, 40, 48, 0.5) 40%, rgba(45, 40, 48, 0.18) 68%, transparent 100%),
		linear-gradient(0deg, rgba(45, 40, 48, 0.65) 0%, transparent 48%);
}

.hero--atelier .hero__panel {
	background: linear-gradient(145deg, rgba(45, 40, 48, 0.78), rgba(45, 40, 48, 0.42));
	border: 1px solid rgba(242, 140, 159, 0.38);
	box-shadow:
		0 28px 80px rgba(45, 40, 48, 0.4),
		inset 0 1px 0 rgba(255, 252, 250, 0.12);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.hero--atelier .hero__grain { opacity: 0.09; }

/* =========================================================
   ABOUT — warm cream paper editorial
   ========================================================= */
.story--visual {
	background:
		radial-gradient(circle at 18% 22%, rgba(242, 140, 159, 0.2), transparent 36%),
		radial-gradient(circle at 92% 12%, rgba(240, 217, 220, 0.55), transparent 34%),
		radial-gradient(circle at 50% 100%, rgba(232, 217, 200, 0.5), transparent 40%),
		linear-gradient(180deg, var(--tolin-cream) 0%, var(--tolin-ivory) 55%, #F3E8DE 100%);
	overflow: clip;
}

.story--visual .scene-orb--a {
	width: min(48vw, 420px);
	height: min(48vw, 420px);
	top: -8%;
	inset-inline-end: -6%;
}

.story--visual .scene-orb--b {
	width: min(36vw, 280px);
	height: min(36vw, 280px);
	bottom: 18%;
	inset-inline-start: -4%;
	opacity: 0.35;
}

.story__photo--main,
.story__photo--float {
	box-shadow:
		0 32px 64px rgba(45, 40, 48, 0.14),
		0 8px 24px rgba(168, 95, 114, 0.08);
}

.story__float-card {
	background: rgba(255, 252, 250, 0.88);
	border: 1px solid rgba(216, 111, 142, 0.45);
	box-shadow: var(--tolin-shadow-float);
	backdrop-filter: blur(16px);
}

.story__pillar-card {
	background: rgba(255, 252, 250, 0.72);
	backdrop-filter: blur(10px);
	border-color: rgba(216, 111, 142, 0.35);
}

.story__band {
	background:
		radial-gradient(ellipse 60% 80% at 10% 50%, rgba(242, 140, 159, 0.18), transparent 55%),
		linear-gradient(105deg, #1f1816 0%, #7B3F59 45%, #3a2f2c 100%);
}

/* =========================================================
   STATISTICS — dark chocolate + gold
   ========================================================= */
.stats--float,
.stats--lux {
	padding-block: clamp(56px, 7vw, 88px);
	margin-block: 0;
	background:
		radial-gradient(ellipse 50% 70% at 50% 0%, rgba(242, 140, 159, 0.22), transparent 55%),
		radial-gradient(circle at 90% 80%, rgba(168, 95, 114, 0.18), transparent 40%),
		linear-gradient(180deg, #1c1513 0%, #7B3F59 50%, #241c1a 100%);
	overflow: clip;
}

.stats--lux .scene-orb--a {
	width: 320px;
	height: 320px;
	top: -20%;
	inset-inline-start: 20%;
	opacity: 0.4;
}

.stats__row {
	gap: 20px;
}

.stats__card {
	padding: 36px 24px;
	text-align: center;
	background: linear-gradient(160deg, rgba(255, 252, 250, 0.08), rgba(255, 252, 250, 0.03));
	border: 1px solid rgba(242, 140, 159, 0.28);
	border-radius: 28px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(12px);
	color: rgba(255, 252, 250, 0.85);
}

.stats__card--accent {
	background: linear-gradient(155deg, rgba(168, 95, 114, 0.55), rgba(122, 71, 77, 0.35));
	border-color: rgba(242, 140, 159, 0.45);
	transform: translateY(-14px);
	box-shadow:
		0 32px 64px rgba(0, 0, 0, 0.35),
		0 0 40px rgba(242, 140, 159, 0.15);
}

.stats__card strong {
	font-size: clamp(2.6rem, 1.6rem + 2.4vw, 3.8rem);
	color: var(--tolin-coral);
	text-shadow: 0 0 28px rgba(242, 140, 159, 0.35);
	margin-bottom: 12px;
}

.stats__card--accent strong {
	color: #F3EAD9;
}

.stats__card span {
	color: rgba(255, 252, 250, 0.62);
	letter-spacing: 0.12em;
}

.stats__card--accent span {
	color: rgba(255, 252, 250, 0.88);
}

.stats__note {
	margin: 28px auto 0;
	max-width: 42ch;
	text-align: center;
	font-size: var(--tolin-text-sm);
	line-height: 1.65;
	color: rgba(255, 252, 250, 0.55);
}

/* =========================================================
   SERVICES — warm ivory + golden haze
   ========================================================= */
.services--premium {
	background:
		radial-gradient(circle at 12% 18%, rgba(242, 140, 159, 0.28), transparent 32%),
		radial-gradient(circle at 88% 8%, rgba(240, 217, 220, 0.5), transparent 36%),
		radial-gradient(circle at 70% 90%, rgba(216, 111, 142, 0.18), transparent 40%),
		linear-gradient(180deg, #FFFCFA 0%, var(--tolin-ivory) 45%, #F6EDE4 100%);
	overflow: clip;
}

.services--premium .scene-orb--a {
	width: min(50vw, 480px);
	height: min(50vw, 480px);
	top: 10%;
	inset-inline-start: -12%;
}

.services--premium .scene-orb--b {
	width: min(40vw, 360px);
	height: min(40vw, 360px);
	bottom: -5%;
	inset-inline-end: -8%;
}

.svc-card {
	background: linear-gradient(180deg, rgba(255, 252, 250, 0.95), rgba(248, 241, 235, 0.92));
	border: 1px solid rgba(216, 111, 142, 0.32);
	box-shadow:
		0 20px 48px rgba(45, 40, 48, 0.08),
		0 4px 16px rgba(216, 111, 142, 0.1);
}

.svc-card:hover {
	transform: translateY(-14px);
	box-shadow:
		0 36px 72px rgba(45, 40, 48, 0.12),
		0 0 0 1px rgba(242, 140, 159, 0.35);
}

.services__grid .svc-card:nth-child(2) {
	transform: translateY(-18px);
	border-color: rgba(242, 140, 159, 0.55);
	box-shadow: var(--tolin-shadow-xl);
}

.services__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
	justify-content: center;
}

.services__trust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: var(--tolin-radius-pill);
	background: rgba(255, 252, 250, 0.75);
	border: 1px solid rgba(216, 111, 142, 0.35);
	font-size: 12px;
	font-weight: 600;
	color: var(--tolin-rose-deep);
	backdrop-filter: blur(8px);
}

/* =========================================================
   PROCESS — champagne gradient + glass cards
   ========================================================= */
.process--editorial,
.process--champagne {
	padding-block: var(--space-section);
	background:
		radial-gradient(circle at 80% 20%, rgba(255, 252, 250, 0.55), transparent 40%),
		radial-gradient(circle at 15% 70%, rgba(168, 95, 114, 0.12), transparent 42%),
		linear-gradient(145deg, #F3EAD9 0%, #E8D4A8 38%, #F28C9F 72%, #D86F8E 100%);
	color: var(--tolin-mocha);
	overflow: clip;
}

.process--champagne .process__photo,
.process--editorial .process__photo {
	opacity: 0.18;
	filter: saturate(1.05) brightness(1.05);
	mix-blend-mode: multiply;
}

.process--champagne .ds-kicker,
.process--editorial .ds-kicker {
	color: var(--tolin-rose-deep);
}

.process--champagne .process__display,
.process--editorial .process__display {
	color: var(--tolin-mocha);
}

.process--champagne .process__lede,
.process--editorial .process__lede {
	color: rgba(61, 50, 47, 0.78);
}

.process--champagne .process__beat,
.process--editorial .process__beat {
	padding: 28px 24px;
	border: 1px solid rgba(255, 252, 250, 0.55);
	border-radius: 28px;
	background: linear-gradient(160deg, rgba(255, 252, 250, 0.55), rgba(255, 252, 250, 0.22));
	backdrop-filter: blur(14px);
	box-shadow: 0 16px 40px rgba(140, 106, 74, 0.12);
	border-top: 1px solid rgba(255, 252, 250, 0.55);
	overflow: hidden;
}

.process--champagne .process__giant,
.process--editorial .process__giant {
	color: rgba(140, 106, 74, 0.18);
}

.process--champagne .process__beat h3,
.process--editorial .process__beat h3 {
	color: var(--tolin-mocha);
}

.process--champagne .process__beat p,
.process--editorial .process__beat p {
	color: rgba(61, 50, 47, 0.72);
}

.process--champagne .process__close,
.process--editorial .process__close {
	border-top-color: rgba(140, 106, 74, 0.35);
}

.process--champagne .process__close p,
.process--editorial .process__close p {
	color: var(--tolin-mocha);
}

.process--champagne .scene-line--top {
	top: 12%;
	inset-inline: 8%;
}

.process--champagne .scene-line--bottom {
	bottom: 18%;
	inset-inline: 18%;
}

/* =========================================================
   BEFORE / AFTER — dark dramatic spotlight
   ========================================================= */
.cases--lux {
	padding-block: var(--space-section);
	background:
		radial-gradient(ellipse 55% 60% at 35% 45%, rgba(242, 140, 159, 0.2), transparent 55%),
		radial-gradient(circle at 90% 10%, rgba(168, 95, 114, 0.2), transparent 40%),
		linear-gradient(180deg, #874A5D 0%, #7B3F59 48%, #1f1816 100%);
	color: var(--tolin-canvas);
	overflow: clip;
}

.cases--lux .cases__display { color: var(--tolin-canvas); }
.cases--lux .cases__lede { color: rgba(255, 252, 250, 0.7); }
.cases--lux .ds-kicker { color: var(--tolin-champagne); }

.cases--lux .cases__meta {
	background: linear-gradient(160deg, rgba(255, 252, 250, 0.1), rgba(255, 252, 250, 0.04));
	border: 1px solid rgba(242, 140, 159, 0.32);
	backdrop-filter: blur(14px);
	box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
}

.cases--lux .cases__meta-kicker { color: var(--tolin-champagne); }
.cases--lux .cases__meta-title { color: var(--tolin-canvas); }
.cases--lux .cases__facts li { color: rgba(255, 252, 250, 0.82); }
.cases--lux .cases__facts .tolin-icon,
.cases--lux .cases__facts svg { color: var(--tolin-champagne); }

.cases--lux .cases__thumb.is-active,
.cases--lux .cases__thumb:hover {
	border-color: var(--tolin-champagne);
}

.ba-compare {
	box-shadow:
		0 40px 80px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(242, 140, 159, 0.2),
		0 0 60px rgba(242, 140, 159, 0.12);
}

.cases--lux .scene-orb--a {
	width: 480px;
	height: 480px;
	top: 20%;
	inset-inline-start: 10%;
	opacity: 0.35;
}

/* =========================================================
   TESTIMONIALS — warm beige + rose glow
   ========================================================= */
.stories--lux {
	background:
		radial-gradient(circle at 10% 20%, rgba(168, 95, 114, 0.22), transparent 38%),
		radial-gradient(circle at 90% 0%, rgba(242, 140, 159, 0.25), transparent 40%),
		radial-gradient(circle at 50% 100%, rgba(240, 217, 220, 0.45), transparent 45%),
		linear-gradient(180deg, #F0E4D6 0%, var(--tolin-beige) 40%, #F8F1EB 100%);
	overflow: clip;
}

.stories--lux .scene-orb--a {
	width: 380px;
	height: 380px;
	top: -10%;
	inset-inline-end: 5%;
}

.story-card {
	background: rgba(255, 252, 250, 0.88);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(216, 111, 142, 0.35);
	box-shadow: var(--tolin-shadow-lg);
}

.story-card.is-featured {
	box-shadow:
		0 32px 64px rgba(45, 40, 48, 0.12),
		0 0 0 1px rgba(168, 95, 114, 0.2);
}

.story-card__quote {
	position: relative;
}

.story-card__quote::before {
	content: '“';
	position: absolute;
	inset-inline-start: -0.15em;
	top: -0.35em;
	font-family: var(--tolin-font-serif);
	font-size: 3.2rem;
	line-height: 1;
	color: rgba(168, 95, 114, 0.22);
	pointer-events: none;
}

.story-card__stars {
	color: var(--tolin-champagne-rich);
	letter-spacing: 0.12em;
}

/* =========================================================
   INSTAGRAM — editorial collage + warm light
   ========================================================= */
.ig--lux {
	background:
		radial-gradient(circle at 20% 30%, rgba(242, 140, 159, 0.22), transparent 35%),
		radial-gradient(circle at 80% 10%, rgba(240, 217, 220, 0.4), transparent 40%),
		linear-gradient(165deg, #FFFCFA 0%, #F6EDE4 50%, #EFE4DB 100%);
	overflow: clip;
}

.ig__tile {
	box-shadow:
		0 16px 40px rgba(45, 40, 48, 0.1),
		0 4px 12px rgba(216, 111, 142, 0.1);
}

.ig__tile--1 {
	box-shadow:
		0 28px 64px rgba(45, 40, 48, 0.16),
		0 0 0 1px rgba(242, 140, 159, 0.2);
}

.ig__tile:hover {
	transform: translateY(-10px) scale(1.015);
}

/* =========================================================
   CONTACT — dark luxury ending + glass form
   ========================================================= */
.concierge--lux {
	padding-block: var(--space-section);
	background:
		radial-gradient(ellipse 60% 50% at 20% 30%, rgba(242, 140, 159, 0.22), transparent 55%),
		radial-gradient(circle at 85% 70%, rgba(168, 95, 114, 0.2), transparent 45%),
		linear-gradient(165deg, #874A5D 0%, #7B3F59 45%, #1f1816 100%);
	color: var(--tolin-canvas);
	overflow: clip;
}

.concierge--lux .scene-orb--a {
	width: 420px;
	height: 420px;
	top: 10%;
	inset-inline-end: -5%;
	opacity: 0.4;
}

.concierge__shell {
	max-width: var(--tolin-container);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 32px);
	gap: clamp(28px, 4vw, 48px);
}

.concierge__visual {
	border-radius: 0 36px 0 0;
	overflow: hidden;
	box-shadow:
		0 28px 64px rgba(0, 0, 0, 0.4),
		0 0 40px rgba(242, 140, 159, 0.12);
	max-height: 440px;
}

.concierge__visual-veil {
	background:
		linear-gradient(180deg, rgba(45, 40, 48, 0.15), rgba(45, 40, 48, 0.78)),
		radial-gradient(circle at 30% 20%, rgba(242, 140, 159, 0.25), transparent 50%);
}

.concierge__panel {
	background: transparent;
	color: var(--tolin-canvas);
}

.concierge__info-item {
	color: rgba(255, 252, 250, 0.82);
}

.concierge__info-item .tolin-icon,
.concierge__info-item svg {
	color: var(--tolin-champagne);
}

.concierge__info-item a {
	color: var(--tolin-canvas);
	border-bottom: 1px solid rgba(242, 140, 159, 0.4);
}

.concierge__trust span {
	background: rgba(255, 252, 250, 0.08);
	border: 1px solid rgba(242, 140, 159, 0.28);
	color: rgba(255, 252, 250, 0.88);
}

.concierge__form-shell {
	background: linear-gradient(160deg, rgba(255, 252, 250, 0.14), rgba(255, 252, 250, 0.06));
	border: 1px solid rgba(242, 140, 159, 0.4);
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	box-shadow:
		0 32px 72px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 252, 250, 0.18);
}

.concierge__form-label {
	color: var(--tolin-canvas);
}

.concierge__form-lede {
	color: rgba(255, 252, 250, 0.68);
}

.concierge--lux .form-field label {
	color: rgba(255, 252, 250, 0.78);
}

.concierge--lux .form-field input,
.concierge--lux .form-field select,
.concierge--lux .form-field textarea {
	background: rgba(255, 252, 250, 0.08);
	border-color: rgba(242, 140, 159, 0.35);
	color: var(--tolin-canvas);
}

.concierge--lux .form-field input::placeholder {
	color: rgba(255, 252, 250, 0.4);
}

.concierge--lux .form-field input:focus,
.concierge--lux .form-field select:focus {
	border-color: var(--tolin-champagne);
	box-shadow: 0 0 0 3px rgba(242, 140, 159, 0.2);
}

@media (min-width: 960px) {
	.concierge__shell {
		grid-template-columns: 0.72fr 1.28fr;
		align-items: stretch;
	}

	.concierge__visual {
		max-height: none;
		min-height: 100%;
		aspect-ratio: auto;
	}
}

/* =========================================================
   FOOTER — owned by maison atelier
   ========================================================= */
.site-footer--lux {
	background: transparent;
}

.site-footer--lux .site-footer__heading {
	color: #F7C4CE;
}

/* =========================================================
   PREMIUM MOTION
   ========================================================= */
@keyframes lux-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -12px, 0); }
}

@keyframes lux-pulse-glow {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 0.7; }
}

html.tolin-motion .scene-orb {
	animation: lux-pulse-glow 8s ease-in-out infinite;
}

html.tolin-motion .story__float-card--years {
	animation: lux-float 6.5s ease-in-out infinite;
}

html.tolin-motion .story__float-card--clients {
	animation: lux-float 7.5s ease-in-out infinite;
	animation-delay: 1.2s;
}

html.tolin-motion .stats__card--accent {
	animation: lux-float 7s ease-in-out infinite;
}

html.tolin-motion [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity 0.85s var(--tolin-ease-out),
		transform 0.85s var(--tolin-ease-out);
}

html.tolin-motion [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

html.tolin-motion .svc-card__media,
html.tolin-motion .ig__tile,
html.tolin-motion .story__photo {
	transition: transform 0.9s var(--tolin-ease), filter 0.5s ease, box-shadow 0.5s ease;
	background-size: 104% auto;
}

html.tolin-motion .svc-card:hover .svc-card__media,
html.tolin-motion .ig__tile:hover,
html.tolin-motion .story__photo--main:hover {
	background-size: 112% auto;
	transform: scale(1.01);
}

html.tolin-motion .btn--primary {
	transition:
		transform 0.35s var(--tolin-ease),
		box-shadow 0.35s ease,
		background 0.35s ease;
}

html.tolin-motion .btn--primary:hover {
	transform: translateY(-3px);
	box-shadow:
		0 16px 32px rgba(168, 95, 114, 0.35),
		0 0 24px rgba(242, 140, 159, 0.2);
}

.btn[data-magnetic] {
	transition: transform 0.25s var(--tolin-ease);
}

@media (prefers-reduced-motion: reduce) {
	html.tolin-motion .scene-orb,
	html.tolin-motion .story__float-card--years,
	html.tolin-motion .story__float-card--clients,
	html.tolin-motion .stats__card--accent {
		animation: none !important;
	}
}
