/* ===========================================================
   Artwork Experience — styles ONLY for single-artwork.php.
   Everything is scoped under .artwork-experience so it can never
   leak into or be affected by the rest of the site's CSS.
   All color/atmosphere values come from CSS custom properties set
   inline per-artwork in single-artwork.php; nothing here hardcodes
   a brand palette — defaults below are neutral fallbacks only.
   =========================================================== */

.artwork-experience{
	position:relative;
	isolation:isolate;
	background:#0b0a09;
	color:#f5f2ec;
	overflow:hidden;
	--ax-mesh-1: transparent;
	--ax-mesh-2: transparent;
	--ax-mesh-3: transparent;
	--ax-beam-color: #ffffff;
	--ax-orb-1: #ffffff;
	--ax-orb-2: #ffffff;
	--ax-resin-color: #ffffff;
	--ax-grain-opacity: 0.08;
}
.artwork-experience *{ box-sizing:border-box; }
.artwork-experience img{ max-width:100%; display:block; }

/* ---------- Atmosphere layers (all optional, all off by default) ---------- */
.ax-layer{ position:absolute; inset:0; pointer-events:none; z-index:0; }

.ax-mesh{
	background:
		radial-gradient(circle at 15% 20%, var(--ax-mesh-1) 0%, transparent 45%),
		radial-gradient(circle at 85% 30%, var(--ax-mesh-2) 0%, transparent 50%),
		radial-gradient(circle at 50% 90%, var(--ax-mesh-3) 0%, transparent 55%);
	opacity:0.5;
	filter:blur(60px);
}

.ax-orbs{ overflow:hidden; }
.ax-orb{
	position:absolute; border-radius:50%; filter:blur(70px); opacity:0.35;
	width:38vw; height:38vw;
	animation:ax-drift 38s ease-in-out infinite alternate;
}
.ax-orb-1{ background:var(--ax-orb-1); top:-8%; left:-10%; }
.ax-orb-2{ background:var(--ax-orb-2); bottom:-12%; right:-8%; animation-duration:46s; animation-delay:-8s; }
@keyframes ax-drift{
	0%{ transform:translate(0,0) scale(1); }
	100%{ transform:translate(6%,8%) scale(1.12); }
}

.ax-beams{
	background:conic-gradient(from 210deg at 70% 20%, transparent 0deg, color-mix(in srgb, var(--ax-beam-color) 18%, transparent) 40deg, transparent 90deg);
	mix-blend-mode:screen;
	animation:ax-beam-sweep 60s linear infinite;
	opacity:0.5;
}
@keyframes ax-beam-sweep{
	0%{ transform:rotate(0deg); }
	100%{ transform:rotate(360deg); }
}

.ax-resin{
	background:linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--ax-resin-color) 22%, transparent) 48%, transparent 66%);
	background-size:220% 220%;
	mix-blend-mode:screen;
	opacity:0.4;
	animation:ax-resin-move 22s ease-in-out infinite;
}
@keyframes ax-resin-move{
	0%,100%{ background-position:0% 30%; }
	50%{ background-position:100% 70%; }
}

.ax-reflections{
	background:repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 90px);
	mix-blend-mode:overlay;
	opacity:0.4;
}

.ax-grain{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity:var(--ax-grain-opacity);
	mix-blend-mode:overlay;
}

/* ---------- Piece nav ---------- */
.ax-piece-nav{ position:relative; z-index:5; padding:2rem clamp(1.5rem,5vw,4rem) 0; }
.ax-back{ color:#f5f2ec; opacity:0.6; text-decoration:none; font-size:0.85rem; letter-spacing:0.04em; transition:opacity .2s ease; }
.ax-back:hover{ opacity:1; }

/* ---------- Shared section rhythm ---------- */
.ax-section{ position:relative; z-index:1; padding:clamp(4rem,9vw,8rem) clamp(1.5rem,5vw,4rem); }
.ax-heading{ font-family:'Cormorant Garamond', serif; font-weight:300; font-size:clamp(1.8rem,3.4vw,2.6rem); margin:0 0 2rem; }
.ax-heading-center{ text-align:center; }
.ax-empty{ padding:6rem 1.5rem; text-align:center; opacity:0.6; font-family:'Cormorant Garamond', serif; font-style:italic; }

/* Scroll reveal — style + speed are both editor-selected per artwork */
.ax-reveal{ opacity:0; }
.ax-reveal.ax-in{ opacity:1; }
.ax-reveal-fade .ax-reveal{ transition:opacity 1.1s ease; }
.ax-reveal-fade-up .ax-reveal{ transform:translateY(38px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,.8,.3,1); }
.ax-reveal-fade-up .ax-reveal.ax-in{ transform:translateY(0); }
.ax-reveal-scale-in .ax-reveal{ transform:scale(0.96); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,.8,.3,1); }
.ax-reveal-scale-in .ax-reveal.ax-in{ transform:scale(1); }
.ax-speed-slow .ax-reveal{ transition-duration:1.8s; }
.ax-speed-fast .ax-reveal{ transition-duration:0.6s; }

/* ---------- Glass surfaces — refined, not generic frosted-glass ---------- */
.ax-glass{
	background:linear-gradient(155deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
	backdrop-filter:blur(18px) saturate(140%);
	-webkit-backdrop-filter:blur(18px) saturate(140%);
	border:1px solid rgba(255,255,255,0.14);
	border-radius:22px;
	box-shadow:0 30px 60px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
	padding:clamp(1.75rem,4vw,3rem);
}

/* ---------- Hero ---------- */
.ax-hero{ padding-top:clamp(2rem,6vw,4rem); text-align:center; }
.ax-hero-media{ position:relative; max-width:1100px; margin:0 auto 3rem; border-radius:6px; overflow:hidden; }
.ax-hero-media img{ width:100%; height:auto; }
.ax-glass-glide{
	position:absolute; inset:0;
	background:rgba(255,255,255,0.10);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	transform:translateY(-100%);
	will-change:transform;
}
.ax-hero-copy{ max-width:640px; margin:0 auto; }
.ax-align-left .ax-hero-copy{ margin-left:0; text-align:left; }
.ax-align-right .ax-hero-copy{ margin-right:0; text-align:right; }
.ax-eyebrow{ text-transform:uppercase; letter-spacing:0.14em; font-size:0.75rem; opacity:0.55; margin:0 0 0.75rem; }
.ax-title{ font-family:'Cormorant Garamond', serif; font-weight:300; font-size:clamp(2.4rem,6vw,4.4rem); margin:0 0 1.25rem; line-height:1.05; }
.ax-quote{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:clamp(1.1rem,2vw,1.4rem); opacity:0.8; line-height:1.6; margin:0; }

/* ---------- Story ---------- */
.ax-story-inner{ margin:0 auto; }
.ax-width-narrow .ax-story-inner{ max-width:52ch; }
.ax-width-medium .ax-story-inner{ max-width:68ch; }
.ax-width-wide .ax-story-inner{ max-width:88ch; }
.ax-prose{ font-weight:300; line-height:1.9; font-size:1.05rem; opacity:0.92; }
.ax-prose p{ margin:0 0 1.4em; }

/* ---------- Artwork Views — adaptive editorial grid ---------- */
.ax-view-grid{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	grid-auto-rows:140px;
	grid-auto-flow:dense;
	gap:1.25rem;
	max-width:1400px;
	margin:0 auto;
}
.ax-view-tile{ position:relative; margin:0; overflow:hidden; border-radius:4px; }
.ax-view-tile img{ width:100%; height:100%; object-fit:cover; }
.ax-view-xl{ grid-column:span 6; grid-row:span 4; }
.ax-view-lg{ grid-column:span 3; grid-row:span 3; }
.ax-view-md{ grid-column:span 3; grid-row:span 2; }
.ax-view-sm{ grid-column:span 2; grid-row:span 2; }
.ax-caption{ position:absolute; left:0; right:0; bottom:0; padding:0.9rem 1.1rem; font-size:0.8rem; opacity:0; background:linear-gradient(0deg, rgba(0,0,0,0.7), transparent); transition:opacity .3s ease; }
.ax-view-tile:hover .ax-caption{ opacity:1; }
@media (max-width:760px){
	.ax-view-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
	.ax-view-xl,.ax-view-lg,.ax-view-md{ grid-column:span 2; grid-row:span 3; }
	.ax-view-sm{ grid-column:span 1; grid-row:span 2; }
}

/* ---------- In Your Space ---------- */
.ax-space-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); gap:1.5rem; max-width:1400px; margin:0 auto; }
.ax-space-tile{ position:relative; margin:0; border-radius:4px; overflow:hidden; }
.ax-space-tile img{ width:100%; height:auto; }
.ax-space-tile .ax-caption{ position:static; opacity:0.6; background:none; padding:0.75rem 0 0; }

/* ---------- Craftsmanship ---------- */
.ax-craft-inner{ max-width:640px; margin:0 auto; }
.ax-spec-list{ margin:0; }
.ax-spec-row{ display:flex; justify-content:space-between; gap:2rem; padding:0.9rem 0; border-bottom:1px solid rgba(255,255,255,0.1); }
.ax-spec-row:last-child{ border-bottom:none; }
.ax-spec-row dt{ opacity:0.55; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; }
.ax-spec-row dd{ margin:0; font-weight:300; text-align:right; }

/* ---------- Decorative Word ---------- */
.ax-word-section{ position:relative; padding:0; pointer-events:none; }
.ax-word-h-small{ height:24vh; }
.ax-word-h-medium{ height:48vh; }
.ax-word-h-full{ height:100vh; }
.ax-word-layer-behind{ z-index:0; }
.ax-word-layer-above{ z-index:3; }
.ax-word{
	position:absolute;
	font-family:'Cormorant Garamond', serif;
	font-weight:300;
	font-size:clamp(3.5rem, 14vw, 13rem);
	white-space:nowrap;
	background:linear-gradient(100deg, var(--ax-word-start), var(--ax-word-end));
	-webkit-background-clip:text; background-clip:text; color:transparent;
	line-height:1;
}
.ax-word-glow{ filter:drop-shadow(0 0 40px var(--ax-word-glow-color)); }
.ax-word-animated{ background-size:220% auto; }
.ax-word-speed-slow.ax-word-animated{ animation:ax-word-gradient 14s ease-in-out infinite; }
.ax-word-speed-medium.ax-word-animated{ animation:ax-word-gradient 7s ease-in-out infinite; }
.ax-word-speed-fast.ax-word-animated{ animation:ax-word-gradient 3s ease-in-out infinite; }
@keyframes ax-word-gradient{
	0%,100%{ background-position:0% 50%; }
	50%{ background-position:100% 50%; }
}

/* ---------- Floating Glass Quote ---------- */
.ax-glass-quote{ display:flex; }
.ax-pos-left{ justify-content:flex-start; }
.ax-pos-center{ justify-content:center; }
.ax-pos-right{ justify-content:flex-end; }
.ax-glass-quote blockquote{ max-width:560px; margin:0; }
.ax-glass-quote p{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:clamp(1.3rem,2.4vw,1.8rem); line-height:1.6; margin:0 0 1rem; }
.ax-glass-quote cite{ font-style:normal; opacity:0.55; font-size:0.85rem; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
	.artwork-experience *{ animation:none !important; transition:none !important; }
	.ax-reveal{ opacity:1 !important; transform:none !important; }
}