/* Zellige Atelier v1.1 — actual tile photography assembling into a tactile mosaic.
 * Photo is WordPress Media Library imagery, NOT a generated illustration.
 * No SVG pieces, faux glaze gradient, artificial star icon, or external fonts.
 */
.za-mosaic-intro { display:none; }
html.za-mosaic-intro-on .za-mosaic-intro {
  position:fixed;
  inset:0;
  z-index:2147483600;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#173b31;
  background:#f2ede4;
  pointer-events:auto;
  overflow:hidden;
  animation:za-mosaic-real-exit .45s cubic-bezier(.47,0,.2,1) 2.11s both;
}
.za-mosaic-intro__center {
  width:min(92vw,430px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translateY(-1.8vh);
}
.za-mosaic-intro__mark {
  --tile-width:51px;
  --tile-gap:3px;
  position:relative;
  display:grid;
  place-items:center;
  width:256px;
  height:256px;
  border:9px solid #e4d8c5;
  background:#c8bba4;
  box-shadow:0 25px 55px rgba(25,45,32,.09),inset 0 0 18px rgba(0,0,0,.12);
}
.za-mosaic-intro__pieces {
  display:grid;
  grid-template-columns:repeat(4,var(--tile-width));
  grid-template-rows:repeat(4,var(--tile-width));
  gap:var(--tile-gap);
  padding:7px;
  background:#c2b39d;
  box-shadow:inset 0 0 0 1px rgba(87,61,32,.13);
  transform:rotate(-2deg);
  animation:za-mosaic-real-settle .5s ease-out 1.35s forwards;
}
.za-mosaic-intro__piece {
  display:block;
  position:relative;
  width:var(--tile-width);
  height:var(--tile-width);
  background-image:var(--za-photo);
  background-size:400% 400%;
  background-position:var(--bx) var(--by);
  background-repeat:no-repeat;
  border-radius:1px 2px 1px 2px;
  box-shadow:inset 0 0 0 1px rgba(55,36,21,.11),inset 0 -3px 3px rgba(15,29,25,.12),0 2px 4px rgba(13,28,23,.29);
  opacity:0;
  transform:translate3d(var(--dx),var(--dy),0) rotate(var(--r)) scale(.70);
  will-change:transform,opacity;
  animation:za-mosaic-real-arrive .76s cubic-bezier(.18,.88,.27,1.1) var(--delay) forwards;
}
.za-mosaic-intro__name {
  margin:24px 0 0;
  color:#1c4338;
  font:400 clamp(23px,4.7vw,28px)/1.15 Georgia,'Times New Roman',serif;
  letter-spacing:.17em;
  white-space:nowrap;
  opacity:0;
  animation:za-mosaic-real-type .42s ease 1.29s both;
}
.za-mosaic-intro__name span {font-style:italic;letter-spacing:.07em;}
.za-mosaic-intro__caption {
  margin:10px 0 0;
  color:#916e44;
  font:700 9px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;
  letter-spacing:.25em;
  opacity:0;
  animation:za-mosaic-real-type .38s ease 1.46s both;
}
@keyframes za-mosaic-real-arrive {
  0% {opacity:0;transform:translate3d(var(--dx),var(--dy),0) rotate(var(--r)) scale(.70)}
  45% {opacity:1}
  81% {opacity:1;transform:translate3d(0,0,0) rotate(-1deg) scale(1.055)}
  100% {opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}
}
@keyframes za-mosaic-real-settle {
  0% {transform:rotate(-2deg)}
  100% {transform:rotate(0)}
}
@keyframes za-mosaic-real-type {
  from {opacity:0;transform:translate3d(0,9px,0)}
  to {opacity:1;transform:translate3d(0,0,0)}
}
@keyframes za-mosaic-real-exit {
  0% {opacity:1;visibility:visible;pointer-events:auto}
  99% {opacity:0;visibility:visible;pointer-events:none}
  100% {opacity:0;visibility:hidden;pointer-events:none}
}
@media(max-width:480px) {
  .za-mosaic-intro__mark {transform:scale(.89)}
  .za-mosaic-intro__center {width:100%;}
  .za-mosaic-intro__name {margin-top:14px;letter-spacing:.12em}
  .za-mosaic-intro__caption {letter-spacing:.20em}
}
@media(prefers-reduced-motion:reduce) {
  html.za-mosaic-intro-on .za-mosaic-intro {display:none!important}
  .za-mosaic-intro__piece,.za-mosaic-intro__pieces,
  .za-mosaic-intro__name,.za-mosaic-intro__caption {animation:none!important}
}