@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100..900&family=Inter:wght@100..900&display=swap');

html, body {
    height: 100%;
    overflow: hidden;
}

:root {
    --colore-sfondo: #fff;
    --colore-testo: #111;
    --font-family-titolo: 'Fraunces', serif;
    --font-family-testo: 'Inter', sans-serif;
    --font-weight-titolo: 700;
    --font-weight-testo: 400;
    --line-height-testo: 1.6;
    --text-align: left;
    --text-indent: 0;
    --word-spacing: normal;
    --filtro-immagine: none;
}

body {
    font-family: var(--font-family-testo);
    background-color: var(--colore-sfondo);
    color: var(--colore-testo);
    transition: background-color 1s ease, color 1s ease;
    margin: 0;
}

.triangolo-fisso {
    position: fixed;
    width: 20px;
    height: 20px;
    background-color: var(--colore-testo);
    z-index: 1001;
    transition: background-color 1s ease;
}

.triangolo-fisso.top-left { top: 2rem; left: 2rem; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.triangolo-fisso.top-right { top: 2rem; right: 2rem; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.triangolo-fisso.bottom-left { bottom: 2rem; left: 2rem; clip-path: polygon(0 100%, 0 0, 100% 100%); }

.screen {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    padding: 0;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    background: linear-gradient(135deg, #ffffff, #a1edff, #FCB75F, #a1edff);
    background-size: 300% 300%;
    animation: slowGradientShift 20s ease infinite;
}

#input-screen, #output-screen, #loading-screen, .edit-overlay {
    animation: none;
    background: none;
}

#loading-screen, .edit-overlay {
     background-color: var(--colore-sfondo);
}

.edit-overlay {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    
}


.screen.active {
    opacity: 1;
    pointer-events: auto;
}

#output-screen {
  align-items: flex-start;
  overflow-y: auto;       
  scrollbar-width: none;  
  -ms-overflow-style: none;
    padding-bottom: 10rem;
}
#output-screen::-webkit-scrollbar {
  display: none; 
}

#bubble-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.floating-bubble-wrapper { position: absolute; top: var(--start-y); left: var(--start-x); opacity: 0; animation: fadeIn 0.5s ease-out forwards, travel-to-edge var(--duration) cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.floating-bubble-inner { padding: 0.75rem 1.5rem; border: 1px solid #000; border-radius: 2rem; background-color: #000; color: #fff; font-family: 'Inter', sans-serif; font-size: 1rem; animation: idle-float 8s ease-in-out infinite alternate; }
#emotion-form-initial label.is-hidden { opacity: 0 !important; pointer-events: none; transition: opacity 0.3s ease; }
@keyframes fadeIn { to { opacity: 0.25; } }
@keyframes travel-to-edge { from { transform: rotate(0deg); } 100% { top: var(--end-y); left: var(--end-x); transform: rotate(var(--rotate-end)); } }
@keyframes idle-float { from { transform: translateY(-15px); } to { transform: translateY(15px); } }

#emotion-form-initial { z-index: 1; width: 100%; max-width: 600px; text-align: center; position: relative; }
#emotion-form-initial fieldset { border: none; margin: 0; padding: 0; position: absolute; width: 100%; left: 0; top: 50%; opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 20px)); transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0.4s; }
#emotion-form-initial fieldset.current-question { opacity: 1; visibility: visible; transform: translateY(-50%); }
#emotion-form-initial legend { font-weight: 600; font-size: 1.5rem; margin-bottom: 1.5rem; }
#emotion-form-initial div { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
#emotion-form-initial input[type="radio"] { display: none; }
#emotion-form-initial label { padding: 0.75rem 1.5rem; border: 1px solid #ccc; border-radius: 2rem; cursor: pointer; transition: all 0.2s ease; animation: float 6s ease-in-out infinite; font-family: 'Inter', sans-serif; }
#emotion-form-initial div label:nth-of-type(2) { animation-delay: -1s; }
#emotion-form-initial div label:nth-of-type(3) { animation-delay: -3s; }
#emotion-form-initial div label:nth-of-type(4) { animation-delay: -4.5s; }
#emotion-form-initial input[type="radio"]:checked + label { background-color: #000; color: #fff; border-color: #000; animation: none; }

#emotion-form-edit { width: 100%; max-width: 600px; text-align: center; z-index: 1002; position: relative; display: flex; flex-direction: column; height: 75vh; justify-content: space-evenly; }
#emotion-form-edit fieldset { border: none; margin-bottom: 1.5rem; padding: 0; }
#emotion-form-edit legend { font-weight: 500; font-size: 1rem; margin-bottom: 0.75rem; color: var(--colore-testo); }
#emotion-form-edit div { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.3rem, 1.5vw, 1rem); }
#emotion-form-edit input[type="radio"] { display: none; }
#emotion-form-edit label { font-size: clamp(0.7rem, 3.5vw, 1rem); padding: clamp(0.4rem, 3vw, 1rem) clamp(0.8rem, 4vw, 1.5rem); border: 1px solid var(--colore-testo); color: var(--colore-testo); border-radius: 2rem; cursor: pointer; transition: all 0.2s ease; animation: float 6s ease-in-out infinite; font-family: 'Inter', sans-serif; }
#emotion-form-edit div label:nth-of-type(2) { animation-delay: -1.5s; }
#emotion-form-edit div label:nth-of-type(3) { animation-delay: -3s; }
#emotion-form-edit div label:nth-of-type(4) { animation-delay: -6.5s; }
#emotion-form-edit input[type="radio"]:checked + label { background-color: var(--colore-testo); color: var(--colore-sfondo); border-color: var(--colore-testo); animation: none; }

.cta-button { padding: clamp(0.8rem, 2.5vw, 1rem) clamp(1.5rem, 5vw, 3rem); font-size: clamp(0.9rem, 2.2vw, 1rem); background: #000; color: #fff; border: 2px solid #000; border-radius: 2rem; cursor: pointer; font-family: 'Inter', sans-serif; transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; animation: float 6s ease-in-out infinite; }
.cta-button:hover { transform: scale(1.05); }
.button-group .cta-button:first-child { animation-delay: 0s;}
.button-group .cta-button:last-child { animation-delay: 2s;}

.button-group { display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; }
.cta-button.secondary { background-color: transparent; color: #000; }
.cta-button.secondary:hover { background-color: #000; color: #fff; }

#emotion-form-initial button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; opacity: 0; pointer-events: none; transition: opacity 0.5s ease 0.3s; }
#emotion-form-initial button.is-visible { opacity: 1; pointer-events: auto; }
@keyframes float { 0% { transform: translateY(0); } 65% { transform: translateY(5px); } 100% { transform: translateY(0); } }
@keyframes float-centered { 0% { transform: translate(-50%, -50%); } 65% { transform: translate(-50%, calc(-50% + 5px)); } 100% { transform: translate(-50%, -50%);} }

#emotion-form-initial button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; opacity: 0; pointer-events: none; transition: opacity 0.5s ease 0.3s; animation: float-centered 5s ease-in-out infinite; }

.content-column { width: 100%; max-width: 65ch; margin: 0 auto; padding: 4vh 2rem 4vh 2rem; box-sizing: border-box; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; }
.content-exiting { opacity: 0; transform: translateY(-40px); }
.content-column h1 { font-family: var(--font-family-titolo); font-size: clamp(2.5rem, 12vw, 5rem); font-variation-settings: 'wght' var(--font-weight-titolo); text-align: var(--text-align); transition: font-variation-settings 1.2s ease, text-align 1.2s ease, font-family 1.2s ease; margin-bottom: 2rem; margin-top: clamp(3rem, 2rem, 4rem); max-width: 45ch; margin-left: auto; margin-right: auto; }
.content-column p { font-family: var(--font-family-testo); font-size: clamp(1rem, 4vw, 1.4rem); line-height: var(--line-height-testo); font-variation-settings: 'wght' var(--font-weight-testo); text-align: var(--text-align); text-indent: var(--text-indent); word-spacing: var(--word-spacing); transition: font-variation-settings 1.2s ease, line-height 1.2s ease, text-align 1.2s ease, text-indent 1.2s ease, word-spacing 1.2s ease, font-family 1.2s ease, hyphens 1.2s ease; margin-bottom: 2rem; -webkit-hyphens: var(--sillabazione, none); hyphens: var(--sillabazione, none);}
.content-column figure img { width: 100%; height: auto; filter: var(--filtro-immagine); transition: filter 2s ease; }

#rubricatura-display {
    position: fixed;
    top: 2.2rem;
    left: 4.5rem;
    z-index: 1001;
    font-family: var(--font-family-testo);
    font-size: 1rem;
    color: var(--colore-testo);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: color 1s ease, opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

#rubricatura-display.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pensieri-chiari { --text-align: justify; --text-indent: 2em; --sillabazione: auto; }
.pensieri-chiari .content-column p { margin-top: 0; margin-bottom: 0; }
.pensieri-chiari .content-column h1 { text-align: left; }
.pensieri-liberi { --text-align: left; --text-indent: 0; }
.pensieri-confusi { --text-align: center; }
.pensieri-irrequieti { --text-align: justify; --sillabazione: auto; }

.ritmo-lento .content-column h1 { font-variation-settings: 'wght' 200; }
.ritmo-lento .content-column p { font-variation-settings: 'wght' 300; }
.ritmo-costante .content-column h1 { font-variation-settings: 'wght' 500; }
.ritmo-costante .content-column p { font-variation-settings: 'wght' 400; }
.ritmo-frenetico .content-column h1 { font-variation-settings: 'wght' 700; }
.ritmo-frenetico .content-column p { font-variation-settings: 'wght' 600; }
.ritmo-vibrante .content-column h1 { font-variation-settings: 'wght' 900; }
.ritmo-vibrante .content-column p { font-variation-settings: 'wght' 600; }

.atmosfera-serena { --line-height-testo: 1.7; }
.atmosfera-calda { --line-height-testo: 1.7; }
.atmosfera-malinconica { --line-height-testo: 1.5; }
.atmosfera-elettrizzante { --line-height-testo: 1.5; }

.sapore-dolce { --font-family-titolo: 'Inter', sans-serif; --font-family-testo: 'Fraunces', serif; --filtro-immagine: saturate(1) brightness(1) contrast(1); }
.sapore-delicato { --font-family-titolo: 'Inter', sans-serif; --font-family-testo: 'Fraunces', serif; --filtro-immagine: saturate(0.7) brightness(1) contrast(1); }
.sapore-aspro { --font-family-titolo: 'Fraunces', serif; --font-family-testo: 'Inter', sans-serif; --filtro-immagine: saturate(1) brightness(1) contrast(1.75); }
.sapore-amaro { --font-family-titolo: 'Fraunces', serif; --font-family-testo: 'Inter', sans-serif; --filtro-immagine: saturate(0) brightness(1) contrast(1); }

.faccina-wrapper { width: 125px; height: 125px; position: relative; }
#loading-screen .faccina-wrapper { transform: scale(1.5); }
#faccina-container-loading { width: 100%; height: 100%; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); }
.faccina-bg-triangle { position: absolute; width: 100%; height: 100%; background: #ffdd00; clip-path: polygon(0 0, 100% 100%, 0 100%); transition: clip-path 0.4s ease-in-out; }
.faccina-bg-triangle.polarity-positive { clip-path: polygon(100% 100%, 0 0, 100% 0); }
.triangolo { width: 100%; height: 100%; background-color: #000; opacity: 0; transition: opacity 0.4s ease; }
.punta-su { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.punta-giu { clip-path: polygon(0 0, 0 100%, 100% 100%); }
.occhio-sx { grid-area: 2 / 2 / 3 / 3; } .occhio-dx { grid-area: 2 / 4 / 3 / 5; }
.naso { grid-area: 3 / 3 / 4 / 4; } .bocca { grid-area: 5 / 3 / 6 / 4; }

.edit-fab { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1002; width: 40px; height: 40px; background-color: var(--colore-testo); border-radius: 50%; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: all 0.5s ease; opacity: 0; visibility: hidden; }
.edit-fab.is-visible { opacity: 1; transform: scale(1); visibility: visible; }
.edit-fab:hover { transform: scale(1.2); }
.edit-fab .bar1, .edit-fab .bar2, .edit-fab .bar3 { width: 20px; height: 2px; background-color: var(--colore-sfondo); margin: 2.5px 0; transition: 0.4s; }
.edit-fab.open { background-color: var(--colore-sfondo); }
.edit-fab.open .bar1, .edit-fab.open .bar2, .edit-fab.open .bar3 { background-color: var(--colore-testo); }
.edit-fab.open .bar1 { transform: translate(0, 7.5px) rotate(-45deg); }
.edit-fab.open .bar2 { opacity: 0; }
.edit-fab.open .bar3 { transform: translate(0, -6.5px) rotate(45deg); }
.edit-overlay { position: fixed; top: 0; left: 0;  right: 0; bottom: 0; z-index: 999; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.edit-overlay.open { opacity: 1; pointer-events: auto; }
#emotion-form-edit { transform: scale(0.95); transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0; z-index: 1; }
.edit-overlay.open #emotion-form-edit { transform: scale(1); opacity: 1; transition-delay: 0.1s; }

body::before, body::after { content: ''; position: fixed; left: 0; right: 0; height: 20vh; z-index: 1000; pointer-events: none; transition: background 1s ease; }
body::before { top: 0; background: linear-gradient(to bottom, var(--colore-sfondo), transparent); }
body::after { bottom: 0; background: linear-gradient(to top, var(--colore-sfondo), transparent); }
.content-column figure { margin: 2.5em 0; padding: 0; width: 100%; transition: all 1.5s ease; }
.content-column figcaption { font-size: 0.9rem; line-height: 1.4; color: var(--colore-testo); opacity: 0.75; text-align: left; margin-top: 0.75em; font-family: var(--font-family-testo); font-variation-settings: 'wght' 400; }
.content-column figure img { width: 100%; height: auto; filter: var(--filtro-immagine); transition: filter 2s ease; }

#navigation-fabs { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 1002; display: flex; gap: 0.75rem; opacity: 0; visibility: hidden; transition: all 0.5s ease; }
#navigation-fabs.is-visible { opacity: 1; transform: translateX(-50%) scale(1); visibility: visible; }
.nav-fab { width: 40px; height: 40px; background-color: var(--colore-testo); border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: all 0.3s ease; }
.nav-fab:hover { transform: scale(1.2); }
.nav-fab.is-hidden { opacity: 0.3; pointer-events: none; cursor: default; }
.nav-fab svg { stroke: var(--colore-sfondo); transition: stroke 1s ease; }

@keyframes slowGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
#welcome-screen .content-column p,
#welcome-back-screen .content-column p {
     font-variation-settings: 'wght' clamp(400, 500, 600) ;
}

#edit-fab.open + #navigation-fabs {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body:has(#edit-overlay.open) #rubricatura-display {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}