/* ============================================================
   FONTS
   ============================================================ */
@font-face {
    font-family: 'Segoe UI Light';
    src: url('segoeuil.woff');
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* Instagram image fade-in */
@keyframes pulse {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Spinner container rotation */
@keyframes rotate {
    100% { transform: rotate(360deg); }
}

/* Spinner stroke animation */
@keyframes dash {
    0%   { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 89, 200; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124; }
}

/*
 * Close button show: opacity 0→1 over 700ms, rotate 0°→360° over first 300ms.
 * At 42.9% (≈300ms of 700ms total) the rotation is done; opacity keeps easing in.
 */
@keyframes closeBtnShow {
    0%    { opacity: 0; transform: rotate(0deg); }
    42.9% { transform: rotate(360deg); }
    100%  { opacity: 1; transform: rotate(360deg); }
}

/* Close button hide: reverse of above */
@keyframes closeBtnHide {
    0%    { opacity: 1; transform: rotate(360deg); }
    42.9% { transform: rotate(0deg); }
    100%  { opacity: 0; transform: rotate(0deg); }
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    background-color: #000;
    color: #fff;
    font-family: 'Segoe UI Light', arial, sans-serif;
    font-size: 1em;
    overflow: hidden;
    text-transform: uppercase;
    white-space: nowrap;
}

a {
    color: #fff;
}

/* ============================================================
   WEBFONT LOADING — hide UI until custom font is ready
   ============================================================ */
.wf-loading #follow-container,
.wf-loading #social-container,
.wf-loading #contacts-link {
    display: none !important;
}

/* ============================================================
   SOCIAL BARS (follow top / share bottom)
   ============================================================ */
#follow-container,
#social-container {
    align-items: center;
    background-color: #000;
    display: flex;
    flex-direction: row;
    height: 3em;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1001;
}

#follow-container a,
#social-container a {
    align-items: center;
    display: flex;
    height: 2em;
    margin: 0 5px;
    width: 2em;
    justify-content: center;
    text-decoration: none;
}

#follow-container i,
#social-container i {
    color: #fff;
    font-size: 1.5em;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

#follow-container a:hover i,
#social-container a:hover i {
    color: #e91e63;
    transform: scale(1.3);
}

#follow-container span,
#social-container span {
    margin-right: 5px;
}

#social-container {
    bottom: 0;
    top: auto;
}

/* ============================================================
   INSTAGRAM BACKGROUND IMAGE
   ============================================================ */
#instagram-image {
    animation: pulse 3s;
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

/* ============================================================
   MESH OVERLAY
   ============================================================ */
#mesh-overlay {
    background: url(assets/images/overlay.png);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* ============================================================
   LOGO + CONTACTS LINK
   ============================================================ */
#logo-container {
    align-items: center;
    bottom: 4em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 4em;
    position: absolute;
    right: 4em;
    top: 4em;
    z-index: 1001;
}

#logo-container > div {
    position: relative;
}

#logo-container img {
    height: auto;
    width: 100%;
}

#contacts-link {
    bottom: 21%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

@media (max-width: 751px) {
    #contacts-link {
        font-size: 0.7em;
    }
}

/* ============================================================
   SHARED BUTTON STYLE
   ============================================================ */
button.link {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-family: 'Segoe UI Light', arial, sans-serif;
    font-size: 1em;
    text-decoration: underline;
    text-transform: uppercase;
}

/* ============================================================
   CONTACTS PANEL
   Slides in from center (clip-path) — matches Angular @open animation:
     enter 600ms: left:50%,right:50% → left:0,right:0
     leave 400ms: left:0,right:0 → left:50%,right:50%
   ============================================================ */
#contacts-panel {
    align-items: center;
    background-color: #000;
    bottom: 0;
    clip-path: inset(0 50% 0 50%);
    display: none; /* shown via JS */
    justify-content: center;
    left: 0;
    overflow-x: hidden;
    position: absolute;
    right: 0;
    top: 0;
    transition: clip-path 0.6s ease;
    z-index: 1001;
}

#contacts-panel.open {
    clip-path: inset(0 0% 0 0%);
}

/* Closing state overrides transition duration to 400ms */
#contacts-panel.closing {
    clip-path: inset(0 50% 0 50%);
    transition-duration: 0.4s;
}

/* ============================================================
   CLOSE BUTTON
   Rotates in/out — matches Angular @hideCloseIcon animation
   ============================================================ */
#close-btn {
    align-self: flex-end;
    background: none;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 1.4em;
    line-height: 1;
    margin-right: -8px;
    margin-top: -8px;
    opacity: 0; /* hidden until panel open animation completes */
    padding: 8px;
}

#close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

#close-btn.anim-show {
    animation: closeBtnShow 700ms linear forwards;
}

#close-btn.anim-hide {
    animation: closeBtnHide 700ms linear forwards;
}

/* ============================================================
   CONTACTS FORM
   ============================================================ */
#contacts-form {
    display: inline-flex;
    flex-direction: column;
    max-width: calc(100% - 4em);
    text-transform: initial;
    white-space: normal;
    width: 20em;
}

/* ============================================================
   FORM FIELDS — Material-style floating label + underline
   ============================================================ */
.form-field {
    margin-bottom: 1.25em;
    position: relative;
}

.form-field input,
.form-field textarea {
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    display: block;
    font-family: 'Segoe UI Light', arial, sans-serif;
    font-size: 1em;
    outline: none;
    padding: 20px 0 4px;
    width: 100%;
}

.form-field textarea {
    resize: none;
}

.form-field input[readonly] {
    color: rgba(255, 255, 255, 0.7);
    cursor: default;
}

/* Focused underline — pink accent, matching Material pink theme */
.form-field input:not([readonly]):focus,
.form-field textarea:focus {
    border-bottom: 2px solid #f06292;
}

/* Floating label */
.form-field label {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Segoe UI Light', arial, sans-serif;
    font-size: 1em;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 20px;
    transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

/* Float label up when focused or when input has a value (placeholder=" " trick) */
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
    font-size: 0.75em;
    top: 2px;
}

.form-field input:not([readonly]):focus + label,
.form-field textarea:focus + label {
    color: #f06292;
}

/* Validation error text */
.form-field .error {
    color: #f48fb1;
    display: none;
    font-size: 0.75em;
    margin-top: 4px;
    white-space: normal;
}

/* Show errors only after a submit was attempted */
form.was-validated .form-field:has(input:invalid) .error,
form.was-validated .form-field:has(textarea:invalid) .error {
    display: block;
}

form.was-validated .form-field:has(input:invalid) input,
form.was-validated .form-field:has(textarea:invalid) textarea {
    border-bottom-color: #f48fb1;
}

form.was-validated .form-field:has(input:invalid) label,
form.was-validated .form-field:has(textarea:invalid) label {
    color: #f48fb1;
}

/* ============================================================
   TRASH IT UP CHECKBOX
   ============================================================ */
#trash-it-up-container {
    align-items: center;
    align-self: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
    margin: 10px 0 20px;
    text-transform: initial;
    white-space: nowrap;
}

#trash-it-up-container input[type="checkbox"] {
    accent-color: #e91e63;
    cursor: pointer;
    flex-shrink: 0;
    height: 18px;
    width: 18px;
}

/* ============================================================
   ART UPLOAD SECTION
   Expands/collapses via max-height — matches Angular @showUpload
   ============================================================ */
#upload-container {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

#upload-container.visible {
    max-height: 300px;
}

#upload-container p {
    margin: 0 0 15px;
    text-align: center;
    text-transform: lowercase;
    white-space: normal;
}

#file-upload-container {
    align-items: flex-end;
    display: flex;
    overflow: hidden;
    position: relative;
}

#file-upload-container .form-field {
    flex: 1;
    margin-bottom: 0;
}

/* Transparent file input overlays the entire row so any click opens the picker */
#file-upload-container input[type="file"] {
    cursor: pointer;
    height: 44px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 13px;
    width: 100%;
    z-index: 1000;
}

#attach-btn {
    align-items: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    margin-bottom: -4px;
    margin-right: -8px;
    padding: 8px;
}

#attach-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   SUBMIT BUTTON — Material stroked style
   ============================================================ */
#submit-btn {
    background: none;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    font-family: 'Segoe UI Light', arial, sans-serif;
    font-size: 1em;
    margin-top: 8px;
    padding: 8px 16px;
    text-transform: uppercase;
}

#submit-btn:disabled {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

/* ============================================================
   SPINNER OVERLAY
   Covers the contacts panel while request is in-flight.
   Matches Angular ProgressSpinnerComponent + its .less styles.
   ============================================================ */
#spinner {
    align-items: center;
    background: #000;
    bottom: 0;
    display: none; /* shown via JS */
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

#spinner svg {
    animation: rotate 2s linear infinite;
    height: 100px;
    width: 100px;
}

#spinner circle {
    animation: dash 1.5s ease-in-out infinite;
    stroke: #fff;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
}

/* ============================================================
   RESULT OVERLAY
   Fades out when dismissed — matches Angular @showHide :leave (500ms).
   ============================================================ */
#result-overlay {
    align-items: center;
    background: #000;
    bottom: 0;
    display: none; /* shown via JS */
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.5s;
}

#submission-result {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-transform: initial;
    white-space: normal;
}