/*
 * Scroll animations for pieces the AI team marks with data-hac-reveal (class-hac-reveal.php).
 * They are hidden only while the page is marked .hac-reveal-on, which the head script sets
 * and takes back if reveal.js never starts. data-hac-reveal-delay arrives as --hac-reveal-delay.
 */
.hac-reveal-on [data-hac-reveal] {
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .65, .3, 1);
  transition-delay: var(--hac-reveal-delay, 0ms);
}
/* Up and in only: a piece waiting off to one side would widen the page and make it scroll sideways. */
.hac-reveal-on [data-hac-reveal="fade-up"] { transform: translateY(28px); }
.hac-reveal-on [data-hac-reveal="zoom"] { transform: scale(.94); }
/* Livelier ones, for templates such as Playful: a longer rise, a small bounce, a card that straightens as it lands. */
.hac-reveal-on [data-hac-reveal="rise"],
.hac-reveal-on [data-hac-reveal="tilt"],
.hac-reveal-on [data-hac-reveal="tilt-right"] { transition-duration: .9s; transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
.hac-reveal-on [data-hac-reveal="rise"] { transform: translateY(60px); }
.hac-reveal-on [data-hac-reveal="tilt"] { transform: translateY(44px) rotate(-5deg); }
.hac-reveal-on [data-hac-reveal="tilt-right"] { transform: translateY(44px) rotate(5deg); }
.hac-reveal-on [data-hac-reveal="pop"] { transform: scale(.82); transition-duration: .5s, .6s; transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1); }
.hac-reveal-on [data-hac-reveal].is-revealed { opacity: 1; transform: none; }
/* In Elementor's editor everything shows at once: the owner is typing into the page, not watching it arrive. */
.elementor-editor-active.hac-reveal-on [data-hac-reveal], .hac-reveal-on .elementor-editor-active [data-hac-reveal] { opacity: 1; transform: none; transition: none; }

/* data-hac-float: a decorative shape that drifts up and turns a little, all the time ("slow" for a calmer one). */
[data-hac-float] { animation: hac-float 6.5s ease-in-out infinite alternate; }
[data-hac-float="slow"] { animation-duration: 9s; }
@keyframes hac-float {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-14px) rotate(9deg); }
}

/* data-hac-waves: reveal.js draws the next section's curved edge into the marked strip. */
.hac-waves-on { position: relative; }
.hac-waves-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* data-hac-curve: reveal.js puts the words on an arch. The strip's own padding is for when it can't. */
.hac-curve-on { padding: 0 !important; }
.hac-curve-svg { display: block; width: 100%; overflow: visible; }

/*
 * The Momentum template's marks. Every piece is written in its finished state; these rules and reveal.js
 * start it from the beginning only while the page is animated (.hac-reveal-on).
 */
/* data-hac-lines: the H1's lines (each a block span holding a span) rise into view as the page opens. CSS only, so the H1 never waits for a script. */
[data-hac-lines] > span { display: block; overflow: hidden; padding-bottom: .06em; }
[data-hac-lines] > span > span { display: block; animation: hac-line .9s cubic-bezier(.2, .8, .2, 1) both; }
[data-hac-lines] > span:nth-child(2) > span { animation-delay: .14s; }
[data-hac-lines] > span:nth-child(3) > span { animation-delay: .28s; }
@keyframes hac-line { from { transform: translateY(105%); } to { transform: none; } }

/* data-hac-tilt: reveal.js tips the hero picture back and straightens it with the scroll. */
.hac-reveal-on [data-hac-tilt] { transform: perspective(1600px) rotateX(28deg) rotateY(-16deg) rotateZ(3deg) scale(.94); transform-origin: center; will-change: transform; }

/* data-hac-marquee: reveal.js copies the row to fill the screen, which then slides left by one set, for ever. */
.hac-marquee-on { animation: hac-slide var(--hac-marquee-time, 30s) linear infinite; }
@keyframes hac-slide { to { transform: translateX(var(--hac-marquee-shift, -50%)); } }

/* data-hac-chat: messages (data-hac-msg) wait their turn; reveal.js adds the typing dots. */
.hac-chat-on > [data-hac-msg] { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.hac-chat-on > [data-hac-msg].is-shown { opacity: 1; transform: none; }
.hac-typing { display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: 18px; margin: 0 0 12px; opacity: 0; transition: opacity .3s; }
.hac-typing.is-shown { opacity: 1; }
.hac-typing i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .6; animation: hac-dot 1s infinite; }
.hac-typing i:nth-child(2) { animation-delay: .15s; }
.hac-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hac-dot { 50% { transform: translateY(-5px); opacity: .25; } }

/* data-hac-stack: on a wide screen each card stays pinned a little lower than the one before, so they stack as the page scrolls. */
@media (min-width: 782px) {
  [data-hac-stack] > * { position: sticky; top: 90px; }
  [data-hac-stack] > :nth-child(2) { top: 106px; }
  [data-hac-stack] > :nth-child(3) { top: 122px; }
  [data-hac-stack] > :nth-child(4) { top: 138px; }
  [data-hac-stack] > :nth-child(5) { top: 154px; }
  [data-hac-stack] > :nth-child(6) { top: 170px; }
  [data-hac-stack] > :nth-child(n+7) { top: 186px; }
}

/* data-hac-wipe: the last piece covers the first and wipes across it. On a phone the two simply stack. */
.hac-reveal-on [data-hac-wipe] > :last-child { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.7, 0, .2, 1); }
.hac-reveal-on [data-hac-wipe].is-revealed > :last-child { clip-path: inset(0 0 0 0); }
@media (max-width: 781px) {
  [data-hac-wipe] > :last-child { position: relative !important; }
  .hac-reveal-on [data-hac-wipe] > :last-child { clip-path: none; }
}

/* data-hac-draw: the line (data-hac-draw-fill) grows down; a step's first piece is grey until the line reaches it. */
.hac-draw-on [data-hac-draw-fill] { transform: scaleY(0); transform-origin: top; }
.hac-draw-on [data-hac-step] > :first-child { transition: filter .4s, opacity .4s, transform .4s; }
.hac-draw-on [data-hac-step]:not(.is-lit) > :first-child { filter: grayscale(1); opacity: .4; transform: scale(.9); }

/* data-hac-grow: reveal.js grows the closing headline with the scroll. */
.hac-reveal-on [data-hac-grow] { transform: scale(.8); }

/* data-hac-spin: a ring (and anything on it) turns slowly, all the time ("slow" for slower). */
[data-hac-spin] { animation: hac-spin 22s linear infinite; }
[data-hac-spin="slow"] { animation-duration: 36s; }
@keyframes hac-spin { to { transform: rotate(360deg); } }

/* data-hac-glow: a frame whose colours run round it. It carries --hac-glow (the brand colour) and its own colour as a fallback. */
@property --hac-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
[data-hac-glow] { background: conic-gradient(from var(--hac-turn), var(--hac-glow, #5b3df5), #ffcf5a, #2bc4a0, var(--hac-glow, #5b3df5)) !important; animation: hac-turn 5s linear infinite; }
@keyframes hac-turn { to { --hac-turn: 360deg; } }

/* data-hac-pulse: a button that sends out a soft ring now and then, in --hac-glow. */
[data-hac-pulse] { animation: hac-pulse 2.4s ease-in-out infinite; }
@keyframes hac-pulse {
  0%, 100% { box-shadow: var(--hac-lift, 0 0 0 transparent), 0 0 0 0 color-mix(in srgb, var(--hac-glow, #5b3df5) 45%, transparent); }
  60% { box-shadow: var(--hac-lift, 0 0 0 transparent), 0 0 0 22px color-mix(in srgb, var(--hac-glow, #5b3df5) 0%, transparent); }
}

/* data-hac-faq: questions that open and close; the plus (data-hac-plus) turns into a cross. */
[data-hac-faq] summary::-webkit-details-marker { display: none; }
[data-hac-faq] [data-hac-plus] { transition: transform .3s; }
[data-hac-faq] details[open] [data-hac-plus] { transform: rotate(45deg); }

/*
 * The Bloom template's marks, written finished like Momentum's.
 */
/* Two more reveals: a note that drops from above and lands (its tilt is on the note inside), and a card that swings open like a page. */
.hac-reveal-on [data-hac-reveal="drop"] { transform: translateY(-80px); transition-duration: .6s, .9s; transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1); }
.hac-reveal-on [data-hac-reveal="flip"] { transform: perspective(1200px) rotateY(-80deg); transform-origin: left center; transition-duration: .6s, 1s; }

/* data-hac-mark: the words' own highlighter gradient grows from the left. */
.hac-mark-on { background-repeat: no-repeat !important; background-size: 0% 100% !important; transition: background-size 1.1s cubic-bezier(.7, 0, .2, 1); }
.hac-mark-on.is-revealed { background-size: 100% 100% !important; }

/* data-hac-badge: reveal.js puts the words round the edge; they turn slowly. */
.hac-badge-on { position: relative; }
.hac-badge-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: hac-spin 18s linear infinite; pointer-events: none; }

/* data-hac-words: words wait faint until the scroll reaches them. */
.hac-words-on .hac-w { opacity: .15; transition: opacity .25s; }
.hac-words-on .hac-w.is-lit { opacity: 1; }

/* data-hac-hscroll: reveal.js sets the band's height; the pin holds still while the track slides. */
.hac-hs-on { padding-top: 0 !important; padding-bottom: 0 !important; }
.hac-hs-on [data-hac-pin] { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hac-hs-on [data-hac-track] { flex-wrap: nowrap !important; width: max-content; will-change: transform; }
.hac-hs-on [data-hac-track] > * { flex: 0 0 min(78vw, 440px) !important; }
.hac-hs-on [data-hac-progress] { transform: scaleX(0); transform-origin: left; }

/* data-hac-compare: Before and After (data-hac-after) laid over each other, After cut at the handle. */
.hac-compare-on { position: relative; display: block !important; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hac-compare-on > :first-child, .hac-compare-on > [data-hac-after] { box-sizing: border-box; }
.hac-compare-on > :first-child { padding-right: 52% !important; }
.hac-compare-on > [data-hac-after] { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; padding-left: 54% !important; clip-path: inset(0 0 0 var(--hac-x, 50%)); }
.hac-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--hac-x, 50%); width: 4px; margin-left: -2px; background: #ffffff; cursor: ew-resize; z-index: 2; }
.hac-compare-handle b { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #ffffff; color: #18261f; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 8px 20px #18261f33; }
.hac-compare-handle:focus-visible b { outline: 3px solid currentColor; outline-offset: 3px; }

/* data-hac-bloom: reveal.js grows the circle the band shows through. */
.hac-reveal-on [data-hac-bloom] { clip-path: circle(var(--hac-r, 6%) at 50% 50%); }

/*
 * The Aurora template's marks, written finished like the others.
 */
/* data-hac-aurora: reveal.js adds four soft glows behind the content, which drift. */
.hac-aurora-on { position: relative; overflow: hidden; }
.hac-aurora-on > :not(.hac-aurora) { position: relative; z-index: 1; }
.hac-aurora { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hac-aurora i { position: absolute; width: 46%; padding-top: 46%; border-radius: 50%; filter: blur(70px); opacity: .5; animation: hac-drift 18s ease-in-out infinite alternate; }
.hac-aurora i:nth-child(1) { left: -12%; top: -20%; }
.hac-aurora i:nth-child(2) { right: -8%; top: -6%; animation-duration: 22s; animation-delay: -6s; }
.hac-aurora i:nth-child(3) { left: 28%; bottom: -30%; animation-duration: 26s; animation-delay: -3s; }
.hac-aurora i:nth-child(4) { right: 18%; bottom: -24%; animation-duration: 20s; animation-delay: -9s; }
@keyframes hac-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14%, 8%) scale(1.15); } 100% { transform: translate(-8%, 14%) scale(.9); } }

/* data-hac-glass: a frosted card over the glows (WordPress keeps no backdrop-filter in a page). */
[data-hac-glass] { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* data-hac-float="lift": floats up and down without turning. */
[data-hac-float="lift"] { animation: hac-lift 7s ease-in-out infinite alternate; }
@keyframes hac-lift { from { transform: translateY(0); } to { transform: translateY(-14px); } }

/* data-hac-type: a blinking caret after the words that type themselves. */
.hac-type-on { border-right: 4px solid currentColor; padding-right: 4px; animation: hac-caret 1s steps(1) infinite; }
@keyframes hac-caret { 50% { border-right-color: transparent; } }

/* data-hac-pointer: the card leans or the button follows with a short ease; the spot is a light under the content. */
.hac-pointer-tilt, .hac-pointer-magnet { transition: transform .2s ease-out; will-change: transform; }
.hac-pointer-tilt { transform-style: preserve-3d; }
.hac-pointer-spot { position: relative; }
.hac-pointer-spot::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--hac-mx, 30%) var(--hac-my, 30%), color-mix(in srgb, var(--hac-glow, #f2545b) 35%, transparent), transparent 60%); pointer-events: none; }
.hac-pointer-spot > * { position: relative; }

/* data-hac-ring: a conic ring in --hac-ring on --hac-track that reveal.js fills to its share. */
.hac-ring-on { background: conic-gradient(var(--hac-ring, #f2545b) calc(var(--hac-p, 100) * 1%), var(--hac-track, #f3eff7) 0) !important; }

/* data-hac-story: the stage stays in view beside the chapters and shows the matching screen. Phones: chapters only. */
@media (min-width: 782px) {
  .hac-story-on [data-hac-stage] { position: sticky !important; top: 110px; height: 70vh; min-height: 420px; align-self: flex-start; }
  .hac-story-on [data-hac-screen] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0 !important; box-sizing: border-box; opacity: 0; transform: scale(.94) rotate(-2deg); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
  .hac-story-on [data-hac-screen].is-on { opacity: 1; transform: none; }
  .hac-story-on [data-hac-chapter] { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .4s; }
  .hac-story-on [data-hac-chapter].is-on { opacity: 1; }
}
@media (max-width: 781px) { [data-hac-stage] { display: none !important; } }

/* data-hac-switch: a Before and After switch over panes laid on each other. */
.hac-switch-on { display: grid !important; grid-template-columns: minmax(0, 1fr); }
.hac-switch-on > .hac-switch { grid-row: 1; }
.hac-switch-on > [data-hac-pane] { grid-row: 2; grid-column: 1; width: 100%; box-sizing: border-box; }
.hac-switch { position: relative; display: flex; width: max-content; max-width: 100%; margin: 0 auto 30px; background: #f3eff7; border-radius: 999px; padding: 6px; }
.hac-switch button { position: relative; z-index: 1; font: inherit; font-weight: 700; font-size: 17px; border: 0; background: none; padding: 12px 30px; border-radius: 999px; color: #55526a; cursor: pointer; transition: color .3s; }
.hac-switch button[aria-pressed="true"] { color: #ffffff; }
.hac-switch button:focus-visible { outline: 3px solid var(--hac-glow, #f2545b); outline-offset: 2px; }
.hac-switch-pill { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 999px; background: var(--hac-glow, #f2545b); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.hac-switch.is-second .hac-switch-pill { transform: translateX(100%); }
.hac-switch-on [data-hac-pane] { margin: 0 auto !important; max-width: 760px; transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.hac-switch-on [data-hac-pane].is-off { opacity: 0; transform: translateY(20px) scale(.97); pointer-events: none; }

/* data-hac-shine: a light sweeps across the card every few seconds. */
[data-hac-shine] { position: relative; overflow: hidden; }
[data-hac-shine]::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60%; left: -80%; background: linear-gradient(100deg, transparent, #ffffffcc, transparent); transform: skewX(-20deg); animation: hac-shine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes hac-shine { 0%, 55% { left: -80%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  .hac-reveal-on [data-hac-reveal] { opacity: 1; transform: none; transition: none; }
  .hac-aurora i, [data-hac-float="lift"], .hac-type-on, [data-hac-shine]::after { animation: none; }
  .hac-badge-ring { animation: none; }
  .hac-words-on .hac-w { opacity: 1; }
  .hac-mark-on { background-size: 100% 100% !important; }
  .hac-reveal-on [data-hac-bloom] { clip-path: none; }
  [data-hac-float], [data-hac-lines] > span > span, [data-hac-spin], [data-hac-glow], [data-hac-pulse], .hac-marquee-on { animation: none; }
  .hac-reveal-on [data-hac-tilt], .hac-reveal-on [data-hac-grow] { transform: none; }
  .hac-reveal-on [data-hac-wipe] > :last-child { clip-path: none; }
}