/* Core Squiffy Runtime Styles */

/* Link styles */
a.squiffy-link
{
    text-decoration: underline;
    text-decoration-color: Blue;
    color: Blue;
    cursor: pointer;
    transition: color 0.4s ease-in-out, text-decoration-color 0.4s ease-in-out;
}

/* Rotate/sequence links - visually distinct as they update in-place rather than advancing the story */
a.squiffy-link[data-handler="rotate"],
a.squiffy-link[data-handler="sequence"] {
    text-decoration-style: dotted;
}

/* Disabled link states */
a.squiffy-link.disabled,
div.squiffy-output-section:not(:last-child) a.squiffy-link,
div.squiffy-output-section.links-disabled a.squiffy-link
{
    text-decoration: inherit;
    text-decoration-color: transparent;
    color: inherit !important;
    cursor: inherit;
    pointer-events: none;
}

/* Links disabled due to input validation */
a.squiffy-link.validation-disabled
{
    text-decoration: inherit;
    text-decoration-color: transparent;
    color: #999 !important;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}

/* Invalid input field states */
input.squiffy-invalid,
textarea.squiffy-invalid,
select.squiffy-invalid
{
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Valid input field states (optional, provides positive feedback) */
input:not([disabled]):valid,
textarea:not([disabled]):valid,
select:not([disabled]):valid
{
    border-color: #28a745;
}

/* Focus state for invalid inputs */
input.squiffy-invalid:focus,
textarea.squiffy-invalid:focus,
select.squiffy-invalid:focus
{
    outline: none;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

/* Header button styles */
button.squiffy-header-button
{
    text-decoration: underline;
    color: Blue;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}

/* Output block spacing */
div.squiffy-output-block:not(:last-child),
div.squiffy-output-passage:not(:last-child),
div.squiffy-output-section:not(:last-child)
{
    margin-bottom: 1em;
    border-bottom: 1px solid #ccc;
}

/* Fade animations */
.fade-out {
    opacity: 0;
    transition: opacity 200ms;
}

.fade-in {
    opacity: 1;
    transition: opacity 200ms;
}

/* Continue animation - click to proceed */
.squiffy-continue {
    text-decoration: underline;
    text-decoration-color: Blue;
    color: Blue;
    cursor: pointer;
}

/* Style: pulse - fades in and out */
.squiffy-continue-pulse {
    animation: squiffy-pulse 1.5s ease-in-out infinite;
}

@keyframes squiffy-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Style: glow - pulsing glow effect */
.squiffy-continue-glow {
    animation: squiffy-glow 1.5s ease-in-out infinite;
}

@keyframes squiffy-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(0, 0, 255, 0.5); }
    50% { text-shadow: 0 0 12px rgba(0, 0, 255, 0.8), 0 0 20px rgba(0, 0, 255, 0.4); }
}

/* Style: bounce - subtle vertical bounce */
.squiffy-continue-bounce {
    display: inline-block;
    animation: squiffy-bounce 0.6s ease-in-out infinite;
}

@keyframes squiffy-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Style: wave - character spans need special handling for underline */
.squiffy-continue-wave {
    text-decoration: none;
    border-bottom: 1px solid Blue;
}


/* Application-specific layout and container styles */
div#squiffy-container
{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-family: Georgia, serif;
}
div#squiffy-header
{
    font-size: 14px;
    text-align: right;
}
div#squiffy
{
    font-size: 18px;
}