/*
Theme Name: ÞÓRR (Comic)
Theme URI: https://example.com/thor-comic
Author: site-to-framework
Description: Comic-book microsite for Thor — paper-blue ground, electric blue and lightning yellow, Bangers/Baloo 2, ink outlines, halftone dots, and a scroll-driven lightning seam-flash. Converted from the original Next.js site.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: thor-comic
*/

/* ── Design tokens (from source theme.css / brand.json / core colors) ─────── */
:root {
  --background: #f4f8ff;
  --card: #f4f8ff;
  --foreground: #131a33;
  --muted-foreground: color-mix(in oklab, #131a33 76%, transparent);
  --border: color-mix(in oklab, #131a33 20%, transparent);
  --primary: #1e63e9;
  --primary-foreground: #fafafa;
  --brand-secondary: #ffc61a;
  --accent: #ffe9a3;
  --accent-foreground: #171717;
  --brand-muted: #d1dffa;
  --well: color-mix(in oklab, var(--background) 88%, var(--foreground));
  --ring: #1e63e9;
  --radius: 1.5rem;
  --font-heading: "Bangers", system-ui, sans-serif;
  --font-body: "Baloo 2", system-ui, sans-serif;

  /* Heading type scale (brutal) */
  --heading-xl: 3.5rem;  --heading-xl-lh: 0.92;
  --heading-lg: 2.75rem; --heading-lg-lh: 0.95;
  --heading-md: 2rem;    --heading-md-lh: 1.05;
  --heading-sm: 1.5rem;  --heading-sm-lh: 1.2;
}
@media (min-width: 48rem) {
  :root {
    --heading-xl: 8.5rem; --heading-xl-lh: 0.88;
    --heading-lg: 5rem;   --heading-lg-lh: 0.92;
    --heading-md: 3rem;   --heading-md-lh: 1;
    --heading-sm: 2rem;   --heading-sm-lh: 1.1;
  }
}

/* ── Base reset (source assumes Tailwind preflight) ───────────────────────── */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--border); }
html { overflow-x: clip; font-family: var(--font-body); }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6, p, dl, dd, figure, blockquote, ol, ul { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

/* WordPress flow-layout margin injections — neutralize all three scopes. */
body .wp-site-blocks > * { margin-block: 0; }
body .wp-block-group > * { margin-block: 0; }
body .wp-block-post-content > * { margin-block: 0; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100svh; }
main.wp-block-group { flex: 1; }

::selection { background: var(--brand-secondary); color: var(--foreground); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* ── Header / footer chrome ───────────────────────────────────────────────── */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.site-header {
  width: 100%;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 95%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header-inner {
  margin-inline: auto; width: 100%; max-width: 80rem;
  padding: 1rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-logo {
  display: flex; align-items: center; gap: 0.75rem; text-decoration: none;
  font-family: var(--font-heading); font-size: 1.125rem; line-height: 1.75rem;
  font-weight: 600; letter-spacing: -0.025em; color: var(--foreground);
}
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.site-nav a {
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: var(--muted-foreground); text-decoration: none; transition: color 150ms;
}
.site-nav a:hover { color: var(--foreground); }

.site-footer { width: 100%; border-top: 1px solid var(--border); }
.site-footer-inner {
  margin-inline: auto; width: 100%; max-width: 80rem;
  padding: 2rem 1rem;
  font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground);
}

/* ── Sections + containers ────────────────────────────────────────────────── */
.sec { width: 100%; padding-block: 5rem; }
@media (min-width: 48rem) { .sec { padding-block: 8rem; } }

.container        { margin-inline: auto; width: 100%; max-width: 80rem; padding-inline: 1rem; }
.container-narrow { margin-inline: auto; width: 100%; max-width: 48rem; padding-inline: 1rem; }
.container-wide   { margin-inline: auto; width: 100%; max-width: 96rem; padding-inline: 1rem; }
.container-full   { margin-inline: auto; width: 100%; max-width: none; }

@media (min-width: 40rem) {
  .site-header-inner, .site-footer-inner, .container, .container-narrow, .container-wide { padding-inline: 1.5rem; }
}
@media (min-width: 64rem) {
  .site-header-inner, .site-footer-inner, .container, .container-narrow, .container-wide { padding-inline: 2rem; }
}

body .section-header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
@media (min-width: 48rem) { body .section-header { margin-bottom: 3.5rem; } }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; width: fit-content; min-height: 1.25rem; max-width: 100%;
  align-items: center; justify-content: center; gap: 0.25rem; overflow: hidden;
  border-radius: calc(var(--radius) * 1.4);
  border: 2px solid var(--foreground);
  background: var(--accent); color: var(--accent-foreground);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem; line-height: 1rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  transform: rotate(-2deg);
  text-wrap: balance;
}

.heading {
  font-family: var(--font-heading); font-weight: 700;
  letter-spacing: -0.025em; text-wrap: balance; color: var(--foreground);
}
h1.heading, h2.heading { letter-spacing: 0.02em; text-shadow: 3px 3px 0 var(--brand-secondary); }
.surface-brand h2.heading { text-shadow: 3px 3px 0 color-mix(in oklab, black 35%, transparent); }
.heading-xl { font-size: var(--heading-xl); line-height: var(--heading-xl-lh); }
.heading-lg { font-size: var(--heading-lg); line-height: var(--heading-lg-lh); }

.prose { color: var(--muted-foreground); font-size: 1rem; line-height: 1.5rem; max-width: 65ch; }
.prose-lead { color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.75rem; max-width: 42rem; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-group { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-group.is-center { justify-content: center; }

.btn .wp-block-button__link,
a.btn-link, button.btn-link {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  gap: 0.375rem; height: 2.25rem; padding-inline: 0.625rem;
  border-radius: var(--radius);
  border: 3px solid var(--foreground);
  box-shadow: 4px 4px 0 var(--foreground);
  background: var(--primary); color: var(--primary-foreground);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none;
}
.btn.is-outline .wp-block-button__link,
a.btn-link.is-outline {
  background: var(--background); color: var(--foreground);
}
.btn.is-outline .wp-block-button__link:hover,
a.btn-link.is-outline:hover { background: var(--brand-muted); }
.btn-h8 .wp-block-button__link, button.btn-link.btn-h8 { height: 2rem; width: fit-content; }
a.btn-link.btn-h7 {
  height: 1.75rem; gap: 0.25rem; padding-inline: 0.625rem;
  font-size: 0.8rem; border-radius: min(calc(var(--radius) * 0.8), 12px);
}
.btn .wp-block-button__link:focus-visible, a.btn-link:focus-visible, button.btn-link:focus-visible {
  outline: none; border-color: var(--ring);
  box-shadow: 4px 4px 0 var(--foreground), 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}

/* ── Surfaces ─────────────────────────────────────────────────────────────── */
.surface-brand {
  background: var(--primary);
  --foreground: #ffffff;
  --muted-foreground: color-mix(in oklab, white 92%, transparent);
  --border: color-mix(in oklab, white 24%, transparent);
  color: var(--foreground);
}
.surface-muted {
  background: var(--brand-muted);
  --well: color-mix(in oklab, var(--brand-muted) 88%, var(--foreground));
}

.halftone {
  background-image: radial-gradient(
    circle,
    color-mix(in oklab, var(--foreground) 14%, transparent) 1.5px,
    transparent 1.6px
  );
  background-size: 14px 14px;
}

/* ── Storm hero ───────────────────────────────────────────────────────────── */
.sec-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.sec-hero > .container { position: relative; }
body .storm-hero-burst,
body .wp-block-group > .storm-hero-burst {
  position: absolute; inset: 0; margin: auto; margin-block: auto;
  width: min(52rem, 95vw); height: min(52rem, 95vw);
  pointer-events: none;
}
.storm-hero {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center;
}
.storm-hero-sticker {
  display: inline-block;
  background: var(--brand-secondary); color: var(--foreground);
  border: 3px solid var(--foreground);
  box-shadow: 5px 5px 0 var(--foreground);
  border-radius: calc(var(--radius) * 1.2);
  padding: 0.35rem 1.1rem;
  font-size: 1.5rem; line-height: 2rem;
  transform: rotate(3deg);
  font-family: var(--font-heading);
}
body .storm-hero-bolt,
body .wp-block-group > .storm-hero-bolt { margin-top: 2rem; margin-block-start: 2rem; height: 1.5rem; width: 100%; max-width: 36rem; }

/* ── Ledger (particulars) ─────────────────────────────────────────────────── */
.ledger { display: flex; flex-direction: column; gap: 1.5rem; }
.field-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.field-list-item {
  display: grid; grid-template-columns: 1fr; column-gap: 2rem; row-gap: 0.25rem;
  border-top: 1px solid var(--border); padding-block: 0.75rem;
}
.field-list-item:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 40rem) {
  .field-list-item { grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); }
}
.field-list-label { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.field-list-value { color: var(--foreground); }

/* ── Stat band ────────────────────────────────────────────────────────────── */
.tilt-band { transform: rotate(-1deg) scale(1.02); }
.stat-row { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: flex; flex-direction: column; gap: 0.25rem; }
.stat-label { order: 2; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.stat-value {
  order: 1; font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.025em;
  font-size: 1.875rem; line-height: 2.25rem; color: var(--foreground);
}
@media (min-width: 48rem) { .stat-value { font-size: 2.25rem; line-height: 2.5rem; } }

/* ── Capabilities (icon tiles) ────────────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 48rem) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
@media (min-width: 64rem) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.icon-tile {
  display: flex; flex-direction: column; gap: 0.75rem; align-items: center; text-align: center;
  background: var(--card);
  border: 3px solid var(--foreground);
  border-radius: calc(var(--radius) * 1.4);
  box-shadow: 6px 6px 0 var(--foreground);
  padding: 1.5rem;
}
.icon-tile-chip {
  display: flex; width: 3rem; height: 3rem; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: var(--radius); background: var(--well);
}
.icon-tile-chip svg { width: 1.5rem; height: 1.5rem; color: var(--brand-secondary); }
.icon-tile-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.icon-tile-desc { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }

/* ── Saga (the record) ────────────────────────────────────────────────────── */
.saga { display: flex; flex-direction: column; gap: 3rem; }
.saga-header { display: flex; max-width: 42rem; flex-direction: column; gap: 1rem; }
.saga-list { display: flex; flex-direction: column; gap: 2rem; list-style: none; margin: 0; padding: 0; counter-reset: saga; }
.saga-entry {
  display: grid; gap: 1.5rem; padding: 1.5rem;
  background: var(--card);
  border: 3px solid var(--foreground);
  border-radius: calc(var(--radius) * 1.4);
  box-shadow: 6px 6px 0 var(--foreground);
  counter-increment: saga;
}
@media (min-width: 64rem) { .saga-entry { grid-template-columns: 8rem minmax(0, 1fr); } }
.saga-entry:nth-child(odd) { transform: rotate(-0.7deg); }
.saga-entry:nth-child(even) { transform: rotate(0.6deg); }
.saga-index {
  font-family: var(--font-heading); font-size: 3rem; line-height: 1;
  font-weight: 700; color: var(--primary);
}
.saga-index::before { content: counter(saga, decimal-leading-zero); }
.saga-body { display: flex; flex-direction: column; gap: 1rem; }
.saga-title { font-family: var(--font-heading); font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.saga-meta { display: flex; flex-wrap: wrap; column-gap: 2.5rem; row-gap: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; }
.saga-meta-pair { display: flex; gap: 0.5rem; }
.saga-meta-pair dt { color: var(--muted-foreground); }
.saga-meta-pair dd { text-transform: uppercase; letter-spacing: 0.025em; }
.saga-prose { max-width: 65ch; color: var(--muted-foreground); }
.saga-outcome { max-width: 65ch; }
.saga-outcome-label { font-family: var(--font-heading); font-weight: 700; color: var(--primary); }

/* ── Boom band ────────────────────────────────────────────────────────────── */
.sec.boom-band {
  background-color: var(--brand-secondary);
  border-top: 4px solid var(--foreground);
  border-bottom: 4px solid var(--foreground);
}
.boom-band-inner { display: flex; align-items: center; justify-content: center; overflow: hidden; padding-inline: 1rem; }
.boom-band-word {
  font-size: clamp(4rem, 14vw, 11rem);
  line-height: 1;
  color: var(--foreground);
  text-shadow: 5px 5px 0 var(--background), 8px 8px 0 var(--foreground);
  transform: rotate(-3deg);
  font-family: var(--font-heading);
}

/* ── Testimonials (quotes) ────────────────────────────────────────────────── */
.testimonials { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 48rem) { .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote {
  position: relative;
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--card);
  border: 3px solid var(--foreground);
  border-radius: calc(var(--radius) * 1.4);
  box-shadow: 6px 6px 0 var(--foreground);
  padding: 1.5rem;
}
.quote::after {
  content: ""; position: absolute; bottom: -16px; left: 2.25rem;
  width: 0; height: 0;
  border-left: 16px solid var(--foreground);
  border-bottom: 16px solid transparent;
}
.quote::before {
  content: ""; position: absolute; bottom: -9px; left: calc(2.25rem + 4px);
  width: 0; height: 0;
  border-left: 10px solid var(--card);
  border-bottom: 10px solid transparent;
  z-index: 1;
}
.quote blockquote {
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 500;
  text-wrap: balance; color: var(--foreground);
}
@media (min-width: 48rem) { .quote blockquote { font-size: 1.5rem; line-height: 2rem; } }
.quote figcaption { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.quote figcaption .quote-name { font-weight: 500; color: var(--foreground); }

/* ── FAQ (objections) ─────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 48rem) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
.faq-item { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-q {
  font-family: var(--font-heading); font-size: 1.125rem; line-height: 1.75rem;
  font-weight: 700; color: var(--foreground);
}
.faq-a { color: var(--muted-foreground); }

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.cta-band { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; }
.cta-band-body { display: flex; max-width: 42rem; flex-direction: column; gap: 1.5rem; margin-inline: auto; align-items: center; }

/* ── Contact (summons) ────────────────────────────────────────────────────── */
.contact-block { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 64rem) { .contact-block { flex-direction: row; align-items: flex-start; gap: 4rem; } }
.contact-copy { display: flex; flex: 1; flex-direction: column; gap: 1.5rem; }
.contact-form { display: flex; flex: 1; flex-direction: column; gap: 1rem; }
.contact-form .form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-form label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; line-height: 1; font-weight: 500; user-select: none;
}
.contact-form input, .contact-form textarea {
  width: 100%; min-width: 0;
  border-radius: var(--radius);
  border: 3px solid var(--foreground);
  background: var(--card);
  padding: 0.25rem 0.625rem;
  font-size: 1rem; transition: border-color 150ms;
  outline: none;
}
.contact-form input { height: 2rem; }
.contact-form textarea { min-height: 4rem; padding-block: 0.5rem; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted-foreground); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
@media (min-width: 48rem) {
  .contact-form input, .contact-form textarea { font-size: 0.875rem; }
}

/* ── Editor canvas only: InnerBlocks wraps a parent block's children in a
      layout div, so the grid/flex must re-apply there. These block-editor
      classes never appear on the front end. ─────────────────────────────────── */
.feature-grid:has(> .block-editor-inner-blocks),
.testimonials:has(> .block-editor-inner-blocks),
.faq:has(> .block-editor-inner-blocks),
.stat-row:has(> .block-editor-inner-blocks),
.field-list:has(> .block-editor-inner-blocks),
.saga-list:has(> .block-editor-inner-blocks) { display: block; }
.feature-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 48rem) {
  .feature-grid > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
@media (min-width: 64rem) {
  .feature-grid > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.testimonials > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 48rem) {
  .testimonials > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .testimonials > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.faq > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 48rem) {
  .faq > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
.stat-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40rem) {
  .stat-row > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.saga-list > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: flex; flex-direction: column; gap: 2rem; counter-reset: saga;
}
.block-editor-block-list__layout .saga-entry,
.block-editor-block-list__layout .quote,
.block-editor-block-list__layout .icon-tile,
.block-editor-block-list__layout .stat,
.block-editor-block-list__layout .field-list-item,
.block-editor-block-list__layout .faq-item { margin-block: 0; }

/* ── Motion — the lightning seam-flash + button hops (from source skin.css) ─ */
@media (prefers-reduced-motion: no-preference) {
  .btn .wp-block-button__link, a.btn-link, button.btn-link {
    transition: transform 120ms ease, box-shadow 120ms ease;
  }
  .btn .wp-block-button__link:hover, a.btn-link:hover, button.btn-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--foreground);
  }

  @supports (animation-timeline: view()) {
    .sec {
      position: relative;
      view-timeline: --seam;
    }
    .sec::before,
    .sec::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 30;
      pointer-events: none;
      opacity: 0;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --seam;
      animation-range: entry 0% entry 100%;
    }
    .sec::before {
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E%3Cpolygon points='68,0 18,112 52,112 34,200 104,74 64,74 88,0' fill='%23ffc61a' stroke='%23131a33' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E")
          center / auto 82% no-repeat,
        radial-gradient(ellipse at center, rgb(10 16 48 / 0.55) 0%, rgb(10 16 48 / 0.92) 100%);
      animation-name: lightning-bolt;
    }
    .sec::after {
      background: linear-gradient(180deg, #ffffff 0%, #dcebff 100%);
      mix-blend-mode: plus-lighter;
      animation-name: lightning-strike;
    }
    @keyframes lightning-bolt {
      0%   { opacity: 0; }
      40%  { opacity: 0; }
      46%  { opacity: 0.35; }
      52%  { opacity: 0.9; }
      58%  { opacity: 0.1; }
      65%  { opacity: 0.55; }
      76%  { opacity: 0; }
      100% { opacity: 0; }
    }
    @keyframes lightning-strike {
      0%   { opacity: 0; }
      50%  { opacity: 0; }
      55%  { opacity: 1; }
      62%  { opacity: 0.15; }
      68%  { opacity: 0.7; }
      80%  { opacity: 0.05; }
      100% { opacity: 0; }
    }
  }
}