/* NAVBAR */
.app-header.click {
  animation: moveUp 1.3s ease forwards;
}

.app-name.resize {
  animation: resize 1.3s ease forwards;
}

.your-profile.click {
  display: flex;
  animation: profileSlideIn 0.8s ease forwards;
}

.bi-x-square.click {
  display: flex;
  animation: closeSlideIn 0.8s ease forwards;
}

@keyframes profileSlideIn {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes closeSlideIn {
  0% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(0);
    border-bottom: 2px solid rgba(0, 255, 128, 0); 
  }
  100% {
    transform: translateY(-64px);
    border-bottom: 2px solid var(--color-accent);
  }
}

@keyframes resize {
  0% {
    font-size: 2rem;
  }
  100% {
    font-size: 17px;
  }
}

/* OUT */
.app-header.clickk {
  animation: moveDown 1.3s ease forwards;
}

.app-name.resizee {
  animation: resizee 1.3s ease forwards;
}

.your-profile.clickk {
  animation: profileSlideOut 0.8s ease forwards;
}

.bi-x-square.clickk {
  animation: closeSlideOut 0.8s ease forwards;
}

@keyframes profileSlideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50px);
  }
}

@keyframes closeSlideOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(50px);
    opacity: 0;
  }
}

@keyframes moveDown {
  0% {
    transform: translateY(-64px);
    border-bottom: 2px solid var(--color-accent); 
  }
  100% {
    transform: translateY(0);
    border-bottom: 2px solid rgba(0, 255, 128, 0); 
  }
}

@keyframes resizee {
  0% {
    font-size: 17px;
  }
  100% {
    font-size: 2rem;
  }
}

/* DATE */
.date-name {
  position: absolute;
  width: 100%;
  display: flex;
}

.date-name.anim {
  animation: liftedPageOut 2s ease forwards;
}

.date-name.stopAnim {
  animation: liftedPageIn 2s ease forwards;
}

.datetime.popOut {
  animation: popOut 0.8s ease forwards;
}

@keyframes popOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

.datetime.popIn {
  animation: popIn 0.8s ease forwards;
}

@keyframes popIn {
  0% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: flex;
  }
}

/* QUOTES LINE */
.startup-quote-line.oneIn,
.quote-line.oneIn {
  display: flex;
  transform: translateY(0px) rotateX(0);
  animation: liftedPageIn 2s ease forwards;
}

.startup-quote-line.twoIn,
.quote-line.twoIn {
  display: flex;
  transform: translateY(0px) rotateX(0);
  animation: liftedPageIn 2s ease forwards;
}

.startup-quote-line.threeIn,
.quote-line.threeIn {
  display: flex;
  transform: translateY(0px) rotateX(0);
  animation: liftedPageIn 2s ease forwards;
}

.startup-quote-line.fourIn,
.quote-line.fourIn {
  display: flex;
  transform: translateY(0px) rotateX(0);
  animation: liftedPageIn 2s ease forwards;
}

.startup-quote-line.oneOut,
.quote-line.oneOut {
  display: flex;
  transform: translateY(0px) rotateX(0);
  animation: liftedPageOut 2s ease forwards;
}

.startup-quote-line.twoOut,
.quote-line.twoOut {
  display: flex;
  transform: translateY(0px) rotateX(0);
  animation: liftedPageOut 2s ease forwards;
}

.startup-quote-line.threeOut,
.quote-line.threeOut {
  display: flex;
  transform: translateY(0px) rotateX(0);
  animation: liftedPageOut 2s ease forwards;
}

.startup-quote-line.fourOut,
.quote-line.fourOut {
  display: flex;
  transform: translateY(0px) rotateX(0);
  animation: liftedPageOut 2s ease forwards;
}

@keyframes liftedPageIn {
  0% {
    display: flex;
    transform: translateY(12px) rotateX(-90deg);
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0);
    opacity: 1;
  }
}

@keyframes liftedPageOut {
  0% {
    transform: translateY(0) rotateX(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-12px) rotateX(90deg);
    opacity: 0;
  }
}

/* MENU */

#start.slideLeft,
#contact.slideLeft {
  animation: slideLeft 0.8s ease forwards;
}

#settings.slideRight,
#about.slideRight {
  animation: slideRight 0.8s ease forwards;
}

@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
    opacity: 0;
  }
}

@keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
    opacity: 0;
  }
}

#start.slideInLeft,
#contact.slideInLeft {
  animation: slideInLeft 0.8s ease forwards;
}

#settings.slideInRight,
#about.slideInRight {
  animation: slideInRight 0.8s ease forwards;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-200%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(200%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


/* CARD */
/* SLIDE IN */
#notes.slideRight,
#tasks.slideRight {
  animation: slideInRight 0.8s ease forwards;
}

#goals.slideLeft,
#settings2.slideLeft {
  animation: slideInLeft 0.8s ease forwards;
}

#reminder.slideUp {
  animation: slideInUp 0.8s ease forwards;
}

@keyframes slideInRight {
  0% {
    transform: translateX(-250px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(250px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  0% {
    transform: translateY(250px) scaleX(0.1) rotateY(90deg);
  }
  100% {
    transform: translateY(0);
  }
}

/* SLIDE OUT */

#reminder, #goals {
  transform: translateX(-200%);
}

#notes, #tasks {
  transform: translateX(200%);
}

#notes.slideOutRight,
#tasks.slideOutRight {
  animation: slideOutRight 0.8s ease forwards;
}

#goals.slideOutLeft,
#settings2.slideOutLeft {
  animation: slideOutLeft 0.8s ease forwards;
}

#reminder.slideDown {
  animation: slideOutDown 0.8s ease forwards;
}


@keyframes slideOutRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
    opacity: 0;
  }
}

@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
    opacity: 0;
  }
}

@keyframes slideOutDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(250px) scaleX(0.1) rotateY(90deg);
    opacity: 0;
  }
}


/* NOTES */
/*SLIDE OPEN*/
.overlay.open {
  display: flex;
  animation: openOverlay 0.5s ease forwards;
}

@keyframes openOverlay {
  0% {
    display: none;
  }
  100% {
    display: flex;
  }
}

.notes-container.open {
  display: flex;
  animation: openNotes 0.6s ease-in-out forwards;  
}

@keyframes openNotes {
  0% {
    transform: translateX(-700px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/*SLIDE OUT*/
.overlay.close {
  display: none;
  animation: closeOverlay 0.3s ease forwards;
}

@keyframes closeOverlay {
  0% {
    display: flex;
  }
  100% {
    display: none;
  }
}

.notes-container.close {
  display: flex;
  animation: closeNotes 0.6s ease-in-out forwards;  
}

@keyframes closeNotes {
  0% {
    transform: translateX(0);
    display: flex;
    opacity: 1;
  }
  100% {
    transform: translateX(700px);
    opacity: 1;
  }
}

/*CREATE BOX FOR NOTES*/
.overlay-box.show {
  display: flex;
  animation: showCreateBox 0.2s ease forwards;
}

@keyframes showCreateBox {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.overlay-box.close {
  display: none;
}


/*SETTINGS*/
.settings.open,
.settings.open.light
{
  display: flex;
  animation: slideInForSettings 0.8s ease forwards;
}

.settings.close,
.settings.close.light
{
  animation: slideOutForSettings 0.8s ease forwards;
}

@keyframes slideInForSettings {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideOutForSettings {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/*--------NOTE TAB ANIMATION--------*/
.your-note-tab-overlay.open {
  display: flex;
}

.your-note-tab.open {
  transform: translateY(100%);
  animation: openNoteTab 0.8s ease forwards;
}

@keyframes openNoteTab {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

.your-note-tab.close {
  transform: translateY(var(--offset-y));
  animation: closeNoteTab 0.8s ease forwards;
}

@keyframes closeNoteTab {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
  }
}


/*----------REMINDER TAB----------*/
.reminder-tab.open {
  display: flex;
  transform: translateY(100%);
  animation: openTab 0.5s ease-in forwards;
}

@keyframes openTab {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

.reminder-tab.close {
  display: flex;
  transform: translateY(100%);
  animation: closeTab 0.5s ease-in forwards;
}

@keyframes closeTab {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

.reminder-date-set.openDateSet {
  display: flex;
  animation: openDateSet 0.3s ease forwards;
}

@keyframes openDateSet {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

.reminder-time-set.openTimeSet {
  display: flex;
  animation: openTimeSet 0.6s ease forwards;
}

@keyframes openTimeSet {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}