@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*.bg-custom-200 {
  background-color: #f0f4f8;
}
.bg-custom-400 {
  background-color: #bcccdc;
}
.bg-custom-500 {
  background-color: #829ab1;
}
.bg-custom-700 {
  background-color: #486581;
}*/
.bg-custom-100 {
  background-color: #fbb1d7;
}
.bg-custom-300 {
  background-color: #c794bf;
}
.bg-custom-500 {
  background-color: #9578a4;
}
.bg-custom-700 {
  background-color: #655d86;
}
.bg-custom-800 {
  background-color: #394365;
}
.bg-custom-900 {
  background-color: #102a43;
}

.bg-sunset-100 {
  background-color: #C4D0E1;
}

.bg-sunset-500 {
  background-color: #F5C570;
}

.border-sunset-500 {
  border-color: #F5C570;
}

.bg-scoopr-sky {
  background: linear-gradient(to bottom, #D1ECFE, #E8F6FF);
}

.bg-scoopr-300 {
  background-color: #EFF7FF;
}

.bg-scoopr-400 {
  background-color: #223C66;
}

.bg-scoopr-500 {
  background-color: #18A0FB;
}

.bg-scoopr-600 {
  background-color: #354661;
}

.bg-scoopr-700 {
  background-color: #142e67;
}

.bg-scoopr-800 {
  background-color: #2a4376;
}

.bg-scoopr-900 {
  background-color: #031839;
}

.text-scoopr-500 {
  color: #18A0FB;
}

.text-scoopr-900 {
  color: #031839;
}

.text-scoopr-green-500 {
  color: #0DA951;
}

.border-scoopr-yellow-500 {
  border-color: #FDC564;
}

.border-scoopr-200 {
  border-color: #687488;
}

.border-scoopr-600 {
  border-color: #354661;
}

.divide-scoopr-200 > * + * {
  border-color: #687488;
}

.bg-scoopr-200 {
  background-color: #687488;
}

.bg-scoopr-yellow-500 {
  background-color: #FDC564;
}

.hover\:bg-scoopr-yellow-500:hover {
  background-color: #FDC564;
}

.to-scoopr-blue-600 {
  --tw-gradient-to: #295992 var(--tw-gradient-to-position);
}

.text-scoopr-yellow-500 {
  color: #FDC564;
}

.text-custom-100 {
  color: #fbb1d7;
}
.text-custom-300 {
  color: #c794bf;
}
.text-custom-500 {
  color: #9578a4;
}
.text-custom-700 {
  color: #655d86;
}
.text-custom-800 {
  color: #394365;
}
.text-custom-900 {
  color: #102a43;
}

/* Add keyframes for the pop-up animation */
@keyframes pop-up {
  0% {
    transform: translateY(100vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-pop-up {
  animation: pop-up 0.5s ease-out forwards;
}

.animate-delay-250 {
  animation-delay: 0.25s;
}
.animate-delay-500 {
  animation-delay: 0.5s;
}
.animate-delay-750 {
  animation-delay: 0.75s;
}
.animate-delay-1000 {
  animation-delay: 1s;
}
.animate-delay-1500 {
  animation-delay: 1.5s;
}
.animate-delay-2000 {
  animation-delay: 2s;
}
.animate-delay-3000 {
  animation-delay: 3s;
}
.animate-delay-4000 {
  animation-delay: 4s;
}

.nunito-400 {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.nunito-600 {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.nunito-800 {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

/*Chrome*/
/*@media screen and (-webkit-min-device-pixel-ratio:0) {
    input.custom-range {
      overflow: hidden;
      -webkit-appearance: none;
      background-color: #9a905d;
    }

    input.custom-range::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      backgound-color: red;
      margin-top: -1px;
    }

    input.custom-range::-webkit-slider-thumb {
      width: 30px;
      -webkit-appearance: none;
      height: 30px;
      margin-top: -10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: 110px -10px -10px -10px #43e5f7;
    }

}*/
/** FF*/
/*input.custom-range::-moz-range-progress {
  background-color: #43e5f7;
}
input.custom-range::-moz-range-track {
  background-color: #9a905d;
}*/
/* IE*/
/*input.custom-range::-ms-fill-lower {
  background-color: #43e5f7;
}
input.custom-range::-ms-fill-upper {
  background-color: #9a905d;
}*/

/* Custom slider styling */
input.custom-range {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #18A0FB, #18A0FB) no-repeat, #e5e7eb;
  background-size: var(--progress, 100%) 100%;
  border-radius: 10px;
  outline: none;
}

input.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: url(https://i.postimg.cc/rsWZ3FqL/image-22.png) #18A0FB;
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
/*  transform: rotate(90deg);*/

  border: 2px solid white;
  cursor: pointer;
}

input.custom-range::-moz-range-thumb {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: url(https://i.postimg.cc/rsWZ3FqL/image-22.png) #18A0FB;
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
/*  transform: rotate(90deg);*/

  border: 2px solid white;
  cursor: pointer;
}

input.custom-range:active::-webkit-slider-thumb {
  transform: scale(1.1);
}

input.custom-range:active::-moz-range-thumb {
  transform: scale(1.1);
}

/* Custom scrollbar */
/* width */
/*::-webkit-scrollbar {
  width: 10px;
}*/

/* Track */
/*::-webkit-scrollbar-track {
  background: transparent;
}*/

/* Handle */
/*::-webkit-scrollbar-thumb {
  background: #354661;
  border-radius: 2px;
}*/

/* Handle on hover */
/*::-webkit-scrollbar-thumb:hover {
  background: #354661;
}*/

.flying {
  position: absolute;
  animation: fly var(--duration) linear infinite;
  will-change: transform;
}

@keyframes fly {
  0% {
    right: -10px;
    transform: translateX(100%);
  }
  100% {
    right: calc(100% + 10px);
  }
}

.bounce {
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

.mask-x-from-90 {
  /*mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  mask-size: cover;*/

  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

:root {
  --ring-size: 54px;
  --ring-stroke: 4;
}

* { box-sizing: border-box; }

/* 9:16 story-like frame locked to 720/1280 ratio */
.story-container {
  position: relative;
  aspect-ratio: 720 / 1280;
  overflow: hidden;
  border-radius: 16px;
}

/* Countdown overlay (top-left) */
.countdown {
  position: absolute;
  top: 12px;
  left: 12px;
  width: var(--ring-size);
  height: var(--ring-size);
  pointer-events: none; /* never intercept taps/clicks */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

.ring-svg { display: block; }

/* Circles */
.ring-bg {
  fill: none;
  stroke: rgba(255,255,255,.35);
  stroke-width: var(--ring-stroke);
}
.ring-progress {
  fill: none;
  stroke: #fff;
  stroke-width: var(--ring-stroke);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.08s linear; /* smooth, but JS drives timing */
}

/* Centered number (not rotated) */
.ring-text {
  font-size: 16px;
  font-weight: 700;
  fill: #fff;
  dominant-baseline: middle;
  text-anchor: middle;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */