/* Decorative feedback only; existing buttons, detection and document handling remain in control. */
[data-ceeten-motion-dropzone] {
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
[data-ceeten-motion-dropzone] .lucide-cloud-upload {
  transition: transform .28s cubic-bezier(.2,.75,.3,1.1);
}
[data-ceeten-motion-dropzone] button[data-ui-btn] {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
[data-ceeten-motion-dropzone]:focus-within,
[data-ceeten-motion-dropzone].border-primary-500 {
  border-color: #a186e8;
  background-color: #faf8ff;
  box-shadow: 0 8px 24px rgba(97, 75, 199, .09);
}
[data-ceeten-motion-dropzone]:focus-within .lucide-cloud-upload,
[data-ceeten-motion-dropzone].border-primary-500 .lucide-cloud-upload {
  transform: translateY(-4px);
}
[data-ceeten-motion-dropzone] button[data-ui-btn]:active:not(:disabled) { transform: scale(.97); }
@media (hover:hover) and (pointer:fine) {
  [data-ceeten-motion-dropzone]:hover {
    border-color: #a186e8;
    background-color: #faf8ff;
    box-shadow: 0 8px 24px rgba(97, 75, 199, .09);
  }
  [data-ceeten-motion-dropzone]:hover .lucide-cloud-upload { transform: translateY(-4px); }
  [data-ceeten-motion-dropzone] button[data-ui-btn]:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(97, 75, 199, .15);
  }
}

/* The spinner is only present while the existing detector says it is loading. */
.ceeten-checkout-page .cc-ai .cc-loader {
  position: relative;
  border-color: #e7e1fb;
  border-top-color: #6f50d9;
}
.ceeten-checkout-page .cc-ai .cc-loader::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #f1edff;
}
.ceeten-checkout-page .cc-ai[data-ceeten-motion-complete="true"] .cc-ai-value {
  animation: ceeten-motion-result .28s ease-out both;
}
@keyframes ceeten-motion-result {
  from { opacity: .5; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Existing React report buttons keep their original click handlers and selected state. */
#ceeten-report [data-ceeten-motion-tabs="ready"] {
  position: relative;
  isolation: isolate;
}
#ceeten-report [data-ceeten-motion-tabs="ready"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: var(--ceeten-motion-tab-width, 0px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(31, 41, 55, .10);
  transform: translateX(var(--ceeten-motion-tab-left, 0px));
  transition: transform .32s cubic-bezier(.2,.75,.25,1), width .32s cubic-bezier(.2,.75,.25,1);
  z-index: -1;
  pointer-events: none;
}
#ceeten-report [data-ceeten-motion-tabs="ready"] > button {
  position: relative;
  background: transparent;
}
#ceeten-report [data-ceeten-motion-tabs="ready"] > button.bg-white {
  background: transparent !important;
  box-shadow: none !important;
}

/* Answers already expand via the existing React state; smooth their transition. */
#faq-section [data-ceeten-faq-question] + div {
  transition-property: max-height, opacity;
  transition-duration: .3s, .22s;
  transition-timing-function: ease, ease;
}
#faq-section [data-ceeten-faq-question] > .lucide-chevron-up { animation: ceeten-motion-chevron-open .24s ease-out; }
#faq-section [data-ceeten-faq-question] > .lucide-chevron-down { animation: ceeten-motion-chevron-close .24s ease-out; }
@keyframes ceeten-motion-chevron-open { from { transform: rotate(-180deg); } to { transform: rotate(0); } }
@keyframes ceeten-motion-chevron-close { from { transform: rotate(180deg); } to { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  [data-ceeten-motion-dropzone],
  [data-ceeten-motion-dropzone] .lucide-cloud-upload,
  [data-ceeten-motion-dropzone] button[data-ui-btn],
  #ceeten-report [data-ceeten-motion-tabs="ready"]::before,
  #faq-section [data-ceeten-faq-question] + div { transition: none !important; }
  .ceeten-checkout-page .cc-ai .cc-loader,
  .ceeten-checkout-page .cc-ai[data-ceeten-motion-complete="true"] .cc-ai-value,
  #faq-section [data-ceeten-faq-question] > svg { animation: none !important; }
}

/* Homepage decoration: no layout changes to the existing hero or input controls. */
@property --ceeten-border-turn {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
[data-ceeten-motion-hero] { position: relative; isolation: isolate; overflow: visible; }
[data-ceeten-motion-hero]::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(800px, 105%);
  aspect-ratio: 1;
  top: var(--ceeten-spot-y, 38%);
  left: var(--ceeten-spot-x, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(178, 153, 244, .25), rgba(190, 183, 255, .11) 37%, transparent 68%);
  pointer-events: none;
  transition: left .18s ease-out, top .18s ease-out;
}
[data-ceeten-reveal="shown"] { animation: ceeten-heading-reveal .65s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ceeten-heading-reveal {
  from { opacity: .15; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-ceeten-motion-dropzone] { position: relative; isolation: isolate; }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  [data-ceeten-motion-dropzone]::after {
    content: "";
    position: absolute;
    inset: -2px;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--ceeten-border-turn), transparent 0deg 238deg, #c1adf5 277deg, #7453d8 311deg, transparent 348deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .8;
    pointer-events: none;
    animation: ceeten-border-orbit 6s linear infinite;
    animation-play-state: paused;
  }
  [data-ceeten-motion-dropzone][data-ceeten-in-view="true"]::after { animation-play-state: running; }
}
@keyframes ceeten-border-orbit { to { --ceeten-border-turn: 360deg; } }

[data-ceeten-motion-start] { position: relative; isolation: isolate; overflow: hidden; transition: transform .18s ease, box-shadow .22s ease !important; }
[data-ceeten-motion-start]:enabled { box-shadow: 0 8px 20px rgba(41, 80, 209, .19); }
[data-ceeten-motion-start]:focus-visible { outline: 3px solid #9a84ef; outline-offset: 4px; }
[data-ceeten-motion-start]:active:enabled { transform: translateY(1px) scale(.98); }
[data-ceeten-motion-start]::after {
  content: "";
  position: absolute;
  left: var(--ceeten-press-x, 50%);
  top: var(--ceeten-press-y, 50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%);
  transform: translate(-50%, -50%) scale(.1);
  opacity: 0;
  pointer-events: none;
}
[data-ceeten-motion-start][data-ceeten-pressed="true"]::after { animation: ceeten-button-press .5s ease-out; }
@keyframes ceeten-button-press {
  15% { opacity: 1; }
  to { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}
@media (hover:hover) and (pointer:fine) {
  [data-ceeten-motion-start]:hover:enabled { transform: translateY(-2px); box-shadow: 0 11px 25px rgba(41,80,209,.25); }
  [data-ceeten-motion-start]:hover:enabled > svg { transform: translateX(3px); }
}
[data-ceeten-motion-start] > svg { transition: transform .2s ease; }

/* This is a static explanation of the detection flow, never a fabricated progress bar. */
#ceeten-motion-workflow { display: flex; align-items: center; justify-content: center; gap: 0; list-style: none; max-width:760px; margin:0 auto; padding:22px 8px 0; }
#ceeten-motion-workflow li { position: relative; display: flex; align-items: center; gap: 9px; flex: 1; max-width: 290px; min-width: 0; font-size: 13px; font-weight: 650; color: #53617b; }
#ceeten-motion-workflow .cm-step-number { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border: 1px solid #ddd5f2; border-radius: 50%; background: #f5f1fe; color: #7153c7; font-size: 10px; font-weight: 750; }
#ceeten-motion-workflow li:not(:last-child)::after { content: ""; flex: 1; min-width: 12px; height: 1px; margin: 0 16px 0 7px; background: linear-gradient(90deg, #dcd4ed, #9f86df, #dcd4ed); background-size: 200% 100%; animation: ceeten-flow-line 6s ease infinite; }
#ceeten-motion-workflow li:last-child { flex: 0 0 auto; }
@keyframes ceeten-flow-line { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.ceeten-result-page .cr-steps .cr-finished::after { background: linear-gradient(90deg, #b4d9c5, #67b58c, #b4d9c5); background-size: 200% 100%; animation: ceeten-flow-line 6s ease infinite; }
.ceeten-result-page .cr-steps li:nth-child(3)::after { background: linear-gradient(90deg, #c9b7ee, #9470df, #c9b7ee); background-size: 200% 100%; }
@media(max-width:600px) {
  #ceeten-motion-workflow { padding:20px 4px 0; }
  #ceeten-motion-workflow li { gap: 5px; font-size: 11px; }
  #ceeten-motion-workflow .cm-step-number { flex-basis: 21px; height: 21px; font-size: 9px; }
  #ceeten-motion-workflow li:not(:last-child)::after { margin: 0 9px 0 5px; min-width: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-ceeten-reveal="shown"],
  [data-ceeten-motion-dropzone]::after,
  [data-ceeten-motion-start][data-ceeten-pressed="true"]::after,
  #ceeten-motion-workflow li::after,
  .ceeten-result-page .cr-steps li::after { animation: none !important; }
  [data-ceeten-motion-hero]::after,
  [data-ceeten-motion-file-stack]::before,
  [data-ceeten-motion-file-stack]::after,
  [data-ceeten-motion-start],
  [data-ceeten-motion-start] > svg { transition: none !important; }
}