/* Zebramoon, the zebra system. One hand-drawn organic stripe artwork
   (zebra-organic.svg, irregular tapering paths, not a repeating pattern)
   reused everywhere via CSS mask: mask-position crops a different region
   of the same artwork per placement, and background-color recolors it
   (ink, soft pink, or a near-transparent white) without needing separate
   files. Use sparingly, see CLAUDE.md Part 11: roughly 90% calm editorial
   design, 10% unmistakable zebra. Don't add stripes to every card, button
   or background: pick one moment per section. */

.zebra-mask{
  -webkit-mask-image: url('zebra-organic.svg');
  mask-image: url('zebra-organic.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 260% auto;
  mask-size: 260% auto;
  background-color: var(--ink);
}
.zebra-mask.pink{ background-color: var(--pink-soft); }
.zebra-mask.ghost{ background-color: rgba(255,255,255,.55); }

/* ZebraDivider: a short irregular band marking a transition between
   sections. Deliberately not full-bleed, sits to one side rather than
   centered, and never repeats identically twice. */
.zebra-divider{
  position:relative;
  height:34px;
  width:190px;
  overflow:hidden;
}
.zebra-divider::before{
  content:'';
  position:absolute; inset:0;
  -webkit-mask-image: url('zebra-thin.svg');
  mask-image: url('zebra-thin.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--ink);
  transform-origin:left center;
}
html.js .zebra-divider::before{ transform:scaleX(0); transition:transform .9s var(--ease); }
html.js .reveal.in .zebra-divider::before{ transform:scaleX(1); }

/* ZebraUnderline: a thin irregular stroke under a headline word instead of
   a mechanical straight rule. */
.zebra-underline{ position:relative; z-index:0; display:inline-block; }
.zebra-underline::after{
  content:'';
  position:absolute; left:-2%; right:-2%; bottom:-0.2em; height:0.34em;
  -webkit-mask-image: url('zebra-thin.svg');
  mask-image: url('zebra-thin.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--pink);
  opacity:.9; z-index:-1;
}

/* ZebraOverlay: the signature move, an irregular striped shape crossing a
   photograph and bleeding past its edge so the image keeps going through
   the gaps. The parent needs position:relative + overflow:visible; the
   photo itself stays clipped, this pseudo-element sits alongside it. */
.photo-frame{ position:relative; }
.photo-frame::after{
  content:'';
  position:absolute;
  pointer-events:none;
  z-index:2;
  -webkit-mask-image: url('zebra-organic.svg');
  mask-image: url('zebra-organic.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--ink);
}
.photo-frame.zebra-br::after{ width:68%; aspect-ratio:2/3; right:-16%; bottom:-4%;
  -webkit-mask-size:150% auto; mask-size:150% auto; -webkit-mask-position:30% 20%; mask-position:30% 20%; }
.photo-frame.zebra-tl::after{ width:64%; aspect-ratio:2/3; left:-15%; top:-14%;
  -webkit-mask-size:160% auto; mask-size:160% auto; -webkit-mask-position:60% 55%; mask-position:60% 55%; }
.photo-frame.zebra-bl::after{ width:64%; aspect-ratio:2/3; left:-15%; bottom:-14%;
  -webkit-mask-size:155% auto; mask-size:155% auto; -webkit-mask-position:15% 70%; mask-position:15% 70%; transform:scaleX(-1); }
.photo-frame.zebra-tr::after{ width:68%; aspect-ratio:2/3; right:-16%; top:-5%;
  -webkit-mask-size:145% auto; mask-size:145% auto; -webkit-mask-position:70% 10%; mask-position:70% 10%; transform:scaleX(-1); }
.photo-frame.zebra-br.pink::after, .photo-frame.zebra-tl.pink::after,
.photo-frame.zebra-bl.pink::after, .photo-frame.zebra-tr.pink::after{ background-color:var(--pink); }
.photo-frame.zebra-br.ghost::after, .photo-frame.zebra-tl.ghost::after,
.photo-frame.zebra-bl.ghost::after, .photo-frame.zebra-tr.ghost::after{ background-color:rgba(255,255,255,.6); }

html.js .photo-frame.zebra-br::after,
html.js .photo-frame.zebra-tl::after,
html.js .photo-frame.zebra-bl::after,
html.js .photo-frame.zebra-tr::after{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.js .photo-frame.zebra-bl::after{ transform:scaleX(-1) translateY(16px); }
html.js .photo-frame.zebra-tr::after{ transform:scaleX(-1) translateY(16px); }
html.js .reveal.in .photo-frame::after,
html.js .photo-frame.reveal.in::after{ opacity:1; transform:translateY(0); }
html.js .reveal.in .photo-frame.zebra-bl::after,
html.js .photo-frame.zebra-bl.reveal.in::after{ transform:scaleX(-1) translateY(0); }
html.js .reveal.in .photo-frame.zebra-tr::after,
html.js .photo-frame.zebra-tr.reveal.in::after{ transform:scaleX(-1) translateY(0); }

@media (max-width:640px){
  .photo-frame.zebra-br::after,
  .photo-frame.zebra-tl::after,
  .photo-frame.zebra-bl::after,
  .photo-frame.zebra-tr::after{ width:48%; }
}

/* ZebraBehind: a quieter variant, tucked behind the photo instead of
   crossing in front of it, and dialled down so it reads as a hint of
   pattern peeking out from the edges rather than the main event. */
.photo-frame.zebra-behind::after{ z-index:-1; }
html.js .reveal.in .photo-frame.zebra-behind::after,
html.js .photo-frame.zebra-behind.reveal.in::after{ opacity:.3; }

/* ZebraBand: the primary brand device. Large organic bands, hand-positioned
   per scene (sizes/offsets set where used, in index.html), not a reusable
   corner widget. Can sit in front of a photo (.front) or partly behind one
   so it looks like it emerges from underneath (.behind, needs the photo
   sibling painted after it in source order). */
.zebra-band{
  position:absolute;
  pointer-events:none;
  -webkit-mask-image: url('zebra-organic.svg');
  mask-image: url('zebra-organic.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--ink);
}
.zebra-band.pink{ background-color: var(--pink); }
.zebra-band.ghost{ background-color: rgba(255,255,255,.5); }
.zebra-band.front{ z-index:3; }
.zebra-band.behind{ z-index:0; }
html.js .zebra-band{ opacity:0; transition:opacity 1s var(--ease), transform 1s var(--ease); }
html.js .reveal.in .zebra-band,
html.js .zebra-band.reveal.in{ opacity:1; }
html.js .zebra-band.in-view{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .zebra-divider::before,
  .photo-frame::after{ transition:none !important; transform:none !important; opacity:1 !important; }
  .photo-frame.zebra-bl::after,
  .photo-frame.zebra-tr::after{ transform:scaleX(-1) !important; }
  .zebra-band{ transition:none !important; opacity:1 !important; transform:none !important; }
  .photo-frame.zebra-behind::after{ opacity:.3 !important; }
}