/* ==========================================================================
   طفلي — photo sections + motion
   Only transform / opacity are animated. Everything is visible without JS
   (.js gate), with prefers-reduced-motion, and with the a11y "stop motion" toggle.
   ========================================================================== */

:root {
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-soft: cubic-bezier(.22, .61, .36, 1);
	--reveal-y: 34px;
}

/* ---------- Entrance (hero) ---------- */
.js [data-intro] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
}
.js.is-loaded [data-intro] { opacity: 1; transform: none; }
.js.is-loaded [data-intro="1"] { transition-delay: .05s; }
.js.is-loaded [data-intro="2"] { transition-delay: .15s; }
.js.is-loaded [data-intro="3"] { transition-delay: .35s; }
.js.is-loaded [data-intro="4"] { transition-delay: .5s; }
.js.is-loaded [data-intro="5"] { transition-delay: .65s; }

/* ---------- Scroll reveal ---------- */
.js [data-reveal],
.js [data-stagger] > *,
.js ul.products > li {
	opacity: 0;
	transform: translateY(var(--reveal-y));
	transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 85ms);
}
.js [data-reveal].is-in,
.js [data-stagger].is-in > *,
.js ul.products > li.is-in { opacity: 1; transform: none; }

/* Word-by-word headline reveal (whole words, so Arabic letters stay joined) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .08em .12em; margin-block: -.08em -.12em; }
.w > span { display: inline-block; }
.js [data-words] .w > span {
	transform: translateY(105%);
	transition: transform 1s var(--ease-out);
	transition-delay: calc(var(--wi, 0) * 70ms + 80ms);
}
.js .is-in [data-words] .w > span,
.js [data-words].is-in .w > span,
.js.is-loaded .hero [data-words] .w > span { transform: none; }

/* ---------- Parallax + Ken Burns ---------- */
[data-parallax] {
	translate: 0 var(--py, 0px);
	will-change: translate;
}
/* Images inside a clipping frame get a little extra size so the drift never shows an edge. */
.hero__arch [data-parallax],
.personal__media [data-parallax] { scale: 1.1; }
.js .hero__arch img { scale: 1.22; transition: scale 2.2s var(--ease-out); }
.js.is-loaded .hero__arch img { scale: 1.1; }

/* ---------- Header: scroll progress + hide on scroll down ---------- */
.site-header { transition: transform .45s var(--ease-out), border-color .3s, box-shadow .3s; }
.site-header.is-hidden { transform: translateY(-100%); }
.scroll-progress {
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--sage), var(--caramel));
	transform-origin: right center;
	transform: scaleX(var(--progress, 0));
}

/* ---------- Buttons ---------- */
.btn--shine { position: relative; overflow: hidden; isolation: isolate; }
.btn--shine::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
	transform: translateX(120%);
	z-index: -1;
}
.btn--shine:hover::after { transform: translateX(-120%); transition: transform .9s var(--ease-soft); }

.wa-float::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--wa);
	animation: wa-ring 2.8s var(--ease-soft) infinite;
}
@keyframes wa-ring {
	0% { transform: scale(1); opacity: .7; }
	70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Hero with photos ---------- */
.hero__media { width: min(100%, 500px); }
.hero__arch { aspect-ratio: 4 / 5; background: var(--peach); }
.hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.hero__card {
	position: absolute;
	inset-inline-start: -46px;
	bottom: 42px;
	width: 148px;
	margin: 0;
	padding: 8px 8px 10px;
	background: var(--surface);
	border-radius: 18px;
	box-shadow: 0 24px 50px -24px rgba(61, 48, 42, .55);
	rotate: -5deg;
	animation: float-card 7s ease-in-out infinite;
}
.hero__card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
.hero__card figcaption { font-family: var(--f-display); font-weight: 600; text-align: center; margin-top: 6px; color: var(--cocoa); }
@keyframes float-card { 50% { translate: 0 -12px; rotate: -2deg; } }

.hero__seal {
	position: absolute;
	top: 18px;
	inset-inline-end: -26px;
	width: 122px;
	height: 122px;
	animation: spin 22s linear infinite;
	filter: drop-shadow(0 10px 20px rgba(61, 48, 42, .18));
}
.hero__seal text {
	font-family: var(--f-latin);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 2.6px;
	fill: var(--cocoa);
}
.hero__seal-star { fill: var(--caramel); }
.hero__seal text { direction: ltr; unicode-bidi: embed; }
.hero__seal { background: radial-gradient(circle, var(--surface) 62%, transparent 63%); border-radius: 50%; }
@keyframes spin { to { rotate: 360deg; } }
.hero__badge { display: none; }

@media (max-width: 899px) {
	.hero__media { width: min(80%, 380px); }
	.hero__card { width: 108px; inset-inline-start: -22px; bottom: 24px; }
	.hero__seal { width: 92px; height: 92px; inset-inline-end: -14px; top: 8px; }
}

/* ---------- Marquee ---------- */
.marquee {
	overflow: hidden;
	background: var(--cocoa);
	color: #f6ede4;
	padding-block: 16px;
	user-select: none;
}
.marquee__track {
	display: flex;
	align-items: center;
	gap: 28px;
	width: max-content;
	animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.05rem, .9rem + .6vw, 1.45rem); white-space: nowrap; }
.marquee i { font-style: normal; color: var(--caramel); font-size: .9rem; }
@keyframes marquee { to { transform: translateX(50%); } }

/* ---------- Category tiles (photo, editorial) ---------- */
.cats__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 26px); }
.cat { position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; }
.cat__img { aspect-ratio: 4 / 5; border-radius: 0; }
.cat__img img { transition: transform 1.2s var(--ease-out); }
.cat:hover .cat__img img { transform: scale(1.07); }
.cat__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 60px 22px 22px;
	background: linear-gradient(to top, rgba(43, 32, 26, .72), rgba(43, 32, 26, 0));
	color: #fff;
}
.cat__title { color: #fff; font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem); }
.cat__text { color: rgba(255, 255, 255, .86); }
.cat__arrow {
	position: absolute;
	top: 16px;
	inset-inline-end: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--surface);
	color: var(--cocoa);
	opacity: 0;
	transform: scale(.6) rotate(-30deg);
	transition: .5s var(--ease-out);
}
.cat:hover .cat__arrow, .cat:focus-visible .cat__arrow { opacity: 1; transform: none; }
.cat__cta { display: none; }
@media (max-width: 899px) {
	.cats__grid { grid-template-columns: repeat(2, 1fr); }
	.cat__body { padding: 40px 14px 14px; }
	.cat__text { font-size: .8rem; }
	.cat__arrow { opacity: 1; transform: none; width: 34px; height: 34px; top: 10px; inset-inline-end: 10px; }
}

/* ---------- Product cards ---------- */
ul.products li.product a img { transition: transform 1.1s var(--ease-out), opacity .45s; }
ul.products li.product:hover a img:not(.hover-img) { transform: scale(1.04); }
ul.products li.product a.woocommerce-LoopProduct-link { border-radius: var(--r-md); }
ul.products li.product a.woocommerce-LoopProduct-link > img { overflow: hidden; }
.price-ask { font-weight: 500; color: var(--caramel-d); font-size: .92rem; }
.woocommerce div.product p.price .price-ask { font-size: 1.1rem; }

/* ---------- First-outfit (hospital sets) ---------- */
.hospital { overflow: hidden; }
.hospital__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 110px); align-items: center; }
.hospital__media { position: relative; padding-bottom: 60px; }
.hospital__img { border-radius: var(--r-lg); object-fit: cover; box-shadow: var(--shadow); }
.hospital__img--main { width: 82%; aspect-ratio: 2 / 3; }
.hospital__img--float {
	position: absolute;
	inset-inline-end: 0;
	bottom: 0;
	width: 46%;
	aspect-ratio: 2 / 3;
	border: 8px solid var(--bg);
}
.ticks { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.ticks li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.ticks li::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sage-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7f5e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.hospital__copy > p { color: var(--muted); font-size: 1.08rem; }
@media (max-width: 899px) {
	.hospital__grid { grid-template-columns: 1fr; }
	.hospital__media { max-width: 460px; width: 100%; margin-inline: auto; }
}

/* ---------- Personalised bundle ---------- */
.personal__media { position: relative; overflow: visible; background: none; box-shadow: none; aspect-ratio: auto; }
.personal__media img { border-radius: var(--r-lg); aspect-ratio: 2 / 3; object-fit: cover; box-shadow: var(--shadow); }
.personal__media { overflow: hidden; border-radius: var(--r-lg); }
.personal__price {
	position: absolute;
	top: 18px;
	inset-inline-start: 18px;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	background: var(--cocoa);
	color: #fff;
	display: grid;
	place-content: center;
	text-align: center;
	line-height: 1.1;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1.6rem;
	rotate: -8deg;
	box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .6);
}
.personal__price small { font-family: var(--f-body); font-weight: 500; font-size: .62rem; opacity: .85; }

/* ---------- Gift / aqiqah banner ---------- */
.gift-banner__box {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	align-items: center;
	gap: clamp(20px, 4vw, 56px);
	padding: clamp(18px, 3vw, 32px);
	overflow: hidden;
}
.gift-banner__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r-lg) - 8px); }
.gift-banner__copy h2 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.3rem); margin-bottom: .4em; }
.gift-banner__copy > p:not(.eyebrow) { font-size: 1.05rem; margin-bottom: 1.4em; }
.gift-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gift-banner__box .btn { margin-inline-start: 0; }
@media (max-width: 699px) {
	.gift-banner__box { grid-template-columns: 1fr; text-align: start; }
}

/* ---------- Visit: store photos ---------- */
.visit__photos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.visit__photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; transition: transform .8s var(--ease-out); }
.visit__photos li:hover img { transform: translateY(-6px) rotate(-1.5deg); }
.visit__map iframe { height: clamp(240px, 26vw, 320px); }

/* ---------- Instagram grid ---------- */
.section__sub { color: var(--muted); margin: 10px auto 0; max-width: 36em; }
.insta { padding-top: clamp(56px, 7vw, 104px); }
.insta__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.insta__grid a { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 1; }
.insta__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.insta__icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	background: rgba(61, 48, 42, .35);
	opacity: 0;
	transition: opacity .4s;
}
.insta__grid a:hover img { transform: scale(1.08); }
.insta__grid a:hover .insta__icon, .insta__grid a:focus-visible .insta__icon { opacity: 1; }
.insta__cta { text-align: center; margin-top: 28px; }
@media (max-width: 899px) { .insta__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Product page extras ---------- */
.btn--wa-lg { width: 100%; min-height: 56px; font-size: 1.05rem; margin: 18px 0 8px; }
.pdp-note { font-size: .9rem; color: var(--muted); margin-bottom: 16px; }

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
	.js [data-intro], .js [data-reveal], .js [data-stagger] > *, .js ul.products > li, .js [data-words] .w > span { opacity: 1 !important; transform: none !important; }
	[data-parallax], .js .hero__arch img { scale: 1 !important; translate: none !important; }
	.marquee__track, .hero__seal, .hero__card, .wa-float::before { animation: none !important; }
}
html.a11y-motion [data-intro], html.a11y-motion [data-reveal], html.a11y-motion [data-stagger] > *, html.a11y-motion ul.products > li, html.a11y-motion [data-words] .w > span { opacity: 1 !important; transform: none !important; }
html.a11y-motion [data-parallax], html.a11y-motion .hero__arch img { scale: 1 !important; translate: none !important; }