/* =========================================================================
   PlanNow — Styles des pages marketing (landing / signup / pricing)
   Identité monochrome obsidian + animations natives (scroll reveal, 3D).
   Aucune dépendance : tout est en CSS, piloté par un JS léger.
   ========================================================================= */

:root { --kro-obsidian: #0F172A; }
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
::selection { background: #e2e8f0; }

/* --- Apparition au scroll ------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* --- Effet Zoom 3D / perspective (style Apple·Stripe) --------------------- */
/* La "scène" définit la profondeur ; le "deck" est incliné puis se redresse  */
/* et zoome à mesure que l'utilisateur défile (variables pilotées en JS).      */
.scene { perspective: 1700px; perspective-origin: 50% 22%; }
.deck {
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transform-origin: center center;
  transform: rotateX(var(--rx, 26deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, .86));
}
.deck-shadow { /* ombre portée projetée sous le deck */
  background: radial-gradient(55% 60% at 50% 45%, rgba(15, 23, 42, .22), transparent 72%);
  filter: blur(8px);
}

/* --- Petites animations d'ambiance --------------------------------------- */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.floaty { animation: floaty 6s ease-in-out infinite; }
.floaty-slow { animation: floaty 9s ease-in-out infinite; }

@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pop { animation: pop .32s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.toast-in { animation: toastIn .35s cubic-bezier(.16, 1, .3, 1) both; }

/* --- Grille décorative (fond hero) --------------------------------------- */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 35%, transparent 80%);
          mask-image: radial-gradient(70% 60% at 50% 0%, #000 35%, transparent 80%);
}

/* --- Barre supérieure : effet verre -------------------------------------- */
.glass { background: rgba(255, 255, 255, .72); backdrop-filter: saturate(180%) blur(12px); }

/* --- Logo PlanNow --- */
.pn-logo {
  font-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  cursor: pointer;
  transition: letter-spacing 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.pn-logo:hover { letter-spacing: 0.14em; }
.pn-pla { color: #111827; }
.pn-n {
  background: linear-gradient(to right, #111827 50%, #9ca3af 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pn-ow {
  color: #9ca3af;
  transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pn-logo:hover .pn-ow { color: #6b7280; }

/* Variante fond sombre (volet branding signup) */
.pn-logo-inv .pn-pla { color: #ffffff; }
.pn-logo-inv .pn-n {
  background: linear-gradient(to right, #ffffff 50%, rgba(255,255,255,0.45) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pn-logo-inv .pn-ow { color: rgba(255,255,255,0.45); }
.pn-logo-inv:hover .pn-ow { color: rgba(255,255,255,0.7); }

/* --- Accessibilité : respect de prefers-reduced-motion ------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .deck { transform: scale(.98) !important; opacity: 1 !important; }
  .floaty, .floaty-slow { animation: none !important; }
  #zoomSection { height: auto !important; }
  #zoomSection .scene { position: static !important; height: auto !important; padding-top: 1rem; padding-bottom: 3rem; }
  .pn-logo { transition: none !important; }
  .pn-logo:hover { letter-spacing: 0.06em !important; }
  .pn-ow { transition: none !important; }
}