/* Alpcot status page
 * Brand values from alpcot-cms globals.css, HeroGradient.tsx and @alpcot/design-tokens. */

:root {
  --brand: #260666;
  --brand-deep: #120a30;
  --purple-100: #d1cffa;
  --purple-200: #afa9f7;
  --purple-400: #7749ff;
  --purple-500: #6000e6;
  --marine-200: #68e3a7;
  --marine-400: #00a36a;

  --paper: #f6f5fc;
  --surface: #ffffff;
  --ink: #2a2440;
  --ink-2: #5d5775;
  --ink-3: #928ca8;
  --line: #ebe9f5;

  --success: #0ea22e; --success-soft: #e4fbe6; --success-ink: #0b7a24;
  --warning: #ffc933; --warning-soft: #fff5d6; --warning-ink: #8a6400;
  --danger:  #f7223a; --danger-soft:  #ffe9ec; --danger-ink:  #d1142b;
  --info:    #4679f9; --info-soft:    #e8eefe; --info-ink:    #2550c9;

  --font: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-label: 0.8125rem;
  --fs-h2: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-hero: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  --fs-summary: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --fs-title: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);

  --r-lg: 0.875rem;
  --r-xl: 1.25rem;
  --shadow-sm: 0 1px 2px rgba(38, 6, 102, 0.05), 0 2px 8px -2px rgba(38, 6, 102, 0.06);
  --shadow-md: 0 1px 2px rgba(38, 6, 102, 0.05), 0 10px 30px -12px rgba(38, 6, 102, 0.18);
  --shadow-lg: 0 2px 4px rgba(38, 6, 102, 0.05), 0 24px 60px -20px rgba(38, 6, 102, 0.28);

  --wrap: 62rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--paper);
  background-image:
    radial-gradient(60rem 30rem at 10% 0%, rgba(161, 183, 248, 0.22), transparent 60%),
    radial-gradient(50rem 28rem at 95% 10%, rgba(200, 249, 230, 0.35), transparent 60%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font); font-weight: 500; font-size: var(--fs-md); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--purple-500); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; color: var(--brand-deep); letter-spacing: -0.015em; }
time { font-variant-numeric: tabular-nums; }
small { display: block; font-size: 0.8125rem; color: var(--ink-3); font-weight: 500; margin-top: 0.1rem; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.main { flex: 1; padding-bottom: clamp(3rem, 8vw, 5rem); position: relative; z-index: 1; }

.card {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* ---------- hero with CMS gradient blobs ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  color: #f0f3ff;
  background: #1b1047;
  padding-bottom: 5.5rem; /* room for the floating summary card */
}
.hero__blobs { position: absolute; inset: 0; z-index: -1; container-type: size; }
.hero__blobs i {
  position: absolute; display: block; border-radius: 50%;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  left: calc(var(--x) - var(--r)); top: calc(var(--y) - var(--r));
  background: radial-gradient(closest-side, var(--c1), var(--c2) 100%);
  animation: ondulate 12s ease-in-out infinite;
}
.hero__blobs .b1 { --x: 72cqw; --y: 50cqh; --r: 26rem; --c1: rgba(96, 0, 230, 1); --c2: rgba(96, 0, 230, 0); opacity: 0.55; }
.hero__blobs .b2 { --x: 66cqw; --y: 42cqh; --r: 24rem; --c1: rgba(67, 9, 164, 1); --c2: rgba(67, 9, 164, 0); opacity: 0.8; mix-blend-mode: hard-light; animation-delay: -1s; }
.hero__blobs .b3 { --x: 80cqw; --y: 25cqh; --r: 20rem; --c1: rgba(104, 227, 167, 1); --c2: rgba(104, 227, 167, 0); mix-blend-mode: color; animation-delay: -5s; }
.hero--danger  .hero__blobs .b3 { --c1: rgba(249, 94, 160, 1); --c2: rgba(249, 94, 160, 0); opacity: 0.6; } /* magenta-300, faint */
.hero--warning .hero__blobs .b3 { --c1: rgba(255, 166, 102, 1); --c2: rgba(255, 166, 102, 0); opacity: 0.85; } /* orange-400 */
.hero--info    .hero__blobs .b3 { --c1: rgba(70, 121, 249, 1);  --c2: rgba(70, 121, 249, 0); }   /* blue-300 */
.hero__blobs .b4 { --x: 15cqw; --y: 110cqh; --r: 22rem; --c1: rgba(119, 73, 255, 0.9); --c2: rgba(119, 73, 255, 0); opacity: 0.5; animation-delay: -8s; }
@keyframes ondulate {
  0%, 100% { transform: translate3d(3cqw, 0, 0); }
  25% { transform: translate3d(0, -4cqh, 0); }
  50% { transform: translate3d(-3cqw, 2cqh, 0); }
  75% { transform: translate3d(1cqw, 4cqh, 0); }
}
.hero__grain {
  position: absolute; inset: 0; z-index: -1; opacity: 0.18; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__bar { display: flex; align-items: center; justify-content: space-between; padding-block: 1.5rem; }
.hero__logo { display: inline-flex; line-height: 0; }
.hero__logo img { height: 2.125rem; width: auto; }
.hero__eyebrow {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #f0f3ff; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  padding: 0.35rem 0.8rem; border-radius: 999px; backdrop-filter: blur(6px);
}
.hero__intro { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem); }
.hero__intro--sub { padding-block: 0.25rem 1.5rem; }
.hero__title { font-size: var(--fs-hero); font-weight: 800; color: #fff; letter-spacing: -0.02em; text-wrap: balance; max-width: 18ch; }
.hero__lead { margin: 0.9rem 0 0; color: rgba(240, 243, 255, 0.78); font-size: var(--fs-md); max-width: 36rem; }
.crumbs { margin: 0; font-size: var(--fs-sm); }
.crumbs a { color: rgba(240, 243, 255, 0.85); }
.crumbs a::before { content: '← '; }
.crumbs a:hover { color: #fff; }

/* ---------- floating summary ---------- */
.summary {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem 1.25rem;
  margin-top: -4.5rem; padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 48rem) { .summary { grid-template-columns: auto 1fr auto; } }
.summary__icon {
  --c: var(--success); --soft: var(--success-soft);
  display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%;
  background: var(--soft); color: var(--c);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--soft) 55%, white);
}
.summary__icon svg { width: 1.75rem; height: 1.75rem; }
.summary--warning .summary__icon { --c: var(--warning-ink); --soft: var(--warning-soft); }
.summary--danger  .summary__icon { --c: var(--danger-ink);  --soft: var(--danger-soft); }
.summary--info    .summary__icon { --c: var(--info-ink);    --soft: var(--info-soft); }
.summary--danger .summary__icon, .summary--warning .summary__icon { animation: breathe 2.4s var(--ease) infinite; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--soft) 55%, white); }
  50% { box-shadow: 0 0 0 11px color-mix(in oklab, var(--c) 10%, white); }
}
.summary__title { font-size: var(--fs-summary); font-weight: 800; }
.summary__meta { margin: 0.25rem 0 0; color: var(--ink-3); font-size: var(--fs-sm); }
.summary__side { grid-column: 1 / -1; margin-top: 0.5rem; }
.summary__side .summary__link { width: 100%; justify-content: center; padding-block: 0.85rem; }
.summary__side .summary__count { display: block; text-align: center; padding-block: 0.7rem; }
@media (min-width: 48rem) {
  .summary__side { grid-column: auto; margin-top: 0; }
  .summary__side .summary__link { width: auto; padding-block: 0.65rem; }
  .summary__side .summary__count { display: inline-block; padding-block: 0.5rem; }
}
.summary__count {
  display: inline-block; padding: 0.5rem 0.9rem; border-radius: 999px;
  background: var(--paper); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 700;
}
.summary__link {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.1rem; border-radius: 999px;
  background: var(--purple-500); color: #fff; font-weight: 700; font-size: var(--fs-sm);
  box-shadow: 0 8px 20px -8px rgba(96, 0, 230, 0.6);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.summary__link:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(96, 0, 230, 0.7); }
.summary__link span { transition: transform 0.25s var(--ease); }
.summary__link:hover span { transform: translateX(3px); }

/* ---------- sections ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: clamp(2rem, 5vw, 3rem) 0 1rem; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head__hint { font-size: var(--fs-label); color: var(--ink-3); font-weight: 600; }
.notice { margin-top: 1.25rem; padding: 1.1rem 1.5rem; box-shadow: var(--shadow-sm); border-left: 4px solid var(--purple-400); }

.pill {
  display: inline-flex; align-items: center; gap: 0.45rem; border-radius: 999px; padding: 0.25rem 0.75rem;
  font-size: var(--fs-label); font-weight: 700; white-space: nowrap;
}
.pill::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.pill--success { color: var(--success-ink); background: var(--success-soft); }
.pill--warning { color: var(--warning-ink); background: var(--warning-soft); }
.pill--danger  { color: var(--danger-ink);  background: var(--danger-soft); }
.pill--info    { color: var(--info-ink);    background: var(--info-soft); }

/* ---------- incident ---------- */
.incident { overflow: hidden; }
.incident + .incident { margin-top: 1.25rem; }
.incident__head {
  --tint: var(--info-soft);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem) 1.25rem;
  background: linear-gradient(180deg, color-mix(in oklab, var(--tint) 70%, white) 0%, white 100%);
  border-bottom: 1px solid var(--line);
}
.incident--warning .incident__head { --tint: var(--warning-soft); }
.incident--danger  .incident__head { --tint: var(--danger-soft); }
.incident--success .incident__head { --tint: var(--success-soft); }
.incident__labels { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.incident__title { font-size: var(--fs-title); max-width: 26ch; text-wrap: balance; }
.incident__title a { color: inherit; }
.facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.75rem; margin: 0.9rem 0 0; font-size: var(--fs-sm); }
.facts div { display: flex; gap: 0.4rem; }
.facts dt { color: var(--ink-3); white-space: nowrap; }
.facts dt::after { content: ':'; }
.facts dd { margin: 0; color: var(--ink-2); font-weight: 700; }
.incident__body { padding: 1.25rem clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.75rem); }
.incident__intro { margin-bottom: 1.25rem; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { position: relative; padding: 0 0 1.5rem 2rem; }
.timeline__item::before { content: ''; position: absolute; left: 0.5rem; top: 1.25rem; bottom: -0.25rem; width: 2px; background: var(--line); border-radius: 2px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }
.timeline__dot {
  position: absolute; left: 0; top: 0.3rem; width: 1.0625rem; height: 1.0625rem; border-radius: 50%;
  background: white; border: 2px solid var(--purple-200);
}
.timeline__item.is-latest .timeline__dot { border-color: var(--purple-400); background: var(--purple-400); box-shadow: 0 0 0 5px color-mix(in oklab, var(--purple-400) 14%, white); }
.timeline__when { font-size: var(--fs-sm); font-weight: 800; color: var(--brand-deep); }
.timeline__body { margin-top: 0.3rem; max-width: 62ch; color: var(--ink-2); }

/* ---------- services ---------- */
.services__list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.service {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 5rem; padding: 0.75rem clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid var(--line);
  transition: background 0.2s var(--ease);
}
.service:first-child { border-top: 0; }
.service:hover { background: color-mix(in oklab, var(--paper) 60%, white); }
.service__name { font-weight: 700; color: var(--brand-deep); min-width: 0; }
.service .pill { flex: none; }

/* ---------- history ---------- */
.history__list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.history__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.4rem 1.25rem; padding: 1rem clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid var(--line); }
.history__row:first-child { border-top: 0; }
@media (min-width: 48rem) { .history__row { grid-template-columns: 7.5rem 1fr auto; } }
.history__row time { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 700; }
.history__text { grid-column: 1 / -1; }
@media (min-width: 48rem) { .history__text { grid-column: auto; } }
.history__text a { color: var(--brand-deep); font-weight: 700; }
.history__meta { display: block; font-size: var(--fs-sm); color: var(--ink-3); }
.history__empty { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.history__spark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--success-soft); color: var(--success-ink); flex: none; }
.history__spark svg { width: 1.25rem; height: 1.25rem; }

.single > .card { margin-top: -4.5rem; box-shadow: var(--shadow-lg); }

/* ---------- 404 ---------- */
.notfound { padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem); }
.notfound__code { display: block; font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.1em; color: var(--purple-400); margin-bottom: 0.75rem; }
.notfound__title { font-size: var(--fs-title); }
.notfound__text { margin: 0.75rem 0 1.5rem; color: var(--ink-2); max-width: 46ch; }

/* ---------- prose ---------- */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol { margin: 0.6rem 0; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose strong { color: var(--brand-deep); font-weight: 700; }
.prose code { font-size: 0.9em; background: var(--paper); padding: 0.1em 0.35em; border-radius: 0.3rem; }

/* ---------- footer ---------- */
.footer { background: var(--brand); color: #f0f3ff; padding-block: clamp(2rem, 5vw, 3rem); font-size: var(--fs-sm); }
.footer__grid { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1fr auto; align-items: start; } .footer__copy { grid-column: 1 / -1; } }
.footer__note { margin: 0; max-width: 42ch; color: var(--purple-200); }
.footer__meta { display: flex; flex-direction: column; gap: 0.4rem; }
.footer a { color: #fff; font-weight: 600; }
.footer__copy { margin: 0; padding-top: 1.25rem; border-top: 1px solid rgba(240, 243, 255, 0.15); color: var(--purple-200); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__intro > *, .summary, .main > section { animation: rise 0.8s var(--ease) both; }
  .hero__intro > :nth-child(2) { animation-delay: 0.06s; }
  .summary { animation-delay: 0.15s; }
  .main > section:nth-of-type(2) { animation-delay: 0.25s; }
  .main > section:nth-of-type(3) { animation-delay: 0.32s; }
  .main > section:nth-of-type(4) { animation-delay: 0.4s; }
  @keyframes rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .hero__blobs i, .summary__icon { animation: none; } }