/* ShopLens home, patch 18 (5 Nov 2026): the opening without the scroll-driven logo flight.
   Loaded last on the home page. The rings, the name and the tagline now live inside the
   opening section, so everything in the first screen scrolls up together and nothing can
   overlap. One short entrance plays once when the page opens (about 1.3 s), then nothing
   moves on its own. The small header fades in once the big logo has left the screen. */

/* the opening is exactly one screen tall; the demo starts right after it */
.opening{height:100svh}

/* the big logo block, centred a little above the middle as before */
.hero-brand{position:absolute;left:0;right:0;top:43svh;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.hero-brand .flying-rings,.hero-brand .flying-name,.hero-brand .flying-tagline{position:relative;left:auto;top:auto;transform:none;will-change:auto;visibility:visible;opacity:1}
.hero-brand .flying-name{margin-top:20px}
.hero-brand .flying-tagline{margin-top:15px;text-align:center}

/* the entrance, once: rings one after another, then the name, the tagline, the rest */
.hero-brand .flying-rings circle{animation:hero-ring .75s cubic-bezier(.2,.7,.2,1) both}
.hero-brand .flying-rings circle:nth-child(1){animation-delay:0s}
.hero-brand .flying-rings circle:nth-child(2){animation-delay:.12s}
.hero-brand .flying-rings circle:nth-child(3){animation-delay:.24s}
.hero-brand .flying-rings:after{animation:ring-landing .9s ease-out .35s both}
.hero-brand .flying-name{animation:hero-rise .6s cubic-bezier(.2,.7,.2,1) .45s both}
.hero-brand .flying-tagline{animation:hero-rise .6s cubic-bezier(.2,.7,.2,1) .62s both}
.opening-caption{animation:hero-rise .6s cubic-bezier(.2,.7,.2,1) .78s both}
.opening-bottom,.opening-browsers,.opening-incubator{animation:hero-fade .6s ease .9s both}
@keyframes hero-ring{from{opacity:0;transform:translateY(-28px) scale(.86)}to{opacity:1;transform:none}}
@keyframes hero-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}

/* the small header: hidden over the opening, fades in when the big logo is gone */
.masthead{opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.masthead.is-docked{opacity:1;transform:none;pointer-events:auto}
.masthead .docked-brand{visibility:visible}

@media(prefers-reduced-motion:reduce){
  .hero-brand .flying-rings circle,.hero-brand .flying-rings:after,.hero-brand .flying-name,.hero-brand .flying-tagline,
  .opening-caption,.opening-bottom,.opening-browsers,.opening-incubator{animation:none!important}
  .hero-brand .flying-rings:after{opacity:0}
  .masthead{transition:none;transform:none}
}

/* patch 18: the English / French switch (opening bar, header, footer) */
.opening-end{display:flex;align-items:center;gap:22px}
.lang-switch{color:inherit;font-size:var(--t-s);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#c2cec2}
.lang-switch:hover{color:#0b865e}
.lang-short{display:none}
.masthead .lang-switch{margin-left:20px;font-weight:600;text-decoration:none}
@media(max-width:560px){.lang-long{display:none}.lang-short{display:inline}.opening-end{gap:16px}.masthead .lang-switch{margin-left:14px}}

/* phones: the opening is a simple top-to-bottom column instead of blocks placed at fixed
   heights, so longer text (French) pushes the next block down instead of overlapping it.
   Free space is shared above the logo and above the bottom bar. */
@media(max-width:640px){
  .opening{height:auto;min-height:100svh;display:flex;flex-direction:column;align-items:stretch;padding:21px 20px 22px}
  .opening-browsers,.opening-incubator,.hero-brand,.opening-caption,.opening-bottom{position:relative;top:auto;bottom:auto;left:auto;right:auto;transform:none}
  .opening-browsers{order:1}
  .opening-incubator{order:2;margin-top:12px}
  .hero-brand{order:3;margin-top:auto;padding-top:28px}
  .opening-caption{order:4;margin-top:26px;padding-inline:4px;max-width:none}
  .opening-bottom{order:5;margin-top:auto;padding-top:30px;width:auto}
}