/* ==========================================================================
   MyShareBox — animations du site public (accueil, téléchargement, compte, offres)

   Principes : discret, rapide, jamais bloquant. Les animations d'entrée ne portent que sur des éléments
   fixes du HTML : les blocs que le JavaScript redessine souvent (listes, messages, formulaires) ne sont pas
   animés, pour ne pas clignoter. « Mouvements réduits » (système) coupe tout : voir styles.css.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --slow: 1.6; /* vitesse des animations : 1 = rapide, 2 = très lent */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pop-in {
  0% { opacity: 0; transform: scale(0.55); }
  65% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.12); }
}

@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -24px) scale(1.08); }
}

@keyframes glow-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 50%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

@keyframes sheen {
  to { transform: translateX(100%); }
}

@keyframes draw-check {
  from { stroke-dashoffset: 30; }
  to { stroke-dashoffset: 0; }
}

/* ---------- Décor vivant : deux halos lents derrière la zone principale ---------- */
.hero {
  position: relative;
  overflow: hidden;
  overflow: clip; /* « clip » : les halos sont coupés sans que la zone puisse jamais défiler (« hidden » se laisse défiler par programme et décalait la page) */
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.hero::before {
  top: -120px;
  left: -80px;
  width: 420px;
  height: 420px;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  animation: drift-a calc(22s * var(--slow)) ease-in-out infinite;
}

.hero::after {
  right: -100px;
  bottom: -140px;
  width: 460px;
  height: 460px;
  background: color-mix(in srgb, var(--green) 13%, transparent);
  animation: drift-b calc(26s * var(--slow)) ease-in-out infinite;
}

/* ---------- Entrées de page (une seule fois, au chargement) ---------- */
.site-header {
  animation: fade-down calc(0.5s * var(--slow)) var(--ease-out) both;
}

.upload-card,
.premium-page {
  animation: fade-up calc(0.7s * var(--slow)) var(--ease-out) calc(0.05s * var(--slow)) both;
}

.hero-intro > .badge,
.hero-intro > .hero-title,
.hero-intro > .hero-text,
.hero-intro > .features {
  animation: fade-up calc(0.7s * var(--slow)) var(--ease-out) both;
}

.hero-intro > .badge { animation-delay: calc(0.1s * var(--slow)); }
.hero-intro > .hero-title { animation-delay: calc(0.18s * var(--slow)); }
.hero-intro > .hero-text { animation-delay: calc(0.26s * var(--slow)); }
.hero-intro > .features { animation-delay: calc(0.34s * var(--slow)); }

.badge-dot {
  animation: glow-ring calc(2.4s * var(--slow)) ease-out infinite;
}

.site-footer {
  animation: fade-in calc(0.9s * var(--slow)) ease calc(0.3s * var(--slow)) both;
}

.share-contact,
.share-home {
  animation: fade-in calc(0.8s * var(--slow)) ease calc(0.4s * var(--slow)) both;
}

/* ---------- Boutons : léger relief au survol, enfoncement au clic ---------- */
.btn {
  transition: background-color calc(0.15s * var(--slow)) ease, border-color calc(0.15s * var(--slow)) ease, color calc(0.15s * var(--slow)) ease,
    box-shadow calc(0.2s * var(--slow)) ease, transform calc(0.18s * var(--slow)) var(--ease-out);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--navy) 70%, transparent);
}

/* Le bouton d'envoi attire l'œil quand il devient utilisable (3 pulsations). */
.btn-send:not(:disabled) {
  animation: glow-ring calc(1.8s * var(--slow)) ease-out 3;
}

.header-link {
  transition: color calc(0.15s * var(--slow)) ease;
}

.lang-btn {
  transition: background-color calc(0.2s * var(--slow)) ease, color calc(0.2s * var(--slow)) ease, transform calc(0.15s * var(--slow)) var(--ease-out);
}

.lang-btn:active {
  transform: scale(0.94);
}

/* ---------- Zone de dépôt ---------- */
.dropzone {
  transition: background-color calc(0.2s * var(--slow)) ease, border-color calc(0.2s * var(--slow)) ease, transform calc(0.25s * var(--slow)) var(--ease-out), box-shadow calc(0.25s * var(--slow)) ease;
}

.dropzone:hover:not(.is-disabled) {
  background: var(--tint);
}

.dropzone-icon {
  animation: float calc(3.4s * var(--slow)) ease-in-out infinite;
}

.dropzone.is-dragover {
  transform: scale(1.015);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 18%, transparent);
}

.dropzone.is-dragover .dropzone-icon {
  animation: none;
  transform: translateY(-8px) scale(1.18);
}

/*
  Survol de la souris : la bordure en pointillés se met à défiler, un halo lumineux suit la souris, la zone se soulève
  et la flèche monte et descend. Pendant un vrai glisser-déposer (.is-dragover), c'est l'effet ci-dessus qui prend le relais.
  Désactivé si l'utilisateur a demandé « mouvements réduits » (une image SVG animée n'est pas coupée par les règles CSS).
*/
@keyframes arrow-lift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3.5px); }
}

@media (prefers-reduced-motion: no-preference) {
  .dropzone:hover:not(.is-disabled):not(.is-dragover) {
    border-color: transparent;
    background:
      radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--blue) 15%, transparent), transparent 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='14' ry='14' fill='none' stroke='%232754c5' stroke-width='4' stroke-dasharray='10 8' stroke-linecap='round'%3E%3Canimate attributeName='stroke-dashoffset' from='0' to='36' dur='1.1s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E") center / 100% 100% no-repeat,
      var(--tint);
    background-origin: border-box;
    transform: translateY(-3px);
    box-shadow: 0 20px 38px -24px color-mix(in srgb, var(--blue) 60%, transparent);
  }

  .dropzone:hover:not(.is-disabled):not(.is-dragover) .dropzone-icon {
    animation: none;
    transform: scale(1.14);
  }

  .dropzone:hover:not(.is-disabled):not(.is-dragover) .dropzone-icon path:nth-of-type(-n+2) {
    animation: arrow-lift calc(0.55s * var(--slow)) ease-in-out infinite;
  }

  .dropzone:hover:not(.is-disabled):not(.is-dragover) .dropzone-title {
    color: var(--blue);
  }
}

.dropzone-title {
  transition: color calc(0.2s * var(--slow)) ease;
}

/* ---------- Envoi en cours et lien prêt ---------- */
.progress-fill {
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-100%);
  animation: sheen calc(1.3s * var(--slow)) linear infinite;
}

.status-icon--success,
.share-icon,
.extend-done-icon {
  animation: pop-in calc(0.55s * var(--slow)) var(--ease-spring) both;
}

.status-icon--success svg path {
  stroke-dasharray: 30;
  animation: draw-check calc(0.5s * var(--slow)) ease-out calc(0.25s * var(--slow)) both;
}

/* ---------- Fenêtres et chat ---------- */
dialog[open] {
  animation: dialog-in calc(0.28s * var(--slow)) var(--ease-out) both;
}

dialog::backdrop {
  animation: fade-in calc(0.25s * var(--slow)) ease both;
}

.chat-panel:not([hidden]) {
  transform-origin: bottom right;
  animation: dialog-in calc(0.3s * var(--slow)) var(--ease-out) both;
}

.chat-launcher {
  transition: background-color calc(0.15s * var(--slow)) ease, transform calc(0.2s * var(--slow)) var(--ease-out), box-shadow calc(0.2s * var(--slow)) ease;
  animation: pop-in calc(0.6s * var(--slow)) var(--ease-spring) calc(1.2s * var(--slow)) both;
}

.chat-launcher:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 28px rgba(11, 18, 32, 0.34);
}

.chat-badge:not([hidden]) {
  animation: pop-in calc(0.4s * var(--slow)) var(--ease-spring) both, glow-ring calc(1.8s * var(--slow)) ease-out calc(0.4s * var(--slow)) infinite;
}

/* ---------- Mon compte : changement d'onglet (classes posées par js/account.js au clic) ---------- */
@keyframes tab-in {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: none; }
}

@keyframes tab-item-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.account-panel.tab-enter {
  animation: tab-in calc(0.45s * var(--slow)) var(--ease-out) both;
}

.account-panel.tab-enter > * {
  animation: tab-item-in calc(0.55s * var(--slow)) var(--ease-out) both;
}

.account-panel.tab-enter > :nth-child(2) { animation-delay: calc(0.07s * var(--slow)); }
.account-panel.tab-enter > :nth-child(3) { animation-delay: calc(0.14s * var(--slow)); }
.account-panel.tab-enter > :nth-child(4) { animation-delay: calc(0.21s * var(--slow)); }
.account-panel.tab-enter > :nth-child(5) { animation-delay: calc(0.28s * var(--slow)); }
.account-panel.tab-enter > :nth-child(6) { animation-delay: calc(0.35s * var(--slow)); }
.account-panel.tab-enter > :nth-child(n + 7) { animation-delay: calc(0.42s * var(--slow)); }

/* La barre d'espace de stockage se remplit depuis la gauche. */
.account-panel.tab-enter .account-bar-fill {
  transform-origin: left;
  animation: grow-x calc(0.9s * var(--slow)) var(--ease-out) calc(0.2s * var(--slow)) both;
}

/* Le trait sous l'onglet choisi se dessine depuis la gauche. */
.account-tab {
  position: relative;
}

.account-tab.is-active.tab-pop {
  border-bottom-color: transparent;
}

.account-tab.is-active.tab-pop::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 2px;
  background: var(--green);
  transform-origin: left;
  animation: grow-x calc(0.4s * var(--slow)) var(--ease-out) both;
}

/* ---------- Pages Mon compte, offres, téléchargement ---------- */
.account-tab {
  transition: color calc(0.15s * var(--slow)) ease, border-color calc(0.25s * var(--slow)) ease;
}

.account-tile,
.account-share,
.premium-card,
.file-item {
  transition: transform calc(0.25s * var(--slow)) var(--ease-out), box-shadow calc(0.25s * var(--slow)) ease, border-color calc(0.2s * var(--slow)) ease, background-color calc(0.2s * var(--slow)) ease;
}

.account-tile:hover,
.account-share:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.35);
}

.premium-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 44px -22px rgba(30, 58, 138, 0.4);
}

.premium-card.is-featured:hover {
  transform: translateY(-7px);
}

a.account-attention {
  transition: transform calc(0.2s * var(--slow)) var(--ease-out), box-shadow calc(0.2s * var(--slow)) ease;
}

a.account-attention:hover {
  transform: translateX(3px);
  box-shadow: 0 8px 20px -12px rgba(161, 98, 7, 0.5);
}

.footer-col a {
  display: inline-block;
  transition: color calc(0.15s * var(--slow)) ease, transform calc(0.2s * var(--slow)) var(--ease-out);
}

.footer-col a:hover {
  transform: translateX(3px);
}