/* Shared visual layer for content pages (compare, stocky-alternative, faq,
 * blog index). Loaded only on those pages. Works in all four themes:
 * Dark, Light, Dark glass, Light glass. Motion is transform/opacity only and
 * switched off under prefers-reduced-motion.
 */

/* ---- Hero: slow-drifting color glow behind the headline ---- */
header { position: relative; overflow: hidden; isolation: isolate; }
.pp-aurora { position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; opacity: .9;
  background:
    radial-gradient(36rem 22rem at 20% 30%, rgba(20,184,166,.28), transparent 65%),
    radial-gradient(30rem 20rem at 80% 20%, rgba(56,189,248,.22), transparent 65%),
    radial-gradient(28rem 18rem at 55% 75%, rgba(129,140,248,.18), transparent 65%);
  filter: blur(8px); animation: pp-drift 18s ease-in-out infinite alternate; }
html[data-theme="light"] .pp-aurora { opacity: .7; }
@keyframes pp-drift { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, 3%, 0) scale(1.06); } }
.pp-grad { background: linear-gradient(90deg, #2dd4bf, #38bdf8 55%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .pp-grad { background: linear-gradient(90deg, #0f766e, #0369a1 55%, #6d28d9); -webkit-background-clip: text; background-clip: text; }

/* ---- Scroll reveal (added by page-polish.js; content stays visible without JS) ---- */
.pp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.pp-reveal.pp-in { opacity: 1; transform: none; }

/* ---- Cards lift on hover ---- */
.pp-lift { transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, border-color .2s ease; }
.pp-lift:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(20,184,166,.45); border-color: rgba(45,212,191,.35) !important; }

/* ---- FAQ accordions: chevron, teal edge when open, smooth reveal ---- */
details.pp-faq { position: relative; transition: border-color .2s ease, background-color .2s ease; }
details.pp-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
details.pp-faq > summary::-webkit-details-marker { display: none; }
details.pp-faq > summary:not(:has(.chev))::after { content: ''; flex: none; width: .55rem; height: .55rem; margin-right: .2rem;
  border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(45deg); transition: transform .2s ease; }
details.pp-faq[open] > summary::after { transform: rotate(-135deg); }
details.pp-faq[open] .chev { transform: rotate(180deg); }
details.pp-faq[open] { border-color: rgba(45,212,191,.45) !important; box-shadow: inset 3px 0 0 #14b8a6; }
details.pp-faq[open] > *:not(summary) { animation: pp-open .25s ease both; }
@keyframes pp-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
details.pp-faq > summary:focus-visible { outline: 2px solid #2dd4bf; outline-offset: 4px; border-radius: .375rem; }

/* ---- Comparison tables: icon cells + highlighted TraxSail column ---- */
.pp-yes, .pp-no { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.pp-yes::before, .pp-no::before { content: ''; width: 1.15rem; height: 1.15rem; border-radius: 9999px; flex: none; background-position: center; background-repeat: no-repeat; background-size: 70%; }
.pp-yes { color: #5eead4; } .pp-yes::before { background-color: rgba(20,184,166,.18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
.pp-no { color: #94a3b8; font-weight: 500; } .pp-no::before { background-color: rgba(148,163,184,.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
html[data-theme="light"] .pp-yes { color: #0f766e; }
html[data-theme="light"] .pp-no { color: #57534e; }
.pp-table tbody tr { transition: background-color .15s ease; }
.pp-table tbody tr:hover { background: rgba(20,184,166,.06); }
.pp-table thead th:nth-child(2) { position: relative; }
.pp-table thead th:nth-child(2)::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #14b8a6, #38bdf8); }

/* ---- Bar comparisons (time to start, starting price) ---- */
.pp-bars { display: grid; gap: .9rem; }
.pp-bar-row { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: .75rem; }
.pp-bar-track { position: relative; height: 2.25rem; border-radius: .6rem; background: rgba(148,163,184,.12); overflow: hidden; }
.pp-bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: .6rem; display: flex; align-items: center; justify-content: flex-end; padding: 0 .75rem;
  font: 700 .85rem/1 Inter, system-ui, sans-serif; color: #0f172a; white-space: nowrap; min-width: max-content;
  background: linear-gradient(90deg, #64748b, #94a3b8); transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.pp-bar-fill.pp-us { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.pp-in .pp-bar-fill, .pp-bars.pp-in .pp-bar-fill { transform: scaleX(1); }
.pp-bar-label { font-size: .875rem; font-weight: 600; }

/* ---- Blog index cards ---- */
.pp-post { position: relative; overflow: hidden; padding-top: 2rem !important; }
.pp-post::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--pp-accent, linear-gradient(90deg, #14b8a6, #38bdf8)); }
.pp-post .pp-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 9999px; background: rgba(20,184,166,.14); color: #5eead4; margin-right: .5rem; }
html[data-theme="light"] .pp-post .pp-tag { color: #0f766e; background: rgba(20,184,166,.12); }
.pp-post .pp-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; font-size: .85rem; font-weight: 600; color: #2dd4bf; }
html[data-theme="light"] .pp-post .pp-more { color: #0f766e; }
.pp-post .pp-more::after { content: '→'; transition: transform .2s ease; }
.pp-post:hover .pp-more::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .pp-aurora { animation: none; }
  .pp-reveal, .pp-reveal.pp-in { opacity: 1; transform: none; transition: none; }
  .pp-lift, .pp-lift:hover { transform: none; transition: none; }
  .pp-bar-fill { transform: scaleX(1); transition: none; }
  details.pp-faq[open] > *:not(summary) { animation: none; }
}