/* Fade overlay: smooth 1.5s total, single sequence */
:root{
  --wh-fade: .25s;                       /* overlay fade in/out (500ms) */
  --wh-ease: cubic-bezier(.22,1,.36,1);
  --wh-logo: .4s;                       /* logo fade (400ms) */
}

/* Overlay */
#wh-transition{
  position:fixed; inset:0; z-index:2147483647;
  display:flex; align-items:center; justify-content:center;
  background:#000;
  opacity:1;                            /* visible on first paint */
  pointer-events:auto;
  transition:opacity var(--wh-fade) var(--wh-ease);
  will-change:opacity;
}

/* Tagline */
#wh-transition img{
  max-width:min(25vw, 420px);
  height:auto;
  opacity:0;                            /* logo starts hidden on first paint */
  transform:scale(.985);
  transition:
    opacity var(--wh-logo) var(--wh-ease),
    transform var(--wh-logo) var(--wh-ease);
}

/* States */
html.wh-show-transition #wh-transition{ opacity:1; pointer-events:auto; }
html.wh-hide-transition #wh-transition{ opacity:0; pointer-events:none; }

html.wh-logo-on  #wh-transition img{ opacity:1; transform:scale(1); }
html.wh-logo-off #wh-transition img{ opacity:0; transform:scale(.985); }

/* Mobile */
@media (max-width:640px){
  #wh-transition img{ max-width:min(55vw, 320px); }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #wh-transition, #wh-transition img{
    transition:none !important; transform:none !important;
  }
}