/* Frankly design tokens (--fk-*) + Poppins @font-face are injected into the
   base layer by design_system/tailwind.preset.js (source of truth: tokens.css). */

@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin "flowbite";
@plugin "flowbite/plugin";
@source "../node_modules/flowbite.min";

/* 4.166666499999998 is directly related to the w-11/12 class applied below. */
/* This value represents half of the empty space leftover. */

.video-js .vjs-tech {
  @apply flex;
  @apply flex-col;
  @apply mx-auto;
}

.video-js div.vjs-control-bar {
  @apply text-sm;
  @apply bg-black;
  @apply w-screen;
  @apply sm:max-w-[507px];
  @apply left-[-4.166666499999998%];
}

div > div.vjs-play-progress.vjs-slider-bar {
  @apply bg-frankly-bluegreen;
  @apply border-frankly-bluegreen-200;
  @apply text-frankly-bluegreen;
}

.video-js .vjs-big-play-button {
  border: none;
  background: none;
  font-size: 5rem;
}

.video-js .vjs-current-time.vjs-time-control.vjs-control,
.video-js .vjs-remaining-time.vjs-time-control.vjs-control {
  display: inline-block;
}

:not(.vjs-has-started) .vjs-control-bar {
  display: flex;
}

.field_with_errors {
  display: contents;
}

.omm-layout .video-js div.vjs-control-bar {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.omm-layout .video-js {
  width: 100% !important;
  height: 100% !important;
}

.omm-layout .video-js .vjs-tech {
  object-fit: contain;
}


/* Video.js Text Track Styling - Simple and Clean */
.vjs-text-track-display {
  @apply pointer-events-none;
  @apply absolute;
  @apply bottom-0;
  @apply left-0;
  @apply right-0;
  @apply top-0;
  z-index: 9999;
}

/* Position the CC popup to the left of the button */
.video-js .vjs-subs-caps-button .vjs-menu {
  right: auto !important;
  left: 0 !important;
  transform: translateX(-50%) !important;
}

.vjs-text-track-cue > div {
  @apply absolute;
  @apply left-0;
  @apply right-0;
  @apply text-center;
  @apply bg-black;
  @apply bg-opacity-80;
  @apply text-white;
  @apply px-2;
  @apply py-1;
  @apply mx-auto;
  @apply max-w-4xl;
  @apply rounded;
  @apply text-base;
  @apply font-medium;
  @apply leading-relaxed;
  @apply text-xl;
  position: absolute !important;
  bottom: 40px !important;
  top: auto !important;
}

.saved-try-card-resource-text-prompt {
  border-left: 5px solid rgb(var(--fk-olive-400));
  border-radius: var(--fk-r-md);
}

.saved-try-card-textprompt-remember {
  border-left: 5px solid rgb(var(--fk-olive-400));
}
.saved-try-card-textprompt-remember .pill {
  background-color: rgb(var(--fk-olive-400));
}
.saved-try-card-textprompt-remember h2 {
  color: rgb(var(--fk-olive-400));
}

.saved-try-card-textprompt-say {
  border-left: 5px solid rgb(var(--fk-green-400));
}
.saved-try-card-textprompt-say .pill {
  background-color: rgb(var(--fk-green-400));
}
.saved-try-card-textprompt-say h2 {
  color: rgb(var(--fk-green-400));
}

.saved-try-card-textprompt-do {
  border-left: 5px solid rgb(var(--fk-orange-400));
}
.saved-try-card-textprompt-do .pill {
  background-color: rgb(var(--fk-orange-400));
}
.saved-try-card-textprompt-do h2 {
  color: rgb(var(--fk-orange-400));
}

.saved-try-card-textprompt-ask {
  border-left: 5px solid rgb(var(--fk-red-400));
}
.saved-try-card-textprompt-ask .pill {
  background-color: rgb(var(--fk-red-400));
}
.saved-try-card-textprompt-ask h2 {
  color: rgb(var(--fk-red-400));
}

.saved-try-card-resource-video {
  border-left: 5px solid rgb(var(--fk-green-400));
  border-radius: var(--fk-r-md);
}
.saved-try-card-resource-video .pill {
  background-color: rgb(var(--fk-green-400));
}

.saved-try-card-resource-audio {
  border-left: 5px solid rgb(var(--fk-bluegreen-400));
  border-radius: var(--fk-r-md);
}
.saved-try-card-resource-audio .pill {
  background-color: rgb(var(--fk-bluegreen-400));
}

.saved-try-card__practices {
  color: rgb(var(--fk-bluegreen-400));
}

/* My Tries verb filter pills */
.my-tries-filter-pill {
  @apply px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide border-2 bg-transparent cursor-pointer transition-colors;
}
.my-tries-filter-pill-all {
  color: var(--fk-ink);
  border-color: var(--fk-ink);
}
.my-tries-filter-pill-remember {
  color: rgb(var(--fk-olive-400));
  border-color: rgb(var(--fk-olive-400));
}
.my-tries-filter-pill-say {
  color: rgb(var(--fk-green-400));
  border-color: rgb(var(--fk-green-400));
}
.my-tries-filter-pill-do {
  color: rgb(var(--fk-orange-400));
  border-color: rgb(var(--fk-orange-400));
}
.my-tries-filter-pill-ask {
  color: rgb(var(--fk-red-400));
  border-color: rgb(var(--fk-red-400));
}
.my-tries-filter-pill.is-active {
  color: white;
  background-color: var(--fk-ink);
  border-color: var(--fk-ink);
}

/* Try This → My Tries save animation */

/* Paper plane flight */
.try-fx-plane {
  position: fixed;
  width: 32px;
  height: 32px;
  z-index: 9999;
  pointer-events: none;
  animation: try-fx-fly 0.72s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  offset-rotate: auto;
}
@keyframes try-fx-fly {
  0%   { offset-distance: 0%;   opacity: 1;   transform: translate(-50%, -50%) scale(1.2); }
  80%  { offset-distance: 75%;  opacity: 1;   transform: translate(-50%, -50%) scale(0.85); }
  92%  { offset-distance: 100%; opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
  100% { offset-distance: 100%; opacity: 0;   transform: translate(-50%, -50%) scale(0.5); }
}

/* Landing burst ring */
.try-fx-burst {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 3px solid rgb(var(--fk-bluegreen-400));
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: try-fx-burst-anim 0.45s ease-out forwards;
}
@keyframes try-fx-burst-anim {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1.6); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* Sparkle dots */
.try-fx-sparkle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: try-fx-sparkle-anim 0.5s ease-out forwards;
}
@keyframes try-fx-sparkle-anim {
  0%   { transform: translate(-50%, -50%) translate(0px, 0px) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1); opacity: 0; }
}

/* Toast notification */
.try-fx-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background-color: rgb(var(--fk-green-400));
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 9999px;
  box-shadow: 0 4px 20px rgba(97, 143, 99, 0.45);
  white-space: nowrap;
  animation: try-fx-toast-in 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.try-fx-toast--out {
  animation: try-fx-toast-out 0.22s ease-in forwards;
}
@keyframes try-fx-toast-in {
  0%   { transform: translateX(-50%) translateY(12px) scale(0.94); opacity: 0; }
  60%  { transform: translateX(-50%) translateY(-3px) scale(1.02); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0px) scale(1); opacity: 1; }
}
@keyframes try-fx-toast-out {
  0%   { transform: translateX(-50%) translateY(0px) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) translateY(8px) scale(1); opacity: 0; }
}

/* Nav tab bounce */
.nav-fx-bounce {
  animation: nav-fx-bounce-anim 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes nav-fx-bounce-anim {
  0%   { transform: scale(1) translateY(0px); }
  30%  { transform: scale(1.28) translateY(-5px); }
  60%  { transform: scale(0.92) translateY(2px); }
  80%  { transform: scale(1.1) translateY(-2px); }
  100% { transform: scale(1) translateY(0px); }
}

/* Nav icon glow */
.nav-fx-glow {
  animation: nav-fx-glow-anim 1.1s ease-out forwards;
  filter: drop-shadow(0 0 6px rgb(var(--fk-bluegreen-400)));
}
@keyframes nav-fx-glow-anim {
  0%   { filter: drop-shadow(0 0 8px rgb(var(--fk-bluegreen-400))); }
  60%  { filter: drop-shadow(0 0 4px rgb(var(--fk-bluegreen-400))); }
  100% { filter: none; }
}

/* Nav label light-up */
.nav-fx-lightup {
  animation: nav-fx-lightup-anim 1.1s ease-out forwards;
  color: rgb(var(--fk-bluegreen-400));
  text-shadow: 0 0 8px rgba(var(--fk-bluegreen-400), 0.6);
}
@keyframes nav-fx-lightup-anim {
  0%   { color: rgb(var(--fk-bluegreen-400)); text-shadow: 0 0 10px rgba(103, 188, 183, 0.7); }
  60%  { color: rgb(var(--fk-bluegreen-400)); text-shadow: 0 0 4px rgba(103, 188, 183, 0.4); }
  100% { color: inherit; text-shadow: none; }
}

/* Nav expanding ring */
.nav-fx-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border: 2.5px solid rgb(var(--fk-bluegreen-400));
  border-radius: 50%;
  pointer-events: none;
  animation: nav-fx-ring-anim 0.6s ease-out forwards;
}
@keyframes nav-fx-ring-anim {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2.0); opacity: 0; }
}

/* My Tries feedback drawer animation */
.my-tries-drawer-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.my-tries-drawer-overlay--open {
  opacity: 1;
}
.my-tries-drawer {
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.my-tries-drawer--open {
  transform: translateY(0);
}

/* I Tried This celebration glow */
.tried-fx-glow {
  animation: tried-fx-land-glow 0.9s ease-out forwards;
}
@keyframes tried-fx-land-glow {
  0%   { box-shadow: 0 0 0 0 rgba(var(--fk-bluegreen-400), 0); }
  40%  { box-shadow: 0 0 0 8px rgba(var(--fk-bluegreen-400), 0.35),
                     0 0 22px rgba(var(--fk-bluegreen-400), 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(var(--fk-bluegreen-400), 0); }
}