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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Techna Sans
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@font-face {
  font-family: 'Techna Sans';
  src: url('https://fonts.cdnfonts.com/s/TechnaSans.woff2') format('woff2'),
       url('https://fonts.cdnfonts.com/s/TechnaSans.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary:       #003A62;
  --accent-green:  #76BF4D;
  --accent-yellow: #FFD92B;
  --accent-white:  #F1F2F2;
  --text-light:    #F1F2F2;@tailwind base;
@tailwind components;
@tailwind utilities;

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Techna Sans
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@font-face {
  font-family: 'Techna Sans';
  src: url('https://fonts.cdnfonts.com/s/TechnaSans.woff2') format('woff2'),
       url('https://fonts.cdnfonts.com/s/TechnaSans.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #003A62;
  --accent-green: #76BF4D;
  --accent-yellow: #FFD92B;
  --accent-white: #F1F2F2;
  --text-light: #F1F2F2;
}

body {
  background: linear-gradient(135deg, 
    #003A62 0%,           /* primary blue start */
    #004b7a 25%,          /* deeper blue */
    #76BF4D 50%,          /* apple green midpoint */
    #5ea43c 75%,          /* darker green */
    #003A62 100%          /* blue end — loops smoothly */
  );
  background-size: 200% 200%;           /* makes it wide enough to animate */
  animation: gradientFlow 18s ease infinite; /* slow, smooth movement */
  color: var(--text-light);
  font-family: 'Techna Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Animation keyframes – gentle swirling flow */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Floating bubbles – bigger + completely flat (no glow/shadow) */
#floating-dots-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;
  animation: floatBubbles 20s infinite ease-in-out;
  will-change: transform, opacity;
}
.dot:nth-child(3n + 1) {
  width: 16px;
  height: 16px;
  background: var(--accent-green);
}
.dot:nth-child(3n + 2) {
  width: 20px;
  height: 20px;
  background: var(--accent-yellow);
  animation-duration: 24s;
}
.dot:nth-child(3n) {
  width: 14px;
  height: 14px;
  background: var(--accent-white);
  animation-duration: 28s;
  opacity: 0.65;
}
@keyframes floatBubbles {
  0% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  25% { transform: translate(8vw, -45vh) scale(1.15); opacity: 0.95; }
  50% { transform: translate(-6vw, -80vh) scale(0.9); opacity: 0.65; }
  75% { transform: translate(5vw, -120vh) scale(0.75); opacity: 0.45; }
  100% { transform: translate(-7vw, -160vh) scale(0.45); opacity: 0; }
}

/* Center wrapper */
.center-container {
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  max-width: 90vw;
}

/* Title – smaller overall */
.portal-title {
  font-size: clamp(3.5rem, 9vw, 5.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--text-light);
  /* No shadow */
  animation: titleEnter 2.2s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes titleEnter {
  from { opacity: 0; transform: translateY(-80px) scale(0.92); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Buttons – slightly smaller font & padding */
.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem;
  margin-top: 3rem;
}
.auth-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.4rem;
  font-size: 1.25rem; /* ← smaller than before */
  font-weight: 700;
  border-radius: 16px;
  transition: all 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.auth-btn:hover {
  transform: translateY(-4px) scale(1.04);
  border-color: rgba(255, 255, 255, 0.25);
}
.auth-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 217, 43, 0.10),
    rgba(118, 191, 77, 0.07),
    transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.auth-btn:hover::before {
  opacity: 1;
}
.auth-btn-primary {
  background: linear-gradient(145deg, #003A62, #002848);
  color: var(--text-light);
  border-color: rgba(255, 217, 43, 0.30);
}
.auth-btn-secondary {
  background: linear-gradient(145deg, #76BF4D, #5fa03c);
  color: #111111;
  border-color: rgba(255, 255, 255, 0.18);
}
}

/* Background – pure primary dark blue */
body {
  background: radial-gradient(circle at 50% 30%,
    #3a8f5c 0%,        /* bright green center */
    #2e7a4e 40%, 
    #1e5a3c 70%, 
    #0f3a5c 90%, 
    #001f38 100%
  );
  color: var(--text-light);
  font-family: 'Techna Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Floating bubbles – bigger + completely flat (no glow/shadow) */
#floating-dots-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;
  animation: floatBubbles 20s infinite ease-in-out;
  will-change: transform, opacity;
}

.dot:nth-child(3n + 1) {
  width: 16px;
  height: 16px;
  background: var(--accent-green);
}

.dot:nth-child(3n + 2) {
  width: 20px;
  height: 20px;
  background: var(--accent-yellow);
  animation-duration: 24s;
}

.dot:nth-child(3n) {
  width: 14px;
  height: 14px;
  background: var(--accent-white);
  animation-duration: 28s;
  opacity: 0.65;
}

@keyframes floatBubbles {
  0%   { transform: translate(0, 0) scale(1);    opacity: 0.85; }
  25%  { transform: translate(8vw, -45vh) scale(1.15); opacity: 0.95; }
  50%  { transform: translate(-6vw, -80vh) scale(0.9); opacity: 0.65; }
  75%  { transform: translate(5vw, -120vh) scale(0.75); opacity: 0.45; }
  100% { transform: translate(-7vw, -160vh) scale(0.45); opacity: 0; }
}

/* Center wrapper */
.center-container {
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  max-width: 90vw;
}

/* Title – smaller overall */
.portal-title {
  font-size: clamp(3.5rem, 9vw, 5.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--text-light);
  /* No shadow */
  animation: titleEnter 2.2s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes titleEnter {
  from { opacity: 0; transform: translateY(-80px) scale(0.92); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Buttons – slightly smaller font & padding */
.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem;
  margin-top: 3rem;
}

.auth-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.4rem;
  font-size: 1.25rem;          /* ← smaller than before */
  font-weight: 700;
  border-radius: 16px;
  transition: all 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.auth-btn:hover {
  transform: translateY(-4px) scale(1.04);
  border-color: rgba(255, 255, 255, 0.25);
}

.auth-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(255, 217, 43, 0.10), 
    rgba(118, 191, 77, 0.07), 
    transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.auth-btn:hover::before {
  opacity: 1;
}

.auth-btn-primary {
  background: linear-gradient(145deg, #003A62, #002848);
  color: var(--text-light);
  border-color: rgba(255, 217, 43, 0.30);
}

.auth-btn-secondary {
  background: linear-gradient(145deg, #76BF4D, #5fa03c);
  color: #111111;
  border-color: rgba(255, 255, 255, 0.18);
}