/* Velunora V3.5 — calm motion for the OUTER platform only.
   Loaded by index.html + admin.html, never by join/fill/result.
   Progressive enhancement: without this file, all controls still work.
*/
:root {
  --v35-ease: cubic-bezier(.22, 1, .36, 1);
  --v35-quick: 170ms;
  --v35-calm: 320ms;
  --v35-float: 0 15px 34px rgba(81, 91, 159, .095), 0 3px 12px rgba(81, 91, 159, .045);
}

/* Ambient light: extremely slow, barely perceptible, and decorative only. */
.home-page .hero,
.admin-page .hero {
  isolation: isolate;
  transition: box-shadow 420ms var(--v35-ease), border-color 420ms ease;
}
.home-page .hero::after,
.admin-page .hero::after {
  animation: v35-breathe 13s ease-in-out infinite alternate;
}
.home-page .hero > *,
.admin-page .hero > * {
  position: relative;
  z-index: 1;
}
@keyframes v35-breathe {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .72; }
  to   { transform: translate3d(-12px, 9px, 0) scale(1.065); opacity: .9; }
}

/* The brand reacts softly to the visitor, rather than constantly bobbing. */
.home-page .brand-symbol,
.admin-page .brand-symbol {
  transform-origin: center 60%;
  transition: transform 550ms var(--v35-ease), filter 550ms ease;
}
.home-page .brand-name,
.admin-page .brand-name {
  transition: color 220ms ease, letter-spacing 400ms var(--v35-ease);
}

/* Deliberately light section entrance; no content is ever hidden awaiting JS. */
.home-page .hero,
.admin-page .hero {
  animation: v35-arrive 420ms var(--v35-ease) both;
}
.home-page .card,
.admin-page #loginPanel:not(.hidden),
.admin-page #app:not(.hidden) > .card:first-child {
  animation: v35-arrive 470ms var(--v35-ease) both;
}
.admin-page #editorPanel:not(.hidden),
.admin-page #sharePanel:not(.hidden),
.admin-page #statsPanel:not(.hidden),
.admin-page #invitesPanel:not(.hidden) {
  animation: v35-panel-in 280ms var(--v35-ease) both;
}
@keyframes v35-arrive {
  from { opacity: .3; transform: translate3d(0, 9px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes v35-panel-in {
  from { opacity: .55; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}

/* Affordances and tactile feedback, including buttons created by admin.js. */
.home-page .button,
.admin-page .button {
  transition: transform var(--v35-quick) var(--v35-ease),
    box-shadow 250ms ease, background-color 200ms ease,
    border-color 200ms ease, color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.home-page .button:active:not(:disabled),
.admin-page .button:active:not(:disabled) {
  transform: translateY(1px) scale(.986);
  box-shadow: 0 2px 7px rgba(80, 88, 153, .09);
}
.home-page .button:focus-visible,
.admin-page .button:focus-visible,
.home-page .brand-area:focus-visible,
.admin-page .brand-area:focus-visible {
  outline: 3px solid rgba(114, 116, 225, .42);
  outline-offset: 4px;
}
.home-page .button:disabled,
.admin-page .button:disabled,
.home-page .button.is-loading,
.admin-page .button.is-loading {
  transform: none !important;
  box-shadow: none;
}

/* The survey list is a quiet layer, not another grid of outlined boxes. */
.admin-page #surveys tbody tr {
  animation: v35-arrive 330ms var(--v35-ease) both;
  transition: transform 250ms var(--v35-ease), box-shadow 300ms ease, background-color 300ms ease;
}
.admin-page #surveys tbody tr:nth-child(2) { animation-delay: 35ms; }
.admin-page #surveys tbody tr:nth-child(3) { animation-delay: 70ms; }
.admin-page #surveys tbody tr:nth-child(4) { animation-delay: 105ms; }
.admin-page #surveys tbody tr:nth-child(5) { animation-delay: 140ms; }
.admin-page #surveys tbody tr:nth-child(n+6) { animation-delay: 160ms; }
.admin-page #surveys .row-actions .button {
  transition: transform 160ms var(--v35-ease), background-color 190ms ease,
    box-shadow 220ms ease, color 190ms ease;
}
.home-page #surveys .question {
  position: relative;
  border-bottom: 1px solid rgba(230, 234, 247, .75);
  border-radius: 14px;
  margin: 9px -12px;
  padding: 18px 12px 20px;
  transition: transform 270ms var(--v35-ease), background-color 270ms ease, box-shadow 270ms ease;
}
.home-page #surveys .question:last-child { border-bottom-color: transparent; }
.home-page #surveys .question .button { margin-top: 4px; }

/* Data tiles have depth only on interaction, not thick borders at rest. */
.admin-page #stats .stat {
  position: relative;
  transition: transform 270ms var(--v35-ease), box-shadow 300ms ease, background-color 300ms ease;
}
.admin-page #stats .stat strong {
  transition: color 260ms ease;
}
.admin-page #stats tbody tr {
  transition: background-color 190ms ease;
}
.admin-page #stats tbody tr:hover { background: rgba(237, 238, 255, .42); }
.admin-page #stats .bar > div {
  transition: width 480ms var(--v35-ease);
}

/* Focus states are reassuring, not startling. */
.admin-page .input,
.admin-page textarea,
.home-page .input {
  transition: border-color 200ms ease, box-shadow 260ms ease, background-color 220ms ease;
}
.admin-page .input:focus,
.admin-page textarea:focus,
.home-page .input:focus {
  box-shadow: 0 0 0 4px rgba(123, 130, 232, .13), 0 6px 15px rgba(85, 94, 154, .035);
}
.admin-page .archive-toggle,
.admin-page .top-tools a,
.home-page .top a {
  transition: color 210ms ease, background-color 210ms ease, opacity 210ms ease;
}

/* Friendly, unobtrusive notifications. */
.admin-page .v-toast,
.home-page .v-toast {
  animation: v35-toast 360ms var(--v35-ease) both;
  backdrop-filter: blur(8px);
}
@keyframes v35-toast {
  from { transform: translate3d(9px, -3px, 0) scale(.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* True hover should never accidentally trigger on touch screens. */
@media (hover:hover) and (pointer:fine) {
  .home-page .brand-area:hover .brand-symbol,
  .admin-page .brand-area:hover .brand-symbol {
    transform: translateY(-2px) rotate(-2deg) scale(1.025);
    filter: drop-shadow(0 8px 12px rgba(93, 99, 183, .16));
  }
  .home-page .brand-area:hover .brand-name,
  .admin-page .brand-area:hover .brand-name { color: #5668bd; letter-spacing: -.025em; }
  .home-page .button:hover:not(:disabled),
  .admin-page .button:hover:not(:disabled) { transform: translateY(-2px); }
  .home-page .button:active:not(:disabled),
  .admin-page .button:active:not(:disabled) { transform: translateY(1px) scale(.986); }
  .admin-page #surveys tbody tr:hover {
    transform: translateY(-3px);
    box-shadow: var(--v35-float);
    background: #fefeff;
  }
  .home-page #surveys .question:hover {
    transform: translateY(-2px);
    background: rgba(245, 246, 255, .76);
    box-shadow: 0 12px 24px rgba(76, 89, 151, .045);
  }
  .admin-page #stats .stat:hover {
    transform: translateY(-3px);
    background: #f7f7ff;
    box-shadow: 0 10px 22px rgba(80, 89, 159, .075);
  }
  .admin-page .archive-toggle:hover { color: #5267ae; }
}

/* Explicitly honor users who prefer fewer animations. */
@media (prefers-reduced-motion: reduce) {
  .home-page *, .home-page *::before, .home-page *::after,
  .admin-page *, .admin-page *::before, .admin-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
    transform: none !important;
  }
}