/* NEURAFIT — stili condivisi da tutte le pagine (token, nav, footer, modale, campo, cursore) */
@font-face{font-family:"Clash Grotesk";src:url(fonts/ClashGrotesk-Variable.woff2) format("woff2");font-weight:200 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/JetBrainsMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/JetBrainsMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/JetBrainsMono-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
/* Inter ospitato sul sito (OFL): nessuna richiesta a Google Fonts */
@font-face{font-family:"Inter";src:url(fonts/Inter-latin-ext.woff2) format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";src:url(fonts/Inter-latin.woff2) format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* Palette ufficiale — NEURAFIT Brand Guidelines v1.0 */
  --intense-blue:#14233B;
  --yellow-green:#B4CF5D;
  --first-green:#78BC67;
  --second-green:#263937;
  --second-blue:#184993;
  --white:#F5F6ED;

  --ink:var(--intense-blue);
  --ink-2:rgb(20 35 59 / .74);
  --ink-3:rgb(20 35 59 / .6);
  --line:rgb(20 35 59 / .14);
  --line-strong:rgb(20 35 59 / .28);
  --surface:#ECEEE2;
  --on-dark:var(--white);
  --on-dark-2:rgb(245 246 237 / .74);
  --line-dark:rgb(245 246 237 / .16);

  --f-display:"Clash Grotesk",ui-sans-serif,system-ui,sans-serif;
  --f-body:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-ui:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;

  --gutter:clamp(16px,4vw,48px);
  --max:1360px;
  --radius:18px;
  --nav-h:72px;

  --ease-out:cubic-bezier(.22,1,.36,1);   /* quint */
  --ease-expo:cubic-bezier(.16,1,.3,1);

  --z-sticky:10;
  --z-nav:20;
  --z-modal:40;
  --z-intro:50;
  --z-cursor:60;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{
  background:var(--white);color:var(--ink);
  font-family:var(--f-body);font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--second-blue);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible{outline-color:var(--yellow-green)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
p{text-wrap:pretty}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--intense-blue);--fg:var(--white);--hover:var(--second-blue);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 1.45em;border-radius:999px;border:0;cursor:pointer;
  background:var(--bg);color:var(--fg);
  font-family:var(--f-ui);font-weight:600;font-size:15px;line-height:1;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;
  transition:color .35s var(--ease-out),translate .6s var(--ease-expo),scale .2s var(--ease-out);
}
.btn:active{scale:.97}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--hover);
  transform:translateY(101%);transition:transform .45s var(--ease-out);
}
.btn:hover::before{transform:none}
.btn svg{width:14px;height:14px;transition:transform .45s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn--lime{--bg:var(--yellow-green);--fg:var(--intense-blue);--hover:var(--white)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--hover:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn--ghost-dark{--bg:transparent;--fg:var(--white);--hover:rgb(245 246 237 / .12);box-shadow:inset 0 0 0 1.5px var(--line-dark)}
.btn--white{--bg:var(--white);--fg:var(--intense-blue);--hover:var(--yellow-green)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-ui);font-weight:500;font-size:15px;
  text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;
  padding-bottom:2px;transition:background-size .45s var(--ease-out);
}
.link-arrow:hover{background-size:100% 1.5px}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:var(--z-nav);height:var(--nav-h);
  background:var(--white);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.nav[data-scrolled]{border-bottom-color:var(--line)}
/* avanzamento della lettura: una riga Second Blue sotto la barra, guidata dallo scroll (nessun listener) */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--second-blue);transform-origin:left;animation:read linear both;animation-timeline:scroll(root)}
    @keyframes read{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo img{height:24px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{
  display:block;padding:8px 14px;border-radius:999px;
  font-family:var(--f-ui);font-size:14.5px;font-weight:500;text-decoration:none;color:var(--ink-2);
  transition:color .2s,background-color .2s;
}
.nav-links{position:relative}
.nav-links a:hover{color:var(--ink);background:var(--surface)}
.nav-links a[aria-current]{color:var(--ink)}
/* pillola che scivola sulla voce della sezione in vista (posizione da JS) */
.nav-pill{position:absolute;left:0;top:50%;height:36px;margin-top:-18px;border-radius:999px;background:var(--yellow-green);z-index:-1;opacity:0;
  transition:translate .6s var(--ease-expo),width .6s var(--ease-expo),opacity .3s}
.nav-links.has-pill a[aria-current]:hover{background:none}
.nav-right{display:flex;align-items:center;gap:10px}
.nav .btn{padding:.8em 1.2em;font-size:14px}
.menu-btn{
  display:none;width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;
  background:var(--surface);place-items:center;
}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--ink);box-shadow:0 -5px 0 var(--ink),0 5px 0 var(--ink)}
#menu{
  inset:var(--nav-h) 0 auto;width:100%;max-width:none;margin:0;border:0;
  background:var(--white);border-bottom:1px solid var(--line);
  padding:12px var(--gutter) 24px;
}
#menu ul{list-style:none;display:grid}
#menu a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--f-display);font-size:26px;font-weight:500;text-decoration:none}
#menu .btn{margin-top:20px;justify-content:center;width:100%}
/* il menu mobile scende e le voci arrivano in sequenza */
#menu:popover-open{animation:menu-in .5s var(--ease-expo)}
#menu:popover-open li{animation:fade-up .6s var(--ease-expo) both;animation-delay:calc(var(--i,0) * 50ms + 80ms)}
#menu li:nth-child(2){--i:1}#menu li:nth-child(3){--i:2}#menu li:nth-child(4){--i:3}#menu li:nth-child(5){--i:4}#menu li:nth-child(6){--i:5}
@keyframes menu-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}}

@media (max-width:960px){
  .nav-links,.nav-right .btn{display:none}
  .menu-btn{display:grid}
}


/* ---------- Campo + cursore ---------- */
/* linee del segnale: solo la prima schermata, sfumano verso il basso e scorrono via con la pagina */
.bg-field{position:absolute;inset:0 0 auto;z-index:-1;width:100%;height:100svh;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}

/* cursore: attivo solo con mouse vero e movimento consentito (classe da JS); nella modale torna quello nativo */
html.has-cursor:not(:has(dialog[open])) *:not(input,textarea,select){cursor:none}
.cursor{display:none}
.has-cursor .cursor{display:block;position:fixed;inset:0 auto auto 0;z-index:var(--z-cursor);pointer-events:none;color:var(--intense-blue)}
html:has(dialog[open]) .cursor{display:none}
.cursor > *{position:absolute;left:0;top:0;transition:opacity .25s var(--ease-out)}
.cursor.is-hidden > *,.cursor.is-native > *{opacity:0}
.cursor.is-dark{color:var(--yellow-green)}
.cursor-dot i{
  position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:currentColor;
  transition:transform .35s var(--ease-out);
}
.cursor-ring i{
  position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;
  border:1.5px solid currentColor;opacity:.55;
  transition:transform .5s var(--ease-expo),background-color .3s,border-color .3s,opacity .3s;
}
/* sui link l'anello si gonfia in una macchia Yellow Green sotto il testo */
.cursor.is-link .cursor-ring i{transform:scale(1.7);background:rgb(180 207 93 / .42);border-color:transparent;opacity:1}
.cursor.is-link.is-dark .cursor-ring i{background:rgb(180 207 93 / .22)}
.cursor.is-link .cursor-dot i{transform:scale(.6)}
.cursor.is-down .cursor-ring i{transform:scale(.75);transition-duration:.15s}
.cursor.is-link.is-down .cursor-ring i{transform:scale(1.45)}
.cursor.is-label .cursor-ring i,.cursor.is-label .cursor-dot i{transform:scale(0)}
.cursor-label{
  position:absolute;left:0;top:0;padding:10px 16px;border-radius:999px;white-space:nowrap;
  background:var(--intense-blue);color:var(--white);box-shadow:0 0 0 1.5px rgb(245 246 237 / .5);
  font-family:var(--f-ui);font-size:13px;font-weight:600;line-height:1;
  transform:translate(-50%,-50%) scale(0);transition:transform .45s var(--ease-expo);
}
.cursor.is-label .cursor-label{transform:translate(-50%,-50%) scale(1)}
.cursor.is-label.is-down .cursor-label{transform:translate(-50%,-50%) scale(.9);transition-duration:.15s}

/* ---------- Rivelazioni (site.js aggiunge .in all'ingresso nel viewport) ---------- */
/* .js viene aggiunto in testa: senza JS il contenuto resta visibile */
[data-reveal]{transition:opacity .9s var(--ease-out) calc(var(--d,0) * 90ms),translate 1.2s var(--ease-expo) calc(var(--d,0) * 90ms)}
.js [data-reveal]:not(.in){opacity:0;translate:0 36px}
/* titoli che salgono parola per parola (parole create da JS) */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wd > span{display:inline-block;transition:transform 1.1s var(--ease-expo) calc(var(--i,0) * 45ms)}
.js [data-split]:not(.in) .wd > span{transform:translateY(108%)}

/* ---------- Section scaffolding ---------- */
section{position:relative}
.sec{padding-block:clamp(80px,11vw,160px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.sec-head h2{font-size:clamp(2.3rem,4.6vw,4.25rem)}
.sec-head p{max-width:52ch;color:var(--ink-2)}
.on-dark{color:var(--on-dark)}
.on-dark .sec-head p{color:var(--on-dark-2)}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* ---------- CTA ---------- */
.cta{background:var(--yellow-green);overflow:hidden}
.cta .wrap{position:relative}
/* la sezione si apre a tutta larghezza entrando */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cta{animation:curtain linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    @keyframes curtain{from{clip-path:inset(0 calc(var(--gutter) + 2vw) round 40px)}to{clip-path:inset(0 0 round 0)}}
  }
}

.cta-icon{position:absolute;right:calc(var(--gutter) * -1);top:50%;width:clamp(220px,34vw,520px);transform:translate(18%,-50%);color:var(--intense-blue);opacity:.1;pointer-events:none}
@supports (animation-timeline:view()){
  .cta-icon{animation:cta-drift linear both;animation-timeline:view();animation-range:cover}
  @keyframes cta-drift{from{translate:-40% 0}to{translate:8% 0}}
}
.cta h2{font-size:clamp(2.8rem,7vw,6rem);letter-spacing:-.04em;line-height:.95;max-width:13ch;position:relative}
.cta-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;margin-top:clamp(40px,5vw,64px);position:relative;align-items:end}
.cta-body > p{max-width:52ch;color:rgb(20 35 59 / .84);font-size:15.5px}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:28px}
.cta-facts{list-style:none;border-top:1.5px solid var(--intense-blue)}
.cta-facts li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid rgb(20 35 59 / .2);font-size:13.5px}
.cta-facts li b{font-family:var(--f-ui);font-weight:600;font-size:14.5px}
.cta-facts li span{color:rgb(20 35 59 / .78);text-align:right}
@media (max-width:860px){.cta-body{grid-template-columns:1fr}}
@media (max-width:560px){.cta-facts li{flex-direction:column;gap:2px}.cta-facts li span{text-align:left}}

/* ---------- Footer ---------- */
.footer{background:var(--intense-blue);color:var(--on-dark);padding-block:clamp(64px,8vw,104px) 32px}
.f-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:40px}
.f-brand img{width:120px;height:auto}
.f-brand p{margin-top:24px;color:var(--on-dark-2);font-size:13.5px;max-width:34ch}
.f-col h4{font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:0;color:var(--yellow-green);margin-bottom:14px}
.f-col ul{list-style:none;display:grid;gap:8px}
.f-col a{font-size:13.5px;color:var(--on-dark-2);text-decoration:none;transition:color .2s}
.f-col a:hover{color:var(--white)}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:72px;padding-top:24px;border-top:1px solid var(--line-dark);font-size:12px;color:var(--on-dark-2)}
.f-bottom a{color:inherit}
/* il logo chiude la pagina a tutta larghezza e sale mentre il footer entra */
.footer{overflow:hidden}
.footer > .wrap::after{
  content:"";display:block;margin-top:clamp(40px,6vw,88px);aspect-ratio:562.03/91.74;
  background:var(--yellow-green);-webkit-mask:url(logo-h-blue.svg) center/contain no-repeat;mask:url(logo-h-blue.svg) center/contain no-repeat;
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .footer > .wrap::after{animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes lift{from{translate:0 45%;opacity:.2}to{translate:0 0;opacity:1}}
  }
}
@media (max-width:960px){.f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.f-brand{grid-column:1/-1}}

/* ---------- Modale ---------- */
dialog.modal{
  margin:auto;border:0;padding:0;width:min(720px,calc(100% - 24px));max-height:calc(100dvh - 24px);
  border-radius:calc(var(--radius) + 6px);background:var(--white);color:var(--ink);
  overflow:auto;overscroll-behavior:contain;
}
html:has(dialog[open]){overflow:hidden}
dialog.modal::backdrop{background:rgb(20 35 59 / .6)}
dialog.modal[open]{animation:modal-in .5s var(--ease-expo)}
dialog.modal[open]::backdrop{animation:fade-bg .4s var(--ease-out)}
@keyframes modal-in{from{opacity:0;transform:translateY(24px) scale(.98)}}
@keyframes fade-bg{from{opacity:0}}
.m-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;background:var(--white);border-bottom:1px solid var(--line)}
.m-head img{height:20px;width:auto}
.m-close{width:40px;height:40px;border-radius:999px;border:0;background:var(--surface);cursor:pointer;display:grid;place-items:center;font-size:18px;line-height:1}
.m-close:hover{background:var(--line)}
.m-body{padding:32px 28px 28px}
.m-body h2{font-size:clamp(2rem,4.4vw,2.9rem);letter-spacing:-.03em}
.m-body > p{color:var(--ink-2);margin-top:12px;font-size:14px;max-width:58ch}
form.project{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin-top:28px}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--f-ui);font-size:13px;font-weight:600}
.field label abbr{text-decoration:none;color:var(--second-blue)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line-strong);background:#fff;
  font-family:var(--f-ui);font-size:15px;transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:rgb(20 35 59 / .62)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--second-blue);box-shadow:0 0 0 4px rgb(24 73 147 / .16)}
.field select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314233B' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-family:var(--f-ui);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.consent input{width:18px;height:18px;margin-top:1px;accent-color:var(--intense-blue);flex:none}
.m-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:6px;font-family:var(--f-ui);font-size:13px;color:var(--ink-3)}
.sent-state{display:none;padding:40px 28px 36px}
.modal.is-sent .m-body{display:none}
.modal.is-sent .sent-state{display:block}
.sent-state .tick{width:56px;height:56px;border-radius:50%;background:var(--yellow-green);display:grid;place-items:center;margin-bottom:24px}
.sent-state h2{font-size:clamp(2rem,4vw,2.6rem)}
.sent-state p{color:var(--ink-2);margin:12px 0 28px;max-width:52ch}
@media (max-width:560px){form.project{grid-template-columns:1fr}.m-body,.m-head{padding-inline:18px}}


/* ---------- Easter egg: 5 clic sul logo del footer ---------- */
.f-brand img{transition:scale .35s var(--ease-expo),rotate .35s var(--ease-expo)}
html.egg-open{overflow:hidden}
.egg{position:fixed;inset:0;z-index:var(--z-intro);overflow:hidden;color:var(--white);display:grid;place-items:center}
.egg-bars,.egg-bars div{position:absolute;inset:0}
.egg-bars div{display:grid;grid-template-columns:repeat(6,1fr)}
.egg-bars i{margin-right:-1px;transform:translateY(101%)}
.egg-bars div:nth-child(1) i{background:var(--second-blue)}
.egg-bars div:nth-child(2) i{background:var(--yellow-green)}
.egg-bars div:nth-child(3) i{background:var(--intense-blue)}
.egg-fx{position:absolute;inset:0;width:100%;height:100%}
.egg-stage{position:relative;display:grid;justify-items:center;text-align:center;gap:18px;padding:24px;max-width:640px;pointer-events:none}
.egg-stage > *{pointer-events:auto}
.egg-mark{width:clamp(110px,16vw,190px);overflow:visible;color:var(--yellow-green);margin-bottom:10px}
.egg-mark path{fill:currentColor;opacity:0}
.egg-log{font-family:var(--f-body);font-size:13px;color:var(--on-dark-2);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}
.egg-log b{font-weight:500;color:var(--yellow-green)}
.egg-title{font-size:clamp(2.6rem,6vw,4.8rem);letter-spacing:-.04em;line-height:.95;overflow:hidden;padding-bottom:.06em}
.egg-title span{display:block}
.egg-text{color:var(--on-dark-2);max-width:46ch}
.egg-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}
.egg-log,.egg-title span,.egg-text,.egg-actions{opacity:0}
.egg-hint{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-family:var(--f-ui);font-size:12.5px;color:var(--on-dark-2);opacity:0;pointer-events:none}

/* ---------- Riduzione movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .cta-icon{animation:none!important}
}

/* ---------- Passaggio tra le pagine (View Transitions tra documenti, dove supportate) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .nav{view-transition-name:nav}
  ::view-transition-old(root){animation:.35s var(--ease-out) both vt-out}
  ::view-transition-new(root){animation:.7s var(--ease-expo) both vt-in}
  @keyframes vt-out{to{opacity:0;transform:translateY(-24px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(40px)}}
}