/* Il Casale — motion. Slow, warm, never bouncy. The vocabulary:
   1. sipario   — page-load: a crema curtain lifts off the red room once. (1200ms)
   2. lume      — ambient lamplight: a 7s glow breathing behind the hero. Opacity only.
   3. tratto    — hover: a line draws itself under a link or menu item, left to right. (450ms)
   4. zoom      — media scales 4% on hover. Nothing else moves on hover. */
:root {
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --duration-instant: 90ms;
  --duration-fast: 200ms;
  --duration-base: 450ms;
  --duration-slow: 800ms;
  --duration-sipario: 1200ms;
  --duration-lume: 7000ms;

  --transition-control: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
  --transition-media: transform var(--duration-slow) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
  --media-hover-scale: 1.04;
  --press-opacity: 0.7;
}

@keyframes cs-sipario { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes cs-lume { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes cs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .cs-frame--hover:hover img { transform: none; }
}

/* 5. filo — scroll-linked: line-art draws itself as it enters the viewport, and background
      illustration layers drift at different speeds while the page scrolls. CSS scroll-driven
      animations where supported; assets/filo.js is the fallback and the parallax driver. */
:root {
  --filo-range-start: entry 0%;
  --filo-range-end: cover 55%;
  --parallax-slow: 0.18;   /* fraction of scroll distance a far layer moves */
  --parallax-mid: 0.35;
  --parallax-near: 0.6;
}
@keyframes cs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 6. tralcio — the vine. One page-long winding stroke in the left margin that grows with scroll progress,
      its tip level with the middle of the viewport; a leaf opens at every [data-tralcio-node]. assets/tralcio.js. */