/* ============================================================
   GRAM · RADIUS & SHADOW & MOTION
   Medium radii. Soft single-layer shadows. Quiet ease-out motion.
   ============================================================ */

:root {
  /* Corner radii — medium, friendly but serious */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;   /* default: buttons, inputs, small cards */
  --radius-lg:  14px;   /* cards, panels */
  --radius-xl:  20px;   /* large surfaces, modals */
  --radius-2xl: 28px;   /* hero media, feature tiles */
  --radius-full: 999px; /* pills, avatars */

  /* Shadows — low, soft, warm-tinted. Never harsh. */
  --shadow-xs: 0 1px 2px rgba(23, 25, 19, 0.05);
  --shadow-sm: 0 1px 3px rgba(23, 25, 19, 0.06), 0 1px 2px rgba(23, 25, 19, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(23, 25, 19, 0.08), 0 2px 6px -3px rgba(23, 25, 19, 0.05);
  --shadow-lg: 0 12px 32px -8px rgba(23, 25, 19, 0.12), 0 4px 10px -6px rgba(23, 25, 19, 0.06);
  --shadow-xl: 0 24px 56px -12px rgba(23, 25, 19, 0.16), 0 8px 20px -10px rgba(23, 25, 19, 0.08);

  /* Subtle inner line for inset surfaces */
  --inset-hairline: inset 0 0 0 1px rgba(23, 25, 19, 0.06);

  /* ============================================================
     MOTION — considered, physical, choreographed.
     Motion in Gram has weight and craft: things arrive with a
     single controlled settle, surfaces respond to the cursor,
     sequences reveal in rhythm. Sculptural, not springy-cartoon.
     ============================================================ */

  /* Easing curves — each with a job. */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --ease-spring:     cubic-bezier(0.34, 1.4, 0.5, 1);  /* @kind other */
  --ease-settle:     cubic-bezier(0.5, 1.25, 0.55, 1); /* @kind other */

  --dur-instant:   90ms;  /* @kind other */
  --dur-fast:     150ms;  /* hovers, small state @kind other */
  --dur-normal:   220ms;  /* toggles, dialogs @kind other */
  --dur-slow:     320ms;  /* progress fills @kind other */
  --dur-slower:   520ms;  /* choreographed panel / card reveals @kind other */
  --dur-cinematic:760ms;  /* hero entrances, once per view @kind other */

  /* Sequenced reveals: multiply by child index for a stagger. */
  --stagger:       70ms;  /* @kind other */

  /* Cursor-reactive surfaces (magnetic / tilt) read these live vars,
     set per-element in JS: --mx / --my (px offset), --tilt (deg). */
  --lift-rest: 0px;
  --lift-hover: -3px;     /* how far interactive surfaces rise on hover */

  --transition-base: all var(--dur-fast) var(--ease-out);
}

/* ============================================================
   MOTION LIBRARY — reusable, brand-correct keyframes.
   Base state = the visible end-state; animate FROM hidden so
   no-JS / print / reduced-motion show content, never a blank frame.
   ============================================================ */

@keyframes gram-rise      { from { opacity: 0; transform: translateY(14px); }            to { opacity: 1; transform: none; } }
@keyframes gram-rise-sm   { from { opacity: 0; transform: translateY(7px); }             to { opacity: 1; transform: none; } }
@keyframes gram-fade      { from { opacity: 0; }                                         to { opacity: 1; } }
@keyframes gram-scale-in  { from { opacity: 0; transform: scale(0.94); }                 to { opacity: 1; transform: none; } }
@keyframes gram-reveal    { from { opacity: 0; transform: translateY(20px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes gram-sheen     { from { background-position: -160% 0; }                        to { background-position: 260% 0; } }
@keyframes gram-draw      { from { stroke-dashoffset: var(--len, 300); }                  to { stroke-dashoffset: 0; } }
@keyframes gram-settle-in { 0% { opacity: 0; transform: translateY(16px) scale(0.97); } 70% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* Utility classes (optional sugar; components mostly inline their own). */
.gram-anim-rise    { animation: gram-rise var(--dur-slower) var(--ease-emphasized) both; }
.gram-anim-reveal  { animation: gram-reveal var(--dur-slower) var(--ease-emphasized) both; }
.gram-anim-settle  { animation: gram-settle-in var(--dur-slow) var(--ease-settle) both; }
.gram-anim-scale   { animation: gram-scale-in var(--dur-normal) var(--ease-spring) both; }

/* Stagger children: set --i per child; delay = index × stagger. */
.gram-stagger > *  { animation: gram-reveal var(--dur-slower) var(--ease-emphasized) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }

/* Magnetic / lift surface: give it position + transition, drive --mx/--my/--lift in JS. */
.gram-magnetic {
  transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-out);
  transform: translate3d(var(--mx, 0), var(--my, 0px), 0);
}
.gram-magnetic:hover { transform: translate3d(var(--mx, 0), calc(var(--my, 0px) + var(--lift-hover)), 0); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms; /* @kind other */
    --dur-normal: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-slower: 0ms; /* @kind other */
    --dur-cinematic: 0ms; /* @kind other */
    --lift-hover: 0px;
  }
  .gram-anim-rise, .gram-anim-reveal, .gram-anim-settle, .gram-anim-scale,
  .gram-stagger > *, .gram-magnetic { animation: none !important; transform: none !important; }
}