/* Djihane Mode — small additions on top of Tailwind */
html { scroll-behavior: smooth; }
/* set here too, so the look holds when the page is hosted inside another <body> */
body { -webkit-font-smoothing: antialiased; background: #FDFBF8; color: #2B2233; font-family: Montserrat, system-ui, sans-serif; font-size: 16px; }

/* Ornament: line — diamond flower — line (from the logo) */
.ornament { display: flex; align-items: center; justify-content: center; gap: .75rem; color: #A994D0; }
.ornament::before, .ornament::after { content: ""; height: 1px; width: 5rem; background: currentColor; opacity: .7; }

/* Drawer / modal transitions */
.drawer { transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.drawer.open { transform: translateX(0); }
.backdrop { opacity: 0; pointer-events: none; transition: opacity .3s; }
.backdrop.open { opacity: 1; pointer-events: auto; }

/* Gentle lift on scroll; content stays visible before it animates */
.reveal { transform: translateY(12px); transition: transform .7s ease; }
.reveal.in { transform: none; }

/* Thread drawing animation in hero */
.thread-path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 3.2s ease forwards .3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Toast */
.toast { transform: translateY(120%); opacity: 0; transition: all .35s ease; }
.toast.show { transform: none; opacity: 1; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .drawer, .toast { transition: none; }
  .thread-path { animation: none; stroke-dashoffset: 0; }
}