/* SaaaS Animations v1.3 — frames, title bar, mini panels, image panels, slider */
@font-face { font-family:'SAAAS'; src:url('/img/fonts/SAaaSForce-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
.saaas-anim, .saaas-slider {
  --saaas-ink:#1E1E26; --saaas-soft:#4a5260; --saaas-sky:#7BCEF6; --saaas-salmon:#FEBAA5;
  --saaas-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --saaas-display:'Archivo','Helvetica Neue',Arial,sans-serif;
}
.saaas-anim.saaas-ready { padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important; }
.saaas-anim .saaas-src { display:none !important; }
.wp-block-column > .saaas-anim { height:100%; }

/* frame */
.saaas-anim .saaas-screen {
  display:flex; flex-direction:column; height:100%;
  border:2px solid var(--saaas-ink); border-radius:6px; overflow:hidden;
  background:#fff; color:var(--saaas-ink);
  box-shadow:8px 8px 0 rgba(30,30,38,.5);
}

/* title bar: one line, same space above and below, nothing on the right */
.saaas-anim .saaas-bar {
  display:flex; align-items:center;
  padding:20px 18px; border-bottom:2px solid var(--saaas-ink); background:#fff;
}
.saaas-anim .saaas-bar .saaas-title {
  margin:0 0 -.25em !important; padding:.23em 0 0 !important; border:0 !important;
  /* typography comes from the theme's global H3 style (Appearance > Editor > Styles > Typography > H3) */
  line-height:1 !important; color:var(--saaas-ink) !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* the SAAAS letters rise .97em above the baseline but the font declares only .79em ascent:
     pad the top so nothing is clipped, pull the bottom so the box hugs the letters */
}
.saaas-anim .saaas-bar .saaas-title::before, .saaas-anim .saaas-bar .saaas-title::after { content:none !important; }

/* stage */
.saaas-anim .saaas-canvas { display:block; width:100%; height:auto; background:var(--saaas-sky); }
.saaas-anim .saaas-cap { display:grid; gap:12px; padding:14px; border-top:2px solid var(--saaas-ink); margin-top:auto; }
.saaas-anim .saaas-caption:not(.saaas-subtitle) { margin:0 !important; font:500 14px/1.45 var(--saaas-display) !important; color:var(--saaas-soft) !important; }
.saaas-anim .saaas-chips { display:flex; flex-wrap:wrap; gap:4px 0; align-items:center; min-height:28px; }
.saaas-anim .saaas-chips svg { display:block; overflow:visible; }

/* playback controls: two small buttons inside the animation, shown on hover */
.saaas-anim .saaas-stage { position:relative; line-height:0; flex:1; display:flex; align-items:center; background:var(--saaas-sky); }
.saaas-anim .saaas-ctrls {
  position:absolute; right:10px; bottom:10px; display:flex; gap:6px;
  opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s;
}
.saaas-anim .saaas-stage:hover .saaas-ctrls,
.saaas-anim .saaas-stage:focus-within .saaas-ctrls,
.saaas-anim .saaas-stage.is-paused .saaas-ctrls { opacity:1; transform:none; }
@media (hover:none) { .saaas-anim .saaas-ctrls { opacity:.85; transform:none; } }
.saaas-anim .saaas-mini-btn {
  appearance:none; margin:0; padding:0; cursor:pointer;
  width:30px; height:30px; display:grid; place-items:center;
  border:1px solid rgba(30,30,38,.35); border-radius:8px;
  background:rgba(255,255,255,.92); color:var(--saaas-ink);
  box-shadow:1px 2px 0 rgba(30,30,38,.18);
  transition:background .15s, transform .08s;
}
.saaas-anim .saaas-mini-btn:hover { background:var(--saaas-salmon); }
.saaas-anim .saaas-mini-btn:active { transform:translateY(1px); }
.saaas-anim .saaas-mini-btn:focus-visible { outline:2px solid #2F7FD8; outline-offset:2px; }
.saaas-anim.is-mini .saaas-mini-btn { width:26px; height:26px; border-radius:7px; }
.saaas-anim.is-mini .saaas-ctrls { right:8px; bottom:8px; }

/* slider navigation: light buttons */
.saaas-slider-nav { display:flex; gap:8px; align-items:center; }
.saaas-slider .saaas-btn {
  appearance:none; margin:0; cursor:pointer;
  font:700 12px/1 var(--saaas-mono); letter-spacing:.06em;
  border:1px solid rgba(30,30,38,.35); border-radius:8px; background:#fff; color:var(--saaas-ink);
  padding:9px 12px; box-shadow:1px 2px 0 rgba(30,30,38,.18);
  transition:background .15s, transform .08s;
}
.saaas-slider .saaas-btn:hover { background:var(--saaas-salmon); }
.saaas-slider .saaas-btn:active { transform:translateY(1px); }
.saaas-slider .saaas-btn:focus-visible, .saaas-slider .saaas-dot:focus-visible { outline:2px solid #2F7FD8; outline-offset:2px; }
.saaas-slider .saaas-btn.sq { width:36px; padding:9px 0; font-size:15px; }

/* mini panels: 2–4 per row (automatic below 520px wide, or force with size-mini) */
.saaas-anim.is-mini .saaas-screen { box-shadow:5px 5px 0 rgba(30,30,38,.5); }
.saaas-anim.is-mini .saaas-bar { padding:16px 14px; }
.saaas-anim.is-mini .saaas-chips { display:none; }
.saaas-anim.is-mini .saaas-cap { padding:10px 12px; gap:8px; }
.saaas-anim.is-mini .saaas-caption:not(.saaas-subtitle) { font-size:13px !important; line-height:1.4 !important; }
.saaas-anim.is-mini .saaas-cap.no-caption { display:none; }

/* image panels: one picture in the same frame */
.saaas-anim .saaas-media { flex:0 0 auto; display:flex; background:var(--saaas-media-bg, #DDF1FC); }
.saaas-anim .saaas-media img { mix-blend-mode:multiply; } /* white image backgrounds take on the panel's light sky */
.saaas-anim.bg-white { --saaas-media-bg:#fff; }
.saaas-anim.type-image .saaas-cap { flex:1; align-content:start; margin-top:0; }
.saaas-anim .saaas-media figure { margin:0 !important; width:100%; }
.saaas-anim .saaas-media img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.saaas-anim.ratio-1-1 .saaas-media img { aspect-ratio:1/1; }
.saaas-anim.ratio-16-9 .saaas-media img { aspect-ratio:16/9; }
.saaas-anim.ratio-3-4 .saaas-media img { aspect-ratio:3/4; }
.saaas-anim.fit-contain .saaas-media img { object-fit:contain; }

/* slider: one column, panels rotate */
.saaas-slider.saaas-slider-ready { display:grid; gap:16px; }
.saaas-slider .saaas-track > .saaas-anim { display:none; }
.saaas-slider .saaas-track > .saaas-anim.is-active { display:block; animation:saaas-in .45s ease; }
.saaas-slider .saaas-btn.play { min-width:84px; }
.saaas-slider .saaas-dots { flex:1; display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; }
.saaas-slider .saaas-dot {
  appearance:none; margin:0; padding:0; cursor:pointer;
  width:12px; height:12px; border-radius:50%;
  border:2px solid var(--saaas-ink); background:#fff;
}
.saaas-slider .saaas-dot[aria-current="true"] { background:var(--saaas-salmon); }
@keyframes saaas-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
  .saaas-slider .saaas-track > .saaas-anim.is-active { animation:none; }
  .saaas-slider .saaas-btn, .saaas-anim .saaas-mini-btn, .saaas-anim .saaas-ctrls { transition:none; }
}

/* shaped buttons (a paragraph that is only a link); colours follow the site palette */
.saaas-anim .saaas-cta-row { margin:2px 0 0 !important; line-height:0 !important; }
.saaas-anim a.saaas-cta {
  --cta-fill-c:var(--cta-fill, var(--wp--preset--color--primary-accent, #e9e7ff));
  --cta-text-c:var(--cta-text, var(--wp--preset--color--main, #1E1E26));
  --cta-line-c:var(--cta-line, var(--wp--preset--color--main, #1E1E26));
  --cta-hover-c:var(--cta-hover, var(--wp--preset--color--primary-alt, #DEC9FF));
  position:relative; isolation:isolate; display:inline-flex; align-items:center;
  height:36px; padding:0 18px;
  font:700 12px/1 var(--saaas-mono) !important; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cta-text-c) !important; text-decoration:none !important; white-space:nowrap;
}
.saaas-anim a.saaas-cta svg { position:absolute; left:-1px; top:-1px; z-index:-1; overflow:visible; pointer-events:none; }
.saaas-anim a.saaas-cta path { fill:var(--cta-fill-c); stroke:var(--cta-line-c); stroke-width:1.2; stroke-linejoin:round; transition:fill .15s; }
.saaas-anim a.saaas-cta:hover path, .saaas-anim a.saaas-cta:focus-visible path { fill:var(--cta-hover-c); }
.saaas-anim a.saaas-cta:focus-visible { outline:none; }
.saaas-anim a.saaas-cta:focus-visible path { stroke-width:2.2; }
.saaas-anim a.saaas-cta[data-shape="hex"], .saaas-anim a.saaas-cta[data-shape="brace"],
.saaas-anim a.saaas-cta[data-shape^="chevron"], .saaas-anim a.saaas-cta[data-shape^="diagonal"] { padding:0 24px; }
.saaas-anim a.saaas-cta[data-shape="diamond"] { padding:0 46px; height:40px; }
.saaas-anim.is-mini a.saaas-cta { height:32px; font-size:11px !important; }
.saaas-anim.is-mini a.saaas-cta[data-shape="diamond"] { height:36px; }
@media (prefers-reduced-motion:reduce) { .saaas-anim a.saaas-cta path { transition:none; } }

/* subtitle (title of the text) inside a panel caption: typography comes from the theme's global H4 style */
.saaas-anim .saaas-cap .saaas-subtitle { color:var(--saaas-ink) !important; margin:0 0 -4px !important; line-height:1.3 !important; }

/* caption icons: add icon-left or icon-right to an image panel.
   Two columns: the icon runs the full height of the caption; the text column holds the text, then the button at the bottom right.
   icon-sm / icon-lg change the icon column width, icon-tile adds a light sky tile behind the icon */
.saaas-anim .saaas-cap.has-icon { grid-template-rows:1fr; }
.saaas-anim .saaas-cap-row { --icon:120px; display:grid; grid-template-columns:var(--icon) minmax(0,1fr); gap:16px; align-items:stretch; min-height:100%; }
.saaas-anim .saaas-cap-row.is-right { grid-template-columns:minmax(0,1fr) var(--icon); }
.saaas-anim .saaas-cap-row.is-right .saaas-icon { order:2; }
.saaas-anim.icon-sm .saaas-cap-row { --icon:88px; }
.saaas-anim.icon-lg .saaas-cap-row { --icon:150px; }
.saaas-anim .saaas-cap-body { display:flex; flex-direction:column; gap:12px; min-width:0; }
.saaas-anim .saaas-cap-text { display:grid; gap:12px; }
.saaas-anim .saaas-cap-body > .saaas-cta-row { margin-top:auto !important; align-self:flex-end; }
.saaas-anim .saaas-icon { position:relative; min-height:96px;
  background:none; border:0; } /* transparent: no tile behind the icon */
.saaas-anim.icon-tile .saaas-icon { border-radius:12px; background:var(--saaas-media-bg, #DDF1FC); border:1px solid rgba(30,30,38,.15); overflow:hidden; }
.saaas-anim .saaas-icon figure { margin:0 !important; position:absolute; inset:0; } /* absolute: the picture fills the column without making the caption taller */
.saaas-anim .saaas-icon img { display:block; width:100% !important; height:100% !important; max-height:none; object-fit:contain; padding:0; box-sizing:border-box; }
.saaas-anim.icon-tile .saaas-icon img { padding:8px 6px; }
.saaas-anim.is-mini .saaas-cap-row { --icon:96px; gap:12px; }
.saaas-anim.is-mini.icon-sm .saaas-cap-row { --icon:72px; }
.saaas-anim.is-mini.icon-lg .saaas-cap-row { --icon:120px; }
.saaas-anim.is-mini .saaas-cap-body, .saaas-anim.is-mini .saaas-cap-text { gap:8px; }
.saaas-anim.no-media .saaas-cap { border-top:0; }

/* home page hero image: centred, half the screen width (80% on phones) */
.wp-block-image.saaas-hero-image { width:50vw !important; max-width:50vw !important; margin-left:auto !important; margin-right:auto !important; }
.wp-block-image.saaas-hero-image img { width:100%; height:auto; }
@media (max-width:781px) { .wp-block-image.saaas-hero-image { width:80vw !important; max-width:80vw !important; } }

/* home page: no extra template padding above the hero */
body.home main.wp-block-group { padding-top:0 !important; }
body.home main .entry-content { margin-top:0 !important; }