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

@layer components {
/* Fluent 3D emoji (see ApplicationHelper#emoji_3d) */
.emoji-3d { display: inline-block; vertical-align: middle; }

/* A big 3D emoji floating over a grid that fades out. */
.emoji-stage {
  position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden;
}
.emoji-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#e5decd 1px, transparent 1px), linear-gradient(90deg, #e5decd 1px, transparent 1px);
  background-size: 32px 32px; background-position: center;
  mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 25%, transparent 100%);
}
.emoji-stage img { filter: drop-shadow(0 14px 16px rgba(15, 23, 42, .16)); transition: transform .25s; }
.emoji-stage-dark { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.emoji-stage-dark::before { background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 16px 16px; }
.group:hover .emoji-stage img { transform: translateY(-4px) rotate(-3deg); }
}

@layer utilities {
  .hero-dot-pattern {
    background-color: #faf9f7;
    background-image: radial-gradient(circle, #c8b89a 1px, transparent 1px);
    background-size: 22px 22px;
  }
}

@keyframes testimonials-scroll-up {
  0% { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes testimonials-scroll-down {
  0% { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

@keyframes signup-fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes signup-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.97); }
}

.signup-form-enter {
  animation: signup-fade-in-up 0.5s ease-out both;
}

.signup-blob {
  animation: signup-blob-drift 8s ease-in-out infinite;
}

.signup-blob-delayed {
  animation: signup-blob-drift 10s ease-in-out infinite reverse;
  animation-delay: -3s;
}

/* Announcement bar: slow warm shine + bobbing emoji */
.announcement-shine {
  background: linear-gradient(110deg, #1f140e 0%, #2e1c12 40%, #5a3420 50%, #2e1c12 60%, #1f140e 100%);
  background-size: 250% 100%;
  animation: announcement-shine 7s linear infinite;
}
@keyframes announcement-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.announcement-bob { animation: announcement-bob 2.4s ease-in-out infinite; }
@keyframes announcement-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .announcement-shine, .announcement-bob { animation: none; } }
/*
 * 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.
 *



 */