/* MORR — Daylight Studio
   art.css — §5. The six "Photographed Light" families.
   These are CSS placeholders. When real art exists, swap the background for a
   <picture> (AVIF + WebP) inside .art and keep the class for its fallback
   colour and grain. Positions and hexes below match the mixes exactly. */

.art{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-md); aspect-ratio:var(--art-ratio,16/10);
  background-size:cover;
}
.art--hero{border-radius:var(--r-lg)}

/* one shared grain pass — art and night only, never over text or UI */
.grain::after{
  content:""; position:absolute; inset:0; background-image:var(--grain);
  mix-blend-mode:overlay; opacity:var(--grain-opacity,.18);
  pointer-events:none; border-radius:inherit; z-index:2;
}

/* 5.1 Grid of Light — signature: hero, Planner, BioLink */


/* 5.2 Iris Window — cool, hero-grade */


/* 5.3 Paper & Clay — warm neutral */


/* 5.4 Signal Blue Gel — use sparingly: Publish, nine channels, live */


/* 5.5 Night Bloom — dark chapters: Cam/shoot, final CTA */


/* 5.6 Graphite Silk — pricing, MORR OS, workspaces */


/* light drift — only the pop layer moves, never the materials. Pauses off-screen. */
@keyframes artDrift{ from{background-position:0 0} to{background-position:3% -2%} }
.art--drift{animation:artDrift var(--d-loop) var(--ease-in-out) infinite alternate}
@media (prefers-reduced-motion:reduce){ .art--drift{animation:none} }

/* image mode: <picture> inside .art once real panels exist */
.art > picture,.art > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}

/* floating product UI on art — crops off the bottom/right edge for depth */
.art__ui{position:absolute; z-index:1; background:var(--surface);
  border-radius:var(--r-sm); box-shadow:var(--sh-2); overflow:hidden}
.art--hero .art__ui{box-shadow:var(--sh-3)}
[data-theme="night"] .art__ui{border:1px solid var(--line); box-shadow:0 0 0 1px rgb(255 255 255 / .04) inset}

/* the only text allowed on a panel: a feature-tile title, top-left, lightest area */
.art__title{position:absolute; top:28px; left:28px; z-index:1;
  font-size:var(--f-h4); font-weight:500; color:var(--ink); letter-spacing:-.01em}




/* grain reads as dirt on near-white; keep it for the dark stage only */
/* grain per spec: .14-.20 on light families, .22-.28 on Night Bloom */
.art.grain::after{opacity:.26;mix-blend-mode:soft-light}

/* real depth on the product, layered rather than one soft blur */
.art .stage__web,.art .stage__phone{filter:
  drop-shadow(0 1px 1px rgb(20 18 14 / .10))
  drop-shadow(0 8px 14px rgb(20 18 14 / .10))
  drop-shadow(0 34px 60px rgb(20 18 14 / .18));}
.art--night .stage__web,.art--night .stage__phone{filter:
  drop-shadow(0 2px 2px rgb(0 0 0 / .5)) drop-shadow(0 30px 60px rgb(0 0 0 / .55));}

/* ---- the six families as DARK stages. Same hues from §5, on near-black. ---- */

.art--grid{background:
 radial-gradient(85% 70% at 16% 18%, rgb(154 176 218 / .16), transparent 72%),
 radial-gradient(70% 60% at 62% 72%, rgb(141 134 224 / .14), transparent 74%),
 linear-gradient(90deg, transparent calc(33.33% - 2px), rgb(255 255 255 / .04) 33.33%, transparent calc(33.33% + 2px), transparent calc(66.66% - 2px), rgb(255 255 255 / .04) 66.66%, transparent calc(66.66% + 2px)),
 linear-gradient(180deg, transparent calc(33.33% - 2px), rgb(255 255 255 / .04) 33.33%, transparent calc(33.33% + 2px), transparent calc(66.66% - 2px), rgb(255 255 255 / .04) 66.66%, transparent calc(66.66% + 2px)),
 linear-gradient(135deg, #0c0c10 0%, #111120 40%, #151527 68%, #18141d 100%);}
.art--iris{background:
 radial-gradient(70% 60% at 88% 10%, rgb(232 162 124 / .17), transparent 76%),
 radial-gradient(95% 80% at 20% 90%, rgb(91 95 199 / .26), transparent 78%),
 linear-gradient(172deg, #0e0e16 0%, #131326 34%, #191937 62%, #201e46 86%, #262454 100%);}
.art--clay{background:
 radial-gradient(90% 75% at 6% 96%, rgb(200 118 79 / .22), transparent 76%),
 radial-gradient(60% 50% at 78% 14%, rgb(232 201 180 / .08), transparent 78%),
 linear-gradient(180deg, #0f0e0e 0%, #151312 40%, #1b1614 72%, #201913 100%);}
.art--signal{background:
 radial-gradient(70% 55% at 92% 90%, rgb(246 178 107 / .15), transparent 78%),
 radial-gradient(100% 80% at 24% 18%, rgb(10 132 255 / .20), transparent 76%),
 linear-gradient(180deg, #090d13 0%, #0c1626 40%, #0f2039 72%, #122b4c 100%);}
.art--night{background:
 radial-gradient(60% 50% at 26% 76%, rgb(141 134 224 / .22), transparent 78%),
 radial-gradient(105% 85% at 24% 78%, rgb(91 95 199 / .26), transparent 80%),
 radial-gradient(75% 60% at 78% 20%, rgb(231 166 200 / .13), transparent 80%),
 linear-gradient(180deg, #0b0b0c 0%, #0f0f12 30%, #131318 60%, #171720 100%);}
.art--silk{background:
 radial-gradient(40% 90% at 86% 36%, rgb(141 134 224 / .17), transparent 80%),
 linear-gradient(160deg, transparent 22%, rgb(255 255 255 / .04) 30%, transparent 40%),
 linear-gradient(180deg, #141418 0%, #191920 42%, #1f1f27 74%, #24242d 100%);}