/* ============================================================
   40-UTILITIES.CSS — rev.3
   ============================================================ */

.sa-js [data-iris]{
  opacity:0;
  transform:translateY(var(--sa-modul));
  clip-path:polygon(0 0, 100% 0, 100% 0, 0 0);
  transition:opacity var(--sa-dur-reveal) var(--sa-ease-out),
             transform var(--sa-dur-reveal) var(--sa-ease-out),
             clip-path var(--sa-dur-reveal) var(--sa-ease-cut);
}
.sa-js [data-iris][data-shown="true"]{
  opacity:1; transform:none;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.sa-js [data-stagger] > *{
  opacity:0; transform:translateY(var(--sa-modul));
  transition:opacity 340ms var(--sa-ease-out), transform 340ms var(--sa-ease-out);
}
.sa-js [data-stagger][data-shown="true"] > *{ opacity:1; }
.sa-js [data-stagger][data-shown="true"] > *:nth-child(1){ transition-delay:0ms }
.sa-js [data-stagger][data-shown="true"] > *:nth-child(2){ transition-delay:60ms }
.sa-js [data-stagger][data-shown="true"] > *:nth-child(3){ transition-delay:120ms }
.sa-js [data-stagger][data-shown="true"] > *:nth-child(4){ transition-delay:180ms }
.sa-js [data-stagger][data-shown="true"] > *:nth-child(n+5){ transition-delay:240ms }

@media (min-width:768px){
  .sa-js [data-stagger][data-shown="true"] > *{ transform:none }
}

@media (prefers-reduced-motion: reduce){
  .sa-js [data-iris], .sa-js [data-stagger] > *{
    clip-path:none !important; transform:none !important; opacity:1 !important;
  }
}

/* ---------- Screen reader only ---------- */
.sa-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout helpers ---------- */
.sa-stack   { display: flex; flex-direction: column; }
.sa-stack-3 { gap: var(--sa-space-3); }
.sa-stack-4 { gap: var(--sa-space-4); }
.sa-stack-5 { gap: var(--sa-space-5); }
.sa-stack-6 { gap: var(--sa-space-6); }
.sa-row     { display: flex; flex-wrap: wrap; gap: var(--sa-space-3); align-items: center; }
.sa-mt-6    { margin-top: var(--sa-space-6); }
.sa-mt-7    { margin-top: var(--sa-space-7); }
.sa-mt-8    { margin-top: var(--sa-space-8); }

/* Rasio placeholder */
.sa-ratio-1-1  { --sa-ph-ratio: 1 / 1; }
.sa-ratio-4-5  { --sa-ph-ratio: 4 / 5; }
.sa-ratio-3-4  { --sa-ph-ratio: 3 / 4; }
.sa-ratio-4-3  { --sa-ph-ratio: 4 / 3; }
.sa-ratio-16-9 { --sa-ph-ratio: 16 / 9; }
.sa-ratio-21-9 { --sa-ph-ratio: 21 / 9; }

.sa-clip { overflow: hidden; }