/* ============================================ LUCÍA PIRIS PORTFOLIO — HOME ENTRANCE & INTRO Only loaded by index.html (after the other stylesheets). 1. How the home appears: drawings, titles and details come into focus (soft blur). Always, with or without the intro. 2. The intro (js/intro.js): the signature waits in the centre with a counter while the page loads, then flies to the header while the page builds up around it. States on : .has-intro from the first paint until the logo lands .is-loading waiting: only the logo and the counter .is-logo-ready the logo has loaded and fades in Delays count from the moment the logo starts to fly (or from the page load when there's no intro). ============================================ */ /* ---- 1. Home entrance ---- */ /* The site's usual entrance animations (css/base.css), plus homeFocus: a blur that comes into focus. homeFocus doesn't stay applied once it has finished, so the finished page renders exactly as it did before. */ .hero .hero__image img { --focus-blur: 12px; animation: imageReveal 1.2s var(--ease-out-expo) 0.2s forwards, homeFocus 1.2s var(--ease-out-expo) 0.2s backwards; } .hero .hero__title { --focus-blur: 10px; animation: titleReveal 1s var(--ease-out-expo) 0.3s forwards, homeFocus 1s var(--ease-out-expo) 0.3s backwards; } .hero .hero__title--animation { animation-delay: 0.4s; } .hero .hero__title--painting { animation-delay: 0.45s; } .hero .hero__meta { animation: fadeInUp 0.9s var(--ease-out-expo) 0.5s forwards, homeFocus 0.9s var(--ease-out-expo) 0.5s backwards; } .hero .hero__arrow { animation: arrowReveal 0.9s var(--ease-out-expo) 0.8s forwards, homeFocus 0.9s var(--ease-out-expo) 0.8s backwards; } /* Its lines follow from js/main.js (1.1s onwards) */ .hero .hero__bottom-info { animation: fadeInUp 0.8s var(--ease-out-expo) 1s forwards, homeFocus 0.8s var(--ease-out-expo) 1s backwards; } .hero .hero__star { animation: starSpin 1s var(--ease-out-expo) 1.1s forwards, starFloat 6s ease-in-out 2.1s infinite; } .hero .hero__social { animation: fadeInUp 0.8s var(--ease-out-expo) 1.2s forwards, homeFocus 0.8s var(--ease-out-expo) 1.2s backwards; } .footer-copy { animation: fadeInUp 0.8s var(--ease-out-expo) 1.35s forwards, homeFocus 0.8s var(--ease-out-expo) 1.35s backwards; } /* Blur at the start: 12px drawings, 10px titles, 6px the rest */ @keyframes homeFocus { from { filter: blur(var(--focus-blur, 6px)); } } /* ---- 2. Intro ---- */ /* -- The logo -- */ /* Waiting: big and centred on the screen (never wider than ~70% of it). Hidden until its image has loaded. */ html.is-loading .nav__logo-img { position: fixed; top: 50%; left: 50%; height: min(clamp(40px, 4.6vw, 80px), 8.8vw); transform: translate(-50%, -50%); opacity: 0; transition: none; } html.is-loading.is-logo-ready .nav__logo-img { opacity: 1; animation: introLogo 1.2s var(--ease-out-expo) backwards; } /* The flight to the header is animated by js/intro.js, from the corner */ html.has-intro .nav__logo { pointer-events: none; } html.has-intro .nav__logo-img { transform-origin: 0 0; } @keyframes introLogo { from { opacity: 0; filter: brightness(0) blur(10px); } } /* -- Counter (000–100 %) -- */ .intro-counter { display: none; } html.has-intro .intro-counter { display: block; position: fixed; left: 0; right: 0; bottom: 32px; z-index: 1001; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; text-align: center; color: var(--color-text); pointer-events: none; opacity: 0; } /* It appears with the logo... */ html.is-logo-ready .intro-counter { opacity: 1; animation: introCounterIn 0.8s ease 0.3s backwards; } /* ...and leaves upwards, out of focus, once everything has loaded */ html.is-logo-ready .intro-counter.is-done { animation: introCounterOut 0.6s ease forwards; } @keyframes introCounterIn { from { opacity: 0; } } @keyframes introCounterOut { to { opacity: 0; filter: blur(6px); translate: 0 -12px; } } /* -- Header -- */ /* The bar's line, the links and the menu come down into place just after the logo sets off */ html.has-intro .nav { animation: introBar 1s ease 0.1s both; } html.has-intro .nav__menu, html.has-intro .nav__right { animation: introHeader 0.9s var(--ease-out-expo) 0.1s both; } /* With a backdrop-filter the nav, not the screen, would be the frame of the centred logo. The bar is transparent meanwhile, so nothing shows. */ html.is-loading .nav { -webkit-backdrop-filter: none; backdrop-filter: none; } @keyframes introBar { from { background-color: transparent; border-bottom-color: transparent; } } @keyframes introHeader { from { opacity: 0; translate: 0 -15px; filter: blur(8px); } } /* -- The rest of the page -- */ /* The column dividers fade in with the header */ html.has-intro .hero__column { transition: flex 0.7s var(--ease-out-expo), border-color 1.2s ease 0.1s; } html.is-loading .hero__column { border-color: transparent; } html.is-loading .hero { pointer-events: none; } html.is-loading .hero__particle { visibility: hidden; } html.is-loading body { overflow: hidden; } /* Everything waits for the logo: the entrance animations (section 1 and the header above) are held at their start until the loading ends. Keep this after the rules that set those animations. */ html.is-loading :is(.nav, .nav__menu, .nav__right), html.is-loading :is(.hero, .footer-copy, .hero__deco-lines), html.is-loading :is(.hero, .footer-copy, .hero__deco-lines) * { animation-play-state: paused; } /* ---- 3. Reduced motion ---- */ /* No intro (js/intro.js skips it) and the home appears straight away */ @media (prefers-reduced-motion: reduce) { .hero .hero__image img, .hero .hero__title, .hero .hero__meta, .hero .hero__arrow, .hero .hero__bottom-info, .hero .hero__social, .footer-copy, .hero__deco-lines, .deco-line { animation-duration: 1ms; animation-delay: 0s; } .hero .hero__star { animation: starSpin 1ms forwards; } }