/* tutorials.css
   Guided tours: highlight ring, blurred overlay, and the tour card.
*/

/* ---- guided tours ---- */
.tutorial-layer{z-index:90;}
.tutorial-layer .tutorial-scrim{
  background:rgba(15,26,23,.5);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:clip-path .35s cubic-bezier(.3,1.2,.5,1);
}
.tutorial-layer .tutorial-highlight{
  border:3px solid #f2b33d;
  border-radius:0;
  box-shadow:0 0 0 4px rgba(242,179,61,.25),0 0 26px rgba(242,179,61,.55);
  transition:left .35s cubic-bezier(.3,1.2,.5,1),top .35s cubic-bezier(.3,1.2,.5,1),width .35s cubic-bezier(.3,1.2,.5,1),height .35s cubic-bezier(.3,1.2,.5,1);
  animation:tutorialGlow 1.8s ease-in-out infinite;
}
.tutorial-layer .tutorial-card{
  width:min(360px,calc(100vw - 24px));
  padding:16px 18px 14px;
  border:1px solid #cad3cd;
  border-top:5px solid #f2b33d;
  border-radius:0;
  color:#0f1a17;
  background:#ffffff;
  box-shadow:0 24px 60px rgba(15,26,23,.35);
  transition:left .35s cubic-bezier(.3,1.2,.5,1),top .35s cubic-bezier(.3,1.2,.5,1);
}
.tutorial-layer .tutorial-card.is-entering{animation:authPop .4s cubic-bezier(.3,1.35,.5,1) both;}
.tutorial-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.tutorial-bulbs{display:none;}
.tutorial-bulbs i{width:9px;height:9px;border-radius:50%;background:var(--b);box-shadow:0 0 7px color-mix(in srgb,var(--b) 60%,transparent);animation:fdBlink 2.4s ease-in-out infinite;}
.tutorial-bulbs i:nth-child(1){--b:#f2b33d;}
.tutorial-bulbs i:nth-child(2){--b:#8aa699;animation-delay:.6s;}
.tutorial-bulbs i:nth-child(3){--b:#6f8d80;animation-delay:1.2s;}
.tutorial-step{padding:3px 10px;border:1px solid #d6ddd8;border-radius:0;background:#f5f7f3;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#44524c;}
.tutorial-layer .tutorial-card h3{margin:0 0 6px;font-family:var(--display-font);font-size:24px;font-weight:420;line-height:1.06;letter-spacing:-.015em;color:#0f1a17;}
.tutorial-layer .tutorial-card p{font-size:15px;line-height:1.5;font-weight:500;color:#44524c!important;}
.tutorial-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;}
.tutorial-dots{display:flex;gap:5px;}
.tutorial-dots i{width:7px;height:7px;border-radius:0;background:rgba(15,26,23,.15);transition:background .2s,width .2s;}
.tutorial-dots i.done{background:#e1e6e2;}
.tutorial-dots i.on{width:18px;border-radius:0;background:#f2b33d;}
.tutorial-layer .tutorial-actions{margin:0;gap:8px;flex-wrap:nowrap;}
.tutorial-layer .tutorial-actions button{border:2px solid transparent!important;border-radius:0;padding:9px 16px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .15s ease;}
.tutorial-layer .tutorial-next{background:#f2b33d;border-color:#8a5e0e!important;color:#0f1a17;}
.tutorial-layer .tutorial-next:hover{background:#ffc966;}
.tutorial-layer .tutorial-next:active{transform:translateY(1px);}
.tutorial-layer .tutorial-skip{background:transparent;color:#44524c;text-decoration:underline;text-underline-offset:3px;}
.tutorial-layer .tutorial-skip:hover{color:#0f1a17;}
@keyframes tutorialGlow{50%{box-shadow:0 0 0 7px rgba(242,179,61,.18),0 0 34px rgba(242,179,61,.7);}}
@media (max-width:620px){
  .tutorial-layer .tutorial-card{left:12px!important;right:12px!important;width:auto!important;}
  .tutorial-layer .tutorial-card.at-bottom{top:auto!important;bottom:12px!important;}
  .tutorial-layer .tutorial-card.at-top{top:12px!important;bottom:auto!important;}
}
@media (prefers-reduced-motion:reduce){
  .tutorial-layer .tutorial-highlight,.tutorial-layer .tutorial-card,.tutorial-layer .tutorial-scrim{transition:none;animation:none;}
}