@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


html {
    font-size: 16px; /* Base font size */
}

/* Optional: Responsive base font size */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}
/* Theme variables */
:root {
    --bg: #ffffff;
    --text: #0B233C;
    --primary-1: #26C6DA;
    --primary-2: #1E88E5;
    --card-bg: #ffffff;
    --button-text-light: #ffffff;
    --muted: #000000;
    --header-gradient: linear-gradient(to right, #26C6DA, #1E88E5);

    /* smoothing variables */
    --toggle-bg: rgba(11, 35, 60, 0.06);
    --shadow: rgba(0,0,0,0.12);
    --anim-ease: cubic-bezier(.2,.8,.2,1);
    --fast: 180ms;
    --med: 350ms;
    --slow: 600ms;

    /* New variables for animations */
    --fade-in: 1s;
    --slide-delay: 0.2s;
}

[data-theme="dark"] {
    --bg: #071223;
    --text: #e6f0fb;
    --primary-1: #3fc5ff;
    --primary-2: #1a73e8;
    --card-bg: #0f2434;
    --button-text-light: #0b1220;
    --muted: #cde6ff;
    --header-gradient: linear-gradient(to right, #1a73e8, #071223);

    /* dark theme toggle / shadow */
    --toggle-bg: rgba(230, 240, 251, 0.06);
    --shadow: rgba(0,0,0,0.18);
}

/* add smooth transitions to major elements */
body,
.header,
.card,
button,
.theme-toggle,
.form,
.input,
.logo,
.title_text,
.key_word {
    transition:
      background-color var(--med) var(--anim-ease),
      color var(--med) var(--anim-ease),
      box-shadow var(--med) var(--anim-ease),
      transform var(--fast) var(--anim-ease),
      opacity var(--med) var(--anim-ease);
}

/* subtle, smoother hover/press states */
.logo {
    transition: transform var(--slow) var(--anim-ease), opacity var(--med) var(--anim-ease);
}

.logo:hover {
    transform: scale(1.06);
}

button {
    transition: transform var(--fast) var(--anim-ease), box-shadow var(--med) var(--anim-ease), opacity var(--med) var(--anim-ease);
}

/* reduce hover scale to be less jumpy */
button:nth-of-type(1):hover,
button:nth-of-type(2):hover,
.login_btn:hover,
.theme-toggle:hover {
    transform: scale(1.04);
    opacity: 0.95;
}

/* nicer theme-toggle styling + smooth bg inversion */
.theme-toggle {
    background: var(--toggle-bg);
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--button-text-light);
    padding: 6px 10px;
    width: auto;
    margin: 0;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 18px var(--shadow);
}

/* slightly softer card shadow */
.card {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Title animations: smoother easing & longer duration */
.title_text {
    animation: titleFloat 8s var(--anim-ease) infinite;
    will-change: transform, opacity;
}

.key_word {
    color: var(--primary-1);
    display: inline-block;
    animation: keyPulse 3.6s var(--anim-ease) infinite;
    will-change: transform, text-shadow;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .title_text,
    .key_word {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes titleFloat {
    0%   { transform: translateY(0) scale(1);   opacity: 1; }
    35%  { transform: translateY(-10px) scale(1.01); opacity: 0.985; }
    70%  { transform: translateY(-6px) scale(1.005); opacity: 0.99; }
    100% { transform: translateY(0) scale(1);   opacity: 1; }
}

@keyframes keyPulse {
    0%   { transform: translateY(0) scale(1); text-shadow: none; }
    45%  { transform: translateY(-6px) scale(1.08); text-shadow: 0 18px 40px rgba(0,0,0,0.06); }
    55%  { transform: translateY(-6px) scale(1.08); text-shadow: 0 18px 40px rgba(0,0,0,0.06); }
    100% { transform: translateY(0) scale(1); text-shadow: none; }
}

/* make star/arrow motion subtler (if animated later) */
.star_1, .star_2, .star_3, .star_4 {
    transform-origin: center;
    animation: starFloat 4s ease-in-out infinite;
    will-change: transform, opacity;
}

/* staggered delays for a natural effect */
.star_1 { animation-delay: 0s; }
.star_2 { animation-delay: 0.6s; }
.star_3 { animation-delay: 1.2s; }
.star_4 { animation-delay: 1.8s; }

.arrow {
    transform-origin: center;
    animation: arrowDrift 5s ease-in-out infinite;
    will-change: transform, opacity;
    animation-delay: 0.3s;
}

/* Keyframes */
@keyframes starFloat {
    0%   { transform: translateY(0) rotate(0deg) scale(1);   opacity: 1; }
    50%  { transform: translateY(-10px) rotate(6deg) scale(1.05); opacity: 0.95; }
    100% { transform: translateY(0) rotate(0deg) scale(1);   opacity: 1; }
}

@keyframes arrowDrift {
    0%   { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
    25%  { transform: translateX(4px) translateY(-6px) rotate(-4deg); opacity: 0.98; }
    50%  { transform: translateX(0) translateY(-12px) rotate(0deg); opacity: 0.96; }
    75%  { transform: translateX(-4px) translateY(-6px) rotate(4deg); opacity: 0.98; }
    100% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .star_1, .star_2, .star_3, .star_4, .arrow {
        animation: none !important;
        transition: none !important;
    }
}

body {
    padding: 0;
    margin: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

.header {
    background-image: var(--header-gradient);
    padding: 1.25rem; /* 20px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1); /* 2px 10px */
}

.main {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    margin-top: 3.125rem; /* 50px */
    margin: 3.125rem auto;
    max-width: 112.5rem; /* 1800px */
}

.card {
    max-width: 25rem; /* 400px */
    width: 100%;
    background: var(--card-bg);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 1.25rem; /* 20px */
    padding: 1.875rem; /* 30px */
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) forwards;
    opacity: 0;
}

.card h2 {
    font-weight: 600;
    font-size: 4.625rem; /* 74px */
    color: var(--text);
}

.card p {
    font-weight: 500;
    font-size: 2.25rem; /* 36px */
    color: var(--text);
    padding-left: 1.25rem; /* 20px */
}

button {
    font-family: 'Poppins', sans-serif;
    font-size: 2.75rem; /* 44px */
    padding: 0.625rem 1.25rem; /* 10px 20px */
    border: none;
    border-radius: 1.25rem; /* 20px */
    cursor: pointer;
    transition: all 0.5s ease;
    width: 100%;
}

/* Pirmā poga — Reģistrēties */
button:nth-of-type(1) {
    background: linear-gradient(to right, var(--primary-1), var(--primary-2));
    color: var(--button-text-light);
    margin-bottom: 15px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

button:nth-of-type(1):hover {
    background: #fff;
    color: #000;
    transform: scale(1.1);
}

/* Otrā poga — Pieslēgties */
button:nth-of-type(2) {
    background-color: transparent;
    color: var(--muted);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

button:nth-of-type(2):hover {
    background: linear-gradient(to right, var(--primary-1), var(--primary-2));
    color: var(--button-text-light);
    box-shadow: none;
    transform: scale(1.1);
}

.title {
    position: relative;
}

.title_text {
    font-size: 4.625rem; /* 74px */
    max-width: 46.875rem; /* 750px */
    text-align: center;
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) var(--slide-delay) forwards,
              titleFloat 8s var(--anim-ease) var(--fade-in) infinite;
    opacity: 0;
}

.key_word {
    color: var(--primary-1);
    display: inline-block;
    animation: keyPulse 2.8s ease-in-out infinite;
    will-change: transform, text-shadow;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .title_text,
    .key_word {
        animation: none !important;
    }
}

@keyframes titleFloat {
    0%   { transform: translateY(0) scale(1);   opacity: 1; }
    50%  { transform: translateY(-8px) scale(1.02); opacity: 0.98; }
    100% { transform: translateY(0) scale(1);   opacity: 1; }
}

@keyframes keyPulse {
    0%   { transform: translateY(0) scale(1); text-shadow: none; }
    50%  { transform: translateY(-6px) scale(1.08); text-shadow: 0 10px 30px rgba(0,0,0,0.12); }
    100% { transform: translateY(0) scale(1); text-shadow: none; }
}

.nazar {
    max-width: 500px;
    width: 100%;
    max-height: 50%;
    animation: scaleIn var(--fade-in) var(--anim-ease) calc(var(--slide-delay) * 2) forwards;
    opacity: 0;
}

.nazar_left {
    max-width: fit-content;
    max-height: fit-content;
}

.nazar_right {
    max-width: 500px;
    max-height: fit-content;
}

.star_1 {
    position: absolute;
    top: -5rem; /* -80px */
    left: 8.75rem; /* 140px */
    animation: scaleIn var(--fade-in) var(--anim-ease) calc(var(--slide-delay) * 3) forwards,
              starFloat 4s ease-in-out calc(var(--fade-in) + var(--slide-delay) * 3) infinite;
    opacity: 0;
}

.star_2 {
    position: absolute;
    left: 12.5rem; /* 200px */
    animation: scaleIn var(--fade-in) var(--anim-ease) calc(var(--slide-delay) * 3) forwards,
              starFloat 4s ease-in-out calc(var(--fade-in) + var(--slide-delay) * 3) infinite;
    opacity: 0;
}

.star_3 {
    position: absolute;
    top: 5rem; /* 80px */
    right: 5.625rem; /* 90px */
    animation: scaleIn var(--fade-in) var(--anim-ease) calc(var(--slide-delay) * 3) forwards,
              starFloat 4s ease-in-out calc(var(--fade-in) + var(--slide-delay) * 3) infinite;
    opacity: 0;
}

.star_4 {
    position: absolute;
    bottom: -7.5rem; /* -120px */
    right: 7.5rem; /* 120px */
    animation: scaleIn var(--fade-in) var(--anim-ease) calc(var(--slide-delay) * 3) forwards,
              starFloat 4s ease-in-out calc(var(--fade-in) + var(--slide-delay) * 3) infinite;
    opacity: 0;
}

.arrow {
    position: absolute;
    left: 10.625rem; /* 170px */
    top: 20rem; /* 320px */
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) calc(var(--slide-delay) * 4) forwards,
              arrowDrift 5s ease-in-out var(--fade-in) infinite;
    opacity: 0;
}

/* Form elements entrance animations */
.form {
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) forwards;
    opacity: 0;
}

.nazar-left {
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) var(--slide-delay) forwards;
    opacity: 0;
}

.nazar-right {
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) calc(var(--slide-delay) * 2) forwards;
    opacity: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .card,
    .title_text,
    .nazar,
    .star_1,
    .star_2,
    .star_3,
    .star_4,
    .arrow,
    .form,
    .nazar-left,
    .nazar-right {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* Ensure all images scale nicely and keep aspect ratio */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* header logo size (keeps it inline with toggle) */
.header .logo {
    width: clamp(6.25rem, 12vw, 10rem); /* 100px to 160px */
    height: auto;
    max-height: 4rem; /* 64px */
    object-fit: contain;
}

/* small decorative nazar on main */
.nazar {
    width: clamp(11.25rem, 28vw, 31.25rem); /* 180px to 500px */
    height: auto;
    object-fit: contain;
}

/* nazar images used on forms */
.nazar-left,
.nazar-right,
.inner img {
    width: clamp(7.5rem, 18vw, 21.875rem); /* 120px to 350px */
    height: auto;
    object-fit: contain;
}

/* stars: small decorative elements with responsive size */
.star_1, .star_2, .star_3, .star_4 {
    width: clamp(1.75rem, 4.5vw, 4rem); /* 28px to 64px */
    height: auto;
    object-fit: contain;
    pointer-events: none; /* decorative only */
}

/* arrow: larger decorative element */
.arrow {
    width: clamp(5rem, 10vw, 11.25rem); /* 80px to 180px */
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

/* keep absolute positioned elements from overflowing on small screens */
.title {
    position: relative;
    overflow: visible;
}

/* responsive adjustments */
@media (max-width: 56.25rem) { /* 900px */
    .title_text { font-size: clamp(1.75rem, 6vw, 3.5rem); } /* 28px to 56px */
    .card h2 { font-size: clamp(2rem, 6.5vw, 3.5rem); } /* 32px to 56px */
    .card p { font-size: clamp(1.125rem, 4vw, 2.25rem); } /* 18px to 36px */

    .star_1 { top: -3.75rem; left: 10%; } /* -60px */
    .star_4 { bottom: -5rem; right: 6%; } /* -80px */
    
    .arrow { top: calc(100% - 3.75rem); } /* 60px */
}

/* Respect reduced motion: keep sizes but avoid sudden scaling during animations */
@media (prefers-reduced-motion: reduce) {
    .star_1, .star_2, .star_3, .star_4, .arrow, .title_text, .key_word {
        animation: none !important;
        transition: none !important;
    }
}

/* Add after your existing variables in :root */
:root {
    /* ...existing variables... */
    --fade-in: 1s;
    --slide-delay: 0.3s;
}

/* Add these new animation keyframes */
@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Add entrance animations to elements */
.card {
    /* ...existing styles... */
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) forwards;
    opacity: 0;
}

.title_text {
    /* ...existing styles... */
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) var(--slide-delay) forwards,
              titleFloat 8s var(--anim-ease) var(--fade-in) infinite;
    opacity: 0;
}

.nazar {
    /* ...existing styles... */
    animation: scaleIn var(--fade-in) var(--anim-ease) calc(var(--slide-delay) * 2) forwards;
    opacity: 0;
}

.star_1, .star_2, .star_3, .star_4 {
    /* ...existing styles... */
    animation: scaleIn var(--fade-in) var(--anim-ease) calc(var(--slide-delay) * 3) forwards,
              starFloat 4s ease-in-out calc(var(--fade-in) + var(--slide-delay) * 3) infinite;
    opacity: 0;
}

.arrow {
    /* ...existing styles... */
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) calc(var(--slide-delay) * 4) forwards,
              arrowDrift 5s ease-in-out var(--fade-in) infinite;
    opacity: 0;
}

/* Form elements entrance animations */
.form {
    /* ...existing styles... */
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) forwards;
    opacity: 0;
}

.nazar-left {
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) var(--slide-delay) forwards;
    opacity: 0;
}

.nazar-right {
    animation: fadeSlideIn var(--fade-in) var(--anim-ease) calc(var(--slide-delay) * 2) forwards;
    opacity: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .card,
    .title_text,
    .nazar,
    .star_1,
    .star_2,
    .star_3,
    .star_4,
    .arrow,
    .form,
    .nazar-left,
    .nazar-right {
        animation: none !important;
        opacity: 1 !important;
    }
}