/* =====================================================================
 *  PUBLIC SITE CSS  —  AIPostoz
 *  Folder: /assets/css/public.css
 *  Purpose: The few things Tailwind utilities can't do inline —
 *           scroll offset for the sticky header, reveal animations,
 *           the hero glow and the demo spinner.
 *  Keep this file small: utilities belong in the markup.
 * ================================================================== */

:root { --head-h: 72px; }

html { scroll-behavior: smooth; }

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: calc(var(--head-h) + 16px); }

/* Header gets a shadow once the page is scrolled (toggled by public.js) */
#siteHeader.is-stuck { box-shadow: 0 6px 24px -14px rgba(17, 17, 17, .35); }

/* Reveal-on-scroll animation (staggered with --d) */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms),
              transform .6s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms);
}

/* Decorative brand glow behind the hero */
.hero-glow {
  position: absolute;
  inset: -160px 0 auto 0;
  height: 620px;
  pointer-events: none;
  background:
    radial-gradient(680px 320px at 50% 12%, rgba(34, 197, 94, .13), transparent 65%),
    radial-gradient(420px 240px at 12% 0%, rgba(220, 252, 231, .9), transparent 60%),
    radial-gradient(420px 240px at 88% 0%, rgba(220, 252, 231, .9), transparent 60%);
}

/* --- F2 sections ------------------------------------------------- */

/* Soft brand wash behind the statistics band */
.stats-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 260px at 50% 0%, rgba(220, 252, 231, .85), transparent 70%),
    radial-gradient(420px 200px at 100% 100%, rgba(34, 197, 94, .06), transparent 65%);
}

/* Glow inside the CTA banner */
.cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 260px at 50% 0%, rgba(34, 197, 94, .14), transparent 68%),
    radial-gradient(380px 220px at 8% 100%, rgba(220, 252, 231, .95), transparent 62%),
    radial-gradient(380px 220px at 92% 100%, rgba(220, 252, 231, .95), transparent 62%);
}

/* --- F3 AI Tools ------------------------------------------------- */

/* Tool cards: smooth return from the JS tilt. The tilt itself is applied
   by public.js only for fine pointers (skipped on touch + reduced motion). */
.tool-card {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}

/* Glow inside the AI Tools bottom CTA */
.tools-cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(34, 197, 94, .13), transparent 68%),
    radial-gradient(340px 190px at 100% 100%, rgba(220, 252, 231, .9), transparent 62%);
}

/* --- F4 How It Works timeline ------------------------------------ */

/* Connector lines draw themselves in when the timeline scrolls into view.
   They hook into the existing .reveal/.is-in observer — no extra JS. */
.step-line   { transform: scaleX(0); transform-origin: left;   transition: transform .8s cubic-bezier(.16, 1, .3, 1) var(--sd, 0ms); }
.step-line-v { transform: scaleY(0); transform-origin: top;    transition: transform .8s cubic-bezier(.16, 1, .3, 1) var(--sd, 0ms); }
.reveal.is-in .step-line   { transform: scaleX(1); }
.reveal.is-in .step-line-v { transform: scaleY(1); }

/* --- F5 Interactive demo + process ------------------------------- */

/* Demo tabs */
.demo-tab { color: #5A6B63; }
.demo-tab.is-active { background: #FFFFFF; color: #111111; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }

/* Result cards: clamp the sample until "Expand" is pressed */
.result-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.result-card.is-open .result-text { -webkit-line-clamp: unset; overflow: visible; }

/* Generation process: rails, nodes and per-stage bars fill in sequence.
   Driven by the existing .reveal/.is-in observer — no extra JS. */
.proc-fill   { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.16, 1, .3, 1) var(--sd, 0ms); }
.proc-fill-v { transform: scaleY(0); transform-origin: top;  transition: transform .7s cubic-bezier(.16, 1, .3, 1) var(--sd, 0ms); }
.proc-bar    { transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16, 1, .3, 1) var(--sd, 0ms); }
.proc-tick   { opacity: 0; transform: scale(.4); transition: opacity .4s ease var(--nd, 0ms), transform .4s cubic-bezier(.34, 1.56, .64, 1) var(--nd, 0ms); }
.proc-ring   { transition: border-color .4s ease var(--nd, 0ms), box-shadow .4s ease var(--nd, 0ms); }

.reveal.is-in .proc-fill   { transform: scaleX(1); }
.reveal.is-in .proc-fill-v { transform: scaleY(1); }
.reveal.is-in .proc-bar    { transform: scaleX(1); }
.reveal.is-in .proc-tick   { opacity: 1; transform: none; }
.reveal.is-in .proc-ring   { border-color: rgba(34, 197, 94, .45); box-shadow: 0 10px 30px -12px rgba(34, 197, 94, .5); }

/* =================================================================
 *  F5 PREMIUM — "Experience AIPostoz"
 *  Layered aurora background, glassmorphism, gradient ring, chips,
 *  magnetic/ripple button, floating icons.
 * ============================================================== */

.xp { background: #FFFFFF; }

/* ---- Layered background ---- */
.xp-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* soft green mesh wash */
.xp-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%,   rgba(220, 252, 231, .95), transparent 70%),
    radial-gradient(45% 40% at 0% 30%,   rgba(220, 252, 231, .70), transparent 70%),
    radial-gradient(45% 40% at 100% 25%, rgba(220, 252, 231, .70), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFEFC 45%, #FFFFFF 100%);
}

/* animated gradient blobs */
.xp-blob { position: absolute; border-radius: 9999px; filter: blur(70px); will-change: transform; }
.xp-blob-1 {
  width: 30rem; height: 30rem; top: -8rem; left: -6rem; opacity: .5;
  background: radial-gradient(circle at 35% 35%, rgba(34, 197, 94, .55), rgba(34, 197, 94, 0) 70%);
  animation: xp-drift-a 26s ease-in-out infinite alternate;
}
.xp-blob-2 {
  width: 26rem; height: 26rem; top: 20%; right: -7rem; opacity: .45;
  background: radial-gradient(circle at 60% 40%, rgba(110, 231, 183, .6), rgba(110, 231, 183, 0) 70%);
  animation: xp-drift-b 32s ease-in-out infinite alternate;
}
.xp-blob-3 {
  width: 22rem; height: 22rem; bottom: -6rem; left: 35%; opacity: .38;
  background: radial-gradient(circle at 50% 50%, rgba(22, 163, 74, .45), rgba(22, 163, 74, 0) 70%);
  animation: xp-drift-c 24s ease-in-out infinite alternate;
}
@keyframes xp-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4rem, 2.5rem, 0) scale(1.12); } }
@keyframes xp-drift-b { from { transform: translate3d(0, 0, 0) scale(1.06); } to { transform: translate3d(-3.5rem, 3rem, 0) scale(.94); } }
@keyframes xp-drift-c { from { transform: translate3d(0, 0, 0) scale(.96); } to { transform: translate3d(3rem, -2rem, 0) scale(1.1); } }

/* faint grid, faded at the edges */
.xp-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(17, 17, 17, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 35%, transparent 78%);
}

/* ---- Glass ---- */
.xp-glass {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 50px -20px rgba(6, 40, 25, .18);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.xp-hover { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease; }
.xp-hover:hover {
  border-color: rgba(34, 197, 94, .35);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 26px 60px -22px rgba(34, 197, 94, .38);
}

/* ---- Animated gradient ring on the input card ---- */
@property --xp-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.xp-ring { position: relative; }
.xp-ring::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--xp-angle),
      rgba(34, 197, 94, 0) 0deg, rgba(34, 197, 94, .85) 70deg,
      rgba(110, 231, 183, .9) 140deg, rgba(34, 197, 94, 0) 220deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: xp-spin 7s linear infinite;
  pointer-events: none;
}
@keyframes xp-spin { to { --xp-angle: 360deg; } }

/* ---- Small pieces ---- */
.xp-icon-wrap { background: rgba(220, 252, 231, .9); color: #16A34A; }

.xp-pulse { width: 6px; height: 6px; border-radius: 9999px; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: xp-ping 2s ease-out infinite; }
@keyframes xp-ping { 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.xp-shine {
  background: linear-gradient(100deg, #16A34A 0%, #22C55E 35%, #6EE7B7 50%, #22C55E 65%, #16A34A 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: xp-sheen 6s linear infinite;
}
@keyframes xp-sheen { from { background-position: 180% 0; } to { background-position: -20% 0; } }

/* floating icons */
.xp-float {
  position: absolute; z-index: 1; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 1rem;
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px -14px rgba(6, 40, 25, .35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--c, #22C55E);
  animation: xp-floaty 7s ease-in-out infinite; animation-delay: var(--fd, 0s);
}
@keyframes xp-floaty { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }

/* ---- Tabs ---- */
.xp-tab { color: #5A6B63; transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.xp-tab.is-active { background: #FFFFFF; color: #111111; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }

/* ---- Inputs ---- */
.xp-input {
  width: 100%; border-radius: .85rem; border: 1px solid #E5E7EB;
  background: rgba(255, 255, 255, .75); padding: .8rem .9rem .8rem 2.6rem;
  font-size: 14px; color: #111111; outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.xp-input::placeholder { color: #9CA3AF; }
.xp-input:focus { border-color: #22C55E; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(220, 252, 231, .9); }

/* ---- Chips ---- */
.xp-chip {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border-radius: 9999px; border: 1px solid #E5E7EB; background: rgba(255, 255, 255, .7);
  padding: .45rem .8rem; font-size: 12.5px; font-weight: 600; color: #5A6B63;
  transition: all .25s cubic-bezier(.16, 1, .3, 1);
}
.xp-chip:hover { border-color: rgba(34, 197, 94, .5); color: #111111; transform: translateY(-1px); }
.xp-chip:has(input:checked) {
  border-color: #22C55E; background: #DCFCE7; color: #15803D;
  box-shadow: 0 8px 20px -10px rgba(34, 197, 94, .7);
}
.xp-chip:has(input:focus-visible) { outline: 2px solid #22C55E; outline-offset: 2px; }
.xp-chip.is-soon { opacity: .5; cursor: not-allowed; }
.xp-chip.is-soon:hover { transform: none; border-color: #E5E7EB; }

/* ---- Generate button: animated gradient + glow + ripple ---- */
.xp-btn {
  position: relative; display: block; width: 100%; overflow: hidden;
  border-radius: .9rem; padding: .95rem 1.5rem; border: 0; cursor: pointer;
  color: #FFFFFF; font-size: 15px; font-weight: 600;
  background: linear-gradient(100deg, #16A34A, #22C55E, #6EE7B7, #22C55E, #16A34A);
  background-size: 250% 100%;
  box-shadow: 0 14px 32px -12px rgba(34, 197, 94, .8);
  animation: xp-gradient 6s linear infinite;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
  will-change: transform;
}
.xp-btn:hover { box-shadow: 0 18px 44px -12px rgba(34, 197, 94, .95); }
.xp-btn:active { transform: scale(.985); }
.xp-btn:disabled { opacity: .75; cursor: default; }
.xp-btn-inner { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; pointer-events: none; }
@keyframes xp-gradient { from { background-position: 0% 50%; } to { background-position: 250% 50%; } }

.ripple-ink {
  position: absolute; border-radius: 9999px; transform: scale(0);
  background: rgba(255, 255, 255, .45); pointer-events: none;
  animation: xp-ripple .65s ease-out forwards;
}
@keyframes xp-ripple { to { transform: scale(3.2); opacity: 0; } }

.xp-bar { background: linear-gradient(90deg, #16A34A, #22C55E, #6EE7B7); transition: width .45s cubic-bezier(.16, 1, .3, 1); }

/* ---- Copy button ---- */
.xp-copy {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: .6rem; border: 1px solid #E5E7EB; background: rgba(255, 255, 255, .8);
  padding: .35rem .6rem; font-size: 11px; font-weight: 600; color: #111111; cursor: pointer;
  transition: all .25s ease;
}
.xp-copy:hover { border-color: #22C55E; background: #22C55E; color: #FFFFFF; }

/* ---- Output cards: animate in ---- */
.xp-armed .xp-card { opacity: 0; transform: translateY(16px) scale(.97); }
.xp-armed .xp-card.is-shown {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1) var(--xd, 0ms),
              transform .55s cubic-bezier(.16, 1, .3, 1) var(--xd, 0ms);
}

/* =================================================================
 *  F6 — Reviews, FAQ, Newsletter, Aurora CTA, Footer
 * ============================================================== */

/* ---- Reviews ---- */
.rv-float { animation: xp-floaty 9s ease-in-out infinite; animation-delay: var(--fd, 0s); }
.rv-star { animation: rv-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--sd, 0ms); }
@keyframes rv-pop { from { opacity: 0; transform: scale(.4) rotate(-25deg); } to { opacity: 1; transform: none; } }

/* ---- Comparison ---- */
.cmp-card { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease; }
.cmp-card:hover { transform: translateY(-4px); }
.cmp-vs {
  background: linear-gradient(135deg, #16A34A, #22C55E, #6EE7B7);
  background-size: 200% 200%;
  box-shadow: 0 14px 34px -12px rgba(34, 197, 94, .85);
  animation: xp-gradient 5s linear infinite;
}

/* ---- FAQ accordion ---- */
.faq-item { transition: border-color .3s ease, box-shadow .3s ease; }
.faq-item:hover { border-color: rgba(34, 197, 94, .35); }
.faq-q { cursor: pointer; background: none; border: 0; }
.faq-icon { transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s ease, color .3s ease; }
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.16, 1, .3, 1);
}
.faq-a > div { overflow: hidden; }
.faq-item.is-open { border-color: rgba(34, 197, 94, .45); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-icon { transform: rotate(135deg); background: #22C55E; border-color: #22C55E; color: #FFFFFF; }

/* ---- Newsletter ---- */
.nl-float { animation: nl-hover 8s ease-in-out infinite; }
@keyframes nl-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- Aurora CTA ---- */
.cta-aurora { background: #FFFFFF; }
.cta-aurora-wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 20%,  rgba(220, 252, 231, .95), transparent 72%),
    radial-gradient(40% 45% at 8% 90%,   rgba(34, 197, 94, .10), transparent 70%),
    radial-gradient(40% 45% at 92% 85%,  rgba(110, 231, 183, .14), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F8FDFA 50%, #FFFFFF);
}

/* ---- Footer ---- */
.ft-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(34, 197, 94, .16), transparent 70%),
    radial-gradient(35% 40% at 100% 100%, rgba(34, 197, 94, .07), transparent 70%);
}
.ft-link { position: relative; transition: color .25s ease, transform .25s ease; }
.ft-link:hover { color: #FFFFFF; transform: translateX(3px); }
.ft-social { transition: all .3s cubic-bezier(.16, 1, .3, 1); }
.ft-social:hover { background: #22C55E; border-color: #22C55E; color: #FFFFFF; transform: translateY(-3px); box-shadow: 0 12px 26px -10px rgba(34, 197, 94, .8); }
.ft-input {
  width: 100%; border-radius: .8rem; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06); padding: .8rem .9rem .8rem 2.6rem;
  font-size: 13.5px; color: #FFFFFF; outline: none;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.ft-input::placeholder { color: rgba(255, 255, 255, .35); }
.ft-input:focus { border-color: #22C55E; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }

/* ---- Back to top ---- */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 0; border-radius: 9999px; cursor: pointer; color: #FFFFFF;
  background: linear-gradient(135deg, #16A34A, #22C55E);
  box-shadow: 0 14px 34px -10px rgba(34, 197, 94, .9);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1), visibility .35s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 18px 42px -10px rgba(34, 197, 94, 1); }

/* Demo button / overlay spinner */
.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid #DCFCE7;
  border-top-color: #22C55E;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Accessibility: respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .tool-card { transition: none; transform: none; }
  .step-line, .step-line-v,
  .reveal.is-in .step-line, .reveal.is-in .step-line-v { transform: none; transition: none; }
  .proc-fill, .proc-fill-v, .proc-bar, .proc-tick,
  .reveal.is-in .proc-fill, .reveal.is-in .proc-fill-v,
  .reveal.is-in .proc-bar, .reveal.is-in .proc-tick { transform: none; opacity: 1; transition: none; }
  .proc-ring, .reveal.is-in .proc-ring { transition: none; }
  .xp-blob, .xp-float, .xp-pulse, .xp-shine, .xp-btn { animation: none; }
  .xp-ring::before { animation: none; }
  .xp-armed .xp-card, .xp-armed .xp-card.is-shown { opacity: 1; transform: none; transition: none; }
  .ripple-ink { display: none; }
  .rv-float, .rv-star, .nl-float, .cmp-vs { animation: none; opacity: 1; transform: none; }
  .faq-a { transition: none; }
  .to-top { transition: opacity .01ms; }
  .spinner { animation: none; }
  * { scroll-behavior: auto !important; }
}