/* gabs.ai - Blobitecture Conversational AI */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --deep-indigo:#1a1035;
    --ultraviolet:#6c3ce0;
    --lavender:#f0e6ff;
    --peach:#ff9e7a;
    --cream:#faf6f1;
    --lilac:#b388ff;
    --charcoal:#3d2f5c;
    --opal:#f5f0fa;
    --muted:#7b6ba5;
}

body{
    background:var(--cream);
    color:var(--charcoal);
    font-family:'DM Sans',system-ui,sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.7;
    overflow-x:hidden;
}

/* Opening sequence */
.opening{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
}

.genesis-blob{
    display:flex;
    gap:clamp(2rem,6vw,6rem);
    align-items:center;
    justify-content:center;
}

.split-left,.split-right{
    padding:clamp(2rem,3vw,3rem);
    opacity:0;
    transform:scale(0.8);
    transition:opacity 1s ease 1.5s,transform 1s ease 1.5s;
}

.split-left.visible,.split-right.visible{
    opacity:1;
    transform:scale(1);
}

.split-left{
    background:var(--lavender);
    border-radius:45% 55% 60% 40% / 50% 40% 60% 50%;
    animation:blobMorph1 14s ease-in-out infinite;
}

.split-right{
    background:var(--peach);
    border-radius:55% 45% 40% 60% / 60% 50% 50% 40%;
    animation:blobMorph2 16s ease-in-out infinite;
}

.domain-title{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(2.8rem,7vw,6rem);
    letter-spacing:0.5em;
    color:var(--deep-indigo);
    margin-top:2rem;
    opacity:0;
    transition:opacity 1s ease 2.5s,letter-spacing 2s ease 2.5s;
}

.domain-title.visible{
    opacity:1;
    letter-spacing:-0.02em;
}

/* Blob morph animations */
@keyframes blobMorph1{
    0%,100%{border-radius:45% 55% 60% 40% / 50% 40% 60% 50%}
    25%{border-radius:55% 45% 50% 50% / 40% 60% 40% 60%}
    50%{border-radius:40% 60% 45% 55% / 55% 45% 55% 45%}
    75%{border-radius:60% 40% 55% 45% / 45% 55% 50% 50%}
}

@keyframes blobMorph2{
    0%,100%{border-radius:55% 45% 40% 60% / 60% 50% 50% 40%}
    25%{border-radius:45% 55% 55% 45% / 50% 50% 60% 40%}
    50%{border-radius:60% 40% 50% 50% / 40% 60% 45% 55%}
    75%{border-radius:50% 50% 45% 55% / 55% 45% 40% 60%}
}

/* Conversation */
.conversation{
    max-width:900px;
    margin:0 auto;
    padding:0 clamp(1rem,4vw,3rem);
}

/* Utterance blobs */
.utterance{
    max-width:65%;
    padding:clamp(1.5rem,3vw,2.5rem);
    margin-bottom:4vh;
    position:relative;
}

.human-blob{
    background:var(--lavender);
    border-radius:45% 55% 60% 40% / 50% 40% 60% 50%;
    margin-right:auto;
    animation:blobMorph1 12s ease-in-out infinite;
}

.ai-blob{
    background:var(--peach);
    border-radius:55% 45% 40% 60% / 60% 50% 50% 40%;
    margin-left:auto;
    animation:blobMorph2 14s ease-in-out infinite;
}

/* Iridescent border effect */
.utterance::before{
    content:'';
    position:absolute;
    inset:-3px;
    border-radius:inherit;
    background:conic-gradient(from var(--iris-angle,0deg),#6c3ce0,#ff9e7a,#b388ff,#6c3ce0);
    z-index:-1;
    opacity:0.2;
    animation:irisRotate 6s linear infinite;
}

@property --iris-angle{
    syntax:'<angle>';
    initial-value:0deg;
    inherits:false;
}

@keyframes irisRotate{
    to{--iris-angle:360deg}
}

.utterance:hover::before{
    opacity:0.6;
}

.utterance:hover{
    transform:scale(1.03);
    transition:transform 0.3s cubic-bezier(0.23,1,0.32,1);
}

.blob-text{
    font-family:'DM Sans',sans-serif;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.7;
    position:relative;
    z-index:1;
}

.human-blob .blob-text{color:var(--charcoal)}
.ai-blob .blob-text{color:var(--deep-indigo)}

.blob-label{
    font-family:'Space Mono',monospace;
    font-size:0.75rem;
    font-weight:400;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    display:block;
    margin-top:0.75rem;
}

/* Blob entrance */
.blob-enter{
    opacity:0;
    transform:translateX(60px) scale(0.7);
    transition:opacity 0.8s cubic-bezier(0.23,1,0.32,1),transform 0.8s cubic-bezier(0.23,1,0.32,1);
}

.blob-enter[data-side="left"]{transform:translateX(-60px) scale(0.7)}

.blob-enter.shown{
    opacity:1;
    transform:translateX(0) scale(1);
}

/* Breathing spaces */
.breath-space{
    height:20vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* The Pause */
.the-pause{
    height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--cream);
}

.silence-glyph{
    width:100px;
    height:100px;
}

.silence-glyph svg{
    width:100%;
    height:100%;
}

/* The Merge */
.the-merge{
    min-height:60vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:4rem 1rem;
}

.merged-blob{
    background:linear-gradient(135deg,var(--lavender),var(--peach));
    border-radius:50% 50% 45% 55% / 55% 45% 50% 50%;
    padding:clamp(3rem,5vw,5rem);
    text-align:center;
    animation:blobMorph1 18s ease-in-out infinite;
}

.merged-text{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--deep-indigo);
}

.ellipsis-dot{
    display:inline-block;
    animation:dotFade 1.2s ease-in-out infinite;
}

.ellipsis-dot:nth-child(2){animation-delay:0.4s}
.ellipsis-dot:nth-child(3){animation-delay:0.8s}

@keyframes dotFade{
    0%,100%{opacity:0.2}
    50%{opacity:1}
}

.session-label{
    font-family:'Space Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:2rem;
}

/* Responsive */
@media(max-width:768px){
    .utterance{max-width:85%}
    .genesis-blob{flex-direction:column;gap:2rem}
}

@media(prefers-reduced-motion:reduce){
    .human-blob,.ai-blob,.split-left,.split-right,.merged-blob{animation:none}
    .blob-enter{opacity:1;transform:none;transition:none}
    .split-left,.split-right{opacity:1;transform:none;transition:none}
    .domain-title{opacity:1;letter-spacing:-0.02em;transition:none}
    .utterance::before{animation:none}
    .ellipsis-dot{animation:none;opacity:1}
}