/* ============================================================
   HELIOCASTLE — PLAN PAGE MOTION
   Everything on plan-c.html that moves and is not a device. Kept
   apart from plan-page.css so the layout stays readable: that file
   says where things are, this one says what they do.

   Loaded only by the plan page. It leans on two small helpers:
     js/stagger.js   writes --i on the children of [data-stagger]
     js/count-up.js  climbs a [data-count] number into place

   The site-wide prefers-reduced-motion block at the foot of
   responsive.css stops every one of these.
   ============================================================ */

/* ============================================================
   SHARED — the drawing keyframe
   Any stroke carrying pathLength="1" can be drawn with this.
   ============================================================ */

@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in   { to { opacity: 1; } }

/* ============================================================
   THE HERO
   ============================================================ */

/* the embers rising through it — the canvas js/embers.js paints */
.plan-hero { isolation: isolate; }
#embers {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- a gold label with a live dot in front of it --- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.9);
  animation: dot-pulse 2.6s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.62); }
}

/* --- the gold words catch a slow light --- */
.plan-hero-title em,
.section-title em,
.cta-title em {
  background: linear-gradient(100deg,
    var(--gold) 0%, var(--gold) 40%,
    var(--gold-pale) 50%,
    var(--gold) 60%, var(--gold) 100%);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;   /* Safari needs both */
  animation: sheen 6.5s linear infinite;
}
@keyframes sheen {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

/* --- the rule draws itself out, with a glint running along it --- */
.plan-hero-rule { position: relative; }
.is-loaded .plan-hero-rule {
  animation: rule-grow 1.3s var(--ease) both;
  animation-delay: var(--d, 0s);
}
@keyframes rule-grow {
  from { opacity: 0; width: 0;    transform: translateY(28px); }
  to   { opacity: 1; width: 58px; transform: none; }
}
.plan-hero-rule::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.9);
  animation: glint 4.5s var(--ease) infinite;
}
@keyframes glint {
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: 1; }
  55%  { left: 52px; opacity: 0; }
  100% { left: 52px; opacity: 0; }
}

/* --- the price, climbing, lit from behind --- */
.plan-figure { position: relative; width: fit-content; }
.plan-figure::before {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  top: -30%;
  bottom: -30%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%,
    rgb(var(--accent-rgb) / 0.2), transparent 70%);
  filter: blur(10px);
  animation: price-halo 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes price-halo {
  0%, 100% { opacity: 0.7; transform: scale(0.96); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
.plan-figure b {
  font-variant-numeric: tabular-nums;   /* the digits stop jittering as it counts */
  transition: text-shadow 0.6s var(--ease);
}
.plan-figure b.is-counting { text-shadow: 0 0 26px rgb(var(--accent-rgb) / 0.55); }

/* --- a shine crossing the gold button --- */
.plan-hero .btn-gold,
.cta-band .btn-gold { position: relative; overflow: hidden; }
.plan-hero .btn-gold::after,
.cta-band .btn-gold::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.55), transparent);
  transform: skewX(-18deg);
  animation: btn-shine 5s ease-in-out infinite;
  pointer-events: none;
}
.cta-band .btn-gold::after { animation-delay: 1.4s; }
@keyframes btn-shine {
  0%        { left: -60%; }
  45%, 100% { left: 130%; }
}

/* ============================================================
   THE THREE PILLARS
   The icons draw themselves the first time the card is seen, one
   stroke after another. Each stroke carries pathLength="1" in the
   markup, so a single dash length of 1 works for all of them.
   ============================================================ */

.pillar-icon > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.pillar-card.in-view .pillar-icon > * {
  animation: draw-line 1.5s var(--ease) forwards;
  animation-delay: calc(var(--d, 0s) + 0.25s);
}
.pillar-card.in-view .pillar-icon > *:nth-child(2) {
  animation-delay: calc(var(--d, 0s) + 0.55s);
}
.pillar-card.in-view .pillar-icon > *:nth-child(3) {
  animation-delay: calc(var(--d, 0s) + 0.8s);
}

/* a filled dot has no stroke to draw, so it simply arrives */
.pillar-icon .pi-dot { opacity: 0; stroke-dasharray: none; }
.pillar-card.in-view .pillar-icon .pi-dot {
  animation: fade-in 0.5s var(--ease) forwards;
  animation-delay: calc(var(--d, 0s) + 1s);
}

/* the gear keeps turning once it has been drawn */
.pillar-icon .pi-spin {
  transform-box: view-box;
  transform-origin: 24px 24px;
}
.pillar-card.in-view .pillar-icon .pi-spin {
  animation:
    draw-line 1.5s var(--ease) forwards,
    spin 26s linear infinite;
  animation-delay: calc(var(--d, 0s) + 0.25s), calc(var(--d, 0s) + 1.5s);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* the card lifts its icon with it */
.pillar-card .pillar-icon { transition: transform 0.5s var(--ease); }
.pillar-card:hover .pillar-icon { transform: translateY(-3px) scale(1.06); }

/* ============================================================
   WHAT IT CARRIES UP
   Each line slides in and its tick draws itself, in order.
   ============================================================ */

.carry li svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.carry.in-view li {
  animation: slide-in 0.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 0.09s + 0.2s);
}
.carry.in-view li svg path {
  animation: draw-line 0.5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 0.09s + 0.45s);
}
@keyframes slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

.carry { transition: border-left-color 0.4s, transform 0.5s var(--ease); }
.carry:hover {
  border-left-color: var(--gold);
  transform: translateY(-3px);
}

/* ============================================================
   WHAT CUSTOM CAN MEAN
   The tiles and their fourteen icons live in css/feature-icons.css —
   each icon does the thing it stands for, and they are enough of a
   system to be worth their own file.
   ============================================================ */

/* ============================================================
   THE CLOSING BAND
   ============================================================ */

.cta-mark { animation: mark-float 6.5s ease-in-out infinite; }
@keyframes mark-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}