/* Vemetto design layer v1 · tokens from /workspace/vemetto_DESIGN.md · Hallmark floor + LottieFiles motion principles */
/* Critique: one ink-violet night, one amber signal; calm type, no glow soup; motion only where it explains */
:root{
  --vm-night:#0a0818;--vm-night-2:#120f26;--vm-surface:#17132e;--vm-surface-2:#1e1940;
  --vm-line:rgba(237,233,255,.10);--vm-line-strong:rgba(237,233,255,.20);
  --vm-text:#efeaff;--vm-text-2:#c4bddf;--vm-text-3:#9a92b8;
  --vm-violet:#a855f7;--vm-violet-soft:rgba(168,85,247,.16);--vm-amber:#facc15;
  --vm-font:"IBM Plex Sans Arabic","Tajawal",Tahoma,system-ui,sans-serif;
  --vm-r-sm:10px;--vm-r-md:16px;--vm-r-lg:22px;
  --vm-sh-1:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px -12px rgba(0,0,0,.55);
  --vm-sh-2:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -18px rgba(0,0,0,.7);
  --vm-ease-out:cubic-bezier(.05,.7,.1,1);--vm-ease-std:cubic-bezier(.2,0,0,1);--vm-ease-in:cubic-bezier(.3,0,1,1);
  --vm-d-hover:120ms;--vm-d-press:90ms;--vm-d-card:320ms;--vm-d-page:420ms;--vm-stagger:60ms;
}
html,body{overflow-x:clip}
body{font-family:var(--vm-font)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body :where(h1,h2,h3,h4,p,li,a,button,input,select,textarea,label,small,b,strong,span,summary,figcaption,td,th){font-family:var(--vm-font)}
:where(h1,h2,h3){text-wrap:balance;overflow-wrap:break-word;min-width:0;letter-spacing:0}
:where(p,li){text-wrap:pretty}
:where(main) :where(p){line-height:1.85}
::selection{background:var(--vm-violet);color:#fff}
:where(a,button,[role=button],input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--vm-amber)!important;outline-offset:3px;transition:none!important}
/* quiet film grain instead of glow: breaks the flat "generated" look */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2147483000;opacity:.045;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* buttons: press + hover feel, transform/opacity/colour only */
:where(.btn,.btn-neon,.btn-glass,.nav-cta,.cinematic-cta,.vm-btn){transition:transform var(--vm-d-hover) var(--vm-ease-std),box-shadow var(--vm-d-card) var(--vm-ease-std),background-color var(--vm-d-hover) linear,color var(--vm-d-hover) linear,border-color var(--vm-d-hover) linear!important}
:where(.btn,.btn-neon,.btn-glass,.nav-cta,.cinematic-cta,.vm-btn):hover{transform:translateY(-1px)}
:where(.btn,.btn-neon,.btn-glass,.nav-cta,.cinematic-cta,.vm-btn):active{transform:translateY(0) scale(.98);transition-duration:var(--vm-d-press)!important}
/* cards: one consistent lift, border warms, no nested glow */
.vm-card-fx{transition:transform var(--vm-d-card) var(--vm-ease-std),border-color var(--vm-d-hover) linear,box-shadow var(--vm-d-card) var(--vm-ease-std)!important}
@media (hover:hover){.vm-card-fx:hover{transform:translateY(-3px);border-color:var(--vm-line-strong)!important;box-shadow:var(--vm-sh-2)!important}
 .vm-card-fx:hover img{transform:scale(1.03)}}
.vm-card-fx img{transition:transform 600ms var(--vm-ease-std)}
/* footer & crumbs readability */
.site-footer :where(a){transition:color var(--vm-d-hover) linear}
.site-footer :where(a):hover{color:#fff}
.site-footer :where(p,small,.footer-copy){color:var(--vm-text-2)}
.vm-crumbs a{text-underline-offset:3px}
/* scroll reveal: only when JS opted in, so content shows with scripting off */
html.vm-motion .vm-rv{opacity:0;transform:translateY(16px)}
html.vm-motion .vm-rv.vm-in{opacity:1;transform:none;transition:opacity var(--vm-d-card) var(--vm-ease-out),transform var(--vm-d-card) var(--vm-ease-out);transition-delay:calc(var(--vm-i,0) * var(--vm-stagger))}
html.vm-motion .vm-rv.vm-in.vm-card-fx{transition:opacity var(--vm-d-card) var(--vm-ease-out) calc(var(--vm-i,0) * var(--vm-stagger)),transform var(--vm-d-card) var(--vm-ease-std),border-color var(--vm-d-hover) linear,box-shadow var(--vm-d-card) var(--vm-ease-std)!important}
html.vm-motion main{animation:vmPageIn var(--vm-d-page) var(--vm-ease-out) both}
@keyframes vmPageIn{from{opacity:0}to{opacity:1}}
html.vm-leaving main{opacity:0;transition:opacity 160ms var(--vm-ease-in)}
@media (prefers-reduced-motion:reduce){
 html.vm-motion .vm-rv{opacity:1!important;transform:none!important;transition:none!important}
 html.vm-motion main{animation:none!important}
 .vm-card-fx,.vm-card-fx img,:where(.btn,.btn-neon,.btn-glass,.nav-cta,.cinematic-cta){transition:none!important}
 .vm-card-fx:hover,.vm-card-fx:hover img{transform:none!important}
}