/* ============================================================
   ATTAI — Global Utilities
   Loaded on every page (priority 25, after tokens, before pages).
   Covers image system + visibility state classes.

   POLICY: This file is the replacement for inline direct-property
   styles. CSS-custom-property-only inline styles are allowed for
   runtime-dynamic values (URLs, loop delays, drag positions).
   ============================================================ */

/* ── Object-fit utilities ─────────────────────────────────── */
.fit-cover      { object-fit: cover; }
.fit-contain    { object-fit: contain; }
.fit-fill       { object-fit: fill; }
.fit-none       { object-fit: none; }
.fit-scale-down { object-fit: scale-down; }
.fit-dynamic    { object-fit: var(--image-fit); }

.fit-hero     { object-fit: var(--image-fit-hero); }
.fit-product  { object-fit: var(--image-fit-product); }
.fit-category { object-fit: var(--image-fit-category); }

/* ── Radius utilities ─────────────────────────────────────── */
.radius-none    { border-radius: 0; }
.radius-xs      { border-radius: var(--r-xs); }
.radius-sm      { border-radius: var(--r-sm); }
.radius-md      { border-radius: var(--r-md); }
.radius-lg      { border-radius: var(--r-lg); }
.radius-xl      { border-radius: var(--r-xl); }
.radius-full    { border-radius: var(--r-full); }
.radius-dynamic { border-radius: var(--image-radius); }

/* ── Aspect-ratio utilities ───────────────────────────────── */
.aspect-box {
	position: relative;
	overflow: hidden;
}
.aspect-box > img,
.aspect-box > .bg-image,
.aspect-box > picture > img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: var(--image-fit);
}

.ratio-1-1     { aspect-ratio: 1 / 1; }
.ratio-3-4     { aspect-ratio: 3 / 4; }
.ratio-4-3     { aspect-ratio: 4 / 3; }
.ratio-3-2     { aspect-ratio: 3 / 2; }
.ratio-2-3     { aspect-ratio: 2 / 3; }
.ratio-16-9    { aspect-ratio: 16 / 9; }
.ratio-21-9    { aspect-ratio: 21 / 9; }
.ratio-dynamic { aspect-ratio: var(--image-ratio); }

.ratio-hero     { aspect-ratio: var(--image-ratio-hero); }
.ratio-product  { aspect-ratio: var(--image-ratio-product); }
.ratio-category { aspect-ratio: var(--image-ratio-category); }

/* ── Background-image helper ──────────────────────────────
   Reads URL from --bg-url custom property set as inline CSS-var.
   Usage: <div class="bg-image" style="--bg-url: url('...');"></div>
   ──────────────────────────────────────────────────────── */
.bg-image {
	background-image: var(--bg-url);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.bg-image--contain {
	background-size: contain;
}

/* ── Visibility state utilities ───────────────────────────
   Replace inline display:none with .is-hidden.
   ──────────────────────────────────────────────────────── */
.is-hidden {
	display: none !important;
}

.is-invisible {
	visibility: hidden;
}

/* ── Body / element scroll lock ───────────────────────────
   Replace element.style.overflow = 'hidden' with this class.
   ──────────────────────────────────────────────────────── */
.is-locked {
	overflow: hidden !important;
}

/* ── Interaction states ───────────────────────────────────
   Replace pointer-events / opacity inline styles with these.
   ──────────────────────────────────────────────────────── */
.is-disabled {
	pointer-events: none;
	opacity: 0.5;
}

.is-loading {
	opacity: 0;
}

.is-loaded {
	opacity: 1;
}

.is-zoomable {
	cursor: zoom-in;
}

.is-grabbing {
	cursor: grabbing !important;
}

/* ── .attai-media — universal dynamic media container ─────
   Usage: <div class="attai-media"> <img …> </div>
   Override per instance with CSS custom properties:
     style="--media-fit: contain; --media-ratio: 4 / 3;"
   ──────────────────────────────────────────────────────── */
.attai-media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--media-ratio, var(--image-ratio, 1 / 1));
	overflow: hidden;
	background: var(--color-pale, #e3dff4);
	border-radius: var(--media-radius, var(--image-radius, var(--r-md)));
}

.attai-media img,
.attai-media picture > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--media-fit, var(--image-fit, cover));
	object-position: center;
	display: block;
	transition: transform var(--t-fast, 200ms ease);
}

/* Skeleton shimmer — active before .is-loaded is applied */
.attai-media:not(.is-loaded) {
	background: linear-gradient(
		100deg,
		var(--color-pale, #e3dff4) 25%,
		rgba(68, 71, 148, 0.08) 48%,
		var(--color-pale, #e3dff4) 72%
	);
	background-size: 240% 100%;
	animation: attai-skeleton 1.4s linear infinite;
}

@keyframes attai-skeleton {
	0%   { background-position: 200% 0; }
	100% { background-position: -35% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.attai-media:not(.is-loaded) {
		animation: none;
	}
}

/* Convenience modifiers */
.attai-media--hero     { aspect-ratio: var(--image-ratio-hero,     var(--media-ratio, 16 / 9)); }
.attai-media--product  { aspect-ratio: var(--image-ratio-product,  var(--media-ratio, 3 / 4));  }
.attai-media--category { aspect-ratio: var(--image-ratio-category, var(--media-ratio, 4 / 3));  }

.attai-media--hero     img { object-fit: var(--image-fit-hero,     var(--media-fit, cover)); }
.attai-media--product  img { object-fit: var(--image-fit-product,  var(--media-fit, cover)); }
.attai-media--category img { object-fit: var(--image-fit-category, var(--media-fit, cover)); }