/* ==========================================================================
   home-hero-anim.css
   Figma "2010 - 2026 Portfolio"
     - preloader-logo       node 779:224510 -> assets/images/preloader-logo.webm
     - hero-animated-image  node 779:224559 -> assets/images/hero/hero-animated-image.webm
   Both videos are VP9 with alpha. Browsers that can't show VP9 alpha (Safari)
   get the still fallbacks (.preloader-logo-still / .hf-hero-still) via script.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Preloader — 250px wide, centred
   -------------------------------------------------------------------------- */
body.home-figma .preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hf-page) none;   /* replaces the template's preloader.gif */
}
body.home-figma .preloader-logo:not([hidden]) {
    display: block;
    width: 250px;
    max-width: calc(100% - 32px);
    height: 100%;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   2. Hero animated image (video sizes come from .hf-author in home-figma.css)
   -------------------------------------------------------------------------- */
body.home-figma .hf-author .hf-hero-still:not([hidden]) {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   3. 768 frame (Figma 779:67667) — resume title breaks after "Work &"
      (node 779:67743: two lines, 45 / 61.2px)
   -------------------------------------------------------------------------- */
body.home-figma .hf-br-md { display: none; }
@media (min-width: 768px) and (max-width: 991.98px) {
    body.home-figma .hf-br-md { display: inline; }
}

/* --------------------------------------------------------------------------
   4. Contact form placeholders (Figma 786:225318): DM Sans 16 / 20.8, 20% white
   -------------------------------------------------------------------------- */
body.home-figma .hf-contact .form-control::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-16);
    line-height: 20.8px;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   5. Preloader failsafes
      .is-done is set by the inline script in index.html after 2.5s;
      the CSS animation closes it after 6s even if no script runs at all.
   -------------------------------------------------------------------------- */
body.home-figma .preloader {
    animation: hf-preloader-out 0.4s ease 6s forwards;
}
body.home-figma .preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
@keyframes hf-preloader-out {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}