/**
 * Maryam Aria — aesthetics & animation layer.
 * Loaded after main.css. Adds motion, depth, gold accents and decoration
 * to lift the experience to a premium beauty-salon feel.
 *
 * 1) Keyframes  2) Reveal system  3) Chrome (progress, to-top, header)
 * 4) Décor (blobs, sparkles, rings, dividers)  5) Hero  6) Buttons
 * 7) Sections & cards  8) Gallery  9) Marquee  10) Testimonials  11) Misc
 */

:root {
	/* "Gold" tokens repurposed to the logo's seafoam green so every
	   decorative hairline / ring / sparkle stays on-brand. */
	--c-gold: #7ec4aa;
	--c-gold-2: #5fa98e;
	--grad-accent: linear-gradient(120deg, #f9b19f 0%, #f3917a 50%, #7ec4aa 100%);
	--grad-primary: linear-gradient(135deg, #2c6657 0%, #3f8d77 100%);
	--grad-cream: linear-gradient(180deg, #fff 0%, #fbf7f4 100%);
}

/* ============================ 1) KEYFRAMES ============================ */
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes float-soft { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(0,-12px) rotate(4deg); } }
@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes gradient-pan { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(249,177,159,.5); } 70% { box-shadow: 0 0 0 22px rgba(249,177,159,0); } 100% { box-shadow: 0 0 0 0 rgba(249,177,159,0); } }
@keyframes shine-sweep { 0% { left: -60%; } 100% { left: 140%; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes blob-morph {
	0%,100% { border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; }
	33% { border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; }
	66% { border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; }
}

/* ============================ 2) REVEAL SYSTEM ======================= */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(40px); }
.js [data-reveal="right"] { transform: translateX(-40px); }
.js [data-reveal="zoom"]  { transform: scale(.9); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================ 3) CHROME ============================== */
.scroll-progress {
	position: fixed; inset-block-start: 0; inset-inline: 0; height: 4px; z-index: 200;
	background: var(--grad-accent); transform: scaleX(0); transform-origin: right center;
	transition: transform .1s linear; pointer-events: none;
}
.to-top {
	position: fixed; inset-block-end: 1.4rem; inset-inline-start: 1.4rem; z-index: 90;
	width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer;
	background: var(--grad-primary); color: #fff; display: grid; place-items: center;
	box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(20px) rotate(90deg);
	transition: opacity .3s, transform .3s, visibility .3s;
}
.to-top .icon { transform: rotate(90deg); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) rotate(90deg); }
.to-top:hover { background: var(--c-accent-3); transform: translateY(-3px) rotate(90deg); }

/* Sticky header shrink + glass */
.header-main { transition: box-shadow .3s, background .3s, backdrop-filter .3s; }
.header-main.is-scrolled { background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(12px); box-shadow: var(--shadow); }
.header-main.is-scrolled .header-main__inner { min-height: 70px; }
.custom-logo, .site-branding img { transition: max-height .3s ease; }
.header-main.is-scrolled .custom-logo { max-height: 48px; }

/* Animated nav underline */
.primary-menu > li > a { position: relative; }
.primary-menu > li > a::after {
	content: ""; position: absolute; inset-block-end: 6px; inset-inline: 50% 50%;
	height: 2px; border-radius: 2px; background: var(--grad-accent); transition: inset .25s ease;
}
.primary-menu > li > a:hover::after,
.primary-menu .current-menu-item > a::after { inset-inline: 22% 22%; }

/* ============================ 4) DÉCOR =============================== */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco-blob {
	background: var(--c-accent); opacity: .22; filter: blur(6px);
	animation: blob-morph 14s ease-in-out infinite, float-soft 9s ease-in-out infinite;
}
.deco-blob--gold { background: var(--c-gold); opacity: .16; }
.deco-blob--teal { background: var(--c-primary-3); opacity: .12; }
.deco-ring {
	border: 2px dashed rgba(126,196,170,.55); border-radius: 50%;
	animation: spin-slow 40s linear infinite;
}
.deco-dots {
	background-image: radial-gradient(var(--c-accent) 2px, transparent 2px);
	background-size: 18px 18px; opacity: .35;
}
.deco-sparkle { color: var(--c-gold); animation: twinkle 3.5s ease-in-out infinite; }
.deco-sparkle:nth-child(2n) { animation-duration: 4.5s; color: var(--c-accent-2); }
.section, .hero, .footer-cta { position: relative; overflow: hidden; }
.section > .container, .hero__inner { position: relative; z-index: 2; }

/* Curved SVG section dividers (data-URI, self-contained) */
.section--white, .section--cream { isolation: isolate; }
.divider-top, .divider-bottom { position: absolute; inset-inline: 0; height: 60px; line-height: 0; z-index: 1; pointer-events: none; }
.divider-top { inset-block-start: -1px; }
.divider-bottom { inset-block-end: -1px; }
.divider-top svg, .divider-bottom svg { width: 100%; height: 100%; display: block; }

/* ============================ 5) HERO =============================== */
.hero { background: radial-gradient(120% 90% at 80% 0%, #fff 0%, var(--c-cream) 45%, var(--c-cream-2) 100%); }
.hero__title em, .gradient-text {
	background: var(--grad-accent); background-size: 200% auto;
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	color: transparent; animation: gradient-pan 5s linear infinite alternate;
}
.hero__content .eyebrow { animation: pulse-ring 3.5s ease-out infinite; }
.hero__media { position: relative; }
.hero__media-img { animation: float-y 7s ease-in-out infinite; }
.hero__blob { animation: blob-morph 16s ease-in-out infinite, float-soft 11s ease-in-out infinite; opacity: .7; }
.hero__ring {
	position: absolute; inset: -10% -8% -2% -8%; border: 2px dashed rgba(126,196,170,.5);
	border-radius: 48% 48% 46% 46% / 40% 40% 60% 60%; animation: spin-slow 50s linear infinite; z-index: 1;
}
.hero__badge { animation: float-y 5.5s ease-in-out infinite; backdrop-filter: blur(4px); background: rgba(255,255,255,.92); }
.hero__sparkles .deco-sparkle { position: absolute; }
.hero__sparkles .s1 { inset-block-start: 6%; inset-inline-end: 12%; }
.hero__sparkles .s2 { inset-block-start: 30%; inset-inline-start: 6%; }
.hero__sparkles .s3 { inset-block-end: 14%; inset-inline-end: 4%; }
.hero__deco-1 { width: 220px; aspect-ratio: 1; inset-block-start: -60px; inset-inline-start: -80px; }
.hero__deco-2 { width: 140px; aspect-ratio: 1; inset-block-end: -40px; inset-inline-end: 30%; }

.hero__stat b { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ============================ 6) BUTTONS ============================ */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
	content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 50%;
	background: linear-gradient(110deg, transparent, rgba(255,255,255,.55), transparent);
	transform: skewX(-18deg); z-index: -1;
}
.btn:hover::before { animation: shine-sweep .8s ease; }
.btn--accent { background: var(--grad-accent); background-size: 180% auto; transition: background-position .5s, transform .2s, box-shadow .2s; }
.btn--accent:hover { background-position: right center; }

/* ============================ 7) SECTIONS & CARDS =================== */
.section-head .eyebrow { position: relative; }
.eyebrow .icon { color: var(--c-gold); }

/* Service cards: image overlay, number badge, gold corner */
.service-card { position: relative; border: 1px solid rgba(236,228,225,.8); }
.service-card__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(5,53,67,.35) 100%);
	opacity: 0; transition: opacity .35s;
}
.service-card:hover .service-card__media::after { opacity: 1; }
.service-card::before {
	content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
	background: var(--grad-accent); transform: scaleX(0); transform-origin: right; transition: transform .4s; z-index: 3;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card__list .icon { background: var(--c-cream); border-radius: 50%; padding: 2px; }

.stat-pill { position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.stat-pill:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stat-pill .icon { animation: float-y 4s ease-in-out infinite; }

.about__media img { transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .4s; }
.about__media img:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow); }

.cta-banner { position: relative; overflow: hidden; }
.cta-banner::after {
	content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%;
	width: 320px; aspect-ratio: 1; background: radial-gradient(circle, rgba(249,177,159,.4), transparent 70%);
	border-radius: 50%; animation: float-soft 10s ease-in-out infinite;
}

/* ============================ 8) GALLERY ============================ */
.gallery__item { position: relative; }
.gallery__item::after {
	content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5,53,67,.55));
	opacity: 0; transition: opacity .35s;
}
.gallery__item::before {
	content: "✦"; position: absolute; inset-block-end: 12px; inset-inline-start: 12px; z-index: 2;
	color: #fff; font-size: 1.2rem; opacity: 0; transform: translateY(8px); transition: .35s;
}
.gallery__item:hover::after { opacity: 1; }
.gallery__item:hover::before { opacity: 1; transform: translateY(0); }

/* ============================ 9) MARQUEE ============================ */
.marquee { background: var(--c-primary); color: #fff; padding: 1rem 0; overflow: hidden; }
.marquee__track { display: flex; width: max-content; gap: 0; animation: marquee 26s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 1rem; padding-inline: 1.6rem; font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.marquee__item .icon { color: var(--c-gold); }
.marquee__item span { background: linear-gradient(120deg,#fff,#cfe3da); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ============================ 10) TESTIMONIALS ====================== */
.testimonial { position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.testimonial:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.testimonial::before {
	content: "”"; position: absolute; inset-block-start: -28px; inset-inline-start: 14px;
	font-size: 7rem; line-height: 1; color: var(--c-accent); opacity: .18; font-family: Georgia, serif;
}
.testimonial__avatar { background: var(--grad-accent); }

/* ============================ 11) MISC ============================== */
.page-hero { position: relative; overflow: hidden; background: var(--grad-primary); }
.page-hero::before {
	content: ""; position: absolute; inset-block-start: -50%; inset-inline-end: -5%;
	width: 380px; aspect-ratio: 1; background: radial-gradient(circle, rgba(249,177,159,.22), transparent 70%);
	border-radius: 50%;
}
.page-hero::after {
	content: ""; position: absolute; inset-block-end: -60%; inset-inline-start: 10%;
	width: 300px; aspect-ratio: 1; background: radial-gradient(circle, rgba(126,196,170,.18), transparent 70%);
	border-radius: 50%;
}
.page-hero .container { position: relative; z-index: 2; }

.post-card { position: relative; }
.post-card__media::after {
	content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,53,67,.28));
	opacity: 0; transition: opacity .35s;
}
.post-card:hover .post-card__media::after { opacity: 1; }

/* ===================================================================== */
/* ========================= AVANT-GARDE LAYER ========================= */
/* ===================================================================== */

/* Editorial display typography */
.hero__title, .section-head h2, .page-hero h1, .single-post__title { font-family: var(--ff-display); }
.section-head h2 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem); font-weight: 900; letter-spacing: -0.015em; }

/* Eyebrow as an editorial kicker with gold hairlines */
.section-head .eyebrow, .hero__content .eyebrow {
	font-family: var(--ff-display); font-weight: 700; letter-spacing: .04em;
	text-transform: none; gap: .55rem;
}
.section-head .eyebrow { background: transparent; color: var(--c-accent-3); padding: 0; }
.section-head .eyebrow::before, .section-head .eyebrow::after {
	content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold)); display: inline-block;
}
.section-head .eyebrow::after { background: linear-gradient(90deg, var(--c-gold), transparent); }

/* Subtle film-grain / paper texture for editorial depth */
body::before {
	content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Note: .mobile-nav is intentionally NOT here — it must stay above .nav-overlay
   (z-index 80 vs 70 from main.css); otherwise the overlay eats the menu taps. */
.site-header, .site-footer, .to-top { z-index: 50; }
.site-header { position: relative; }

/* Clip-path image reveal */
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0 round 20px); transition: clip-path 1s cubic-bezier(.77,0,.18,1); }
.js [data-reveal="clip"].is-visible { clip-path: inset(0 0 0 0 round 20px); }

/* Oversized decorative section index numbers */
.section-head { position: relative; }
.section-index {
	font-family: var(--ff-display); font-weight: 900; font-size: clamp(4rem, 10vw, 8rem);
	color: var(--c-accent); opacity: .10; position: absolute; inset-block-start: -2.4rem; inset-inline-start: 50%;
	transform: translateX(50%); z-index: -1; line-height: 1; pointer-events: none;
}

/* Hero: editorial scale + gold underline accent on the brand */
.hero__title { letter-spacing: -0.02em; line-height: 1.4; }
.hero__title em { position: relative; }
.hero__title em::after {
	content: ""; position: absolute; inset-inline: 0; inset-block-end: -.12em; height: .12em;
	background: var(--grad-accent); border-radius: 2px; transform: scaleX(0); transform-origin: right;
	animation: brand-underline 1s ease .6s forwards;
}
@keyframes brand-underline { to { transform: scaleX(1); } }

/* Magnetic buttons (JS sets --mx/--my) */
.btn[data-magnetic] { transition: transform .25s cubic-bezier(.22,.61,.36,1), background .3s, box-shadow .3s; transform: translate(var(--mx,0), var(--my,0)); }

/* Service cards: editorial numbering + gold corner flourish */
.service-card__num {
	position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 4;
	font-family: var(--ff-display); font-weight: 900; font-size: 1.1rem; color: #fff;
	width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
	background: rgba(5,53,67,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.3);
}

/* Gold hairline frame accent on feature media */
.hero__media::before {
	content: ""; position: absolute; inset: 6% -4% -6% 6%; border: 1.5px solid var(--c-gold);
	border-radius: 48% 48% 46% 46% / 40% 40% 60% 60%; opacity: .35; z-index: 0;
}

/* ============================ LIGHTBOX ============================== */
.gallery__item { cursor: zoom-in; }
.lightbox {
	position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 4vmin;
	background: rgba(4,30,38,.92); backdrop-filter: blur(8px);
	opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); transform: scale(.92); transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.lightbox.is-open img { transform: scale(1); }
.lightbox__close, .lightbox__nav {
	position: absolute; width: 54px; height: 54px; border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; transition: background .2s, transform .2s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--c-accent); color: var(--c-primary); }
.lightbox__close { inset-block-start: 3vmin; inset-inline-end: 3vmin; }
.lightbox__nav { inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { inset-inline-end: 3vmin; }
.lightbox__nav--next { inset-inline-start: 3vmin; }
.lightbox__nav .icon { transform: rotate(0); }
.lightbox__nav--next .icon { transform: rotate(180deg); }

/* Footer flourish */
.footer-cta { background: var(--grad-accent); background-size: 200% auto; animation: gradient-pan 8s linear infinite alternate; }
.footer-cta::before {
	content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
	background-image: radial-gradient(#fff 1.5px, transparent 1.5px); background-size: 22px 22px;
}

@media (max-width: 980px) {
	.section-index { font-size: 4.5rem; inset-block-start: -1.6rem; }
	.hero__media::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; }
	.scroll-progress { display: none; }
	.js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}