/* ==========================================================================
   Bliss — thermal layer components
   Scoped, reusable pieces used by the landing page:
     · <thermal-field variant="hero|card|cta">   (structure built by JS)
     · .thermal-btn                              (primary CTA)
     · .btn-ghost                                (secondary CTA)
   Tokens are supplied by the page scope (.lp in landing.css) with fallbacks.
   ========================================================================== */

/* ---------------------------------------------------------------- field -- */

thermal-field {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  opacity: var(--tf-opacity, 1);
  transition: opacity 0.6s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
  background: radial-gradient(
    ellipse 58% 58% at var(--tf-ox, 76%) var(--tf-oy, 55%),
    rgba(217, 106, 16, 0.12),
    transparent 72%
  );
}

thermal-field[data-built="true"] {
  background: none;
}

.tf {
  position: absolute;
  inset: 0;
  opacity: var(--tf-intensity, 1);
  transform: scale(var(--tf-size, 1));
  transform-origin: var(--tf-ox, 76%) var(--tf-oy, 55%);
}

.tf__parallax {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--tf-px, 0px), var(--tf-py, 0px), 0);
}

/* Promote only the hero group that receives pointer parallax. */
thermal-field[variant="hero"] .tf__parallax {
  will-change: transform;
}

.tf__layer {
  position: absolute;
  inset: -12%;
  z-index: 2;
}

.tf__blob {
  position: absolute;
  left: calc(var(--x) - var(--w) / 2);
  top: calc(var(--y) - var(--h) / 2);
  width: var(--w);
  height: var(--h);
  border-radius: var(--br, 50%);
  background: var(--c);
  opacity: var(--o, 1);
  transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg));
  animation: tf-drift var(--dur, 32s) ease-in-out var(--delay, 0s) infinite alternate;
}

/* Card fields are static; only their opacity changes on hover. */
thermal-field[variant="card"] .tf__blob {
  animation: none;
}

/* Fields outside the viewport stop animating entirely. */
thermal-field:not([data-inview]) .tf__blob {
  animation-play-state: paused;
}

/* Blur passes: cold outer mass -> hot inner core, plus a sharper shoulder. */
thermal-field[variant="hero"] .tf__layer--cold {
  filter: blur(112px) saturate(1.1);
}
thermal-field[variant="hero"] .tf__layer--mid {
  filter: blur(62px) saturate(1.15);
}
thermal-field[variant="hero"] .tf__layer--hot {
  filter: blur(42px) saturate(1.2);
}
thermal-field[variant="hero"] .tf__layer--shoulder {
  filter: blur(15px) saturate(1.15);
}

thermal-field[variant="card"] .tf__layer--cold {
  filter: blur(56px) saturate(1.1);
}
thermal-field[variant="card"] .tf__layer--mid {
  filter: blur(34px) saturate(1.16);
}
thermal-field[variant="card"] .tf__layer--hot {
  filter: blur(24px) saturate(1.2);
}
thermal-field[variant="card"] .tf__layer--shoulder {
  filter: blur(10px) saturate(1.15);
}

thermal-field[variant="cta"] .tf__layer--cold {
  filter: blur(124px) saturate(1.08);
}
thermal-field[variant="cta"] .tf__layer--mid {
  filter: blur(70px) saturate(1.15);
}
thermal-field[variant="cta"] .tf__layer--hot {
  filter: blur(48px) saturate(1.2);
}
thermal-field[variant="cta"] .tf__layer--shoulder {
  filter: blur(18px) saturate(1.15);
}

/* Signature halftone fringe, cheap version: one static dot layer masked to
   the outer heat band. No duplicated blur passes, filters or blend modes. */
.tf__halftone {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--tf-halftone-opacity, 0.35);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0 32%, transparent 36%);
  background-size: var(--tf-dot, 10px) var(--tf-dot, 10px);
  -webkit-mask-image: radial-gradient(
    ellipse 62% 62% at var(--tf-ox, 76%) var(--tf-oy, 55%),
    transparent 0 46%,
    #000 55%,
    #000 66%,
    transparent 84%
  );
  mask-image: radial-gradient(
    ellipse 62% 62% at var(--tf-ox, 76%) var(--tf-oy, 55%),
    transparent 0 46%,
    #000 55%,
    #000 66%,
    transparent 84%
  );
}

.tf__halftone--b {
  --tf-halftone-opacity: 0.22;
  --tf-dot: 6px;
  background-position: 3px 3px;
}

@keyframes tf-drift {
  from {
    transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)) scale(1);
  }
  to {
    transform: translate3d(var(--dx, 2%), var(--dy, -2%), 0)
      rotate(calc(var(--rot, 0deg) + var(--rrot, 5deg))) scale(var(--ds, 1.06));
  }
}

/* --------------------------------------------------------- button (CTA) -- */

.thermal-btn {
  --h: 56px;
  --dur: 5.1s;
  --spectrum: linear-gradient(
    to bottom,
    #0012d2 0%,
    #0a8ee0 10%,
    #16c2d4 17%,
    #e2c428 43%,
    #d96a10 52%,
    #b81806 60%,
    #2e0034 69%,
    #00008c 80%,
    #0012d2 100%
  );
  --face-cyc: calc(var(--h) * 3.2);
  --bloom-cyc: calc(var(--h) * 3);
  --rim-cyc: calc(var(--h) * 2.6);
  --bloom-w: calc(var(--h) * 0.12);
  --bloom-blur: calc(var(--h) * 0.09);
  --rim-w: max(2px, calc(var(--h) * 0.04));

  position: relative;
  isolation: isolate;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h);
  padding: 0 2.2em;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
  background-color: #000;
  --cyc: var(--face-cyc);
  --off: 0px;
  background-image: var(--spectrum);
  background-size: 100% var(--cyc);
  background-repeat: repeat-y;
  background-position: 0 var(--off);
  animation: thermal-flow var(--dur) linear infinite;
}

/* Darkens the animated face just enough for AA text contrast while the
   bloom ring and the bright rim keep the full thermal signal. */
.thermal-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(0, 0, 12, 0.46);
  pointer-events: none;
}

.thermal-btn::after,
.thermal-btn__bloom::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--spectrum);
  background-size: 100% var(--cyc);
  background-repeat: repeat-y;
  background-position: 0 var(--off);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: thermal-flow var(--dur) linear infinite;
}

.thermal-btn::after {
  z-index: 2;
  pointer-events: none;
  padding: var(--rim-w);
  --cyc: var(--rim-cyc);
  --off: calc(var(--rim-cyc) * 0.22);
  filter: brightness(1.3) saturate(1.1);
  mix-blend-mode: screen;
}

.thermal-btn__bloom {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  filter: blur(var(--bloom-blur)) saturate(1.15) brightness(1.1);
  mix-blend-mode: screen;
}

.thermal-btn__bloom::before {
  padding: var(--bloom-w);
  --cyc: var(--bloom-cyc);
  --off: calc(var(--bloom-cyc) * 0.18);
}

.thermal-btn__label {
  position: relative;
  z-index: 3;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 30, 0.55);
}

.thermal-btn:focus-visible {
  outline: 2px solid var(--t-cyan, #16c2d4);
  outline-offset: 4px;
}

.thermal-btn--sm {
  --h: 44px;
  padding: 0 1.45em;
  font-size: 13px;
}

.thermal-btn--lg {
  --h: 60px;
  padding: 0 2.6em;
}

@keyframes thermal-flow {
  from {
    background-position-y: var(--off);
  }
  to {
    background-position-y: calc(var(--off) + var(--cyc));
  }
}

/* ------------------------------------------------------------ ghost CTA -- */

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  min-height: 56px;
  padding: 0 1.8em;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  background: transparent;
  color: var(--text, #fff);
  text-decoration: none;
  font: inherit;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.035);
}

.btn-ghost:active {
  transform: translateY(1px);
}

.btn-ghost:focus-visible {
  outline: 2px solid var(--t-cyan, #16c2d4);
  outline-offset: 4px;
}

.btn-ghost svg {
  width: 14px;
  height: 14px;
  color: var(--text-2, rgba(255, 255, 255, 0.66));
}

/* --------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  .tf__blob {
    animation: none !important;
  }

  .tf__parallax {
    transform: none !important;
  }

  .thermal-btn,
  .thermal-btn::after,
  .thermal-btn__bloom::before {
    animation: none;
  }

  thermal-field {
    transition: none;
  }
}

/* Reduce GPU cost under 768px: fewer blobs (marked --minor), shorter blur. */
@media (max-width: 767px) {
  .tf__blob--minor {
    display: none;
  }

  thermal-field[variant="hero"] .tf__layer--cold {
    filter: blur(68px) saturate(1.08);
  }
  thermal-field[variant="hero"] .tf__layer--mid {
    filter: blur(38px) saturate(1.12);
  }
  thermal-field[variant="hero"] .tf__layer--hot {
    filter: blur(26px) saturate(1.16);
  }
  thermal-field[variant="hero"] .tf__layer--shoulder {
    filter: blur(10px) saturate(1.12);
  }

  thermal-field[variant="cta"] .tf__layer--cold {
    filter: blur(76px) saturate(1.08);
  }
  thermal-field[variant="cta"] .tf__layer--mid {
    filter: blur(44px) saturate(1.12);
  }
  thermal-field[variant="cta"] .tf__layer--hot {
    filter: blur(30px) saturate(1.16);
  }

  .tf__halftone--b {
    display: none;
  }
}