/* ===== Unified theme tokens ===== */
/* Put this AFTER the Webpixels CSS link (e.g., in styles.css loaded last) */
:root {
  /* === Your brand palette === */
  --brand-600: #D9E889;
  /* primary */
  --brand-700: color-mix(in srgb, var(--brand-600) 85%, black);
  --brand-500: color-mix(in srgb, var(--brand-600) 92%, white);
  --brand-rgb: 110, 100, 255;
  /* for shadows/focus rings */

  --edit-primary-600: #D9E889;
  /* base */
  --edit-primary-650: #D1E16E;
  /* darker step */
  --edit-primary-550: #E5F097;
  /* lighter step */
  --edit-primary-700: #C9DB58;
  /* border/definition */
  --edit-ink-900: #0F172A;
  /* dark text */

  --edit-link: #334155;
  /* slate ink (good base link colour) */
  --edit-link-hover: #0F172A;
  /* darker on hover */
  --edit-link-active: #111827;
  /* even darker for active/focus */

  --blob-lime: #D9E889;
  /* primary lime */
  --blob-pink: #F2BFDE;
  /* pink accent */
  --blob-lav: #EAE7FF;
  /* soft lavender support (very light) */
  --ink-900: #0F172A;
  /* just for shadows if you keep them */

  /* Transparency (tune to taste) */
  --blob-alpha-strong: 0.18;
  --blob-alpha-soft: 0.12;
}

}

body,
.text-primary {
  color: var(--edit-ink-900) !important;
}

/* Secondary & muted helpers */
.text-secondary {
  color: var(--edit-ink-700) !important;
}

.text-muted {
  color: var(--edit-ink-600) !important;
}

/* Links */
a {
  color: var(--edit-link);
  text-decoration: none;
  /* modern look */
  font-weight: 500;
  /* subtle emphasis */
}

a:hover,
a:focus {
  color: var(--edit-link-hover);
  text-decoration: underline;
  /* show underline only on hover/focus */
}

a:active {
  color: var(--edit-link-active);
}

/* --- Webpixels buttons: map brand -> --x-btn-* tokens --- */
.btn-primary {
  --x-btn-color: #0F172A;
  --x-btn-bg: var(--brand-600);
  --x-btn-border-color: var(--brand-600);

  --x-btn-hover-color: #fff;
  --x-btn-hover-bg: var(--brand-700);
  --x-btn-hover-border-color: var(--brand-700);

  --x-btn-focus-shadow-rgb: var(--brand-rgb);

  --x-btn-active-color: #fff;
  --x-btn-active-bg: var(--brand-700);
  --x-btn-active-border-color: color-mix(in srgb, var(--brand-600) 78%, black);
  --x-btn-active-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

  --x-btn-disabled-color: #fff;
  --x-btn-disabled-bg: var(--brand-600);
  --x-btn-disabled-border-color: var(--brand-600);
}

.btn-outline-primary {
  --x-btn-color: var(--brand-600);
  --x-btn-border-color: var(--brand-600);

  --x-btn-hover-color: #fff;
  --x-btn-hover-bg: var(--brand-600);
  --x-btn-hover-border-color: var(--brand-600);

  --x-btn-focus-shadow-rgb: var(--brand-rgb);

  --x-btn-active-color: #fff;
  --x-btn-active-bg: var(--brand-700);
  --x-btn-active-border-color: var(--brand-700);

  --x-btn-disabled-color: var(--brand-600);
  --x-btn-disabled-bg: transparent;
  --x-btn-disabled-border-color: var(--brand-600);
}

/* --- Utilities + components to keep everything consistent --- */
.text-primary {
  color: var(--brand-600) !important;
}

a.text-primary:hover {
  color: var(--brand-700) !important;
}

.bg-primary {
  background-color: var(--brand-600) !important;
}

.border-primary {
  border-color: var(--brand-600) !important;
}

/* ---- Solid primary badges (Bootstrap v5) ---- */
.badge.bg-primary,
.badge.text-bg-primary {
  background-color: var(--edit-primary-600) !important;
  color: var(--edit-ink-900) !important;
  border: 1px solid var(--edit-primary-700);
  /* optional but helps on pale bg */
}

/* Hoverable badges (if you ever use as links) */
a.badge.bg-primary:hover,
a.badge.text-bg-primary:hover {
  background-color: var(--edit-primary-550) !important;
  color: var(--edit-ink-900) !important;
  border-color: var(--edit-primary-700) !important;
  text-decoration: none;
}

.page-item.active .page-link {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}

.page-link {
  --bs-pagination-hover-color: var(--brand-600);
  --bs-pagination-focus-color: var(--brand-600);
}

/* Forms */
.form-check-input:checked {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}

.form-switch .form-check-input:checked {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--brand-600);
}

.form-range::-moz-range-thumb {
  background-color: var(--brand-600);
}


/* Centered brand nav */
.center-brand-nav .container {
  position: relative;
  min-height: 72px;
  /* reserve vertical space for the absolute brand */
}

.center-brand-nav .navbar-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  /* kill default margins */
  z-index: 2;
  /* sit above the bar but below buttons/toggler */
}

.center-brand-nav .navbar-brand img {
  height: 112px;
  /* adjust to taste */
  width: auto;
  display: block;
}

.center-brand-nav .navbar-toggler {
  z-index: 3;
}

/* keep toggler clickable */
.center-brand-nav .nav-actions {
  z-index: 3;
}

/* keep buttons clickable */

/* Optional: smaller logo on mobile */
@media (max-width: 991.98px) {
  .center-brand-nav .navbar-brand img {
    height: 48px;
  }
}


/* — Logo watermark in hero — */
.hero.hero--with-mark {
  position: relative;
  overflow: hidden;
}

.hero.hero--with-mark::after {
  content: "";
  position: absolute;
  inset: auto 0 -10% 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: min(56vw, 680px);
  height: calc(min(56vw, 680px) * .36);
  /* aspect guess: adjust to your logo */
  background: center/contain no-repeat url("/static/images/Edit_logo.png");
  /* use your best transparent SVG/PNG */
  opacity: .07;
  /* sweet spot: .05–.10 */
  pointer-events: none;
  filter: drop-shadow(0 10px 30px rgba(20, 20, 60, .06));
}

/* — Badge with tiny logo — */
.suite-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  color: #475569;
  font-weight: 600;
  font-size: .9rem;
}

.suite-badge .suite-logo {
  width: 22px;
  height: auto;
  display: block;
}

/* Optional: fine-tune for very small screens */
@media (max-width: 420px) {
  .hero.hero--with-mark::after {
    width: 72vw;
    height: calc(72vw * .36);
    opacity: .06;
  }
}


.placeholder-cell {
  background-color: #e0e0e0;
  border-radius: 4px;
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 0.2em 0;
  color: #777;
}

.placeholder-title {
  background-color: #e0e0e0;
  border-radius: 4px;
  display: inline-block;
  width: 50%;
  text-align: center;
  padding: 0.2em 0;
  color: #777;
}

/* Override font size for TomSelect dropdown, control, and input */
.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 18px !important;
  /* adjust font size as needed */
  line-height: 22px;
}

/* Remove border from the TomSelect control */
.ts-control {
  border: none !important;
}

@keyframes pulse-red-circle {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    /* Softer red for shadow */
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

@keyframes morphing-gradient {
  0% {
    background-position: 0% 50%;
  }

  25% {
    background-position: 50% 100%;
  }

  50% {
    background-position: 100% 50%;
  }

  75% {
    background-position: 50% 0%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.pulsing-red-circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #dc3545;
  /* Bootstrap's $danger red */
  border-radius: 50%;
  animation: pulse-red-circle 2s infinite;
  box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
  /* Soft border effect */
}

@keyframes ellipsis-animation {
  0% {
    content: ".";
  }

  33% {
    content: "..";
  }

  66% {
    content: "...";
  }

  100% {
    content: ".";
  }

  /* Loop back */
}

/* Page wrappers */
.section-wrapper {
  position: relative;
  overflow: hidden;
}

.section-wrapper::before,
.section-wrapper::after {
  content: '';
  position: absolute;
  z-index: -1;
  background: linear-gradient(-45deg, var(--grad-color-1), var(--grad-color-2), var(--grad-color-3), var(--grad-color-4));
  background-size: 400% 400%;
  animation: morphing-gradient 30s ease infinite;
  filter: blur(120px);
  border-radius: 50%;
}

.section-wrapper::before {
  width: 600px;
  height: 600px;
  top: -250px;
  left: -300px;
}

.section-wrapper::after {
  width: 500px;
  height: 500px;
  bottom: -200px;
  right: -250px;
  animation-delay: -15s;
}

.hero {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.analysing-indicator {
  display: flex;
  align-items: center;
  color: #6c757d;
  /* Bootstrap's $secondary text color for a muted look */
}

.analysing-text .ellipsis::after {
  display: inline-block;
  /* Important for content and width */
  content: "...";
  /* Initial content before animation takes over */
  animation: ellipsis-animation 1.5s infinite steps(1, end);
  width: 1.5em;
  /* Adjust if necessary to prevent layout shift */
  text-align: left;
  vertical-align: bottom;
  /* Aligns dots nicely with text */
}

.random-gradient {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a18cd1, #fbc2eb);
  background-size: 400% 400%;
  animation: gradientAnimation 8s ease infinite;
}

/* ===== Shared card/tile system ===== */
.app-card {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 3rem rgba(44, 62, 80, .12) !important;
}

.app-header {
  --tile-accent: #0d6efd;
  --tile-accent-2: #6ea8fe;
  --tile-bg: #f8f9fa;
  min-height: 160px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  background-color: var(--tile-bg);
  background-size: 60px 60px;
  background-position: center;
  background-repeat: repeat;
}

.app-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 120px at 20% 15%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(140px 140px at 80% 85%, rgba(255, 255, 255, .6), transparent 60%);
  pointer-events: none;
}

.app-card:hover .app-header {
  background-position: 45% 55%;
  transition: background-position .4s ease;
}

.app-icon-button {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(44, 62, 80, .1), 0 0 0 1px rgba(44, 62, 80, .05);
  display: grid;
  place-items: center;
  z-index: 1;
}

.app-icon-button svg {
  width: 48px;
  height: 48px;
}

.app-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.app-actions {
  margin-top: auto;
  padding-top: 1rem;
}

.status-pill {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: .75rem;
  font-weight: 600;
  z-index: 2;
}

/* ===== Reusable pattern helpers to mix in per tile if desired ===== */
.pattern-dots {
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .06) 1px, transparent 1px);
  background-size: 18px 18px;
}

.pattern-grid {
  background-image: linear-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .06) 1px, transparent 1px);
  background-size: 24px 24px;
}

.pattern-diagonal {
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 10px);
}

.pattern-zigzag {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cpath d='M0 9 L6 3 12 15 18 3 24 15 30 3 36 15' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 36px 18px;
}

.pattern-cross {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M0 11 H22 M11 0 V22' stroke='%23000' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
}

/* ===== Theme & pattern system (unique variant per app slug) ===== */
/* Compliance */
.theme-bg-compliance {
  --tile-bg: #e9f9fd;
  --tile-accent: #0ea5b0;
  --tile-accent-2: #79d4da;
  background-color: var(--tile-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25'%3E%3Cpath d='M-5,5 l10,-10 M0,25 l25,-25 M20,30 l10,-10' stroke='%230ea5b022' stroke-width='1'/%3E%3C/svg%3E");
}

/* Admissions */
.theme-bg-admissions {
  --tile-bg: #fffbe6;
  --tile-accent: #b08100;
  --tile-accent-2: #ffd166;
  background-color: var(--tile-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35'%3E%3Cpath d='M0 17.5 Q 8.75 7.5, 17.5 17.5 T 35 17.5' stroke='%23b0810022' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

/* FlexiDesk (Hotdesk) */
.theme-bg-flexidesk {
  --tile-bg: #f7ecff;
  --tile-accent: #7a4fb7;
  --tile-accent-2: #c7a8ff;
  background-color: var(--tile-bg);
  background-image:
    repeating-linear-gradient(90deg, #7a4fb70f 0 2px, transparent 2px 26px),
    repeating-linear-gradient(#7a4fb70d 0 2px, transparent 2px 26px);
}

/* Meals / Meal Choices */
.theme-bg-meals,
.theme-bg-meal-choices {
  --tile-bg: #fff3e8;
  --tile-accent: #d96e00;
  --tile-accent-2: #ffb680;
  background-color: var(--tile-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0 9 C4 2, 8 16, 12 9 S20 2, 24 9 S32 16, 36 9' fill='none' stroke='%23d96e0020' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 36px 18px;
}

/* CoreSync */
.theme-bg-coresync {
  --tile-bg: #eaf3ff;
  --tile-accent: #0d6efd;
  --tile-accent-2: #6ea8fe;
  background-color: var(--tile-bg);
  background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230d6efd22' fill-rule='evenodd'%3E%3Cpath d='M11 22h22v2H11z'/%3E%3C/g%3E%3C/svg%3E");
}

/* SEND Tracker */
.theme-bg-send {
  --tile-bg: #e9f7ef;
  --tile-accent: #198754;
  --tile-accent-2: #7cd3a6;
  background-color: var(--tile-bg);
  background-image: radial-gradient(circle at 1px 1px, #19875422 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Spare2Share */
.theme-bg-spare2share {
  --tile-bg: #eefcf0;
  --tile-accent: #2f9e44;
  --tile-accent-2: #a6e3b8;
  background-color: var(--tile-bg);
  background-image: repeating-linear-gradient(135deg, #2f9e4420 0 6px, transparent 6px 16px);
}

/* Trips */
.theme-bg-trips {
  --tile-bg: #eaf7ff;
  --tile-accent: #0aa2c0;
  --tile-accent-2: #8bd3e6;
  background-color: var(--tile-bg);
  background-image: radial-gradient(circle at 10px 10px, #0aa2c020 2px, transparent 2px);
  background-size: 28px 28px;
}

/* Policies */
.theme-bg-policies {
  --tile-bg: #f2f4ff;
  --tile-accent: #4c6ef5;
  --tile-accent-2: #b2c1ff;
  background-color: var(--tile-bg);
  background-image: repeating-linear-gradient(0deg, #4c6ef515 0 1px, transparent 1px 18px);
}

/* Training */
.theme-bg-training {
  --tile-bg: #f2fff6;
  --tile-accent: #0b8a5a;
  --tile-accent-2: #9de2c5;
  background-color: var(--tile-bg);
  background-image: repeating-linear-gradient(45deg, #0b8a5a18 0 2px, transparent 2px 14px);
}

/* Institute */
.theme-bg-institute {
  --tile-bg: #fff0f6;
  --tile-accent: #c2255c;
  --tile-accent-2: #f3a1bd;
  background-color: var(--tile-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 0 V26 M0 13 H26' stroke='%23c2255c22' stroke-width='1'/%3E%3C/svg%3E");
}

/* Vacancies */
.theme-bg-vacancies {
  --tile-bg: #f0f9ff;
  --tile-accent: #087f5b;
  --tile-accent-2: #9ae6b4;
  background-color: var(--tile-bg);
  background-image: repeating-linear-gradient(90deg, #087f5b18 0 2px, transparent 2px 22px);
}

/* Safeguarding */
.theme-bg-safeguarding {
  --tile-bg: #fff0f0;
  --tile-accent: #d6336c;
  --tile-accent-2: #ffb3c1;
  background-color: var(--tile-bg);
  background-image:
    repeating-linear-gradient(135deg, #d6336c18 0 6px, transparent 6px 16px),
    radial-gradient(60px 60px at 85% 15%, #fff 0, transparent 60%);
}

/* Census */
.theme-bg-census {
  --tile-bg: #f5f5ff;
  --tile-accent: #6f42c1;
  --tile-accent-2: #cbb9f7;
  background-color: var(--tile-bg);
  background-image: radial-gradient(circle at 1px 1px, #6f42c122 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Comms */
.theme-bg-comms {
  --tile-bg: #e9f5ff;
  --tile-accent: #0b7285;
  --tile-accent-2: #99e9f2;
  background-color: var(--tile-bg);
  background-image:
    repeating-linear-gradient(0deg, #0b728518 0 2px, transparent 2px 16px),
    repeating-linear-gradient(90deg, #0b72850f 0 1px, transparent 1px 24px);
}

/* Classrooms (example) */
.theme-bg-classrooms {
  --tile-bg: #fff7e6;
  --tile-accent: #d9480f;
  --tile-accent-2: #ffc078;
  background-color: var(--tile-bg);
  background-image:
    radial-gradient(42px 42px at 20% 80%, #fff 0, transparent 60%),
    repeating-linear-gradient(45deg, #d9480f12 0 3px, transparent 3px 18px);
}

/* Assets / Inventory */
.theme-bg-assets {
  --tile-bg: #eef7ff;
  --tile-accent: #1c7ed6;
  --tile-accent-2: #a5c7f5;
  background-color: var(--tile-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='0' y='0' width='24' height='24' fill='none' stroke='%231c7ed622' stroke-width='1'/%3E%3C/svg%3E");
}

/* Accent ring around icon */
.app-header .app-icon-button {
  box-shadow:
    0 10px 20px rgba(44, 62, 80, .1),
    0 0 0 1px rgba(44, 62, 80, .05),
    0 0 0 8px color-mix(in oklab, var(--tile-accent) 10%, transparent);
}

/* Disabled state */
.disabled-tile {
  cursor: not-allowed;
  opacity: .65;
}

.disabled-tile:hover {
  transform: none;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

.disabled-tile .card-title,
.disabled-tile .card-text {
  color: #6c757d !important;
}

/* Keep this layer behind all content (incl. the navbar) */
body {
  position: relative;
  z-index: 0;
}

.ambient-blobs {
  position: fixed;
  inset: 0;
  z-index: -1 !important;
  /* forces behind everything */
  pointer-events: none;
}

/* Base blob: solid + transparent + animation attached HERE */
.blob {
  position: fixed;
  opacity: .14;
  width: clamp(36vmin, 40vw, 64vmin);
  height: clamp(36vmin, 40vw, 64vmin);

  /* Irregular starting shape (not a circle) */
  border-radius: 61% 39% 53% 47% / 43% 57% 41% 59%;

  /* >>> THIS attaches the animation <<< */
  animation:
    blob-morph 110s ease-in-out infinite alternate,
    blob-drift 160s ease-in-out infinite;

  will-change: border-radius, transform;
  box-shadow: none;
}

/* Positions: coming in from the SIDES (partly off-screen), no overlap */
.blob--lime {
  background: var(--blob-lime);
  top: 14vh;
  left: -18vmin;
  /* peeking from LEFT */
  animation-duration: 120s, 180s;
}

.blob--pink {
  background: var(--blob-pink);
  top: 10vh;
  right: -20vmin;
  /* peeking from RIGHT */
  animation-duration: 115s, 170s;
  animation-name: blob-morph-alt, blob-drift-alt;
}

.blob--lav {
  background: var(--blob-lav);
  bottom: -14vmin;
  right: 12vw;
  /* peeking from BOTTOM edge */
  animation-duration: 130s, 190s;
  animation-name: blob-morph-side, blob-drift-side;
}

/* Large, slow “lava” undulations */
@keyframes blob-morph {
  0% {
    border-radius: 61% 39% 53% 47% / 43% 57% 41% 59%;
    transform: scale(1) rotate(0deg);
  }

  25% {
    border-radius: 44% 56% 60% 40% / 55% 40% 60% 45%;
    transform: scale(1.06) rotate(4deg);
  }

  50% {
    border-radius: 58% 42% 45% 55% / 48% 65% 35% 52%;
    transform: scale(0.96) rotate(-3deg);
  }

  75% {
    border-radius: 40% 60% 58% 42% / 62% 38% 55% 45%;
    transform: scale(1.05) rotate(2deg);
  }

  100% {
    border-radius: 66% 34% 50% 50% / 42% 58% 46% 54%;
    transform: scale(0.95) rotate(-2deg);
  }
}

@keyframes blob-morph-alt {
  0% {
    border-radius: 47% 53% 64% 36% / 58% 41% 59% 42%;
    transform: scale(1.02) rotate(-2deg);
  }

  33% {
    border-radius: 64% 36% 48% 52% / 38% 62% 44% 56%;
    transform: scale(0.97) rotate(3deg);
  }

  66% {
    border-radius: 52% 48% 40% 60% / 60% 40% 62% 38%;
    transform: scale(1.07) rotate(-4deg);
  }

  100% {
    border-radius: 59% 41% 55% 45% / 45% 55% 50% 50%;
    transform: scale(0.96) rotate(1deg);
  }
}

@keyframes blob-morph-side {
  0% {
    border-radius: 55% 45% 42% 58% / 40% 64% 36% 60%;
    transform: scale(1) rotate(1deg);
  }

  50% {
    border-radius: 38% 62% 58% 42% / 58% 42% 60% 40%;
    transform: scale(1.08) rotate(-3deg);
  }

  100% {
    border-radius: 62% 38% 46% 54% / 44% 56% 40% 60%;
    transform: scale(0.94) rotate(2deg);
  }
}

/* Gentle drift so they feel alive but stay “anchored” */
@keyframes blob-drift {
  0% {
    transform: translate(0, 0)
  }

  100% {
    transform: translate(1.2vw, -1.2vh)
  }
}

@keyframes blob-drift-alt {
  0% {
    transform: translate(0, 0)
  }

  100% {
    transform: translate(-1.4vw, 0.8vh)
  }
}

@keyframes blob-drift-side {
  0% {
    transform: translate(0, 0)
  }

  100% {
    transform: translate(1.0vw, 1.0vh)
  }
}

/* Responsive: keep them apart on smaller screens */
@media (max-width: 992px) {
  .blob {
    opacity: .12;
    width: clamp(44vmin, 56vw, 70vmin);
    height: clamp(44vmin, 56vw, 70vmin);
  }

  .blob--lime {
    left: -22vmin;
    top: 12vh;
  }

  .blob--pink {
    right: -24vmin;
    top: 12vh;
  }

  .blob--lav {
    right: 6vw;
    bottom: -20vmin;
  }
}

@media (max-width: 640px) {
  .blob {
    opacity: .10;
    width: clamp(60vmin, 70vw, 88vmin);
    height: clamp(60vmin, 70vw, 88vmin);
  }

  .blob--lav {
    display: none;
  }

  /* guarantee no overlap on very small screens */
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: none !important;
  }
}

/* ---- AMPED MOVEMENT OVERRIDE ---- */
/* Add class .amped to .ambient-blobs to enable */
.ambient-blobs.amped .blob {
  /* stronger overall visibility without getting shouty */
  opacity: .16;
  /* bigger shape + motion swings, slightly quicker so it's noticeable */
  animation-duration: 55s, 75s;
  /* morph, drift (per-blob overrides below) */
}

/* Per-blob timings (keeps them de-synced) */
.ambient-blobs.amped .blob--lime {
  animation-duration: 58s, 78s;
}

.ambient-blobs.amped .blob--pink {
  animation-duration: 52s, 72s;
}

.ambient-blobs.amped .blob--lav {
  animation-duration: 62s, 82s;
}

/* Replace keyframes with larger undulations and bigger drift */
@keyframes blob-morph-amped {
  0% {
    border-radius: 68% 32% 54% 46% / 36% 64% 40% 60%;
    transform: scale(0.95) rotate(-6deg);
  }

  20% {
    border-radius: 42% 58% 66% 34% / 58% 38% 62% 42%;
    transform: scale(1.10) rotate(6deg);
  }

  40% {
    border-radius: 60% 40% 44% 56% / 44% 66% 34% 56%;
    transform: scale(0.98) rotate(-8deg);
  }

  60% {
    border-radius: 38% 62% 60% 40% / 66% 34% 58% 42%;
    transform: scale(1.12) rotate(8deg);
  }

  80% {
    border-radius: 55% 45% 40% 60% / 40% 60% 44% 56%;
    transform: scale(0.96) rotate(-6deg);
  }

  100% {
    border-radius: 70% 30% 52% 48% / 36% 64% 46% 54%;
    transform: scale(1.08) rotate(6deg);
  }
}

@keyframes blob-drift-amped {

  /* bigger edge-to-edge sway; stays “anchored” to its side */
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(4.5vw, -3.5vh);
  }

  /* tune amplitude here */
}

@keyframes blob-drift-amped-rev {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-5.0vw, 3.0vh);
  }
}

@keyframes blob-drift-amped-side {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(4.0vw, 4.0vh);
  }
}

/* Attach the amped keyframes */
.ambient-blobs.amped .blob {
  animation-name: blob-morph-amped, blob-drift-amped;
}

.ambient-blobs.amped .blob--pink {
  animation-name: blob-morph-amped, blob-drift-amped-rev;
}

.ambient-blobs.amped .blob--lav {
  animation-name: blob-morph-amped, blob-drift-amped-side;
}