/* Viewport pin + loading screen for pro-1.
 *
 * Lives in its own file rather than in index.html's inline <style> because new
 * Weddsite CSS always goes in a stylesheet. This template is the one showcase
 * design whose styles are inline and whose style.css is not linked at all, so
 * there is no shared sheet to append to.
 *
 * --vh is written by the inline script in <head> and re-measured on width
 * changes only, so Instagram's and Messenger's sliding nav bar cannot resize the
 * layout. `vh`, `svh`, `lvh` and `dvh` all move with it, which is why the pin has
 * to come from JS. The 100vh/100svh floors declared inline stay as the no-JS
 * fallback; the .vh-lock rules below beat them on specificity, so load order
 * against the inline <style> does not matter.
 *
 * The loader exists so `font-display: block` is safe: the block period is spent
 * behind the spinner instead of on an invisible page. It also covers the envelope
 * until its artwork has arrived.
 */

:root {
    --vh: 1vh;
}

html {
    overscroll-behavior-y: none;
}

.vh-lock body,
.vh-lock .hero {
    min-height: calc(var(--vh) * 100);
}

/* Entry animations must not play out behind the spinner - a guest who uncovers a
   finished, static scene has been shown nothing. `is-loading` is set by the
   inline script in <head> before first paint and removed on reveal, so a paused
   animation resumes from frame zero exactly when the guest can first see it.
   The spinner itself is excluded, and with JS off the class never lands. */
.is-loading body *:not(.loader):not(.loader__spinner) {
    animation-play-state: paused !important;
}

.loader {
    position: fixed;
    inset: 0;
    /* Out-ranks the envelope scene, which sits at 9999. */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f2e8;
    opacity: 1;
    transition: opacity 0.55s ease;
}

.loader.is-hidden {
    opacity: 0;
}

.loader.is-gone {
    display: none;
}

.loader__spinner {
    display: block;
    width: 40px;
    height: 40px;
    border: 2px solid #dccdb7;
    border-top-color: #c4685f;
    border-radius: 50%;
    animation: loader-spin 0.9s linear infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}
