/* =========================================================================
   JetTulio — accesso alla Suite Pricing
   Tema racing Acton Special Fuel: antracite profondo, rosso Acton, bianco.
   Animazioni in CSS puro + canvas leggero (login_jettulio.js).
   Con prefers-reduced-motion tutto diventa statico ma resta elegante.
   ========================================================================= */

:root{
  --jt-bg:#0b0c0e;
  --jt-bg-2:#131417;
  --jt-panel:rgba(20,21,25,.66);
  --jt-panel-border:rgba(255,255,255,.09);
  --jt-red:#e10712;
  --jt-red-hot:#ff2b35;
  --jt-red-deep:#7a0309;
  --jt-white:#f6f6f7;
  --jt-grey:#9aa0a6;
  --jt-grey-dark:#3c4043;
  --jt-ok:#2ea866;
  --jt-focus:rgba(225,7,18,.45);
  --jt-radius:14px;
  --jt-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.jettulio{
  margin:0;min-height:100vh;min-height:100dvh;
  font-family:var(--jt-font);color:var(--jt-white);
  background:var(--jt-bg);
  display:flex;flex-direction:column;
  overflow-x:hidden;
}

/* --- Sfondo: gradiente animato + fasci diagonali ------------------------- */
.jt-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.jt-bg::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(225,7,18,.16), transparent 62%),
    radial-gradient(50% 60% at 12% 86%, rgba(122,3,9,.24), transparent 60%),
    linear-gradient(160deg, var(--jt-bg) 0%, var(--jt-bg-2) 55%, #0e0f12 100%);
  animation:jt-drift 26s ease-in-out infinite alternate;
}
/* Fasci di luce diagonali (speed lines statiche, sopra ci corre il canvas) */
.jt-bg::after{
  content:"";position:absolute;inset:-40% -10%;
  background:repeating-linear-gradient(
    115deg,
    transparent 0 180px,
    rgba(255,255,255,.022) 180px 182px,
    transparent 182px 340px,
    rgba(225,7,18,.05) 340px 343px,
    transparent 343px 560px);
  animation:jt-sweep 18s linear infinite;
}
@keyframes jt-drift{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(2%,1%,0) scale(1.06)}
}
@keyframes jt-sweep{
  from{transform:translateX(0)}
  to{transform:translateX(560px)}
}
.jt-canvas{position:fixed;inset:0;z-index:1;pointer-events:none}

/* --- Struttura ------------------------------------------------------------ */
.jt-shell{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;padding:34px 18px 44px;
}

/* --- Marchio -------------------------------------------------------------- */
.jt-brand{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.jt-name{
  margin:0;font-size:clamp(46px,9vw,84px);line-height:1;
  font-weight:900;font-style:italic;letter-spacing:.01em;
  text-transform:none;white-space:nowrap;
}
.jt-name .jt-letter{
  display:inline-block;
  background:linear-gradient(180deg,#ffffff 30%,#c9ccd2 78%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  transform:translateY(0) skewX(-8deg);
  animation:jt-letter-in .7s cubic-bezier(.2,.9,.25,1.2) both;
}
.jt-name .jt-letter.jt-red{
  background:linear-gradient(180deg,var(--jt-red-hot) 20%,var(--jt-red) 80%);
  -webkit-background-clip:text;background-clip:text;
}
@keyframes jt-letter-in{
  from{opacity:0;transform:translateY(.55em) skewX(-24deg)}
  60%{opacity:1}
  to{opacity:1;transform:translateY(0) skewX(-8deg)}
}
/* Lama di luce che attraversa il nome dopo l'ingresso */
.jt-name-glint{position:relative;display:inline-block}
.jt-name-glint::after{
  content:"";position:absolute;top:-8%;bottom:-8%;left:-12%;width:14%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);filter:blur(2px);
  animation:jt-glint 4.8s ease-in-out .9s infinite;
  pointer-events:none;
}
@keyframes jt-glint{
  0%{left:-14%;opacity:0}
  6%{opacity:1}
  16%{left:104%;opacity:0}
  100%{left:104%;opacity:0}
}

/* Riferimento Acton sotto il nome */
.jt-sub{display:flex;align-items:center;gap:12px}
.jt-sub img{height:30px;width:auto;display:block;opacity:.94}
.jt-sub-label{
  font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:var(--jt-grey);white-space:nowrap;
}
/* Bandiera racing: striscia obliqua sotto il marchio */
.jt-stripe{
  width:min(320px,68vw);height:5px;border-radius:3px;overflow:hidden;position:relative;
  background:repeating-linear-gradient(115deg,
    var(--jt-red) 0 16px, var(--jt-red-deep) 16px 32px);
}
.jt-stripe::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);
  transform:translateX(-110%);
  animation:jt-stripe-run 3.6s ease-in-out 1.4s infinite;
}
@keyframes jt-stripe-run{
  0%{transform:translateX(-110%)}
  35%,100%{transform:translateX(110%)}
}

/* --- Card in vetro -------------------------------------------------------- */
.jt-card{
  width:min(430px,100%);
  border:1px solid var(--jt-panel-border);
  border-radius:var(--jt-radius);
  background:var(--jt-panel);
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  padding:26px 26px 22px;
  animation:jt-card-in .8s cubic-bezier(.2,.8,.25,1) .25s both;
}
@supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){
  .jt-card{
    -webkit-backdrop-filter:blur(16px) saturate(1.2);
    backdrop-filter:blur(16px) saturate(1.2);
    background:rgba(20,21,25,.52);
  }
}
@keyframes jt-card-in{
  from{opacity:0;transform:translateY(22px) scale(.985)}
  to{opacity:1;transform:none}
}
.jt-card-title{margin:0 0 4px;font-size:17px;font-weight:800;letter-spacing:.02em}
.jt-card-hint{margin:0 0 16px;font-size:13px;color:var(--jt-grey);line-height:1.5}

/* --- Messaggi flash ------------------------------------------------------- */
.jt-flashes{display:grid;gap:8px;margin:0 0 14px}
.jt-flash{
  padding:9px 12px;border-radius:10px;font-size:13.5px;line-height:1.45;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
  animation:jt-flash-in .4s ease both;
}
.jt-flash-error{
  border-color:rgba(225,7,18,.55);background:rgba(225,7,18,.13);color:#ffd9db;
}
.jt-flash-ok{
  border-color:rgba(46,168,102,.5);background:rgba(46,168,102,.12);color:#d0f2df;
}
@keyframes jt-flash-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- Form ----------------------------------------------------------------- */
.jt-form{display:grid;gap:14px}
.jt-field{display:grid;gap:6px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--jt-grey)}
.jt-field input{
  width:100%;min-height:48px;padding:11px 14px;
  font-size:16px;               /* >=16px: evita lo zoom automatico su iOS */
  font-family:var(--jt-font);
  color:var(--jt-white);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.jt-field input::placeholder{color:#6a6f76}
.jt-field input:focus{
  border-color:var(--jt-red);
  box-shadow:0 0 0 3px var(--jt-focus), 0 0 22px rgba(225,7,18,.18);
  background:rgba(255,255,255,.08);
}
.jt-field input:disabled{
  color:var(--jt-grey);background:rgba(255,255,255,.03);
  border-style:dashed;cursor:default;
}
.jt-field input:-webkit-autofill{
  -webkit-text-fill-color:var(--jt-white);
  -webkit-box-shadow:0 0 0 60px #1c1d21 inset;
  caret-color:var(--jt-white);
}

/* --- Pulsante ------------------------------------------------------------- */
.jt-btn{
  position:relative;overflow:hidden;
  min-height:50px;margin-top:4px;padding:13px 18px;
  border:0;border-radius:11px;cursor:pointer;
  font-family:var(--jt-font);font-size:15.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,var(--jt-red-hot) 0%,var(--jt-red) 55%,#b00610 100%);
  box-shadow:0 10px 26px rgba(225,7,18,.34);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.jt-btn::after{ /* riflesso che attraversa il pulsante */
  content:"";position:absolute;top:0;bottom:0;left:-30%;width:22%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);
  animation:jt-btn-sheen 4.2s ease-in-out 2s infinite;
}
@keyframes jt-btn-sheen{
  0%{left:-30%}
  30%,100%{left:120%}
}
.jt-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(225,7,18,.46);filter:brightness(1.06)}
.jt-btn:active{transform:translateY(0) scale(.985);box-shadow:0 6px 16px rgba(225,7,18,.3)}
.jt-btn:focus-visible{outline:3px solid var(--jt-focus);outline-offset:3px}

/* --- Collegamenti sotto il form ------------------------------------------- */
.jt-links{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:14px 0 0;font-size:13.5px;
}
.jt-links a,.jt-link-btn{
  color:var(--jt-grey);text-decoration:none;border:0;background:none;
  font-family:var(--jt-font);font-size:13.5px;cursor:pointer;padding:0;
  transition:color .15s ease;
}
.jt-links a:hover,.jt-link-btn:hover{color:var(--jt-red-hot)}
.jt-links a:focus-visible,.jt-link-btn:focus-visible{outline:3px solid var(--jt-focus);outline-offset:3px;border-radius:4px}
.jt-resend{margin:14px 0 0;text-align:center}

/* --- Codice di accesso (OTP) ---------------------------------------------- */
/* Base senza JavaScript: campo unico, ben leggibile. */
.jt-otp-input{
  width:100%;min-height:56px;padding:10px 14px;
  font-size:26px;font-weight:800;letter-spacing:.45em;text-align:center;
  font-variant-numeric:tabular-nums;
  color:var(--jt-white);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.jt-otp-input:focus{
  border-color:var(--jt-red);
  box-shadow:0 0 0 3px var(--jt-focus), 0 0 22px rgba(225,7,18,.18);
}
/* Con JavaScript: sei caselle eleganti, il campo reale resta invisibile
   sopra le caselle e continua a ricevere tastiera, incolla e autofill SMS. */
.jt-otp{position:relative}
.jt-otp.jt-otp-upgraded .jt-otp-input{
  position:absolute;inset:0;opacity:0;z-index:2;
  letter-spacing:0;cursor:default;
}
.jt-otp-cells{display:none;gap:8px;justify-content:center}
.jt-otp.jt-otp-upgraded .jt-otp-cells{display:flex}
.jt-otp-cell{
  width:52px;height:62px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--jt-white);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease, background .14s ease;
}
.jt-otp-cell.is-active{
  border-color:var(--jt-red);
  box-shadow:0 0 0 3px var(--jt-focus), 0 0 18px rgba(225,7,18,.2);
  transform:translateY(-2px);
}
.jt-otp-cell.is-filled{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.09)}
.jt-otp-cell.is-active::after{ /* cursore lampeggiante nella casella attiva */
  content:"";width:2px;height:52%;margin-left:2px;background:var(--jt-red-hot);
  animation:jt-caret 1s steps(1) infinite;
}
.jt-otp-cell.is-filled.is-active::after{content:none}
@keyframes jt-caret{50%{opacity:0}}
.jt-otp.is-complete .jt-otp-cell{
  border-color:var(--jt-ok);box-shadow:0 0 0 2px rgba(46,168,102,.28);
  animation:jt-otp-ok .35s ease both;
}
@keyframes jt-otp-ok{40%{transform:translateY(-4px)}100%{transform:none}}
/* Errore dal server: scossa della card e caselle in rosso */
.jt-card.jt-shake{animation:jt-shake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes jt-shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}
.jt-otp.jt-otp-error .jt-otp-cell{
  border-color:var(--jt-red);box-shadow:0 0 0 2px rgba(225,7,18,.3);
  background:rgba(225,7,18,.08);
}

/* --- Piè di pagina --------------------------------------------------------- */
.jt-foot{
  position:relative;z-index:2;text-align:center;padding:0 16px 22px;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#5b6066;
}

/* --- Tablet e telefoni ----------------------------------------------------- */
@media(max-width:760px){
  .jt-shell{gap:20px;padding:26px 14px 34px;justify-content:flex-start;padding-top:9vh}
  .jt-card{padding:20px 16px 18px}
  .jt-sub img{height:24px}
  .jt-sub-label{letter-spacing:.26em}
  .jt-otp-cell{width:44px;height:56px;font-size:24px}
}
@media(max-width:380px){
  .jt-otp-cells{gap:5px}
  .jt-otp-cell{width:40px;height:52px;font-size:22px}
}

/* --- Riduzione del movimento: versione statica, comunque curata ------------ */
@media (prefers-reduced-motion:reduce){
  .jt-bg::before,.jt-bg::after,
  .jt-name .jt-letter,.jt-name-glint::after,
  .jt-stripe::after,.jt-card,.jt-flash,
  .jt-btn::after,.jt-otp-cell,.jt-card.jt-shake,
  .jt-otp.is-complete .jt-otp-cell{animation:none!important}
  .jt-canvas{display:none}
  .jt-name .jt-letter{opacity:1;transform:skewX(-8deg)}
  .jt-card{opacity:1;transform:none}
  .jt-btn:hover{transform:none}
}

/* --- PWA: safe area dei dispositivi con notch/Dynamic Island -------------- */
.jt-shell{
  padding-top:calc(34px + env(safe-area-inset-top, 0px));
  padding-left:calc(18px + env(safe-area-inset-left, 0px));
  padding-right:calc(18px + env(safe-area-inset-right, 0px));
}
.jt-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
body.jettulio{-webkit-tap-highlight-color:transparent}
body.jettulio a,body.jettulio button,body.jettulio input{touch-action:manipulation}

/* --- 2FA multicanale: badge canale, checkbox dispositivo fidato ----------- */
.jt-channel-badge{margin-right:6px}
.jt-trust{
  display:flex;align-items:flex-start;gap:9px;
  font-size:12.5px;line-height:1.45;color:var(--jt-grey);
  text-transform:none;letter-spacing:normal;font-weight:500;
}
.jt-trust input{
  margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--jt-red);
}
.jt-link-btn:disabled{opacity:.55;cursor:default;text-decoration:none}