@import url('base/reset.css');
@import url('base/variables.css');
@import url('base/fonts.css');

/* Remove component-specific styles from this file. Only keep global styles here. */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background-image: url('../images/blue_noise.jpg');
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-attachment: fixed, fixed;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

body.loaded {
    opacity: 1;
}

/* overlay yellow noise on top of blue background for animation */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/yellow_noise.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
    transform: translate(0, 0);
    animation: yellowNoiseMove 31.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

/* Keyframes for yellow overlay movement */
@keyframes yellowNoiseMove {
    0%    { transform: translate(0px, 0px); }
    5%    { transform: translate(40px, 30px); }
    10%   { transform: translate(80px, 60px); }
    15%   { transform: translate(40px, 80px); }
    20%   { transform: translate(0px, 60px); }
    25%   { transform: translate(-40px, 40px); }
    30%   { transform: translate(-80px, 60px); }
    35%   { transform: translate(-120px, 30px); }
    40%   { transform: translate(-100px, 0px); }
    45%   { transform: translate(-80px, -30px); }
    50%   { transform: translate(-40px, -60px); }
    55%   { transform: translate(0px, -80px); }
    60%   { transform: translate(40px, -60px); }
    65%   { transform: translate(80px, -30px); }
    70%   { transform: translate(120px, 0px); }
    75%   { transform: translate(80px, 30px); }
    80%   { transform: translate(40px, 60px); }
    85%   { transform: translate(0px, 80px); }
    90%   { transform: translate(-40px, 60px); }
    95%   { transform: translate(-80px, 30px); }
    100%  { transform: translate(0px, 0px); }
    106%  { transform: translate(10px, 10px); }
    112%  { transform: translate(-8px, 12px); }
    118%  { transform: translate(-12px, -10px); }
    124%  { transform: translate(8px, -8px); }
    130%  { transform: translate(0px, 0px); }
    136%  { transform: translate(7px, 6px); }
    142%  { transform: translate(-6px, 7px); }
    148%  { transform: translate(-7px, -6px); }
    154%  { transform: translate(6px, -7px); }
    160%  { transform: translate(0px, 0px); }
    165%  { transform: translate(-80px, 30px); }
    170%  { transform: translate(-120px, 0px); }
    175%  { transform: translate(-80px, -30px); }
    180%  { transform: translate(-40px, -60px); }
    185%  { transform: translate(0px, -80px); }
    190%  { transform: translate(40px, -60px); }
    195%  { transform: translate(80px, -30px); }
    200%  { transform: translate(0px, 0px); }
}

main {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.main-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 0;
    box-sizing: border-box;
    overflow: hidden;
}

.title {
    font-weight: 400;
    font-size: 74px;
    color: var(--text-light-color);
    margin: 0;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
}

/* HR styling for bot chat messages only */
.chat-bot-response hr,
.ai-message hr,
.chat-messages hr {
    border: none;
    height: 1px;
    background-color: var(--text-dark-color);
    opacity: 0.6;
    margin: 1rem 0;
}